つぶやき
-ブログ-

カスタムタクソノミーを作成する方法｜WordPressテーマ作成

2022年6月23日

WordPressには投稿タイプの種類を増やせるカスタム投稿といった機能がありますが、カスタム投稿にカテゴリーを追加できるのがカスタムタクソノミーです。

例えばメニューの紹介というカスタム投稿で作成した場合は、カスタムタクソノミーを使えば、「フード」や「ドリンク」といった項目を増やせます。項目に分ければカスタム投稿が管理しやすくなります。

そこで今回はカスタムタクソノミーを作成する方法を解説します。

※本記事では「Custom Post Type UI」で作成したカスタム投稿を扱っています。

カスタムタクソノミーを作成する方法

まずは「タクソノミーの追加と編集」をクリックしましょう。

「タクソノミーの追加と編集」をクリックすると、下記の画像のような設定画面が表示されます。

「タクソノミースラッグ」は、後にタクソノミーにアクセスする際に使うので、関連性のある半角英数字を記入しましょう。「ラベル」は管理画面で管理するために使うので、関連性のある日本語で記載するのをおすすめします。

「利用する投稿タイプ」は、文字どおりタクソノミーを利用する投稿の種類を選択します。

今回はカスタム投稿タイプの「メニュー」に「フード」と「ドリンク」という項目を作成するので「メニュー」を選択しています。

次に「追加ラベル」の「メニュー名」も関連性のある日本語で設定しましょう。

設定ボックスにある「階層」は「真」にしておきましょう。

設定が完了したら「タクソノミーの追加」をクリックしてください。

設定が完了するとカスタム投稿に「メニューの種類」という項目が表示されます。

「メニューの種類」を選択すると以下の画面が表示されます。

左側にある「名前」「スラッグ」を記入して「新規メニューの種類を追加」をクリックすると、項目を作成できます。この項目は「ターム」と呼びます。上記の画像では「ドリンク」

と「フード」のタームを作成しました。

タームを作成した後に、「メニュー紹介」のページにある投稿ページを開くと、下記のように「メニューの種類」と表示されて、さきほど作成したタームも表示されています。これで投稿を項目別に分けられます。

タクソノミーの一覧を表示させるテンプレート

タクソノミーのテンプレートは次のとおりです。

優先順位➀：taxonomy-$taxonomy-$term.php

優先順位➁：taxonomy-$taxonomy.php

優先順位③：taxonomy.php

タームごとのテンプレートを使いたい場合は「taxonomy-$taxonomy-$term.php」を使うとよいでしょう。

1つのページに複数のタームの投稿一覧を表示させる

さきほどタクソノミーのテンプレートを紹介しましたが、下記の画像のように複数のターム(この場合だとドリンクとフード)を1つのページに表示させたいケースもあるでしょう。

上記の画像のようにタームの記事一覧を表示する方法を解説します。以下にて上記画像内容のHTMLとCSSのコードを載せたので参考にしてみてください。

<section class="mainvisual_menu">
    <h2 class="menu_title_2">メニュー紹介</h2>
</section>
<!-- タクソノミーの指定、ターム情報の取得。foreachで1つずつ処理する。 -->
<?php
$menu_kinds = get_terms(array('taxonomy' => 'menu_kind'));
if (!empty($menu_kinds)) :
?>
    <?php foreach ($menu_kinds as $menu_kinds) : ?>
        <!-- WP_Queryを使ってタームの記事一覧を表示する -->
        <?php
        $arg = array(
            'post_type' => 'menu',
            'posts_per_page' => -1,
        );
        $taxquerysp = array('relation' => 'AND');
        $taxquerysp[] = array(
            'taxonomy' => 'menu_kind',
            'terms' => $menu_kinds->slug,
            'field' => 'slug',
        );
        $args['tax_query'] =  $taxquerysp;
        $the_query = new WP_Query($args);
        if ($the_query->have_posts()) :
        ?>
            <div class="menu_header">
                <h2 class="menu_title">
                    <!-- タームのタイトルを表示する -->
                    <?php echo $menu_kinds->name; ?>
                </h2>
            </div>
            <section class="menu_list">
                <?php while ($the_query->have_posts()) : $the_query->the_post(); ?>
                    <div class="menu">
                        <a href="<?php the_permalink(); ?>">
                            <figure class="menu_list_img">
                                <?php
                                $pic = get_field('pic');
                                $pic_url = $pic['url'];
                                ?>
                                <img src="<?php echo $pic_url; ?>" alt="">
                            </figure>
                        </a>
                        <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
                        <div class="menu-content">
                            <?php echo get_the_content(); ?>
                        </div>
                    </div>
                <?php endwhile; ?>
            <?php endif; ?>
            </section>
        <?php endforeach; ?>
    <?php endif; ?>

.menu_header {
  width     : 1120px;
  margin    : 0 auto;
  margin-top: 40px;
 
  .menu_title {
    text-align: center;
  }
}
 
.menu_list {
  width          : 1120px;
  margin         : 0 auto;
  margin-top     : 10px;
  display        : flex;
  flex-wrap      : wrap;
  justify-content: center;
 
  .menu:first-child {
    margin-left: 0px;
  }
 
  .menu:nth-child(4) {
    margin-left: 0px;
  }
 
  .menu {
    width      : 340px;
    margin-left: 20px;
    margin-top : 20px;
 
    a {
      text-decoration: none;
 
      .menu_list_img {
        img {
          width : 340px;
          height: 250px;
        }
      }
    }
 
    a {
      text-decoration: none;
      color          : black;
 
      .h3_menu_title {
        margin-top: 10px;
      }
    }
 
    .menu_text {
      margin-top: 5px;
    }
  }
}

▢get_termsの関数

get_termsの関数で、タクソノミーを指定して、配列のターム情報を取得しています。その後にforeachで1つずつ処理を行っています。

<?php
$menu_kinds = get_terms(array('taxonomy' => 'menu_kind'));
if (!empty($menu_kinds)) :
?>
<?php foreach ($menu_kinds as $menu_kinds) : ?>
 
(省略)
 
<?php endforeach; ?>
<?php endif; ?>

▢タームのタイトルを表示する

「<?php echo $menu_kinds->name; ?>」は、タームのタイトルを出力するためのコードです。これによって食べ物のリストの上に「フード」と、飲み物のリストの上に「ドリンク」と表示できます。

<div class="menu_header">
   <h2 class="menu_title"><?php echo $menu_kinds->name; ?></h2>
</div>

▢WP_Queryでタームの記事を表示する

記事のループはWP_Queryを使って表示させます。

 <?php
  $arg = array(
  'post_type' => 'menu',
  'posts_per_page' => -1,
  );
  $taxquerysp = array('relation' => 'AND');
  $taxquerysp[] = array(
      'taxonomy' => 'menu_kind',
      'terms' => $menu_kinds->slug,
      'field' => 'slug',
     );
   $args['tax_query'] =  $taxquerysp;
   $the_query = new WP_Query($args);
   if ($the_query->have_posts()) :
   ?>
 
(省略)
 
<?php while ($the_query->have_posts()) : $the_query->the_post(); ?>
 
(省略)
 
 <?php endwhile; ?>
 <?php endif; ?>