レンちゃんとペンタ

【自作も可能】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