wordpress カテゴリーごとに記事一覧を表示させてみよう
» STARTOUT詳細はこちら

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳しくはこちら
ここでは「WEB制作×事業づくり実践学習サービス STARTOUT」の学習コンテンツの一部を公開しています。もし1,000以上あるすべてのコンテンツを学び尽くしたい場合、ぜひこちらからご登録ください!

カテゴリーごとに記事一覧を表示させてみよう

WordPress|2018年10月21日

2018年10月21日
  • このエントリーをはてなブックマークに追加

ブログには、基本的に「カテゴリー」が存在しています。
記事をジャンル別に分ける機能ですね。

カテゴリーをクリックすると、カテゴリー別の記事一覧ページが表示されます。
カテゴリーで記事を分けることによって、目的の記事に到達しやすくなるのです。

ブログに少しでも触れたことのある人であれば、馴染み深い機能の1つですね。

当然、WordPressにもカテゴリー機能は存在しています。
管理画面からカテゴリーを追加して、自分のブログの記事を整理できます。
では、こうした機能は、どうやって実装すれば良いのでしょうか?

今回は、カテゴリー別の記事一覧表示について、ご説明させて頂きます。

カテゴリーごとの記事一覧ページを表示する

まず、WordPressのカテゴリー自体の作成は簡単です。
管理画面の「左サイドバー」から、すぐに追加・削除できます。
特に何かソースコードを書いたりする必要はありません。

カテゴリーごとの記事一覧URLも、このページで調べられます。
作ったカテゴリーに、ロールオーバーしてみてください。
すると「編集」「クイック編集」「削除」「表示」のメニューが現れたのでは無いでしょうか。

メニューの「表示」ボタンを押してみてください。
カテゴリー別で、記事一覧ページが表示されるかと思います。

ただ、この時点では単純に「トップページ」が表示されるはずです。
なぜトップページが表示されるのでしょうか。

ここで「記事詳細ページ」を思い出してください。

記事詳細ページは「single.php」というファイル名に変えてレイアウトが反映されました。
記事詳細ページを開いた時は、single.phpがテンプレートとして反映されるからです。

カテゴリーページも、同じです。
ファイル名を変えることで、該当のファイルがテンプレートとして反映されます。
カテゴリーページに反映されるファイル名は「category.php」です。

カテゴリーごとの記事一覧ページに当たるファイルを「category.php」としてください。
該当ファイルのレイアウトが反映されるはずです。

また、例によってCSSや画像のリンクも切れているはずです。
パスを通してあげてください。

カテゴリーリストを表示する

これで、カテゴリーごとの記事一覧ページは表示できました。
ただ、このカテゴリーページ、サイト上のどこから遷移すれば良いのでしょう。
今はまだ、中のページはあるけれど「入り口」がありません。

通常「日記」のカテゴリーを作れば、どこかに「日記」のリンクができます。
サンプルデータにも右下にカテゴリーの項目を用意しています。

では、どうすればカテゴリーリンクが表示されるのでしょう。

ページのURLは分かるから、1つ1つリンクを作る?
そんな面倒なことはしたくはありません。

便利なことにWordPressでは、カテゴリーリストを自動表示させるタグがあるのです。
タグを1つ貼るだけで、カテゴリーリストがリンク付きで表示されます。

それが、下記のタグになります。

<?php wp_list_categories(); ?>

上記のタグを入力すると、自動的にリンクつきのカテゴリーリストが表示されます。

ただ、上記のままだと、出力されたリスト自体のデザインが不十分です。
ul liタグを出力するだけで、なんのCSSも与えられていません。
出力されたタグをCSSでカスタマイズして、デザインを変更します。

さらに()内に様々な設定をすることで、出力の仕方を変えることができます。
例えば、あるカテゴリーだけ除外したり。
出力するHTMlタグをカスタマイズしたり。
たくさんのオプションが容易されているのです。

詳しくは、下記のURLをご覧下さい。
http://ur2.link/MK2I

なお、wp_list_categoriesは、基本的に「記事が存在しているカテゴリー」を表示させます。
まだ記事が投稿されていない場合、該当のカテゴリーは表示されません。
タグを入れても表示されない時は、記事の有無を確認してみてください。

また、管理画面に新しいカテゴリーが増えれば、表示側も自動で増えます。
カテゴリーが増える度に、ソースコードをいじる必要はありません。
そこが、WordPressの便利なところですね。

アーカイブ(時系列)ごとに記事一覧を表示する

カテゴリーと似た機能で、アーカイブがあります。

これは、いつ記事が投稿されたか、時系列ごとに、記事を一覧で表示するものです。
例えば2020年3月に投稿された記事、といった形で記事一覧をつくります。
最近は活用しないブログも増えてきましたが、定番機能の1つですね。

アーカイブに関しては、特に管理画面で行う作業はありません。

記事を投稿した際に、自動的に時間別に振り分けられるからです。
下記のタグを使うと、リンクつきで日付のリストが表示されます。

<?php wp_get_archives(); ?>

こちらも()内に色々な設定を書くことで、出力方法を変化させられます。

より詳しく知りたい方は、下記のリンクを参考にしてください。
http://ur0.work/MNA8

出力されたリンクをクリックすると、年月ごとにまとめられた記事一覧が表示されます。
なお、他のページ同様に、アーカイブにもテンプレートとして使われるファイル名が存在します。

それが「archive.php」です。

ファイル名をarchive.phpにしておくと、アーカイブページを開いた時に、土台として使われます。
もし存在しなければ、category.phpが使われるはずです。
category.phpとデザインを変えたい場合、archive.phpを作っても良いでしょう。

次回は、タグ一覧ページについて、ご説明していきます。

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳細はこちら
  • このエントリーをはてなブックマークに追加

ウエヤマ ショウタ

BASE.91とWORKROOM@セブ立ちあげました。誰もが「独学」でプロになれる仕組みを作る。現役WEBデザイナーでエンジニア。起業好き。IT留学事業を売却後、シリコンバレーで起業を学び、起業家&クリエイター育成活動開始。経験をシェアしてます。独学で収益化したスキル : デザイン、プログラミング、起業、マーケ、英語

ウエヤマ ショウタ

BASE.91とWORKROOM@セブ立ちあげました。誰もが「独学」でプロになれる仕組みを作る。現役WEBデザイナーでエンジニア。起業好き。IT留学事業を売却後、シリコンバレーで起業を学び、起業家&クリエイター育成活動開始。経験をシェアしてます。独学で収益化したスキル : デザイン、プログラミング、起業、マーケ、英語

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳しくはこちら