2025年08月07日[木曜日]

カスタム投稿の総仕上げ － 商品情報の充実でメニューシステムを完成させよう

  • 2025/08/06
  • BASICS
  • WordPressの基礎
  • 0comments
  • 35views
  • 約24分で読めます
  • 38

前編・後編を通してカスタム投稿タイプ「カフェメニュー」の基本的な作成と表示方法を学習してきました。

今回は総仕上げとして、商品情報の充実を図ります。抜粋（概要）、アイキャッチ（サムネイル）、サイズ別価格（カスタムフィールド）の実装を通して、より実用的なメニューシステムを完成させましょう。

今回の目標

現在のカフェメニューは、メニュー名とカテゴリー分類のみの基本的な情報しか表示できません。これを以下の機能を追加して、より実用的な商品情報システムに発展させます。

  1. 抜粋機能：メニューの特徴や魅力を伝える説明文の表示
  2. アイキャッチ機能：メニューの写真をサムネイル表示
  3. サイズ別価格：Sサイズ300円、Mサイズ400円のような複数価格の管理・表示
  4. 充実した個別ページ：写真、説明、価格表を含む詳細ページ
  5. 管理画面の改善：一覧で商品情報を素早く確認

これにより、実際のカフェサイトで使用できるレベルのメニューが完成します。

カスタム投稿の各項目の有効化

現在のカスタム投稿「カフェメニュー」では、タイトル・本文・並び順のみが使用できる状態です。今回実装する抜粋・アイキャッチ・カスタムフィールドを使用するには、register_post_typeのsupportsパラメーターでこれらの機能を有効化する必要があります。

functions.phpのregister_post_typeのsupportsパラメーターを以下のように修正してください。

functions.php
// functions.php内のregister_post_type部分を修正
add_action('init', function() {
  register_post_type(
    'menu_post',
    array(
      'labels' => array(
        'name' => __('カフェメニュー'),
        'all_items' => __('カフェメニュー一覧'),
        'add_new' => __('カフェメニューを追加する'),
        'add_new_item' => __('カフェメニューの追加'),
        'edit_item' => __('カフェメニューの編集'),
        'singular_name' => __('カフェメニュータイプ'),
        'new_item' => __('新しいカフェメニュー'),
        'view_item' => __('カフェメニューを見る'),
        'search_items' => __('カフェメニューを探す'),
        'not_found' => __('カフェメニューはありません'),
        'not_found_in_trash' => __('ゴミ箱にカフェメニューはありません'),
      ),
      'public' => true,
      'hierarchical' => false,
      'supports' => array(
        'title',          // タイトル（従来通り）
        'editor',         // 本文（従来通り）
        'page-attributes', // 並び順（従来通り）
        'excerpt',        // 抜粋を有効化【新規追加】
        'thumbnail',      // アイキャッチを有効化【新規追加】
        'custom-fields'   // カスタムフィールドを有効化【新規追加】
      ),
      'rewrite' => array(
        'slug' => 'menu',
        'with_front' => false,
      ),
      'menu_icon' => 'dashicons-food',
    )
  );
});
PHP

アイキャッチ画像のサポート追加

上記でthumbnailを有効にしましたが、これだけではアイキャッチ機能は使用できません。テーマ全体でアイキャッチ画像をサポートする設定も必要です。

functions.phpに以下のコードを追加してください。

functions.php
// アイキャッチ画像サポートを有効化
add_theme_support('post-thumbnails');
PHP

これで抜粋・アイキャッチ・カスタムフィールドを設定する準備が整いました。

抜粋機能の実装

抜粋とは？

抜粋（excerpt）は、投稿の要約や概要を表示するためのWordPress標準機能です。一覧ページで全文を表示する代わりに、短い説明文を表示することで、ユーザーに概要を伝えることができます。今回は各メニューの特徴や魅力を伝える説明文として活用します。

カフェメニューの各項目に抜粋を登録

WordPress管理画面から「カフェメニュー」の編集画面を開きます。supportsでexcerptを有効にしたことで、編集画面に「抜粋」欄が表示されるようになります。

各メニューに以下のような抜粋を追加してください。

ブレンド

当店自慢のオリジナルブレンド。苦味と酸味のバランスが絶妙で、どなたでも飲みやすい味わいです。

エスプレッソ

濃厚で香り高いエスプレッソ。厳選されたコーヒー豆を使用し、本格的なイタリアンスタイルでお楽しみいただけます。

カフェメニューページと一覧に抜粋を表示

page-cafe-menu.phpの修正

カフェメニュー一覧ページ（page-cafe-menu.php）に抜粋を表示するよう修正します。

修正内容

各メニュー項目の表示部分で、メニュー名の下に抜粋を追加します。具体的には以下の変更を行います。

  1. <li>内の構造を整理して<div class="menu-content">で囲む
  2. メニュー名を<h3>タグに変更
  3. has_excerpt()で抜粋の有無を確認し、the_excerpt()で表示
page-cafe-menu.php
<ul class="menu-list">
    <?php
    while ($menu_query->have_posts()) :
        $menu_query->the_post();
    ?>
        <li class="menu-item">
            <div class="menu-content">
                <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
                <?php if (has_excerpt()) : ?>
                    <p class="menu-excerpt"><?php the_excerpt(); ?></p>
                <?php endif; ?>
            </div>
        </li>
    <?php
    endwhile;
    ?>
</ul>
PHP

taxonomy-tax-menu.phpの修正

修正内容

カテゴリー別一覧ページにも同様に抜粋を追加します。

カテゴリー別一覧ページ（taxonomy-tax-menu.php）にも抜粋を表示します。

修正内容

page-cafe-menu.phpと同様に、各メニュー項目に抜粋を追加します。前回作成した簡単なリスト表示から、構造化された表示に変更します。

PHP
<ul class="menu-list">
    <?php
    while ($query->have_posts()) :
        $query->the_post();
    ?>
        <li class="menu-item">
            <div class="menu-content">
                <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
                <?php if (has_excerpt()) : ?>
                    <p class="menu-excerpt"><?php the_excerpt(); ?></p>
                <?php endif; ?>
            </div>
        </li>
    <?php
    endwhile;
PHP

表示の確認

カフェメニューページを開いて抜粋が表示されることを確認しましょう。同じくカテゴリー別一覧ページにも抜粋が表示されることを確認してください。

アイキャッチ機能の実装

アイキャッチとは

アイキャッチ画像は、投稿やページを代表する画像です。一覧ページでのサムネイル表示や、記事のヘッダー画像として使用されます。メニューの場合は、商品の写真として活用できます。

カフェメニューの各項目にアイキャッチを登録

WordPress管理画面から各カフェメニューの編集画面を開き、アイキャッチ画像を設定からメニューの写真をアップロードして設定してください。

カフェメニューページと一覧にアイキャッチを表示

page-cafe-menu.phpの修正

アイキャッチ画像を表示するよう、さらに修正します。

修正内容

各メニュー項目に画像表示エリアを追加します。

  1. has_post_thumbnail()でアイキャッチの有無を確認
  2. <div class="menu-thumbnail">でサムネイル表示エリアを作成
  3. the_post_thumbnail('thumbnail')でサムネイルサイズの画像を表示
  4. 画像にも個別ページへのリンクを設定
PHP
<ul class="menu-list">
    <?php
    while ($menu_query->have_posts()) :
        $menu_query->the_post();
    ?>
        <li class="menu-item">
            <div class="menu-content">
                <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
                <?php if (has_post_thumbnail()) : ?>
                    <div class="menu-thumbnail">
                        <a href="<?php the_permalink(); ?>">
                            <?php the_post_thumbnail('thumbnail'); ?>
                        </a>
                    </div>
                <?php endif; ?>
                <?php if (has_excerpt()) : ?>
                    <p class="menu-excerpt"><?php the_excerpt(); ?></p>
                <?php endif; ?>
            </div>
        </li>
    <?php
    endwhile;
    ?>
</ul>
PHP
the_post_thumbnailのサイズ指定

WordPressでは、以下のサイズを指定することができます。

サイズ名指定方法初期値
サムネイル‘thumbnail‘150×150
中サイズ‘medium‘300×300
大サイズ‘large‘1024×1024
フルサイズ‘full‘–
任意[幅,高さ]–

フルサイズは、画像のサイズそのままです。

任意は the_post_thumbnail([1024,768]) のように直接サイズを指定できます。

なおサムネイル、中サイズ、大サイズについては管理画面→設定→メディアからサイズを変更することができます。

画像のサイズは正方形になるわけではありません。縦横比率を維持しながら、最大の幅、最大の高さに制限がかかります。

元の画像が1920×1080で中サイズを指定した場合、the_post_thumbnailが取得するサイズは300×168となります。

taxonomy-tax-menu.phpの修正

同様にカテゴリー別一覧ページにもアイキャッチ画像を追加します。

修正内容

page-cafe-menu.phpと同じアイキャッチ表示機能を追加します。

page-cafe-menu.php
<ul class="menu-list">
  <?php
    while ($query->have_posts()) :
      $query->the_post();
  ?>
  <li class="menu-item">
    <?php if (has_post_thumbnail()) : ?>
      <div class="menu-thumbnail">
        <a href="<?php the_permalink(); ?>">
          <?php the_post_thumbnail('medium'); ?>
        </a>
      </div>
    <?php endif; ?>
    <div class="menu-content">
      <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
      <?php if (has_excerpt()) : ?>
        <p class="menu-excerpt"><?php the_excerpt(); ?></p>
      <?php endif; ?>
    </div>
  </li>
  <?php
    endwhile;
    wp_reset_postdata();
  ?>
</ul>
PHP

表示の確認

カフェメニューページを開いて画像が表示されることを確認しましょう。同じくカテゴリー別一覧ページにも画像が表示されることを確認してください。

価格の実装

価格は商品に対して１つではなく、Sサイズ300円、Mサイズ400円のような複数価格の管理・表示をしたいと思います。そこで１つの商品に対して「行」を管理できるプラグインを導入します。

Smart Custom Fieldsプラグインの導入

カスタムフィールドを簡単に管理するため、「Smart Custom Fields」プラグインをインストール・有効化してください。

管理画面からプラグイン→プラグインを追加で「Smart Custom Fields」を検索してインストールしてください。

繰り返しフィールドで「サイズ」と「価格」を追加

WordPress管理画面からSmart Custom Fields→新規追加をクリック

タイトルに「メニューの価格」（任意）を入力

フィールド追加をクリックし項目を追加します。

まずは複数のサイズに対応するため繰り返しをONにします。

グループ名を「price_group」（任意）とします。

項目を設定します。

サイズ

タイプ：テキスト

ラベル：サイズ

名前：size

さらにサブフィールドを追加をクリックし項目を追加します。

価格

タイプ：テキスト

ラベル：価格

名前：price

表示条件（投稿）で「カフェメニュータイプ」をONにします。

公開をクリックして保存します。

これでカフェメニューにサイズ別価格を入力する準備ができました。

カフェメニューの各項目にサイズと価格を登録

各カフェメニューの編集画面で、以下のような価格情報を登録してください。

ブレンド

  • Sサイズ：300円
  • Mサイズ：400円
  • Lサイズ：500円

アメリカン

  • Sサイズ：350円
  • Mサイズ：450円
  • Lサイズ：550円

エスプレッソ

  • シングル：250円
  • ダブル：350円

カフェメニューページと一覧に価格を表示

繰り返しフィールドから先頭の価格を取得して表示する機能を追加します。

page-cafe-menu.phpの修正

修正内容

各メニュー項目に価格表示を追加します。

  1. SCF::get('price_group')で価格データを取得
  2. 配列の先頭要素[0]['price']から最初の価格を取得
  3. 「300円〜」の形式で表示（複数価格があることを示すため）
page-cafe-menu.php
<ul class="menu-list">
<?php
  while ($menu_query->have_posts()) :
  $menu_query->the_post();

  // Smart Custom Fieldsの繰り返しフィールドから価格を取得
  $prices = SCF::get('price_group');
  $first_price = '';
  if (!empty($prices) && !empty($prices[0]['price'])) {
    $first_price = $prices[0]['price'] . '円〜';
  }
?>
  <li class="menu-item">
  <?php if (has_post_thumbnail()) : ?>
    <div class="menu-thumbnail">
      <a href="<?php the_permalink(); ?>">
        <?php the_post_thumbnail('medium'); ?>
      </a>
    </div>
  <?php endif; ?>
    <div class="menu-content">
      <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
      <?php if (has_excerpt()) : ?>
        <p class="menu-excerpt"><?php the_excerpt(); ?></p>
      <?php endif; ?>
      <?php if ($first_price) : ?>
        <p class="menu-price"><?php echo $first_price; ?></p>
      <?php endif; ?>
    </div>
  </li>
<?php
  endwhile;
  wp_reset_postdata();
?>
</ul>
PHP

taxonomy-tax-menu.phpの修正

カテゴリー別一覧も同じ様に修正します。

taxonomy-tax-menu.php
<ul class="menu-list">
<?php
  while ($query->have_posts()) :
    $query->the_post();

    // Smart Custom Fieldsの繰り返しフィールドから価格を取得
    $prices = SCF::get('price_group');
    $first_price = '';
    if (!empty($prices) && !empty($prices[0]['price'])) {
      $first_price = $prices[0]['price'] . '円〜';
    }
?>
  <li class="menu-item">
  <?php if (has_post_thumbnail()) : ?>
    <div class="menu-thumbnail">
      <a href="<?php the_permalink(); ?>">
      <?php the_post_thumbnail('medium'); ?>
      </a>
    </div>
  <?php endif; ?>
    <div class="menu-content">
      <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
      <?php if (has_excerpt()) : ?>
        <p class="menu-excerpt"><?php the_excerpt(); ?></p>
      <?php endif; ?>
      <?php if ($first_price) : ?>
        <p class="menu-price"><?php echo $first_price; ?></p>
      <?php endif; ?>
    </div>
  </li>
<?php
endwhile;
wp_reset_postdata();
?>
</ul>
PHP

表示の確認

カフェメニューページを開いて価格が表示されていることを確認します。

カフェメニューの個別ページ

メニューの詳細を表示

続けて、個別メニューページ（single-menu_post.php）で、本文、アイキャッチ、サイズと価格のリストを表示します。

single-menu_post.php
<?php get_header(); ?>

<?php if (has_post_thumbnail()) : ?>
  <div class="menu-image">
    <?php the_post_thumbnail('large'); ?>
  </div>
<?php endif; ?>

<div class="menu-description">
  <?php the_content(); ?>
</div>

<?php 
  // Smart Custom Fieldsの繰り返しフィールドから価格情報を取得
  $prices = SCF::get('price_group');
  if (!empty($prices)) : 
?>
  <div class="menu-prices">
    <h3>価格表</h3>
    <ul class="price-list">
    <?php
      foreach ($prices as $price_data) :
        if ( !empty($price_data['price']) ) :
    ?>
        <li class="price-item">
          <span class="size"><?php echo $price_data['size']; ?></span>
          <span class="price"><?php echo $price_data['price']; ?>円</span>
        </li>
        <?php endif; ?>
    <?php
      endforeach;
    ?>
    </ul>
  </div>
<?php
  endif;
?>

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

コードの解説

アイキャッチの表示

<?php if (has_post_thumbnail()) : ?>
  <div class="menu-image">
    <?php the_post_thumbnail('large'); ?>
  </div>
<?php endif; ?>
PHP

has_post_thumbnailでアイキャッチの有無を判定。the_post_thumbnaildで表示しています。largeを指定することで大きな画像を表示します。

価格表の表示

<?php 
  // Smart Custom Fieldsの繰り返しフィールドから価格情報を取得
  $prices = SCF::get('price_group');
  if (!empty($prices)) : 
?>
  <div class="menu-prices">
    <h3>価格表</h3>
    <ul class="price-list">
    <?php
      foreach ($prices as $price_data) :
        if ( !empty($price_data['price']) ) : 
    ?>
        <li class="price-item">
          <span class="size"><?php echo $price_data['size']; ?></span>
          <span class="price"><?php echo $price_data['price']; ?>円</span>
        </li>
        <?php endif; ?>
    <?php
      endforeach;
    ?>
    </ul>
  </div>
<?php
  endif;
?>
PHP

SCF::get('price_group') でSmart Custom Fieldsプラグインで設定した価格を取得します。価格は複数データあるためforeachループで繰り返し表示します

表示の確認

カフェメニューページからメニューを１つ選んでメニューの詳細を表示してみましょう。アイキャッチの画像、本文、価格表が表示されることを確認してください。

これで、メニュー一覧、個別メニューに抜粋、画像、価格を表示することができました。お疲れ様でした。

管理画面のカスタマイズ

最後にカフェメニューの管理画面にもアイキャッチと価格を表示して、管理効率を向上させてみましょう。

管理画面の一覧に項目を追加する方法は、以前の記事で紹介したAdmin Columnsプラグインを使用します。

関連記事

固定ページ一覧を最適化しよう！プラグインの導入とAdmin Columnsの活用

固定ページ一覧の管理を効率化するために、Admin Columnsプラグインを導入し、「スラッグ」や「順序」を一覧に表示する方法を解説します。プラグインの基本概念から導入手順、実践的な順序設定テクニックまでを丁寧に紹介し、効率的なページ管理を実現します。

カフェメニュー一覧のカスタマイズ

一覧にアイキャッチを表示するにはタイプでアイキャッチ画像を選択します。

価格を表示するにはタイプでカスタムフィールドを選択し、フィールドでpriceを選択します。価格はサイズ別に複数ありますが先頭の１件だけが表示されます。

表示オプションの後に「円～」を入れるとWebページの一覧と同じような表示になります。

列の並び順を調整して管理しやすい一覧になりました。

まとめ

今回の学習で、カスタム投稿タイプ「カフェメニュー」に以下の機能を追加しました。

実装した機能

  • 抜粋機能：メニューの概要説明を表示
  • アイキャッチ機能：商品写真の表示
  • サイズ別価格：Smart Custom Fieldsを使った繰り返しフィールド
  • 個別ページ：詳細情報の表示
  • 管理画面：一覧表示のカスタマイズ

重要なポイント

  1. register_post_typeのsupports設定：必要な機能を明示的に有効化
  2. Smart Custom Fields：繰り返しフィールドで複数の価格データを管理
  3. テンプレート階層：カスタム投稿専用テンプレートの活用
  4. データ取得：SCF::get()を使ったカスタムフィールドの取得
  5. 管理画面：カスタムカラムでの情報表示

これで実用的なカフェメニューシステムが完成しました。抜粋、画像、価格情報を含む充実したメニュー表示が可能になります。

次回予告

テンプレートとfunctions.phpの整理によるコード保守性の向上

学習が進むにつれて、各テンプレートファイルに同じようなコードが重複して記述されてきました。また、functions.phpに様々なカスタマイズ用のコードが蓄積されて、メンテナンスが困難になっています。

次回は、コードの整理整頓により保守性を向上させる技術について学習します。

テンプレートの整理

  • 共通部分の外部化：重複しているメニュー表示コードの抽出
  • get_template_partの活用：外部ファイル化したコードの読み込み
  • 再利用可能なコンポーネント：parts/menu-item.phpなどの作成

functions.phpの整理

  • 機能別ファイル分割：カスタム投稿、管理画面カスタマイズ、テーマサポートなど
  • require_onceによる読み込み管理：分割したファイルの適切な読み込み
  • コードの論理的整理：関連する機能をまとめた構造化

これらの整理により機能追加や修正が格段に行いやすくなり、保守性の高いWordPressテーマ開発の基盤が整います。

成果物

この記事で作成した成果物は、以下のページでまとめて確認することができます。

成果物をまとめて確認する

［成果物］カスタム投稿の総仕上げ － 商品情報の充実でメニューシステムを完成させよう

【カスタム投稿の総仕上げ － 商品情報の充実でメニューシステムを完成させよう】の成果物です。投稿の学びを終えた時点の構成を一覧でご確認いただけます。

この記事の評価をお願いします

評価をすると「既読」となり、まだ読んでいない記事を区別できます。

この投稿をシェアする

コメントを残す

CAPTCHA


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

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

Webサイトにカフェメニューを表示するシステムを構築します。一覧ページ、個別ページ、カテゴリー別表示の実装から、パーマリンク設定によるページ表示エラーの解決まで、実際の開発で遭遇するトラブルシューティングも含めて詳しく解説。実用的なメニュー管理システムを完成させる実践的な内容です。

  • 2025/08/06
  • 0comments
  • 29views

テンプレートとfunctions.phpの整理によるコード保守性の向上

テンプレートとfunctions.phpの整理によるコード保守性の向上  BASICS

テーマ開発が進むと複数のテンプレートでコードが重複し、管理ファイルも肥大化してメンテナンスが困難になります。重複コードの解消と機能別ファイル分割による整理整頓技術を学び、保守性が高く効率的で管理しやすい開発環境を構築する方法を詳しく解説していきます。

  • 2025/08/06
  • 0comments
  • 13views

STAY CONNECTED

wp-ch Admin

現役のフリーランスエンジニアがWordPressによるWebサイト構築を基礎から実践テクニックまで徹底解説します。

たくさんの方がフォローしてくれています。あなたもぜひ、情報を受け取ってください。

STORY｜ストーリー

WordPressを効率よく確実に学ぶためには、学習の順序が大切です。知識が自然に積み上がるよう、学習ステップに沿って記事を順番に並べています。

学習ストーリー第39話まで掲載中

全ストーリーを見る

SERIES｜シリーズ

CATEGORY｜分類

TAGS｜タグ

全てのタグを見る