投稿記事のループ内でカテゴリーを表示させるには「the_category()」や「get_the_category()」、「wp_list_categories()」などのテンプレートタグが用意されており、主にカテゴリー名を表示させる機能を有しているが、目的などによってそれらのテンプレートタグを使い分けていくことで効率的にカスタマイズできる。今回はテンプレートタグ「the_category()」を極めてみようと思う。
目次
the_category()について
「the_category()」は一つの記事に複数のカテゴリーが設定されている場合、なかなか使いづらいが、手っ取り早く投稿にチェックしているカテゴリーを表示させたい場合には便利。しかし関数内に出力の命令も含まれているのでショートコード内で使用してしまうと想定した位置に表示されないので注意が必要。
the_category()のパラメータについて
「the_category()」には3つのパラメータがある。
the_category(① 区切り, ② 親カテゴリの出力, ③ 投稿ID)
① 区切り
複数のカテゴリーを表示させる時の区切りとなる文字列や記号を入力する。デフォルトは空の文字列でulタグで表示される。
②親カテゴリの出力
記事が子カテゴリーである時に親カテゴリーを表示させるかどうか設定できる。オプションとして「multiple」と「single」が用意されている。デフォルトは空の文字列。
「multiple」は親と子は並んで表示されるがリンクは親カテゴリー、子カテゴリーそれぞれ別々に出力される。
「single」も親と子は並んで表示されるがリンクは子カテゴリーのみで出力される。
③投稿ID
投稿IDを指定することで特定の投稿記事に設定されたカテゴリーを表示させることができる。デフォルトは「false」で、現在の投稿に設定されたカテゴリーが表示される。
the_category()の使用可能な場所
the_category()は投稿のループ内でのみ使用可能となっているので、通常の投稿ループ内かアーカイブページで表示させる記事一覧内で使用することができる。
the_category()を表示させてみる
ではパラメータなしの「the_category()」を表示させてみる。カテゴリーの設定は「Wordpress」(親)、「カスタマイズ」(子)、「Ubuntu」(別カテゴリーの子)としている。コードは下記の通り。
<?php the_category(); ?>
<ul class="post-categories">
<li><a href="https://www.karelie.net/category/linux/ubuntu/" rel="category tag">Ubuntu</a></li>
<li><a href="https://www.karelie.net/category/wordpress/" rel="category tag">WordPress</a></li>
<li><a href="https://www.karelie.net/category/wordpress/customize/" rel="category tag">カスタマイズ</a></li>
</ul>
パラメータが何もない場合は設定しているカテゴリーが親子関係なく名前順で表示される。また区切りのパラメータも設定していないのでulタグで表示さている。ulにはクラスとして「post-categories」が付いている。
the_category()に区切りのパラメータを設定して表示させてみる
まずは区切りのパラメータを設定して出力させてみよう。まずはパンくずリストでよく用いられる右向きの矢印を入れてみる。コードは下記の通り。
<?php the_category(' > '); ?>
<a href="https://www.karelie.net/category/linux/ubuntu/" rel="category tag">Ubuntu</a>
> <a href="https://www.karelie.net/category/wordpress/" rel="category tag">WordPress</a>
> <a href="https://www.karelie.net/category/wordpress/customize/" rel="category tag">カスタマイズ</a>
単純に親子関係なく名前順で表示され、そこに右矢印が入っているので一見パンくずリスト風に見えるものの関係性がないので、これをパンくずリストとしては使えないのがわかる。
次に中黒の区切りを入れて表示させてみよう。コードは下記の通り。
<?php the_category(' • '); ?>
<a href="https://www.karelie.net/category/linux/ubuntu/" rel="category tag">Ubuntu</a>
• <a href="https://www.karelie.net/category/wordpress/" rel="category tag">WordPress</a>
• <a href="https://www.karelie.net/category/wordpress/customize/" rel="category tag">カスタマイズ</a>
単純に設定しているカテゴリーを表示させたい場合なら、この中黒で区切って表示させてもいいかもしれない。ただ親子関係なく名前順で表示されるので要注意。
the_category()に親カテゴリ出力のパラメータを設定して表示させてみる
親カテゴリ出力のパラメータでは「multiple」と「single」のオプションが用意されている。まずは区切りのパラメータは入れずに「multiple」を試してみよう。
<?php the_category('','multiple'); ?>
<ul class="post-categories">
<li><a href="https://www.karelie.net/category/linux/">Linux</a><a href="https://www.karelie.net/category/linux/ubuntu/" rel="category tag">Ubuntu</a></li>
<li><a href="https://www.karelie.net/category/wordpress/" rel="category tag">WordPress</a></li>
<li><a href="https://www.karelie.net/category/wordpress/">WordPress</a><a href="https://www.karelie.net/category/wordpress/customize/" rel="category tag">カスタマイズ</a></li>
</ul>
HTMLを見てもらえればわかるが、親と子のリンクはそれぞれ別れていて、該当するカテゴリーページにリンクされている。スタイルシートで頑張れば該当記事のパンくずリスト的なカテゴリー表示として使えそうではあるが、問題点としては、親と子にカテゴリー を設定していると「親」と「子の親」が重複して表示されているので、とても微妙な結果となっている。サイト全体で「子カテゴリーのみチェックを入れる」というルールのもとで運営するのであれば使えなくもない。
では先ほど試した「中黒」を区切りにして「multiple」を出力してみよう。コードは下記の通り。
<?php the_category(' • ','multiple'); ?>
<a href="https://www.karelie.net/category/linux/">Linux</a>
• <a href="https://www.karelie.net/category/linux/ubuntu/" rel="category tag">Ubuntu</a>
• <a href="https://www.karelie.net/category/wordpress/" rel="category tag">WordPress</a>
• <a href="https://www.karelie.net/category/wordpress/">WordPress</a>
• <a href="https://www.karelie.net/category/wordpress/customize/" rel="category tag">カスタマイズ</a>
これも使えない。使い道が浮かばない。「区切り」のパラメータが全ての区切りとして入ってしまうので、どうしようもない。
気を取り直して「single」のパラメータを入れてみよう。区切りとして「中黒」を入れてみる。コードは下記の通り。
<?php the_category(' • ','single'); ?>
<a href="https://www.karelie.net/category/linux/ubuntu/" rel="category tag">Linux • Ubuntu</a>
• <a href="https://www.karelie.net/category/wordpress/" rel="category tag">WordPress</a>
• <a href="https://www.karelie.net/category/wordpress/customize/" rel="category tag">WordPress • カスタマイズ</a>
「single」では「multiple」と同様「親子」で並ぶが、コードをみると「親」のリンクは「子」の中に含まれているのがわかる。これもどのような使い道があるのかわからない。
the_category()に投稿IDのパラメータを設定して表示させてみる
だんだん使い道のないテンプレートタグに苛立ちを覚え始めたが最後のパラメータを試してみよう。別の投稿のIDを入れてみる。コードは下記の通り。
<?php the_category(' • ','single', 1002); ?>
<a href="https://www.karelie.net/category/apple/" rel="category tag">Apple</a>
• <a href="https://www.karelie.net/category/linux/" rel="category tag">Linux</a>
• <a href="https://www.karelie.net/category/apple/macos/" rel="category tag">Apple • macOS</a>
• <a href="https://www.karelie.net/category/linux/ubuntu/" rel="category tag">Linux • Ubuntu</a>
うーん、ここまでくると自分のカテゴリー分けの方法に問題があるのかと思えてくる。
まとめ
「the_category」のテンプレートタグが使いずらいのは、まず出力順がカテゴリーの名前順のみというのと親カテゴリ出力では親が重複していても関係なく出力されることなのでしょう。こういうテンプレートタグなので別にテンプレートタグに罪があるという訳ではなのですが、うかつにカテゴリーを出力するのに何も考えずに「the_category」を使ってしまうとあとあと困ってしまいそう。ということで全然「the_category」を極められそうにないです。
実用的な「the_category」の使い方は区切りのパラメータのみを使用し、中黒やスラッシュのみで区切り、矢印などは使わないこと。