各記事が保有しているカテゴリーやタグは、以下の記述で出力することができます。
// カテゴリー
<?php the_category(); ?>
// タグ
<?php the_tags(); ?>ただしこれだと、あらかじめ決められたタグで出力され、カスタマイズ性に欠けます。
タグ付きなのはありがたい反面、ちょっと不便…。
今回はそんなカテゴリーやタグを、自由自在に出力し、カスタマイズする方法を紹介します！
サンプルコードの使い方
コード右上のアイコンをクリックすることでコピーできます。
それでは本文へ、レッツゴー！
カテゴリーの基本的な出力方法
カテゴリーの基本的な出力方法は「the_category()」です。
<?php the_category(); ?>この方法で出力したカテゴリーは、ulタグに囲まれていて、リンク付きで出力されます。
実際に出力されたHTMLを確認すると、以下のようになっています。
<ul class="post-categories">
<li><a href="リンク" rel="category tag">カテゴリー名</a></li>
<li><a href="リンク" rel="category tag">カテゴリー名</a></li>
<li><a href="リンク" rel="category tag">カテゴリー名</a></li>
</ul>割といい感じに出てくれているのですが、常にこの出力が100点というわけでもないですよね…。
では次に、the_category()の引数にテキストを入れてみましょう。
引数とは、()内に入るもののことです！
the_category(ここ)
<?php the_category('、'); ?>すると、HTMLの出力はこのようになります。
<a href="リンク" rel="category tag">カテゴリー名</a>、
<a href="リンク" rel="category tag">カテゴリー名</a>、
<a href="リンク" rel="category tag">カテゴリー名</a>
おわかりいただけただろうか…。
ul、liタグが消え、aタグのみになりました。
そして引数に入れたテキストによって、aタグが区切られます。
これが基本的なカテゴリー出力の方法となります。
ここからもっと自由にいじっていきましょう！
カテゴリー出力をもっと自由にカスタマイズする方法
もっと自由に出力をカスタマイズしようと思うと、「the_category()」はお役御免。
その代わりに「get_the_category()」を使います。
get_the_category()さようなら、the_category()
こんにちは、get_the_category()
この2つの違いは一体何でしょうか？
- the_○○
○○に該当するものを、自動でhtmlに出力してくれる。 - get_the_○○
○○に該当するものを、取得だけする。
htmlに出力はしてくれないので、echoなど自分で出力しなければならない。
自由にカスタマイズしようと思うと、
カテゴリー情報を取得だけして、後から自分で出力する処理を記述する。
ということなのです。
カスタマイズしたカテゴリー出力のサンプルコード
とにかく先に結果から見ちゃいましょう！
aタグだけで囲まれたリンク付きカテゴリ一覧が出力されるサンプルコードです。
ただ、ワードプレスの設定によってはURLのパスが異なっている場合があるので注意してください。
<?php
foreach( get_the_category() as $cat ) {
echo "<a href=\"".esc_url(home_url("/category/{$cat -> slug}/"))."\">{$cat -> name}</a>";
}
?>これをコピペすると、htmlでは以下のように出力されます。
<a href="https://あなたのワードプレスサイトURL/category/スラッグ/">カテゴリー名</a>
<a href="https://あなたのワードプレスサイトURL/category/スラッグ/">カテゴリー名</a>
<a href="https://あなたのワードプレスサイトURL/category/スラッグ/">カテゴリー名</a>URLなどの調整が必要になるのですが、自由なタグで出力できるようになります。
仕様やデザインの幅が広がりますね！
それでは、この出力方法について深掘りしていきましょう。
get_the_category()の中身について
PHPより先にワードプレスから学習をしている方には少し難しい内容になります。
理解できなくても使えりゃOKという方は読み飛ばしてください！
get_the_category()get_the_category()は、the_category()と異なり、htmlに出力はせず、カテゴリー情報の取得だけをしてくれます。
取得といっても実際どのように取得しているのでしょうか、var_dump()で見てみましょう！
<?php var_dump(get_the_category()); ?>そして僕が勝手にvar_dump()で確認した結果がこちら！
わーお…。
って感じですよね。大事なとこ赤線引きました。
簡単に説明すると、
- カテゴリーの配列がある
- さらにそのカテゴリー毎が連想配列になっていて、カテゴリーのいろんな情報を保有している
- カテゴリー名のキーがname、スラッグのキーがslug
つまり配列と連想配列の多次元配列になっています。
取得したカテゴリー情報をforeachで出力する
取得したカテゴリー情報を、foreachの繰り返し構文で、順番に出力しています。
先ほどもちらっと触れたとおり、カテゴリー名のキーは「name」です。
カテゴリー名を出力したい部分に
// カテゴリ名を出力したい部分に書く
$cat -> nameそしてスラッグのキーは「slug」なので、
スラッグを出力した部分に
// スラッグを出力したい部分に書く
$cat -> slugと記述します。
$cat -> name は get_the_category()[i] -> name
$cat -> slug は get_the_category()[i] -> slug
を意味しています。
よく分からない方は気にしなくてOK
あとは自由にhtml部分を書き換えれば、完成です。
リンクが不要な場合は、aタグの部分を消せばOK
例えば
<?php
foreach( get_the_category() as $cat ) {
echo "<span>{$cat -> name}</span>";
}
?>と記述すれば、
<span>カテゴリー名</span>
<span>カテゴリー名</span>
<span>カテゴリー名</span>と出力されます。
カテゴリーを1つだけに絞って出力する方法
カテゴリーを複数保有していても、
レイアウトの都合上カテゴリーを1つだけに絞って出力したい
ってときありますよね。
<?php
$categorySlug = get_the_category()[0] -> slug;
$categoryName = get_the_category()[0] -> name;
?>
<a href="<?php echo esc_url(home_url())."/category/{$categorySlug}/"; ?>">
<?php echo $categoryName; ?>
</a> 先ほど紹介したカテゴリー出力方法の、foreachを抜いたバージョンのような感じです。
get_the_category()は配列なので、[0]とインデックス（配列の番号）を指定して出力することで、保有しているカテゴリーを1つだけ出力することができます。
配列の最初に格納されているカテゴリーが出力されるので、自由にカテゴリーを選択することはできません。
タグの基本的な出力方法
タグの出力は、the_tags()を使うのが基本です。
<?php the_tags(); ?>これを記述するだけで、HTMLには以下のように出力されます。
タグ:
<a href="リンク" rel="tag">タグ名</a>,
<a href="リンク" rel="tag">タグ名</a>,
<a href="リンク" rel="tag">タグ名</a>タグは、リンク付きのaタグで出力され、タグ同士は「, 」で区切られた状態で出力されます。
ここまではまだいい…。
なんだ冒頭の「タグ: 」まじでいらねえ！
大丈夫です。
the_tags()に引数を設定することで回避できます。
<?php the_tags('タグ一覧の接頭にくるテキスト', 'タグとタグを区切るテキスト'); ?>第一引数には「タグ一覧の接頭にくるテキスト」（「タグ：」の部分）
第二引数には「タグとタグを区切る素敵スト」（「, 」の部分）
を設定することができます。
引数が複数ある場合は「,」で区切ります！
例えば、
<?php the_tags('', '、'); ?>と記述すると、接頭のテキストがなくなり、タグ同士は「、」で区切られるようになります。
タグ出力をもっと自由にカスタマイズする方法
先ほどのカテゴリーをカスタマイズするのと同じ方法を使います。
カテゴリーではget_the_category()でしたが想像通り、
タグの場合はget_the_tags()を使います。
<?php
foreach( get_the_tags() as $tag ) {
echo "<a href=\"".esc_url(home_url("/tag/{$tag -> slug}/"))."\">{$tag -> name}</a>";
}
?>あとはこれを自由にいじればOK！
1つだけ出力する場合も先ほどのカテゴリと方法は同じです。
<?php
$tagSlug = get_the_tags()[0] -> slug;
$tagName = get_the_tags()[0] -> name;
?>
<a href="<?php echo esc_url(home_url())."/tag/{$tagSlug}/"; ?>">
<?php echo $tagName; ?>
</a> 
