WordPress Tips | 投稿・固定ページ運用：カスタムテンプレートで記事タイプ別デザイン

web Web
スポンサーリンク
スポンサーリンク

記事タイプ別デザインという発想

WordPressで投稿や固定ページを運用していると、「このタイプの記事だけレイアウトを変えたい」「レビュー記事はレビューらしい見た目にしたい」「ニュース記事は情報をコンパクトに並べたい」といった欲求が必ず出てきます。こうしたニーズに応える仕組みが「カスタムテンプレート」で、記事タイプ（投稿・固定ページ・カスタム投稿タイプ）ごとにデザインを変えるための土台になります。

ここでいう「記事タイプ別デザイン」とは、単に色を変えるだけではなく、次のようなことを指します。

  • レビュー記事には星評価やスペック表を必ず表示する
  • ポートフォリオ記事には大きなギャラリーを配置する
  • コラム記事には読みやすい幅と余白を確保する

こうした「コンテンツの性格に合わせたレイアウト」を記事タイプごとに用意しておくと、読者にとっても分かりやすく、書き手にとっても「型」ができて楽になります。

記事タイプとテンプレート階層の基本をかみ砕く

記事タイプとは何か

WordPressには、代表的な記事タイプとして次のものがあります。

  • 投稿（post）：ブログ記事やニュースなど、時系列で並ぶコンテンツ
  • 固定ページ（page）：会社概要、問い合わせ、サービス紹介など、階層構造を持つコンテンツ
  • カスタム投稿タイプ（CPT）：レビュー、商品、事例、イベントなど、用途に応じて追加する独自の記事タイプ

「記事タイプ別デザイン」を考えるときは、「どのタイプにどんなレイアウトを与えたいか」をまず整理すると、後の実装がスムーズになります。

テンプレート階層のざっくりイメージ

クラシックテーマ（PHPベースのテーマ）では、WordPressが「どのテンプレートファイルを使うか」を決めるためのルール（テンプレート階層）が用意されています。

代表的なものだけ挙げると次の通りです。

  • index.php：最後の砦。何もなければこれが使われる
  • single.php：投稿（post）の単一記事表示
  • page.php：固定ページ（page）の単一ページ表示
  • single-{post_type}.php：カスタム投稿タイプの単一記事表示
  • archive-{post_type}.php：カスタム投稿タイプの一覧表示

この「ファイル名のルール」を利用して、記事タイプごとに別のテンプレートを用意するのが、クラシックテーマでの基本的なやり方です。

クラシックテーマで記事タイプ別デザインを作る

例題：レビュー用カスタム投稿タイプ review を作る

まず、「レビュー記事専用の記事タイプ」を作るイメージで進めてみます。

functions.php に、シンプルなカスタム投稿タイプ登録コードを書きます。

<?php
// レビュー用カスタム投稿タイプの登録
function my_register_review_post_type() {
    $labels = [
        'name'          => 'レビュー',
        'singular_name' => 'レビュー',
    ];

    $args = [
        'label'        => 'レビュー',
        'labels'       => $labels,
        'public'       => true,
        'show_in_rest' => true, // ブロックエディタ対応
        'supports'     => [ 'title', 'editor', 'thumbnail', 'excerpt' ],
        'has_archive'  => true,
    ];

    register_post_type( 'review', $args );
}
add_action( 'init', 'my_register_review_post_type' );
PHP

これで、管理画面に「レビュー」というメニューが増え、review という記事タイプで投稿できるようになります。

single-review.php でレビュー記事専用テンプレートを作る

次に、「レビュー記事だけ特別なレイアウトにする」ためのテンプレートファイルを作ります。

  1. テーマフォルダにある single.php をコピーして、single-review.php という名前で保存します。
  2. 中身をレビュー用に編集します。

例として、星評価とスペック表を表示するテンプレートの骨組みを示します。

<?php
// single-review.php

get_header(); ?>

<main id="primary" class="content-area review-single">
  <?php
  if ( have_posts() ) :
    while ( have_posts() ) : the_post(); ?>

      <article <?php post_class(); ?>>
        <header class="review-header">
          <h1 class="review-title"><?php the_title(); ?></h1>
          <div class="review-meta">
            <span class="review-date"><?php echo get_the_date(); ?></span>
            <span class="review-author"><?php the_author(); ?></span>
          </div>
        </header>

        <section class="review-rating">
          <h2>評価</h2>
          <?php
          // 例：カスタムフィールドに保存した星評価を表示
          $rating = get_post_meta( get_the_ID(), 'rating', true );
          if ( $rating ) {
              echo '<p>星 ' . esc_html( $rating ) . ' / 5</p>';
          }
          ?>
        </section>

        <section class="review-specs">
          <h2>スペック</h2>
          <?php
          // 例：スペック表用のカスタムフィールドを表示
          $specs = get_post_meta( get_the_ID(), 'specs', true );
          if ( $specs ) {
              echo wp_kses_post( wpautop( $specs ) );
          }
          ?>
        </section>

        <section class="review-content">
          <h2>レビュー本文</h2>
          <?php the_content(); ?>
        </section>
      </article>

    <?php endwhile;
  endif;
  ?>
</main>

<?php
get_footer();
PHP

このように、single-review.php の中で「レビュー記事なら必ず表示したい要素」をレイアウトしておくと、review タイプの記事だけがこのテンプレートで表示されるようになります。

archive-review.php でレビュー一覧専用デザインを作る

一覧ページも記事タイプ別にデザインできます。

<?php
// archive-review.php

get_header(); ?>

<main id="primary" class="content-area review-archive">
  <header class="archive-header">
    <h1 class="archive-title">レビュー一覧</h1>
  </header>

  <?php if ( have_posts() ) : ?>
    <div class="review-list">
      <?php while ( have_posts() ) : the_post(); ?>
        <article <?php post_class( 'review-item' ); ?>>
          <h2 class="review-item-title">
            <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
          </h2>
          <?php if ( has_post_thumbnail() ) : ?>
            <div class="review-item-thumb">
              <?php the_post_thumbnail( 'medium' ); ?>
            </div>
          <?php endif; ?>
          <div class="review-item-excerpt">
            <?php the_excerpt(); ?>
          </div>
        </article>
      <?php endwhile; ?>
    </div>

    <?php the_posts_pagination(); ?>

  <?php else : ?>
    <p>レビューがまだありません。</p>
  <?php endif; ?>
</main>

<?php
get_footer();
PHP

これで、「レビュー一覧ページだけカード型レイアウトにする」といったことが簡単に実現できます。

ブロックテーマで記事タイプ別デザインを作る

クラシックテーマでは PHP ファイル名でテンプレートを切り替えましたが、ブロックテーマでは「テンプレートファイル（.html）」と「theme.json の設定」で記事タイプ別デザインを作るのが基本になります。

theme.json の customTemplates でカスタムテンプレートを登録する

ブロックテーマでは、theme.json に customTemplates プロパティを追加することで、投稿・固定ページ・カスタム投稿タイプ向けのカスタムテンプレートを登録できます。

例として、「レビュー記事用のテンプレート」を投稿とカスタム投稿タイプ review に使えるようにする設定を示します。

{
  "version": 2,
  "customTemplates": [
    {
      "name": "single-review-layout",
      "title": "レビュー記事レイアウト",
      "postTypes": [ "post", "review" ]
    }
  ]
}

ここでのポイントは次の通りです。

  • name：テンプレートファイル名（拡張子なし）と対応します
  • title：エディタ上に表示されるテンプレート名
  • postTypes：このテンプレートを選択できる記事タイプの一覧

この設定をすると、投稿・レビュー記事の編集画面の「テンプレート」セレクタに「レビュー記事レイアウト」が表示されるようになります。

/templates/single-review-layout.html でレイアウトを定義する

theme.json に登録したテンプレート名に対応する .html ファイルを、テーマの /templates フォルダに作成します。

例として、レビュー記事用のブロックテンプレートを簡単に書いてみます。

<!-- templates/single-review-layout.html -->

<!-- wp:template-part {"slug":"header","area":"header"} /-->

<!-- wp:group {"tagName":"main","className":"review-single"} -->
  <!-- wp:post-title {"level":1,"className":"review-title"} /-->

  <!-- wp:group {"className":"review-meta"} -->
    <!-- wp:post-date /-->
    <!-- wp:post-author /-->
  <!-- /wp:group -->

  <!-- wp:group {"className":"review-rating"} -->
    <!-- wp:heading {"level":2} -->
      <h2>評価</h2>
    <!-- /wp:heading -->
    <!-- ここにカスタムブロックやメタ情報表示ブロックを追加 -->
  <!-- /wp:group -->

  <!-- wp:group {"className":"review-content"} -->
    <!-- wp:heading {"level":2} -->
      <h2>レビュー本文</h2>
    <!-- /wp:heading -->
    <!-- wp:post-content /-->
  <!-- /wp:group -->
<!-- /wp:group -->

<!-- wp:template-part {"slug":"footer","area":"footer"} /-->

このテンプレートを作っておくと、投稿・レビュー記事の編集画面で「テンプレート → レビュー記事レイアウト」を選ぶだけで、ヘッダー・フッターを含むレビュー専用レイアウトが適用されます。

記事タイプ別レイアウトの具体的な設計例

レビュー記事テンプレートの設計ポイント

レビュー記事のように「構造が決まっているコンテンツ」は、テンプレートで型を作っておくと非常に書きやすくなります。

よくある構成例：

  • タイトル＋基本情報（著者・日付）
  • 星評価・点数
  • スペック表
  • メリット・デメリット
  • 総評

クラシックテーマなら single-review.php に、ブロックテーマなら single-review-layout.html に、この構成をあらかじめ組み込んでおきます。

ブロックテーマの例をもう少し詳しく書くと、次のようなテンプレートになります。

<!-- wp:group {"tagName":"main","className":"review-single"} -->
  <!-- タイトル -->
  <!-- wp:post-title {"level":1,"className":"review-title"} /-->

  <!-- 基本情報 -->
  <!-- wp:group {"className":"review-meta"} -->
    <!-- wp:post-date /-->
    <!-- wp:post-author /-->
  <!-- /wp:group -->

  <!-- 評価 -->
  <!-- wp:group {"className":"review-rating"} -->
    <!-- wp:heading {"level":2} -->
      <h2>評価</h2>
    <!-- /wp:heading -->
    <!-- ここに星評価用のカスタムブロックを配置 -->
  <!-- /wp:group -->

  <!-- スペック -->
  <!-- wp:group {"className":"review-specs"} -->
    <!-- wp:heading {"level":2} -->
      <h2>スペック</h2>
    <!-- /wp:heading -->
    <!-- wp:paragraph -->
      <p>スペック表をここに挿入します。</p>
    <!-- /wp:paragraph -->
  <!-- /wp:group -->

  <!-- 本文 -->
  <!-- wp:group {"className":"review-content"} -->
    <!-- wp:heading {"level":2} -->
      <h2>レビュー本文</h2>
    <!-- /wp:heading -->
    <!-- wp:post-content /-->
  <!-- /wp:group -->
<!-- /wp:group -->

こうしておくと、著者は「星評価」「スペック」「本文」を埋めるだけで、毎回同じ構造のレビュー記事を作れるようになります。

コラム記事テンプレートの設計ポイント

コラム記事は、レビューほど構造が固定されていないものの、「読みやすさ」を重視したレイアウトにすることが多いです。

よくある構成例：

  • 大きめのタイトル
  • 広めの行間・余白
  • 目次ブロック
  • 本文のみをシンプルに表示

ブロックテーマなら、次のようなテンプレートを用意できます。

<!-- templates/single-column-layout.html -->

<!-- wp:template-part {"slug":"header","area":"header"} /-->

<!-- wp:group {"tagName":"main","className":"column-single","style":{"spacing":{"blockGap":"1.5rem"}}} -->
  <!-- wp:post-title {"level":1,"className":"column-title"} /-->

  <!-- wp:group {"className":"column-toc"} -->
    <!-- 目次ブロック（プラグインなど）をここに配置 -->
  <!-- /wp:group -->

  <!-- wp:post-content /-->
<!-- /wp:group -->

<!-- wp:template-part {"slug":"footer","area":"footer"} /-->

theme.json の customTemplates にこのテンプレートを登録し、コラム記事用のカテゴリーやカスタム投稿タイプで選べるようにしておけば、「コラムだけ読みやすいレイアウトにする」といった運用が簡単になります。

初心者向けステップバイステップまとめ

最後に、「プログラミング初心者が記事タイプ別デザインを始めるときの流れ」を整理します。

クラシックテーマの場合

  1. どんな記事タイプを作りたいか決める
    • 例：レビュー、事例、イベントなど
  2. functions.php でカスタム投稿タイプを登録する
    • register_post_type() を使う（上の例を参考にする）
  3. single.php をコピーして single-{post_type}.php を作る
    • 例：single-review.php
  4. そのテンプレートの中で、記事タイプに合ったレイアウトを組む
    • 見出し・メタ情報・カスタムフィールドなどを配置する
  5. 必要なら archive-{post_type}.php も作る
    • 一覧ページ専用のレイアウトを用意する

ブロックテーマの場合

  1. どんな記事タイプにどんなレイアウトを与えたいか決める
  2. theme.json の customTemplates にカスタムテンプレートを登録する
    • name・title・postTypes を設定する
  3. /templates/{name}.html を作成し、ブロックでレイアウトを定義する
    • ヘッダー・フッターのテンプレートパーツを呼び出しつつ、本文部分を記事タイプに合わせて設計する
  4. 投稿・固定ページ・カスタム投稿タイプの編集画面でテンプレートを選ぶ
    • サイドバーの「テンプレート」セレクタから選択する
  5. 必要に応じて、テンプレートパーツやパターンと組み合わせて柔軟に拡張する

まとめ：記事タイプ別デザインで「コンテンツの性格」を伝える

カスタムテンプレートを使って記事タイプ別デザインを行うと、「どの記事も同じ見た目」から一歩進んで、「コンテンツの性格に合った見せ方」ができるようになります。

  • レビューならレビューらしい構造
  • コラムなら読みやすさ重視のレイアウト
  • 事例ならビフォー・アフターや成果を強調する構成

こうした「型」をテンプレートとして事前に用意しておくことで、書き手は内容に集中でき、読者はどのページに来ても迷わず情報を受け取れるようになります。

最初は1つのカスタム投稿タイプと1つのカスタムテンプレートからで構いません。自分のサイトにとって重要な記事タイプを選び、そのコンテンツにふさわしいレイアウトを「テンプレート」という形で育てていく感覚で、少しずつ記事タイプ別デザインに取り組んでみてください。

スポンサーリンク
タイトルとURLをコピーしました