【WordPress】投稿に「タグ」を表示・デザインする方法

ブログ・サイト

2021.11.28

ブログ・サイト

WordPress カスタマイズ

この記事は約5分で読めます。

とっちゃん@nyanco! です。

今回はWordPressで投稿記事に「タグ一覧」を出力（表示）する方法とそのデザイン変更についてです。

「タグ」を出力する関数
1. 注意点
「タグ」のデザインを変更する
おわりに

「タグ」を出力する関数

投稿記事で設定した「タグ」を出力するだけであれば、任意の場所に次の関数（テンプレートタグ）を記述するだけでOKです。

<?php the_tags(); ?>

▼この関数を記述すると、下記赤枠のように表示されます。

出力されたコードを開発者ツールで見るとこんな感じになっています。

"タグ: "
<a href="https://benz.nyanco.me/tag/the-hippie/" rel="tag">THE HIPPIE</a>
", "
<a href="https://benz.nyanco.me/tag/illust/" rel="tag">イラスト</a>

デフォルトで冒頭に「タグ: 」という文字列が出力、複数タグの区切りとして「,（コンマ）」が出力、それぞれの「タグ」に「タグ一覧」ページへのリンク付きの aタグ が出力されているのが分かります。

▼デフォルト表記のままでOKならこれで完了！なのですが、今回は下記赤枠のようなデザインに見た目をカスタマイズしていきます。

カスタマイズした主な内容はこちら。

冒頭の「タグ:」を非表示
区切りの「,（コンマ）」も非表示にして半角スペースで区切る
背景色を設定
右寄せに

注意点

注意点として、この関数はWordPressループ内でしか機能しませんにゃ〜
WordPressループとは、下記のようなコード内のことですにゃ〜

<?php if(have_posts()): ?>
    <?php while(have_posts()): the_post(); ?>
        <!-- 投稿記事の数だけ繰り返し処理 -->
    <?php endwhile; ?>
<?php else: ?>
    <!-- 投稿記事がない場合の処理 -->
<?php endif; ?>

「タグ」のデザインを変更する

the_tags() の「引数」で「タグ:」を非表示&「区切り」を変更

タグ出力の関数 the_tags() は3つの「引数」を設定することで見た目を変更することができ、冒頭の「タグ:」と「区切り文字」はここで設定していきます。

「引数」は、the_tags() の () の中で設定が可能で、下記のように空白だとデフォルトの設定となりますにゃ〜

<?php the_tags(); ?>

the_tags() の引数は下記のように3つの要素があります。

<?php the_tags( $before, $sep, $after ); ?>

【第１引数】$before：タグ一覧の冒頭に表示する文字列。デフォルトは「タグ:」（英語環境だと「Tags:」
【第２引数】$sep：タグが複数ある場合の区切り文字。デフォルトは「,（コンマ）」
【第３引数】$after：タグ一覧の後ろに表示する文字列。デフォルトは何もなし。

これを次のような引数にします。

<?php the_tags('',' '); ?>

ちょっと分かりにくいと思いますが、意味としては以下の通り。

【第１引数】” ：明示的に何も設定しないことでデフォルトの「タグ：」を非表示にする
【第２引数】’ ‘ ：【第１引数】との違いが分かりにくいですが、「’（シングルクォーテーション）」の間に「半角スペース」が入っています。こうすることで、複数タグの「区切り文字列」が「半角スペース」となります。
【第３引数】：デフォルトのままで良いので記述を省略

▼引数を設定した状態でページを更新すると下記のようになります。

狙い通りに冒頭の「タグ：」が消え、「区切り文字」の「,」が半角スペースになってますが、正直分かりずらいので見た目をCSSを使ってもう少しカスタマイズしていきます。

CSSで装飾【コピペOK！】

CSSで装飾をするため、テンプレートタグを下記のように divタグ で囲みます。

<div class="o-tags"><?php the_tags('',' '); ?></div>

class名は任意のものでもOKですにゃ〜
ここではオリジナルのタグという意味で o-tags としましたにゃ〜

続いてCSSに下記コードを追加します。

.o-tags{
    text-align: right; /* タグ一覧を右寄せ */
    margin-bottom: 10px; /* タグ一覧の下に余白 */
}
.o-tags a{
    background: #019EBD; /* タグの背景色 */
    color: #ffffff; /* タグの文字色 */
    font-size: 9px; /* タグの文字サイズ */
    font-weight: bold; /* タグの文字を太字に */
    padding: 2px 5px; /* タグ内の余白 */
}
.o-tags a:hover{
    opacity: 0.5; /* マウスオンした時に透明度を落とす */
    text-decoration: none; /* マウスオンした時の下線を非表示に */
}

▼アップロードして更新すると下記のようになるはずです。タグの切れ目が分かりやすくなって見やすくなりました！