カスタム投稿タイプで「商品」を作る

シマエナガ堂の完成形には「商品」のページがありました。商品は日付順のお知らせとも、1枚ものの会社案内とも性格が違う——独立した記事の種類として管理したいデータです。それを可能にするのが、このコースの山場、カスタム投稿タイプです。

カスタム投稿タイプ＝記事の種類を自分で増やす

WordPressに最初からある記事の種類は「投稿」と「固定ページ」の2つ。カスタム投稿タイプは、そこに「商品」「実績」「スタッフ紹介」など、サイト専用の種類を追加する仕組みです。

追加すると、管理画面の左メニューに専用の項目が生まれ、投稿とは別の箱で記事を管理できます。企業サイト制作では、ほぼ必ず登場する道具です。

register_post_typeで「商品」を登録

functions.phpに追記します。今回の主役、register_post_typeです。

// カスタム投稿タイプ「商品」
function shimaenagado_post_types() {
  register_post_type('shohin', [
    'labels' => [
      'name'          => '商品',
      'singular_name' => '商品',
      'add_new_item'  => '商品を追加',
    ],
    'public'       => true,              // サイトに表示する
    'has_archive'  => true,              // 一覧ページを持つ
    'menu_icon'    => 'dashicons-cart',  // メニューのアイコン
    'supports'     => ['title', 'editor', 'thumbnail'],
    'show_in_rest' => true,              // ブロックエディタで編集
  ]);
}
add_action('init', 'shimaenagado_post_types');

大事なところだけ拾うと——

保存すると、管理画面の左メニューにカートのアイコンの「商品」が出現します。試しに商品を2〜3件登録してみましょう（アイキャッチ画像も付けると後で映えます）。

専用テンプレート：名指しの網を張る

テンプレート階層のレッスンで予告した名指しの担当の出番です。投稿タイプIDを名前に含めると、専用テンプレートになります。

• archive-shohin.php——商品の一覧ページ担当
• single-shohin.php——商品の詳細ページ担当

<?php get_header(); ?>

<h1 class="page-heading">商品</h1>

<main class="section">
  <div class="cards">
    <?php while (have_posts()) : the_post(); ?>
      <a class="card" href="<?php the_permalink(); ?>">
        <?php the_post_thumbnail('medium', ['class' => 'card-thumb']); ?>
        <h2><?php the_title(); ?></h2>
      </a>
    <?php endwhile; ?>
  </div>
</main>

<?php get_footer(); ?>

the_post_thumbnail()は、functions.phpで解禁したアイキャッチ画像を表示する関数です。カード型のCSSも足します。

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}
.card {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  overflow: hidden;
  color: #333;
  text-decoration: none;
}
.card-thumb {
  width: 100%;
  height: 140px;
  object-fit: cover;
  display: block;
}
.card h2 {
  font-size: 15px;
  margin: 10px 14px;
  border: none;
  padding: 0;
}

詳細ページ（single-shohin.php）は、まずsingle.phpをコピーして日付の行を消すだけでOK。商品らしい情報（価格・サイズ）の表示は、次のレッスンのカスタムフィールドで仕上げます。

トップページにも商品を並べる

front-page.phpに、WP_Queryの注文書をもう1枚書けば、トップにも商品が並びます。注文書の書き方は、お知らせのときとまったく同じ——post_typeを'shohin'に変えるだけです。

<section class="section">
  <h2>商品</h2>
  <?php
  $shohin = new WP_Query([
    'post_type'      => 'shohin',
    'posts_per_page' => 3,
  ]);
  ?>
  <div class="cards">
    <?php while ($shohin->have_posts()) : $shohin->the_post(); ?>
      <a class="card" href="<?php the_permalink(); ?>">
        <?php the_post_thumbnail('medium', ['class' => 'card-thumb']); ?>
        <h2><?php the_title(); ?></h2>
      </a>
    <?php endwhile; wp_reset_postdata(); ?>
  </div>
</section>

このレッスンのまとめ

1. カスタム投稿タイプ＝記事の種類を自分で増やす仕組み。register_post_type('shohin', […])で管理画面に専用メニューが生まれる
2. 専用テンプレートは名指しの網——archive-shohin.phpとsingle-shohin.php
3. 追加直後の404は「設定」→「パーマリンク」を保存し直すだけで直る（定番の1手）