情報を整理して伝える:page.php の作り方ガイド

ここまで来れば、自作テーマ制作の基本マスターまであと一歩です!

最後に解説するのは、お問い合わせページや会社概要、プロフィールなどに使われる**「固定ページ(page.php)」**の作り方です。記事詳細ページ(single.php)と構造は似ていますが、役割や「見せ方」が少し異なります。


page.php は、ブログ記事のように時系列で流れていかない「独立したコンテンツ」を表示するためのテンプレートです。情報の正確性と、読みやすさが重視されます。


1. page.php の基本構造(全体像)

固定ページでは、投稿日やカテゴリーなどの「更新情報」を表示させないのが一般的です。

PHP

<?php get_header(); ?>

<div class="container single-column"> <main class="main-content">
        <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
            <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
                
                <h1 class="page-title"><?php the_title(); ?></h1>

                <?php if ( has_post_thumbnail() ) : ?>
                    <div class="page-thumbnail">
                        <?php the_post_thumbnail( 'full' ); ?>
                    </div>
                <?php endif; ?>

                <div class="page-body">
                    <?php the_content(); ?>
                </div>

                <?php
                wp_link_pages( array(
                    'before' => '<div class="page-links">ページ:',
                    'after'  => '</div>',
                ) );
                ?>
            </article>
        <?php endwhile; endif; ?>
    </main>
</div>

<?php get_footer(); ?>

2. single.php との違い:引き算のデザイン

固定ページを作る際は、以下の要素を**「あえて表示させない」**のがコツです。

  • 日付・時刻: 「いつ書かれたか」よりも「今、何が書かれているか」が重要なため。
  • カテゴリー・タグ: 固定ページにはデフォルトでカテゴリー機能がないため。
  • 前後の記事リンク: 固定ページは時系列で並ぶものではないため。
  • サイドバー: 読者に内容に集中してもらうため、あえてサイドバーをなくして「1カラム(フルワイド)」にすることもよくあります。

3. 【応用】特定のページだけデザインを変える(カスタムテンプレート)

「お問い合わせページだけは特別なレイアウトにしたい!」という場合、WordPressでは簡単に専用のテンプレートを作ることができます。

  1. 新しく page-contact.php というファイルを作る。
  2. ファイル冒頭に以下のコード(Template Name)を書く。

PHP

<?php
/**
 * Template Name: お問い合わせ専用レイアウト
 */
?>

これをアップロードすると、WordPress管理画面の固定ページ編集画面(右側の「テンプレート」設定)で、このデザインを選択できるようになります。


4. まとめ:自作テーマに最低限必要なファイル

これまでの解説で、以下のファイルが揃いました。これだけあれば、立派なオリジナルテーマとして動作します!

ファイル名役割
style.cssテーマの基本情報とデザイン
functions.phpテーマの機能設定(頭脳)
header.php / footer.php共通の頭と足
index.php記事一覧(すべてのベース)
single.php個別のブログ記事
page.php固定ページ
sidebar.phpウィジェット表示エリア

最後に:これであなたのテーマが動き出します!

お疲れ様でした!主要なパーツはすべて網羅できました。あとはこれらのファイルに CSS(style.css) を当てて、あなた好みのデザインに染め上げるだけです。

もし「実際にブラウザで確認したけれど、デザインが崩れている」「特定の場所だけ色を変えたい」といった悩みがあれば、次は 「WordPress特有のCSSの当て方」 を学ぶのがベストです。

システム開発なんでもパートナー
システム開発なんでもパートナー

この記事を書いた人