#WordPress

【自作も可能】WordPressのタグ一覧（タグクラウド）表示

WordPressでタグの一覧（タグクラウド）を表示させる方法をご紹介。
一般的なのはテンプレートタグwp_tag_cloud()を利用する方法ですが、目的のフォーマット(HTML)に成形できない場合には、wp_tag_cloud()を使わずに実装することもできます。

この記事で分かること

テンプレートタグを使ったタグクラウドの表示方法
テンプレートタグを使わないタグクラウドの表示方法

この記事の著者

フリーランス
Webデザイナー兼UI/UXデザイナー

タグクラウドを表示する

WordPressでタグの一覧（タグクラウド）を出力するためのテンプレートタグはwp_tag_cloud()です。

<?php wp_tag_cloud(); ?>

表示させたいテンプレートファイル(sidebar.phpなど)にこのタグを貼り付けるだけで、タグクラウドが表示されます。

WordPressのwp_tag_cloud()で、タグクラウドを表示 — タグクラウドの表示例

フォントサイズのカスタマイズ

デフォルトでタグクラウドを利用した場合、紐づく記事が多いタグほど大きな文字で表示されます。
上記の例だと「CSS」に関する記事が多い一方、「ファビコン」に関しては少なめ、と言う感じです。
フォントサイズを調整したい場合は、以下のパラメーターでカスタマイズします。

パラメーター	目的	値
smallest	一番小さいタグのフォントサイズ	数値（単位不要）
largest	一番大きいタグのフォントサイズ	数値（単位不要）
unit	フォントサイズの単位	px等（デフォルトはpt）

/* 最小文字サイズ：10pt、最大文字サイズ：20ptの場合 */
<?php wp_tag_cloud('smallest=10&largest=20'); ?>

フォントサイズを統一したい場合は、smallestとlargestに同じ数値を指定します（あまりスマートなやり方ではありませんが）

/* 全ての文字サイズを10ptにする場合 */
<?php wp_tag_cloud('smallest=10&largest=10'); ?>

フォントサイズの単位は、unitパラメーターで設定する事ができます。

/* 最小文字サイズ：10px、最大文字サイズ：20pxの場合 */
<?php wp_tag_cloud('smallest=10&largest=20unit=px'); ?>

出力されるHTML(フォーマット)のカスタマイズ

wp_tag_cloud()を使うと、デフォルトでは以下のようなHTMLになります。

<!-- 「XXX」には任意のクラス名が入ります -->
<a href="タグ1ページへのリンク" class="XXX">タグ1</a>
<a href="タグ2ページへのリンク" class="XXX">タグ2</a>

こうしたHTMLのフォーマットは、formatパラメーターで変更することができます。

パラメーター	目的	値
format	タグクラウドのフォーマットを設定	flat / list / arrayのいずれか(デフォルト値はflat)

/* listを指定した表記はこのような感じに */
<?php wp_tag_cloud('format=list'); ?>

listフォーマット

リスト要素として出力されます。

<!-- listフォーマットの出力イメージ -->
<ul class="wp-tag-cloud" role="list">
  <li><a href="タグ1ページへのリンク" class="XXX">タグ1</a></li>
  <li><a href="タグ2ページへのリンク" class="XXX">タグ2</a></li>
</ul>

arrayフォーマット

タグの一覧をPHPの配列として返します。HTMLは出力されません。

<?php $tag = wp_tag_cloud('format=array'); ?>

その他のカスタマイズ

そのほかに以下のパラメーターなどもあります。

・order：タグの並び順を設定
・number：タグの表示件数を設定
・exclude：特定のタグを除外する設定

パラメーターの一覧はWordPressの公式マニュアル（WordPress Codex 日本語版）で見る事ができます。

wp_tag_cloud()を使わずにタグクラウドを表示する

wp_tag_cloud()は便利なのですが、出力されたコードに不要なクラス名やスタイルシートがくっついてきてしまいます。
見た目上は問題ないのですがどうしてもキモチ悪いので、私はwp_tag_cloud()を使わない方法で実装しています。
wp_tag_cloud()でフォーマットをカスタマイズしても気に入ったカタチにできない場合も、この方法が有効です。

/* タグ一覧をget_tags('post_tag')で取得しています */
<ul>
  <?php $tags = get_tags('post_tag'); if($tags):foreach($tags as $tag): ?>
    <li><a href="<?php echo esc_url( get_tag_link( $tag->term_id ) ); ?>"><?php echo esc_html( $tag->name ); ?></a></li>
  <?php endforeach; endif; ?>
</ul>

<!-- シンプルな出力結果に！ -->
<ul>
  <li><a href="タグ1ページへのリンク">タグ1</a></li>
  <li><a href="タグ2ページへのリンク">タグ2</a></li>
</ul>

参考：get tags – WordPress Codex 日本語版

まとめ

タグクラウドまとめ

WordPressでタグ一覧を出力するためのテンプレートタグ：wp_tag_cloud()
フォントサイズ設定用のパラメーター：smallest / largest / unit
HTMLフォーマット設定用のパラメーター：format
get_tags()で直にタグ一覧を取りに行けば、自分の好きなフォーマットで作ることも可能

便利なタグクラウド、好みの形で作成してみてくださいね。