MAMPを使ったWordpressでのWEB制作方法11 初心者向け
前回の記事はこちら
MAMPを使ったWordpressでのWEB制作方法10 初心者向け
今回は投稿一覧表示の作成をします。
が、その前にパーマリンク（url)の設定を変更しておきましょう
パーマリンクの設定
管理画面左タブの設定/パーマリンク設定より設定画面を開きます。
デフォルトは日付と投稿名になっています。
これを以下のカスタム構造に変えましょう。
カテゴリー名/投稿名がパーマリンクに変更されました。
投稿一覧ページの作成
投稿一覧ページはarchive.htmlに作成していますので
archive.htmlの中身をarchive.phpへ貼り付けます。
ヘッダー、フッター、サイドバーの共通レイアウトは
wordpressタグで呼び出すよう変更しておきましょう。
この状態でurlの末尾にblogと加えるとパーマリンクが設定されているので
以下のarchive.phpの中身が表示されます。
blogだけでなくinformationの一覧も表示されていますので修正していきます。
今回はブログ、業務について、リリースの３つを独立した一覧として分けます。
まずarchive.phpのコンテンツ部分に以下の記述をしましょう
archive.php
<?phpif(in_category(array('1'))){?> 「Aがはいります」
<?php}elseif(in_category(array('2'))){?> 「Bがはいります」
<?php}else{?>「Zがはいります」
<?php}?>こちらはカテゴリーidが１の場合は「Aが入ります」を表示
カテゴリーIDが2の場合は「Bが入りますを表示」
それ以外は「Zが入ります」を表示するというif文です。
それぞれの部分に前回index.phpで作った
一覧部分のパーツをコピペして書き換えます。
少し複雑なので全体を載せておきます。
archive.php
<?phpget_header();?><divclass="wrapper"><divid="conL"><?phpif(in_category(array('9'))){?><divclass="information"><!--blogstart--><h2>Blog</h2><dl><!--loopstart--><?php$infoPosts=get_posts('numberposts=4&category=9');foreach($infoPostsas$post):?><divclass="contents_box"><dt><?phpthe_time('Y-m-d');?></dt><dd><divclass="b_img"><?phpthe_post_thumbnail('thumbside');?></div><divclass="b_right"><ahref="<?phpthe_permalink();?>"><?phpthe_title();?></a></div></dd></div><!--loopend--><?phpendforeach;?></dl></div><!--blogend--><?php}elseif(in_category(array('8'))){?><divclass="information"><!--informationstart--><h2>INFORMATION</h2><dl><!--loopstart--><?php$infoPosts=get_posts('numberposts=4&category=8');foreach($infoPostsas$post):?><divclass="contents_box"><dt><?phpthe_time('Y-m-d');?></dt><dd><spanclass="tab <?php$cat=get_the_category();$cat=$cat[0];{echo$cat->slug;}?>"><?php$cat=get_the_category();$cat=$cat[0];{echo$cat->cat_name;}?></span><ahref="<?phpthe_permalink();?>"><?phpthe_title();?></a>を更新しました。
</dd></div><!--loopend--><?phpendforeach;?></dl></div><!--informationend--><?php}else{?><h2>INFORMATION</h2><dl><!--loopstart--><?php$infoPosts=get_posts('numberposts=4&category=8');foreach($infoPostsas$post):?><divclass="contents_box"><dt><?phpthe_time('Y-m-d');?></dt><dd><spanclass="tab <?php$cat=get_the_category();$cat=$cat[0];{echo$cat->slug;}?>"><?php$cat=get_the_category();$cat=$cat[0];{echo$cat->cat_name;}?></span><ahref="<?phpthe_permalink();?>"><?phpthe_title();?></a>を更新しました。
</dd></div><!--loopend--><?phpendforeach;?></dl></div><!--informationend--><?php}?></div><!--conLend--><?phpget_sidebar();?></div><!--wrapperend--><?phpget_footer();そして最後に各コンテンツのループの開始と終わりをいかに書き換えます。
<!--loopstart><!--loopend-->の上を書き換えています。
以下完成形です。
archive.php
<?phpget_header();?><divclass="wrapper"><divid="conL"><?phpif(in_category(array('9'))){?><divclass="information"><!--blogstart--><h2>Blog</h2><dl><!--loopstart--><?phpif(have_posts()):while(have_posts()):the_post();?><divclass="contents_box"><dt><?phpthe_time('Y-m-d');?></dt><dd><divclass="b_img"><?phpthe_post_thumbnail('thumbside');?></div><divclass="b_right"><ahref="<?phpthe_permalink();?>"><?phpthe_title();?></a></div></dd></div><!--loopend--><?phpendwhile;endif;?></dl></div><!--blogend--><?php}elseif(in_category(array('8'))){?><divclass="information"><!--informationstart--><h2>INFORMATION</h2><dl><!--loopstart--><?phpif(have_posts()):while(have_posts()):the_post();?><divclass="contents_box"><dt><?phpthe_time('Y-m-d');?></dt><dd><spanclass="tab <?php$cat=get_the_category();$cat=$cat[0];{echo$cat->slug;}?>"><?php$cat=get_the_category();$cat=$cat[0];{echo$cat->cat_name;}?></span><ahref="<?phpthe_permalink();?>"><?phpthe_title();?></a>を更新しました。
</dd></div><!--loopend--><?phpendwhile;endif;?></dl></div><!--informationend--><?php}else{?><h2>INFORMATION</h2><dl><!--loopstart--><?phpif(have_posts()):while(have_posts()):the_post();?><divclass="contents_box"><dt><?phpthe_time('Y-m-d');?></dt><dd><spanclass="tab <?php$cat=get_the_category();$cat=$cat[0];{echo$cat->slug;}?>"><?php$cat=get_the_category();$cat=$cat[0];{echo$cat->cat_name;}?></span><ahref="<?phpthe_permalink();?>"><?phpthe_title();?></a>を更新しました。
</dd></div><!--loopend--><?phpendwhile;endif;?></dl></div><!--informationend--><?php}?></div><!--conLend--><?phpget_sidebar();?></div><!--wrapperend--><?phpget_footer();これでブログ、リリース、業務についての一覧ページを
独立して表示できるようになりました。
urlと結果一覧が正しいことを確認してください。
次回は詳細ページを作成します。