レンちゃんとペンタ

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

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

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

    Webデザインとブログで豊かに引きこもる。

    レンちゃんとペンタ

    Webデザインは器。ブログは中身。
    「レンちゃんとペンタ」では、2つのスキルを掛け合わせて、
    おウチで豊かに楽しく暮らす方法をご紹介しています。

    タグクラウドを表示する

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

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

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

    Related Posts