WordPressカスタム投稿タイプ後編：カフェメニューの表示と一覧作成

2025/08/06
BASICS
WordPressの基礎
0comments
27views
約14分で読めます
37

前回の記事では、カスタム投稿タイプ「menu_post」とタクソノミー「tax-menu」を作成し、カフェメニューのデータを投稿する方法を学習しました。

今回は、作成したカスタム投稿のデータを実際にWebサイト上で表示する方法を詳しく解説します。

今回の目標

カフェメニュー一覧ページの作成
メニューカテゴリー別の表示機能
個別メニューページの実装
カテゴリー別一覧ページの作成

前回作成したデータを使って、実用的なメニュー表示システムを構築していきましょう。

「カフェメニュー」ページの追加

まず、カフェメニューの一覧を表示する固定ページを作成します。

固定ページの追加

管理画面で固定ページ→新規追加を選択し、以下の設定で固定ページを作成してください。

タイトル：カフェメニュー
スラッグ：cafe-menu
本文：空欄でもOK

※固定ページの作成方法やスラッグの設定については、過去の記事で学習済みのため詳細は省略します。

外観メニューでカフェメニューを追加

作成した固定ページをサイトのナビゲーションメニューに追加します。

外観→メニューから、作成したカフェメニュー固定ページをメニューに追加してください。

※メニューの追加方法についても学習済みのため、詳細な手順は省略します。

カフェメニュー一覧ページの実装

固定ページ「カフェメニュー」専用のテンプレートファイルを作成します。

カフェメニューページの設計構想

このページでは、以下のような構成でメニューを表示します。

カテゴリー別グループ表示
- 「ドリンク」「フード」「デザート」など、カテゴリーごとにセクション分け
- 各カテゴリーはh2見出しで表示し、カテゴリー別一覧ページへのリンクも設置
カテゴリー内でのメニュー一覧
- 各カテゴリー内では、メニューをリスト形式で表示
- メニュー名は個別ページへのリンクとして機能
表示順序の制御
- カテゴリーは「Category Order」プラグインで設定した順序
- メニューはWordPress標準の順序（page-attributesで有効化）

この設計により、訪問者は一目でメニュー全体を把握でき、気になるカテゴリーやメニューに素早くアクセスできるようになります。

テンプレートファイルの作成

固定ページのスラッグが「cafe-menu」のため、テンプレートファイル名は page-cafe-menu.php になります。これは、WordPressの固定ページテンプレート命名規則に従ったもので、page-{スラッグ名}.php の形式で特定の固定ページ専用テンプレートを作成できます。

参考記事

投稿一覧の表示と投稿テンプレートを使った投稿の表示

WordPressの投稿一覧表示とsingle.phpを使った投稿専用テンプレートの作成方法を解説。クエリーループによる投稿一覧の実装から、固定ページとは異なるテンプレートファイルの仕組み、パーマリンクの基本概念まで、WordPress初心者向けに投稿システムの基本を実践的に説明します。

page-cafe-menu.php のコードは以下のとおりです。

page-cafe-menu.php

<?php get_header(); ?>

<?php the_content(); ?>
        
<?php
// メニューカテゴリーを term_order 順で取得
$menu_categories = get_terms(
  array(
    'taxonomy' => 'tax-menu',
    'hide_empty' => true,
    'orderby' => 'term_order',
    'order' => 'ASC'
  )
);

foreach ($menu_categories as $category) :
?>
  <h2>
    <a href="<?php echo get_term_link($category); ?>">
      <?php echo esc_html($category->name); ?>
    </a>
  </h2>

<?php
  $args = [
    'post_type' => 'menu_post',
    'post_status' => 'publish',
    'orderby' => 'menu_order',
    'order' => 'ASC',
    'posts_per_page' => -1,
    'tax_query' => array(
      array(
      'taxonomy' => 'tax-menu',
      'field' => 'term_id',
      'terms' => $category->term_id,
      ),
    ),
  ];
    
  // 現在のカテゴリーに属するメニューを取得
  $menu_query = new WP_Query($args);
?>
  <ul class="menu-list">
<?php
  while ($menu_query->have_posts()) : 
    $menu_query->the_post();
?>
    <li class="menu-item">
      <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
    </li>
<?php
  endwhile;
?>
  </ul>
<?php
  wp_reset_postdata();
  endforeach;
?>

        <p>※このページは page-cafe-menu.php テンプレートで表示されています</p>
<?php get_footer();?>

<?php get_header(); ?>

<?php the_content(); ?>
        
<?php
// メニューカテゴリーを term_order 順で取得
$menu_categories = get_terms(
  array(
    'taxonomy' => 'tax-menu',
    'hide_empty' => true,
    'orderby' => 'term_order',
    'order' => 'ASC'
  )
);

foreach ($menu_categories as $category) :
?>
  <h2>
    <a href="<?php echo get_term_link($category); ?>">
      <?php echo esc_html($category->name); ?>
    </a>
  </h2>

<?php
  $args = [
    'post_type' => 'menu_post',
    'post_status' => 'publish',
    'orderby' => 'menu_order',
    'order' => 'ASC',
    'posts_per_page' => -1,
    'tax_query' => array(
      array(
      'taxonomy' => 'tax-menu',
      'field' => 'term_id',
      'terms' => $category->term_id,
      ),
    ),
  ];
    
  // 現在のカテゴリーに属するメニューを取得
  $menu_query = new WP_Query($args);
?>
  <ul class="menu-list">
<?php
  while ($menu_query->have_posts()) : 
    $menu_query->the_post();
?>
    <li class="menu-item">
      <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
    </li>
<?php
  endwhile;
?>
  </ul>
<?php
  wp_reset_postdata();
  endforeach;
?>

        <p>※このページは page-cafe-menu.php テンプレートで表示されています</p>
<?php get_footer();?>

PHP

コードの解説

メニューカテゴリーの取得

// メニューカテゴリーを term_order 順で取得
$menu_categories = get_terms(
  array(
    'taxonomy' => 'tax-menu',
    'hide_empty' => true,
    'orderby' => 'term_order',
    'order' => 'ASC'
  )
);

// メニューカテゴリーを term_order 順で取得
$menu_categories = get_terms(
  array(
    'taxonomy' => 'tax-menu',
    'hide_empty' => true,
    'orderby' => 'term_order',
    'order' => 'ASC'
  )
);

PHP

get_terms() 関数でタクソノミー「tax-menu」のすべてのカテゴリーを取得しています。

重要なのは以下のパラメーター

taxonomy：対象のタクソノミー名
hide_empty：投稿が紐づいていないカテゴリーを非表示にするため true
orderby：Category Orderプラグインで並び替えた順序「term_order 」
order：昇順で表示

カテゴリー名の表示

  <h2>
    <a href="<?php echo get_term_link($category); ?>">
      <?php echo esc_html($category->name); ?>
    </a>
  </h2>

  <h2>
    <a href="<?php echo get_term_link($category); ?>">
      <?php echo esc_html($category->name); ?>
    </a>
  </h2>

PHP

get_term_link() でカテゴリー別一覧ページへのリンクを生成し、カテゴリー名をh2タグで表示しています。

カテゴリー別メニューの取得

$args = [
  'post_type' => 'menu_post',
  'post_status' => 'publish',
  'orderby' => 'menu_order',
  'order' => 'ASC',
  'posts_per_page' => -1,
  'tax_query' => array(
    array(
      'taxonomy' => 'tax-menu',
      'field' => 'term_id',
      'terms' => $category->term_id,
    ),
  ),
];

$args = [
  'post_type' => 'menu_post',
  'post_status' => 'publish',
  'orderby' => 'menu_order',
  'order' => 'ASC',
  'posts_per_page' => -1,
  'tax_query' => array(
    array(
      'taxonomy' => 'tax-menu',
      'field' => 'term_id',
      'terms' => $category->term_id,
    ),
  ),
];

PHP

WP_Query でカスタム投稿「menu_post」から現在のカテゴリーに属するメニューを取得します。

post_type：カスタム投稿タイプを指定
orderby：順序「menu_order」で並び替えます。
posts_per_page：-1 は全件を意味します。すべての投稿を取得
tax_query：タクソノミーでの絞り込み条件

メニューリストの表示

<ul class="menu-list">
<?php
  while ($menu_query->have_posts()) : 
    $menu_query->the_post();
?>
    <li class="menu-item">
      <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
    </li>
<?php
  endwhile;
?>
</ul>

<ul class="menu-list">
<?php
  while ($menu_query->have_posts()) : 
    $menu_query->the_post();
?>
    <li class="menu-item">
      <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
    </li>
<?php
  endwhile;
?>
</ul>

PHP

標準的なWordPressのループを使って、メニューを ul リストで表示しています。各メニューには the_permalink() で個別ページへのリンクを設定しています。

表示の確認

カフェメニューページを開いて表示を確認します。

個別メニューページの実装

次に個別のメニュー詳細ページ用のテンプレートを作成します。

カスタム投稿の個別ページは、標準の投稿と同じsingle.phpテンプレートで表示されます。現状、標準の投稿は「お知らせ」として使用しており、single.phpも「お知らせ」用になっています。

せっかくですから、カフェメニュー専用のテンプレートを作成してみましょう。今回作成したカスタム投稿タイプ「menu_post」の場合、テンプレートファイル名は single-menu_post.php になります。

これは、WordPressのテンプレート階層の仕組みによるもので、以下の優先順位で適用されます。

single-{投稿タイプ名}.php（投稿タイプ名が「menu_post」の場合は single-menu_post.php）
single.php（標準の個別投稿テンプレート）

single-{投稿タイプ名}.php があれば、標準投稿とは独立したレイアウトで表示できるため、より適切な表示制御が可能になります。

single-menu_post.php

<?php get_header();?>
<?php the_content(); ?>
<p>※この投稿は single-menu_post.php テンプレートで表示されています</p>
<?php get_footer();?>

<?php get_header();?>
<?php the_content(); ?>
<p>※この投稿は single-menu_post.php テンプレートで表示されています</p>
<?php get_footer();?>

PHP

表示の確認

メニューの一覧から１つ選択してメニューの個別ページが表示されるか確認してみましょう。

個別ページが表示されない場合

前回の記事と今回の記事の流れに沿って忠実に学習を進めた場合、おそらくカフェメニューの個別ページが表示されません。index.phpが表示されていることでしょう。

前回の記事でカスタム投稿を追加する際、register_post_type で rewriteパラメーターを指定しました。前回の記事で説明した通り rewriteパラメーターを指定しない場合、投稿タイプ「menu_post」がURLに採用され、http://sample.local/menu_post/ブレンドのようなURLになります。それをrewriteによってhttp://sample.local/menu/ブレンドに変えています。すなわちWordPressが認識するURLを強制的に変えていることになります。

このような場合、管理画面から設定→パーマリンクを開いて変更を保存をクリックすることで、WordPressがURLの変更を認識できるようになります。

その後、再度カフェメニューの個別ページを確認してみてください。今度は正しく表示されていることでしょう。

カテゴリー別メニュー一覧

最後にカテゴリー別の一覧ページ用テンプレートを作成します。

カスタムタクソノミー「tax-menu」の一覧ページは、以下の優先順位でテンプレートが適用されます。

taxonomy-{カスタムタクソノミー名}.php（カスタムタクソノミー名が「tax-menu」の場合は taxonomy-tax-menu.php）
taxonomy.php（汎用カスタムタクソノミーテンプレート）
archive.php（汎用アーカイブテンプレート）

カフェメニュー専用のカテゴリー一覧表示

taxonomy-tax-menu.php を作成することで、他のカスタムタクソノミーと混在する場合でも、カフェメニュー専用のカテゴリー一覧表示が可能になります。

taxonomy-tax-menu.php

<?php get_header();?>

<?php
  
  $target = get_queried_object();

  // そのカテゴリーに属する投稿を取得
  $args = [
    'post_type' => 'menu_post',
    'post_status' => 'publish',
    'orderby' => 'menu_order',
    'order' => 'asc',
    'tax_query' => [
      [
        'taxonomy' => $target->taxonomy,
        'field' => 'term_id',
        'terms' => $target->term_id,
      ]
    ]
  ];

  $query = new WP_Query($args);

  echo '<ul class="menu-list">' . PHP_EOL;

  while ($query->have_posts()) {
    $query->the_post();

    echo '<li>'.
      '<a href="'.get_the_permalink($post->ID).'">'.get_the_title($post->ID).'</a>'.
      '</li>'.PHP_EOL;
  }

  wp_reset_postdata(); // 投稿データをリセット

  echo '</ul>' . PHP_EOL;
?>		

<p>※このページは taxonomy-tax-menu.php テンプレートで表示されています</p>
<?php get_footer();?>

<?php get_header();?>

<?php
  
  $target = get_queried_object();

  // そのカテゴリーに属する投稿を取得
  $args = [
    'post_type' => 'menu_post',
    'post_status' => 'publish',
    'orderby' => 'menu_order',
    'order' => 'asc',
    'tax_query' => [
      [
        'taxonomy' => $target->taxonomy,
        'field' => 'term_id',
        'terms' => $target->term_id,
      ]
    ]
  ];

  $query = new WP_Query($args);

  echo '<ul class="menu-list">' . PHP_EOL;

  while ($query->have_posts()) {
    $query->the_post();

    echo '<li>'.
      '<a href="'.get_the_permalink($post->ID).'">'.get_the_title($post->ID).'</a>'.
      '</li>'.PHP_EOL;
  }

  wp_reset_postdata(); // 投稿データをリセット

  echo '</ul>' . PHP_EOL;
?>		

<p>※このページは taxonomy-tax-menu.php テンプレートで表示されています</p>
<?php get_footer();?>

PHP

コードの内容は、これまで学習してきたtaxonomy.phpやarchives.phpと同じです。liタグの表示部だけが異なっています。

表示の確認

カフェメニューページでカテゴリー名をクリックするとカテゴリー別のメニュー一覧が表示されます。

タイトルの修正

タイトルが「アイスのお知らせ」のように「お知らせ」になっています。これはheader.phpのタクソノミー判定が正しくないからです。修正します。

header.php

if (is_category()) {
  $category = get_queried_object();
  echo '<h1 class="page-title">'.$category->name.'のお知らせ</h1>'.PHP_EOL;
} elseif (is_tag()) {
  $tag = get_queried_object();
  echo '<h1 class="page-title">タグ「'.$tag->name.'」のお知らせ</h1>'.PHP_EOL;
} elseif ( is_date() ) {
  $title_date = '';
  if( get_query_var('year') ) {
    $title_date .= get_query_var('year').'年';
  }
  if( get_query_var('monthnum') ) {
    $title_date .= get_query_var('monthnum').'月';
  }
  if( get_query_var('day') ) {
    $title_date .= get_query_var('day').'日';
  }

  echo '<h1 class="page-title">'.$title_date.'のお知らせ</h1>'.PHP_EOL;
} elseif (is_tax('tax-menu')) {
  $tax = get_queried_object();
  echo '<h1 class="page-title">'.$tax->name.'のメニュー</h1>'.PHP_EOL;
} elseif (is_tax()) {
  $tax = get_queried_object();
  echo '<h1 class="page-title">'.$tax->name.'のお知らせ</h1>'.PHP_EOL;
} elseif (!is_front_page()) {
echo '<h1 class="page-title">'. get_the_title() .'</h1>'.PHP_EOL;
}

if (is_category()) {
  $category = get_queried_object();
  echo '<h1 class="page-title">'.$category->name.'のお知らせ</h1>'.PHP_EOL;
} elseif (is_tag()) {
  $tag = get_queried_object();
  echo '<h1 class="page-title">タグ「'.$tag->name.'」のお知らせ</h1>'.PHP_EOL;
} elseif ( is_date() ) {
  $title_date = '';
  if( get_query_var('year') ) {
    $title_date .= get_query_var('year').'年';
  }
  if( get_query_var('monthnum') ) {
    $title_date .= get_query_var('monthnum').'月';
  }
  if( get_query_var('day') ) {
    $title_date .= get_query_var('day').'日';
  }

  echo '<h1 class="page-title">'.$title_date.'のお知らせ</h1>'.PHP_EOL;
} elseif (is_tax('tax-menu')) {
  $tax = get_queried_object();
  echo '<h1 class="page-title">'.$tax->name.'のメニュー</h1>'.PHP_EOL;
} elseif (is_tax()) {
  $tax = get_queried_object();
  echo '<h1 class="page-title">'.$tax->name.'のお知らせ</h1>'.PHP_EOL;
} elseif (!is_front_page()) {
echo '<h1 class="page-title">'. get_the_title() .'</h1>'.PHP_EOL;
}