【WordPress】タグページの作り方

タグページはアーカイブページの一種で、タグ専門のアーカイブページです。

アーカイブページ(archive.php)とは異なるデザインをタグページに反映させたい時にタグページ(tag.php)を作成するとよいでしょう。

本記事の内容は【WordPress】カテゴリーページの作り方のタグページ版といったかんじで、カリゴリーページの作り方を理解している人はタグページの作り方もサクっと理解できると思います。

【WordPress】カテゴリーページの作り方を先にご覧ください。

今回作成するページ

tag.phpを準備する

ページの見出しがカテゴリーからタグに変わっただけなので、カテゴリーページのコードをコピーしてページの見出しのみ変更していきます。

tag.phpを新規作成する

WordPressにはタグページ用のテンプレート(tag.php)があります。

tag.phpを作成しましょう。

*ファイル名はtag.phpで、その他のファイル名ではテンプレートとして認識しません。

category.phpのコードをtag.phpにコピペする

archive.phpをもとに作成したcategory.phpをtag.phpにコピペします。

<?php get_header(); ?>
  <div class="content">
    <div class="container content__container">
      <main id="main" class="main--category">
        <?php echo get_the_category(); ?>
        <h1>カテゴリー：『<?php single_cat_title(); ?>』の記事一覧</h1>
        <div class="card">
          <?php if(have_posts()): while(have_posts()): the_post(); ?>
            <a href="<?php the_permalink(); ?>">
              <div>
                <h2 class="card__title"><?php the_title(); ?></h2>
                <p class="card__excerpt"><?php echo get_the_excerpt(); ?></p>
                <time class="card__time"><?php the_time('Y.m.d'); ?></time>
              </div>

              <?php
                if(has_post_thumbnail()):
                  the_post_thumbnail();
                else:
              ?>
                <img class="card__img-dummy" src="<?php echo get_template_directory_uri(); ?>/img/dammy.png" alt="">
              <?php endif; ?>
                
              <p class="card__category">
                <?php
                  $categories = get_the_category();
                  if ( $categories ) {
                    echo $categories[0]->name;
                    }
                ?>
              </p>
            </a>
          <?php endwhile;endif; wp_reset_query(); ?>
        </div>

        <!-- pagination省略 -->
        <ul class="pagination">
          <li><a href="">＜＜</a></li>
          <li><a href="">1</a></li>
          <li><a href="">2</a></li>
          <li><a href="">3</a></li>
          <li><a href="">4</a></li>
          <li><a href="">5</a></li>
          <li><a href="">＞＞</a></li>
        </ul>
      </main>
      
      <?php get_sidebar(); ?>
    </div><!-- /content__inner -->
  </div>
<?php get_footer(); ?>

ページの見出しをタグページ用に書き換える

category.phpをコピペしたので、ページの見出しがカテゴリーページ ようになったままです。

<?php get_header(); ?>
  <div class="content">
    <div class="container content__container">
      <main id="main" class="main--category">
        <h1>タグ：『◯◯』の記事一覧</h1><!-- ここをタグページ用に書き換える -->
        <div class="card">
          <!-- 省略 -->
        </div>

        <!-- pagination省略 -->
      </main>
      
      <?php get_sidebar(); ?>
    </div>
  </div>
<?php get_footer(); ?>

これをタグページ用に書き換えます。

<h1>タグ：『◯◯』の記事一覧</h1>

タグ名を動的にする

タグ：『◯◯』の記事一覧の◯◯部分を動的に表示できるようにします。

『』の中に以下のテンプレートタグを埋め込みます。

<?php single_tag_title(); ?>

<h1>タグ：『<?php single_tag_title(); ?>』の記事一覧</h1>

---

タグページ一覧(tag.php)は、カテゴリーページ同様にアーカイブページ(archive.php)で代用することができます。

アーカイブページ(archive.php)とは異なるデザインをカテゴリーページに反映させたい時にタグページ(tag.php)を作成するとよいでしょう。

詳しくは、コラム：category.phpが無くてもカテゴリー毎の一覧は表示できるで解説しているので是非読んでみてください。

考え方は全く同じです。