こんにちは。fsです。
WordPressテーマ開発シリーズの続きです。
今回はカテゴリー/タグページをつくっていきます。
仕上がりはこんなイメージです。
![](https://i0.wp.com/fsfuyuto.com/wp-content/uploads/2021/11/a797b8ebeb2cd10696da0e8efb0b9934.png?resize=672%2C552&ssl=1)
カテゴリーやタグごとに投稿を表示できるようにしていきます。
前回同様にコードを共有しながら進めていきますので、初心者の方も安心して読み進めていただければと思います。
それではご覧ください。
カテゴリーとタグ
WordPressにはカテゴリーやタグがあります。
これらは分類(タクソノミー)と呼ばれています。
違いが少しわかりづらいですが、ざっくり言うと以下のようにイメージしていたければと思います。
カテゴリー:階層がある→親カテゴリー、子カテゴリーとして分類できる タグ:階層がない→自由に設置できる
カテゴリーは親子関係を設定できるので、関連する項目をつなげることができます。
例えばプログラミングの記事を書いていくとしたら、親カテゴリーにプログラミング、子カテゴリーにWordpressなど。
このように書く内容の分類を紐づけることができます。
![](https://i0.wp.com/fsfuyuto.com/wp-content/uploads/2021/11/e3e11a5a364faa636f75faa085ab9328.png?resize=952%2C404&ssl=1)
一方タグにはそういった親子の分類はなく、自由に設定できます。
要は好きな分類を入れていくわけです。
![](https://i0.wp.com/fsfuyuto.com/wp-content/uploads/2021/11/0b46c5985e60c8f0f09a00dd4dab4e69.png?resize=642%2C577&ssl=1)
カテゴリーページの作成
それではカテゴリーページをつくっていきます。
レイアウトはトップページ(index.php)と同じにしたいので、カテゴリページ専用のファイル(archive.php)を作成します。
![](https://i0.wp.com/fsfuyuto.com/wp-content/uploads/2021/11/5e6a83af5c9111115e1a881307716f63.png?resize=466%2C948&ssl=1)
レイアウトは同じでややこしいので、カテゴリーページに飛んでいるとわかるようにh1タグのタイトルをカテゴリーに変更します。
![](https://i0.wp.com/fsfuyuto.com/wp-content/uploads/2021/11/6043751828ac09a9310679852c08f5a8.png?resize=1024%2C448&ssl=1)
管理画面にいき、カテゴリーをつくって(ここではブログとしました)、表示させてみましょう。
![](https://i0.wp.com/fsfuyuto.com/wp-content/uploads/2021/11/e884b7b7b89502f27e44d5c99ce80061.png?resize=909%2C420&ssl=1)
archive.phpのファイルは読み込めましたが、まだカテゴリーの内容を連動させていないので画面はデフォルトのままです。
![](https://i0.wp.com/fsfuyuto.com/wp-content/uploads/2021/11/16475e1c65cc53f35a050994ad0cbbc7.png?resize=872%2C501&ssl=1)
タイトルの下にカテゴリー名を表示させるテンプレートタグを書いていきます。
![](https://i0.wp.com/fsfuyuto.com/wp-content/uploads/2021/11/f0d6751057a181c06c4967013f482bb2.png?resize=1024%2C168&ssl=1)
このテンプレートタグ(wp_titile)は「タイトルとなるべきもの」を引っ張ってくる命令となります。
![](https://i0.wp.com/fsfuyuto.com/wp-content/uploads/2021/11/ec9a586dfa96da7db3aea291b5b7488b.png?resize=567%2C266&ssl=1)
タイトルは表示されましたが、テンプレートタグのデフォルトになっているセパレーターが入っていて見にくいので今回はそれを表示させない設定にします。
![](https://i0.wp.com/fsfuyuto.com/wp-content/uploads/2021/11/7d9e0346fefba55c00ee5fd812288693.png?resize=1024%2C168&ssl=1)
これで綺麗になりました。
![](https://i0.wp.com/fsfuyuto.com/wp-content/uploads/2021/11/708fedccca4b62b05688fa8832d4812b.png?resize=523%2C273&ssl=1)
タグページの作成
次はタグのページを作成していきましょう。
レイアウトはカテゴリーページと同じにしたいので、archive.phpに表示処理を分けるプログラムを書いていきます。
それぞれの条件で分けていくのでif構文を記載していきます。
if構文の中のテンプレートタグはカテゴリーページであれば〜するという命令のis_categoryを使います。
![](https://i0.wp.com/fsfuyuto.com/wp-content/uploads/2021/11/4ae35a45655199750672c74fa1a5ae50.png?resize=670%2C218&ssl=1)
これらは条件分岐タグと言われ、今回のように特定の条件(カテゴリーやタグなど)を表示させるときに使います。
任意で投稿を選び、タグを付け足し表示させてみます。
![](https://i0.wp.com/fsfuyuto.com/wp-content/uploads/2021/11/4e677512d5a656b54effc50137118882.png?resize=390%2C655&ssl=1)
![](https://i0.wp.com/fsfuyuto.com/wp-content/uploads/2021/11/2fe2dcd37453f756928919db28676954.png?resize=754%2C544&ssl=1)
これでタグページが表示されました。
![](https://i0.wp.com/fsfuyuto.com/wp-content/uploads/2021/11/832a2a37252348555d7c5d2c7f091992.png?resize=785%2C498&ssl=1)
続いて著者別、作成日別投稿表示ページも作っていきます。
基本的に構文は一緒で、4つの条件分岐になるのでelseifで処理を付け足していくだけです。
![](https://i0.wp.com/fsfuyuto.com/wp-content/uploads/2021/11/59477638b71c49d103bf90cedbded845.png?resize=1024%2C423&ssl=1)
動作確認をするとちゃんとできています。
![](https://i0.wp.com/fsfuyuto.com/wp-content/uploads/2021/11/f2cd3e94eda92603b7f10c02ba25cf88.png?resize=746%2C508&ssl=1)
これでカテゴリー/タグページの実装は完了です。
まとめ 条件分岐タグで楽々表示
いかがだったでしょうか。
今回はカテゴリー/タグページを作りながら、
特定の条件で表示を変える『条件分岐タグ』の使用
を実践していきました。
これを用いることで、わざわざ他のファイルをつくる必要がなくなり(elseifでつなぐだけ)、すっきりしたプログラムになります。
こちらも手を動かしながら慣れていっていただければ嬉しいです😌
以上、少しでも参考になれば幸いです。
最後までお読みいただきありがとうございました。
XサーバーでWordpressを始めてみよう!
コメント