ブログ・サイト

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

ブログ・サイト
この記事は約5分で読めます。

とっちゃん@nyanco! です。

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

スポンサーリンク

「タグ」を出力する関数

投稿記事で設定した「タグ」を出力するだけであれば、任意の場所にの関数(テンプレートタグ)を記述するだけで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 ); ?>
  • 【第1引数】$before:タグ一覧の冒頭に表示する文字列。デフォルトは「タグ:」(英語環境だと「Tags:」
  • 【第2引数】$sep:タグが複数ある場合の区切り文字。デフォルトは「,(コンマ)」
  • 【第3引数】$after:タグ一覧の後ろに表示する文字列。デフォルトは何もなし。

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

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

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

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

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

狙い通りに冒頭の「タグ:」が消え「区切り文字」の「,」が半角スペースになってますが、正直分かりずらいので見た目を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; /* マウスオンした時の下線を非表示に */
}

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

肉玉にゃんこ

それぞれの設定内容はコメントアウトで記載しているので、必要に応じて変更・削除して自由にカスタマイズしてくださいにゃ〜

参考にさせていただいたサイト様

投稿に付けたタグを出力する / タグの出力形式を変更する
投稿に付けたタグの一覧を表示するにはthe_tags()を使用します。

おわりに

WordPressはデフォルトでタグ一覧が表示されているテーマが多いのでニッチなニーズかも知れませんが、簡単に実装できるので必要な方は試してみてください♪

本記事がどなたかの参考になれば幸いです。

今回は以上となります。
最後まで読んでいただきましてありがとうございました!
それではまた〜✧٩(ˊωˋ*)و✧

コメント