WordPressでタグの一覧と表示ページを作成する方法

2024.10.16
WordPress

タグクラウドを表示できるwp_tag_cloud()を使わずに、タグの一覧を表示する方法の備忘録です。

wp_tag_cloud()を使用して作成したタグクラウドは、出力したコードに不要なクラス名やスタイルシートが入るため、サイトに合わせてカスタマイズしたタグの一覧を表示したい場合はget_tags()を使用します。

WordPressでタグクラウドを設置する方法

Wordpressの記事に設定したタグを、一覧で表示する「タグクラウド」の作り方の備忘録です。タグクラウドはwp_tag_cloud() のテンプレートタグで簡単に表示することができます。…

選択したタグのリンク先で、該当する記事一覧を表示するページのコードも合わせてまとめています。

タグクラウドを表示する

トップページ表示する「index.php」など、テンプレートのタグクラウドを表示したい箇所に下記のコードを記載します。

<ul class="tags-list">
<?php $tags = get_tags(); 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>

get_tags()でタグの配列を取得して、foreachのループで一覧表示しています。

get_tag_link( $tag->term_id )でタグページのURLを、$tag->nameでタグ名を取得しています。

パラメータの設定

表示するタグの数や、表示順をパラメータで設定することができます。

orderby…name、countなど並び替えの対象を指定します。指定しない場合はIDが適用されます。
order…ソート順ASC（昇順）かDESC（降順）を指定します。省略時はASCが設定されます。
number…表示するタグの件数を指定します。省略時はすべてのタグが表示されます。
hide_empty…投稿数が0のタグを除外する場合はtrue、除外しない場合はfalseを指定します。省略時はtrueが設定されます。

記事に使用されている数の多い順に、上位のタグを17件表示するコードのサンプルです。

<ul class="tags-list">
  <?php
    $args = array(
      'orderby' => 'count',
      'order'   => 'DESC',
      'number'  => 17
    );
  ?>
    <?php $tags = get_tags($args); 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>
</div>

パラメータを配列に設定して、一致したタグのみ取得します。

他にも取得したい投稿IDを指定する「include」や除外する投稿IDを指定する「exclude」など、条件に合わせた出力のカスタマイズが可能です。

タグを表示するページ

タグクラウドのリンクから遷移する該当記事を一覧表示するページには、テンプレートのアーカイブページ「archive.php」が使用されます。

アーカイブページ「archive.php」とは異なるデザインを使用したい場合など、差別化する時はタグページ「tag.php」を作成します。

以下が「tag.php」のコードのサンプルです。

<?php get_header(); ?>
<div class="content_wrap">
  <div class="page_title"><?php single_tag_title(); ?></div>
  <?php if(have_posts()): ?>
    <ul class="tags-list">
    <?php while(have_posts()):the_post(); ?>
      <li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>        
    <?php endwhile; ?>
    </ul>
  <?php endif; ?>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

選択されたタグに該当する記事のタイトルとリンクを一覧で表示しています。

タイトル部分は、single_tag_title()でクリックしたタグの名前を取得しています。