WordPressでタグ（一覧）をイメージ付きで表示する

2022年12月24日2023年8月22日

当ページのリンクには広告が含まれています。

レシピサイトで食材から探す機能をつけるためにタグを利用しました。

ただタグを文字列ではなくイラスト画像をつけたい。ということでやり方をメモしておきます。

流れとしては以下。

タグのイメージに設定したい画像をメディアライブラリにアップロードする
タグの説明欄に画像のURLをコピペする
タグの出力の際に2.をimgのsrc=の中に出力する
imgはdivで囲って幅等をcssでそろえる

3.のコード

リスト（li）でリンク（a）付き。リンク内に画像とタグ名。

<ul class="search-tag__wrap">
    <?php
        $args = array(
            'orderby'            => 'count', 
            'order'              => 'desc', 
            'hide_empty'         => true, 
            'number'             => '20', 
        ); 
        $tags = get_tags( $args );                    
        foreach( $tags as $tag ) {
        $tag_img = $tag->description;
            echo '<li><a href="'.get_tag_link( $tag -> term_id ).'">
            <div class="img-box">';
            if( $tag_img ){
                echo '<img src="'.$tag_img.'" alt="'.$tag->name.'">' ;
            }
            else{
                $tag_no_img = get_template_directory_uri();
                echo '<img src="'.$tag_no_img.'/img/no-img.png" alt="" />' ;
            }
            echo '</div><p>'.$tag->name.'</p></a></li>';
        }
    ?>
</ul>

$tag->descriptionで説明欄の文字列。

.img-box{
    width: 20px;
    display: inline-block;
}
.img-box img{
    width: 100%;
}

今回素材のimgは全部自作のため幅指定で済ませていますが、必要に応じてobject-fitなどかなと思います。もっとも普通は統一されたアイコン等を使うと思うのでcssはあまり必要ないかもしれません。

$argsの中身補足

上2行は並び順、それぞれデフォルトですが記載しています。hide_emptyは一度も使われていないものも出力するかです、デフォルトのtrueだと0回は出力しません。numberは最大数。

タグ名はなしでimgだけのパターン

$tags = get_the_tags();
    foreach( $tags as $tag) {
        echo '<li><a href="'. get_tag_link($tag->term_id) .'"><div class="search-tag__img-box"><img src=" '.$tag->description.'"></div></a></li>';
        }

タグ一覧ページにimg出力

tag.phpなど一覧ページ側の上部にimgだけ出力したいパターンです。

<?php $str = tag_description(); ?>
    <?php $description = strip_tags( $str, "p"); ?>
    <?php echo "<div class='search-tag__img-box'><img src='".$description."'></div>"; ?>
    <h1><?php single_tag_title(); ?><span>の一覧</span></h1>

tag_descriptionそのままだとpタグがついてしまうので除去してから入れています。

よかったらシェアしてね！