【WordPressテーマの作り方 第3回】固定ページとトップページを自由にデザインしよう

「トップページだけデザインを変えたい…」
「会社概要ページってどうやって作ればいいの？」
そんなあなたへ。今回は、WordPressでよく使う固定ページテンプレートの仕組みを解説します！

固定ページをしっかり理解すれば、トップページ・下層ページ・採用ページなど、それぞれ違うデザインで作ることができるようになります。アクセシビリティやメンテナンス性を意識した“いま風”の書き方で作っていきましょう。

1. 固定ページとは？投稿との違い

固定ページは「時系列で並ばない」「カテゴリー不要」といった特徴があり、静的な情報を掲載するのに最適です。
カテゴリーやタグは通常使いません。
複雑な構造が必要ならカスタム投稿タイプも検討しましょう。

2. トップページのテンプレート階層

トップページが表示される際、WordPressは以下の順番でテンプレートを探します

2-1. 「フロントページの表示」＝固定ページ（静的）にした場合

1. front-page.php
2. page-{slug}.php → page-{id}.php → page.php
3. index.php

2-2. 「フロントページの表示」＝最新の投稿（ブログ）の場合

1. home.php（ブログ一覧）
2. index.php

補足

静的フロント＋投稿ページを別に指定したとき、フロント＝front-page.php、投稿ページ＝home.php が担当します。

3. 固定ページの基本テンプレートpage.php を作成しよう

page.php は、すべての固定ページで共通して使用されるテンプレートです。
まずは基本形を作成しておきましょう。
アクセシビリティと拡張性を高めた最小構成がこちら。

page.php

<?php get_header(); // ヘッダーを読み込み ?>

<main>
  <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    <!-- 固定ページのタイトルを表示　ページの見出し（本文側のH1） -->
    <h1><?php the_title(); ?></h1>

    <!-- 本文コンテンツを出力 -->
    <div>
      <?php the_content(); ?>
    </div>
  <?php endwhile; endif; ?>
</main>

<?php get_footer(); // フッターを読み込み ?>

💡タイトルに改行を入れたい場合は、CSSで対応しましょう（例：適宜 <br> をHTMLで入れるか、文字数制御で改行する）

• 見出し内の手動 <br> は保守性が下がります。
  → CSS で対応（word-break, hyphens, overflow-wrap, ::after擬似要素 など）か、JS で任意位置にインサート。
• H1の多重化に注意：header.phpでロゴをH1にしない（トップのみH1にする等のルール化もアリ）

4. トップページ専用テンプレート front-page.php

WordPressでは、トップページ表示に優先的に使われるテンプレートが front-page.php です。

✅ ファイル名は front-page.php にするだけ！

作成すると、自動的にトップページ用テンプレートとして読み込まれます。

front-page.php

<?php get_header(); // ヘッダーを読み込み ?>

<main class="top-main"> <!-- top-main：トップページ用のレイアウトクラス -->

  <!-- メインビジュアルセクション -->
  <section class="mv">
    <h1>Welcome to My Website!</h1>
    <p>ここにキャッチコピーなどを入れます</p>
  </section>

  <!-- サイト紹介セクション -->
  <section class="top-about">
    <h2>About</h2>
    <p>自分や会社の紹介を簡単に書きましょう</p>
  </section>
</main>

<?php get_footer(); // フッターを読み込み ?>

💡 管理画面「設定 → 表示設定」で“フロントページの表示”を「固定ページ」にしておく必要があります。

💡補足：この例では top-main や mv などのクラス名を使用していますが、これは独自のデザイン用クラスであり、テーマに応じて自由に変更・削除してOKです。最低限の構造だけで書くこともできます。

※ 反映されない場合は、「固定ページ」が選ばれていないか、対象ページが未公開状態でないかも確認しましょう。

<!-- front-page.php に the_content() を入れる場合（フロント固定ページの本文（ブロック）を出力する） -->
<main>
  <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    <?php the_content(); ?>
  <?php endwhile; endif; ?>
</main>

📝 ヒント：the_content() はブロックエディターで作られたコンテンツをそのまま出力します。テーマ側でスタイルが未調整の場合、表示が崩れることもあるので、必要に応じて CSS を調整しましょう。

5. 固定ページごとの専用テンプレートを作る

たとえば「会社情報ページだけ別のレイアウトにしたい」という場合は、テンプレートファイルにテンプレート名をつけて指定します。

5-1. スラッグに対応したテンプレート

スラッグ company のページにだけ適用。Template Name より優先度が高いピンポイント指定。
例）page-company.php または自由に page-original.php など

page-company.php

<!-- 固定ページ用のカスタムテンプレート（例：会社情報ページ） -->
<?php get_header(); ?>

<main class="company-page">
  <!-- ページタイトルを表示 -->
  <h1><?php the_title(); ?></h1>

  <!-- 固定ページの本文を表示 -->
  <div class="page-content">
    <?php the_content(); ?>
  </div>
</main>

<?php get_footer(); ?>

page-スラッグ名.php という名前は「そのスラッグと完全一致したページ」でのみ使われます。
一方、Template Name: で定義したテンプレートは、管理画面から選んで使えます。

💡 補足：page-スラッグ名.php（例：page-company.php）は Template Name: で指定したテンプレートよりも優先して使用されます。

💡 Template Name: はコメント内の1行目 or 早い段階に記述すること。
複数のコメントや空行が前にあると、WordPressが正しく読み取らない場合があります。

5-2. 管理画面で選べるテンプレート

WordPress管理画面で固定ページを開き、「ページ属性 → テンプレート」から作成したテンプレート名を選びます。

page-template-company.php

<!-- 管理画面でテンプレート選択可能にするための記述です -->
<?php
/*
Template Name: 会社情報ページ
Template Post Type: page
*/
?>

<?php get_header(); ?>

<main>
  <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    <h1><?php the_title(); ?></h1>
    <div>
      <?php the_content(); ?>
    </div>
  <?php endwhile; endif; ?>
</main>

<?php get_footer(); ?>

• 固定ページ編集画面の「テンプレート」欄から選択できるようになります。
• 複数ページで使い回したいテンプレートにおすすめです。

6. よくあるミスと注意点

• front-page.php を作っても「表示されない」場合は、表示設定が「最新の投稿」のままになっていないか確認しましょう
• 固定ページテンプレートのファイル名と、ページスラッグを混同しないように（Template Name: で管理されます）

7. まとめ：ページ単位のデザインコントロールができるように

• page.php → 固定ページ全体の基本テンプレート
• front-page.php → トップページ専用テンプレート
• Template Name を使えば、特定のページだけ独自デザインにできる

💡補足：front-page.php が存在しない場合、WordPressは次に home.php、それもなければ index.php を使用します。

「自由にページごとにレイアウトを切り替えられる」ことで、サイト制作がグッと楽しくなります！

8. 次回予告：投稿とカテゴリーの一覧・詳細ページを作ってみよう

次回は、ブログ機能として欠かせない「投稿ページ」や「アーカイブ（一覧）ページ」を作ってみます。

• 投稿一覧は archive.php、home.php
• 記事詳細は single.php

これで、ブログやお知らせ機能も完成に近づきます！お楽しみに！