Speaking Design

Blogブログ

WordPressでタグ一覧(タグクラウド)を表示させる

WordPressでタグ一覧(タグクラウド)を表示させる

WordPressでタグの一覧(タグクラウド)を表示させる一般的な方法は、テンプレートタグwp_tag_cloud()を使用した実装です。
出力フォーマット(HTML)は、パラメーターを使ってカスタマイズできますが、どうしても目的のフォーマットに成形できないという場合に便利な、テンプレートタグなしでの実装方法も紹介します。

目次

タグクラウドを表示する

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

<?php wp_tag_cloud(); ?>

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

ラグクラウドのフォントサイズは、以下のパラメーターでカスタマイズすることができます。

パラメーター 目的
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フォーマット

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

<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()で直にタグ一覧を取りに行けば、自分の好きなフォーマットで作ることも可能

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