WordPressのタクソノミーのターム情報でアイコン画像などをコントロール

WordPressでよく使うであろうタクソノミーやターム情報。
このタクソノミーのタームの情報で表示させたいアイコン画像を制御する方法をご紹介します。

タクソノミーはカテゴリーやタグの分類方法で、タームは分類の項目といったところでしょうか。
もちろん、カスタム投稿タイプを作成してカスタムタクソノミーも作ればカテゴリーやタグという用途で使い分けることができます。

タクソノミーのターム情報を使って、項目名や項目に関連するアイコン画像などをWebサイト上に表示させたいってことがあるのではないでしょうか。
デザイン上しっかりと分類を表示させることで、ユーザーにわかりやすくどのような項目なのかを伝えることができます。
デザインにこだわりがある方はタクソノミーやタームの情報の表示方法を知っておきましょう。

それではターム名の表示方法とアイコン画像などを使いたい場合の表示方法をご説明します。

ターム情報でアイコン画像を表示

アイコン画像の名前はタームのスラッグ名に合わせて作っておくとコントロールがしやすいです。
icon_cat_{ターム名}.pngのように画像を用意します。

例えば、製品情報を掲載するとしましょう。
タクソノミー名が「product_category」である場合で進めていきます。

投稿のループ内に記述します。

<?php
$tarms = get_the_terms( $post -> ID ,'product_category' );
foreach ($tarms as $tarm) {
    $tarmname = $tarm -> slug;
    $tarmttl = $tarm -> name;
}
?>
 
<img src="<?php echo get_template_directory_uri(); ?>/images/icon_cat_<?php echo esc_html( $tarmname ); ?>.png" alt="<?php echo esc_html( $tarmttl ); ?>">

WordPressの関数「get_the_terms」で投稿記事のタクソノミー情報を取得して変数$tarmsに格納。
取得したタクソノミー情報からターム情報を取得してきます。
foreachの中でタームの必要な情報（スラッグ名{slug}、ターム名{name}）を取得してきます。
（他にもterm_idやdescriptionでIDやディスクリプションも取得可能）
あとはimg要素の中で、変数の値を使ってあげればOK。
上記のサンプルコードだと画像のファイル名にターム名が入りますね。

タームが複数設定されている場合

複数のタームが設定されている場合はforeachでタームの数だけ回してあげればいいです。
この場合はPHPの中でechoしてあげる必要が出てきます。
スラッグ名等の出力の仕方が少し違うのでお気をつけください。

<?php
$tarms = get_the_terms( $post -> ID ,'product_category' );
foreach ($tarms as $tarm) {
    echo '<img src="' . get_template_directory_uri() . '/images/icon_cat_' . $tarm -> slug . '.png" alt="' . $tarm -> name . '">';
}
?>

ちなみにタームのシングルページで、アイコン画像からタームの一覧にリンクさせたいって時もあるのでこちらも。

<?php
foreach ($tarms as $tarm) {
    echo '<a href="' . get_term_link( $tarm ) . '"><img src="' . get_template_directory_uri() . '/images/icon_cat_' . $tarm -> slug . '.png" alt="' . $tarm -> name . '"></a>';
}
?>

「get_term_link( $tarm )」でタームの一覧へのリンクが取得できます。

ターム情報でターム名を表示

ターム情報のターム名を表示させて項目をみせたい場合は、ターム名を表示させた後にCSSでアイコンっぽくスタイルを付けてあげてもいいですね。

<?php
$tarms = get_the_terms( $post -> ID ,'product_category' );
foreach ($tarms as $tarm) {
    $tarmname = $tarm -> slug;
    $tarmttl = $tarm -> name;
}
?>
 
<span class="cat-<?php echo esc_html( $tarmname ); ?>"><?php echo esc_html( $tarmttl ); ?></span>

spanの中にターム名を表示させ、spanのクラスを「cat-{スラッグ名}」という感じにしてあげれば、CSSでコントロールしてアイコンっぽいスタイルにしてあげれますね。

もちろんこちらもタームが複数設定されていればアイコン画像を使う時と同様に、foreachを使ってspanの部分をechoしてあげれば設定したターム分の表示ができますね。