WordPressでブログやWebサイトを運営する際、タグは記事の分類や関連付けに役立ちます。タグ一覧を表示することで、読者は興味のあるトピックにすばやくアクセスでき、サイト内の回遊やSEOの向上にもつながります。この記事では、リスト表示の基本コードから、手軽なタグクラウード表示、使用頻度順の上位表示まで解説します。
get_tags()を使ったタグ一覧の基本表示wp_tag_cloud()で手軽にタグクラウードを表示- 使用頻度が高いタグだけを上位表示する方法
表示場所に応じてテーマファイルを選ぶ
タグ一覧を表示するには、まず表示したい場所を明確にします。以下のように、表示位置によって編集するテーマファイルが異なります。
- サイドバーに表示したい場合：
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() を使うことで、セキュリティ面でも安全です。get_tags() は既定で投稿の紐付いていないタグ（使用数0）を除外するため、未使用タグが一覧に紛れ込む心配はありません。
使用頻度が高いタグだけを上位表示する
タグの数が多いサイトでは、すべてのタグを並べると一覧が長くなりすぎます。number と orderby を指定すると、使用頻度が高いタグだけを絞り込んで表示できます。
<?php
$tags = get_tags(array(
'orderby' => 'count', // 使用回数順に並び替え
'order' => 'DESC', // 多い順
'number' => 10, // 上位10件のみ取得
));
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)
. ' (' . esc_html($tag->count) . ')</a></li>';
}
echo '</ul>';
}
?>
$tag->count にはそのタグが付いている公開済み投稿の数が入っています。「人気タグ」欄を作る際は、この値を使って件数を添えると読者に伝わりやすくなります。wp_tag_cloud() で手軽にタグクラウードを表示する
使用頻度に応じて文字サイズが自動で変わるタグクラウードを表示したい場合は、自前でループを書かなくても wp_tag_cloud() 関数一つで実現できます。
<?php
wp_tag_cloud(array(
'smallest' => 12, // 最小フォントサイズ（px）
'largest' => 28, // 最大フォントサイズ（px）
'number' => 30, // 表示するタグの上限数（0で全件）
'format' => 'flat',
));
?>
wp_tag_cloud() は手軽ですが、出力されるマークアップやフォントサイズの計算方法を細かく制御することはできません。デザインを自由にカスタマイズしたい場合は、前述の get_tags() を使った自前のループ実装を選んでください。スタイルのカスタマイズ（任意）
見た目を整えるために、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」に記述してください。コードを編集して保存した後は、ブラウザ側のキャッシュやサイト高速化プラグインのキャッシュが残っていると変更が反映されないことがあるため、表示が変わらない場合はキャッシュのクリアも確認してください。
関連するカテゴリー・タグ表示のカスタマイズ
タグとカテゴリーを区切り文字でまとめて表示したい場合はカテゴリーやタグの一覧を指定した区切り文字を入れて表示する方法で解説しています。
よくある質問（FAQ）
wp_tag_cloud() を、一覧形式で自由にデザインしたいなら get_tags() でタグ配列を取得してforeach でループ表示します。デザインはCSSで自由にカスタマイズできます。term_id・name・slug・count（記事数）・description などのプロパティにアクセスできます。URLは get_tag_link($tag->term_id) で取得します。orderby・order・number パラメーターで並び順や件数も指定できます。WP_Query でカテゴリー指定の記事を取得してループし、get_the_tags() で各記事のタグを収集する方法があります。あるいは get_terms() でカテゴリーとタグのリレーションを複雑にクエリする方法もあります。まとめ
- 基本：
get_tags()＋foreachでリスト表示（esc_url()/esc_html()で安全に） - 手軽に：
wp_tag_cloud()でタグクラウード表示 - 人気順：
orderby => 'count'とnumberで上位だけ表示
WordPressでタグ一覧を表示することで、ユーザビリティとSEOの両面で効果が期待できます。テーマファイルにコードを追加するだけの簡単な実装なので、ぜひ活用してみてください。
