9.一覧ページ(カテゴリー・トップページ)をつくろう9.一覧ページ(カテゴリー・トップページ)をつくろうさて、今回はWordPressにして一番よかったと思える『一覧ページ』のテンプレートを作成していきます。HTMLのページでいうと下記ページになります。●トップページ(新着一覧)https://ushiyahe.com/sample/pc_sp/index.html●イラスト一覧https://ushiyahe.com/sample/pc_sp/illust.html●イベントhttps://ushiyahe.com/sample/pc_sp/event.html●作者紹介https://ushiyahe.com/sample/pc_sp/member.htmlまずはじめに「category.php」を編集していきます。大まか内容は「single.php」と「page.php」が同じなのですが、『ループ』する中身が違います。category.php記述はdivで囲まれたdl部分が繰り返される内容になっています。singleページでは「投稿」した内容が、ページに反映されましたが、こちらはページを新規に登録すると、自動的にhtmlが追加される仕組みになっています。前回投稿した「アイキャッチ画像」も「thumbnail」という記述で書き出されています。ここでちょっと疑問に思った人もいるかと思います。「一覧ページ全部レイアウト違わね?」そう、このままだと全てアイキャッチが必要な一覧ページになってしまいます。いうわけでここでまたWordPressの便利な機能『条件分岐』を利用します。今回は『カテゴリーごと』に振り分ける条件分岐を記述します。書き方はこうなります。ループ内容これによって、カテゴリごとに違うレイアウトの一覧ページが作成できます。全てのカテゴリの条件分岐を書き込むと、下記のような内容になります。これでcategory.phpは完了です。それでは今度はトップページの「新着一覧」の部分を作成していきます。ここで注意したいのが、index.phpではなくhome.phpを使うということです。実はトップページをつくるPHPは他にも「front-page.php」というのも存在します。使い分けはいろいろあって、それぞれ優先順位もあるのですが、取りあえず今回は「home.php」で作成していきます。こちらに書いたページは「投稿」しなくても反映されます。HTMLのサンプルページはTwitterを代用していましたが、こちらもWordPressページを読み込む仕様に変更します。●HTMLで作ったトップページhttps://ushiyahe.com/sample/pc_sp/index.html●WordPressで作ったトップページhttps://ushiyahe.com/sample00/2種類の「新着」がありますが、『イベント』と『イラスト』のカテゴリーで振り分けています。今度はループ処理の前に書きPHPを書き足して、出力する内容を制限しています。カテゴリーIDは先ほどつくった一覧ページのソースを見ると、bodyタグのところに記載されていますので、そちらの番号を入力してください。※カテゴリーIDは作るタイミングによって毎回違います。配布するテーマではカテゴリーとIDが一致しない場合がございます。都度、ご自身でご確認ください。いる同人サークルです。フリー漫画素材はご利用規約を守りルールを守ってご利用ください。漫画・イラスト・ホームページの制作依頼は「お問い合わせ」よりご連絡ください。「牛屋へ.com」についてお問い合わせ作者紹介LINEスタンプ・着せ替え「牛屋へ.com」トップ。