WordPressでカテゴリー/タグページをつくる

Wordpress

こんにちは。fsです。
WordPressテーマ開発シリーズの続きです。

今回はカテゴリー/タグページをつくっていきます。
仕上がりはこんなイメージです。

このようにカテゴリー/タグごとに投稿を表示させるページをつくります

カテゴリーやタグごとに投稿を表示できるようにしていきます。

前回同様にコードを共有しながら進めていきますので、初心者の方も安心して読み進めていただければと思います。
それではご覧ください。

カテゴリーとタグ

WordPressにはカテゴリーやタグがあります。
これらは分類(タクソノミー)と呼ばれています。

違いが少しわかりづらいですが、ざっくり言うと以下のようにイメージしていたければと思います。

カテゴリー:階層がある→親カテゴリー、子カテゴリーとして分類できる
タグ:階層がない→自由に設置できる

カテゴリーは親子関係を設定できるので、関連する項目をつなげることができます。
例えばプログラミングの記事を書いていくとしたら、親カテゴリーにプログラミング、子カテゴリーにWordpressなど。
このように書く内容の分類を紐づけることができます。

このように親子関係を設定できます。

一方タグにはそういった親子の分類はなく、自由に設定できます。
要は好きな分類を入れていくわけです。

タグは自由に設定できます

カテゴリーページの作成

それではカテゴリーページをつくっていきます。
レイアウトはトップページ(index.php)と同じにしたいので、カテゴリページ専用のファイル(archive.php)を作成します。

index.phpをコピーして、archive.phpをつくります

レイアウトは同じでややこしいので、カテゴリーページに飛んでいるとわかるようにh1タグのタイトルをカテゴリーに変更します。

表示を”Category”に変更

管理画面にいき、カテゴリーをつくって(ここではブログとしました)、表示させてみましょう。

カテゴリー名を選択して表示をクリック

archive.phpのファイルは読み込めましたが、まだカテゴリーの内容を連動させていないので画面はデフォルトのままです。

archive.phpは読み込まれたのでこれからカテゴリー名を引っ張ってきます

タイトルの下にカテゴリー名を表示させるテンプレートタグを書いていきます。

このように記述します

このテンプレートタグ(wp_titile)は「タイトルとなるべきもの」を引っ張ってくる命令となります。

テンプレートタグのデフォルトで入っているセパレーター

タイトルは表示されましたが、テンプレートタグのデフォルトになっているセパレーターが入っていて見にくいので今回はそれを表示させない設定にします。

カッコの中に”を入れるだけです

これで綺麗になりました。

セパレーターが表示されなくなりました

タグページの作成

次はタグのページを作成していきましょう。
レイアウトはカテゴリーページと同じにしたいので、archive.phpに表示処理を分けるプログラムを書いていきます。

それぞれの条件で分けていくのでif構文を記載していきます。
if構文の中のテンプレートタグはカテゴリーページであれば〜するという命令のis_categoryを使います。

このように分岐させていきます

これらは条件分岐タグと言われ、今回のように特定の条件(カテゴリーやタグなど)を表示させるときに使います。

任意で投稿を選び、タグを付け足し表示させてみます。

投稿編集画面でタグを追加
管理画面の”タグ”に行き、表示をクリック

これでタグページが表示されました。

ちゃんと条件分岐ができています

続いて著者別、作成日別投稿表示ページも作っていきます。
基本的に構文は一緒で、4つの条件分岐になるのでelseifで処理を付け足していくだけです。

elseifで複数の条件分岐を書いていきます

動作確認をするとちゃんとできています。

ちゃんとプログラムが動作しています

これでカテゴリー/タグページの実装は完了です。

まとめ 条件分岐タグで楽々表示

いかがだったでしょうか。
今回はカテゴリー/タグページを作りながら、

特定の条件で表示を変える『条件分岐タグ』の使用

を実践していきました。

これを用いることで、わざわざ他のファイルをつくる必要がなくなり(elseifでつなぐだけ)、すっきりしたプログラムになります。
こちらも手を動かしながら慣れていっていただければ嬉しいです😌

以上、少しでも参考になれば幸いです。
最後までお読みいただきありがとうございました。

XサーバーでWordpressを始めてみよう!

Is this 投稿 useful? Useful Useless 7 of 7 people say this 投稿 is useful.

コメント

海外ブログバナー

にほんブログ村 海外生活ブログへ

海外ブログバナー

にほんブログ村 海外生活ブログへ

シンガポールの古本屋さん

タイトルとURLをコピーしました