ホーム > Webデザイナー養成講座 > 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の便利な機能『条件分岐』を利用します。

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が一致しない場合がございます。都度、ご自身でご確認ください。

home.php

WordPressならトップページの更新も楽チン!

さて、これでホームページは見れるようになったのですが、「サイドメニュー」をつけてさらに見やすいページにしましょう!

いよいよクライマックスです!

次のお話

「WordPressビギナー」に関連するオススメ記事

フリー漫画素材

無料で使える漫画素材です

ホームページの作り方

初心者向けHP作成講座

同人サークル専用HP

ホームページ作ります!

Copyright (C) 牛屋へ.com, All Rights Reserved.