【WordPress】タグ一覧をサイトに表示する方法｜コード例とデザイン調整も解説

WordPressでブログやWebサイトを運営する際、タグは記事の分類や関連付けに役立ちます。タグ一覧を表示することで、訪問者は興味のあるトピックにすばやくアクセスでき、サイト内回遊率やSEOの向上にもつながります。

表示場所に応じてテーマファイルを選ぶ
タグ一覧を表示するコード
スタイルのカスタマイズ（任意）
表示確認と動作テスト
よくある質問（FAQ）
まとめ

表示場所に応じてテーマファイルを選ぶ

タグ一覧を表示するには、まず表示させたい場所を明確にします。以下のように、表示位置によって編集するテーマファイルが異なります。

サイドバーに表示したい場合：sidebar.php
フッターに表示したい場合：footer.php
固定ページや投稿ページに直接表示したい場合：page.phpやsingle.php

使用しているテーマやカスタマイズ状況によっては、template-parts/ディレクトリ内のファイルが対象になることもあります。

タグ一覧を表示するコード

編集したいPHPファイルを開き、タグ一覧を表示させたい位置に以下のコードを挿入します。

<?php
$tags = get_tags();
if ($tags) {
    echo '<ul class="tag-list">';
    foreach ($tags as $tag) {
        $tag_link = get_tag_link($tag);
        echo '<li><a href="' . esc_url($tag_link) . '">' . esc_html($tag->name) . '</a></li>';
    }
    echo '</ul>';
}
?>

このコードでは、get_tags()ですべてのタグを取得し、それぞれのタグ名とリンクをリスト形式で出力します。esc_url()とesc_html()を使うことで、セキュリティ面でも安心です。

スタイルのカスタマイズ（任意）

見た目を整えるために、CSSでスタイルを調整することも可能です。たとえば以下のようなCSSを追加することで、シンプルで見やすいタグリストになります。

.tag-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag-list li {
  background: #f0f0f0;
  padding: 4px 10px;
  border-radius: 4px;
}

.tag-list a {
  text-decoration: none;
  color: #333;
}

style.cssに追記するか、テーマカスタマイザーの「追加CSS」に記述してください。