single.phpとpage.phpの違いと作り方を解説【WordPress】

こんな方向けの記事になります。

本記事では、WordPressのテンプレートである「single.php」と「page.php」の違いと作り方を解説していきます。WordPressやphpの知識が無い方にも分かりやすく解説していきます。

細いカスタマイズが不要な方は、基本的にはコピペで作る事ができますのでWordPressの自作テーマを作っている方や、テーマをカスタマイズしたいという方は参考にしてみてください。

single.phpとpage.phpの違いと作り方を解説【WordPress】

下記の順番で解説していきます。

サクッと解説していきます。

single.phpとpage.phpの違い

ザックリとした違いは下記のようになります。

「投稿ページ＝single.php」「固定ページ＝page.php」と覚えておきましょう。投稿ページと固定ページの違いが分からない方もいるかもなので簡単に解説します。

投稿ページ

固定ページ

カテゴリーなどに分けて管理したいページは「投稿ページ」、カテゴリーなどは必要ないページは「固定ページ」で作るようにするとサイト全体が綺麗にまとまると思います。

基礎知識はここまでにして、実際にコードを書いてsingle.phpとpage.phpを作っていきます。

single.phpの作り方

まずは僕が使用している、テンプレのコードを紹介してから、詳しいコードを解説していこうと思います。テンプレのコードだけでもそのまま使う事ができます。

テンプレのコードは下記です。

single.php
<!-- 記事ページ -->
<section class="main_post">
    <div class="main_post_wrap">
         <div class="single_post_container">
           <?php if (have_posts()) : ?>
           <?php while (have_posts()) : the_post(); ?>
            <div class="post_meta">
                <!-- 日付 -->
                <p class="post_time"><?php the_time( get_option( 'date_format' ) ); ?></p>
                <!-- カテゴリー -->
                <p class="post_cat"><?php $cat = get_the_category(); echo $cat[0]->cat_name; ?></p>
            </div>
            <!— 記事のタイトル —>
            <h1 class="single_ttl"><?php the_title(); ?></h1>
            <article class="detail_text">
                <!-- アイキャッチ画像 -->
                <p class="single_thumb"><?php if(has_post_thumbnail()) { the_post_thumbnail(); } ?></p>
                <!-- 記事の本文 -->
                <div class="post_body"><?php the_content();?></div>
            </article>

            <?php endwhile; ?>
            
            <?php else : ?>
                <div>記事が存在していないです。</div>
            <?php endif; ?>

         </div>
         <!-- サイトバー -->
        <?php get_sidebar(); ?>
    </div>
</section>

上記のコードをsingle.phpのファイルにコピペすれば、すぐに使用する事ができます。HTMLのコードは僕用にカスタマイズしてありますので、微妙な方は自分用に変えて大丈夫です。phpのコードをいじらなければエラーは出ないと思います。

重要なコードだけ解説していきます。

記事の取得

single.php
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>

    <!-- 記事のデザイン -->

<?php endwhile; ?>
<?php else : ?>
    <div>記事が存在していないです。</div>
<?php endif; ?>

if文からendifというコードの間が記事を表示する部分のコードになります。「もし記事があったらwhile文で記事をループさせる」という処理です。WordPressのカスタマイズをしていくと頻繁に見る事になると思うので、何となく覚えておきましょう。

ループ処理の中のコード（記事のデザインの部分）を解説していきます。

テンプレートタグ

WordPressで使う事ができる専用のコードですね。カテゴリーやタイトルを表示させる時にします。今回使っているテンプレートタグは下記の通りです。

PHP
<!-- 日付 -->
<?php the_time( get_option( 'date_format' ) ); ?>
<!-- カテゴリー -->
<?php $cat = get_the_category(); echo $cat[0]->cat_name; ?>
<!-- 記事のタイトル -->
<?php the_title(); ?>
<!-- アイキャッチ画像 -->
<?php if(has_post_thumbnail()) { the_post_thumbnail(); } ?>
 <!-- 記事の本文 ->
<?php the_content();?>

上記が今回使っているテンプレートタグです。表示したい箇所に書くだけで使う事ができます。他にも便利なテンプレートタグがあり、下記の記事で詳しく解説していますので参考にどうぞ。

【頻出】よく使う便利なテンプレートタグ一覧【WordPress入門】

page.phpの作り方

僕の場合は、投稿ページと固定ページのデザインは同じにしてあるので、ほとんど同じコードです。

page.php
<!-- 記事ページ -->
<section class="main_post">
    <div class="main_post_wrap">
         <div class="single_post_container">
           <?php if (have_posts()) : ?>
           <?php while (have_posts()) : the_post(); ?>
            <div class="post_meta">
                <!-- 日付 -->
                <p class="post_time"><?php the_time( get_option( 'date_format' ) ); ?></p>
            </div>
            <!— 記事のタイトル —>
            <h1 class="single_ttl"><?php the_title(); ?></h1>
            <article class="detail_text">
                <!-- アイキャッチ画像 -->
                <p class="single_thumb"><?php if(has_post_thumbnail()) { the_post_thumbnail(); } ?></p>
                <!-- 記事の本文 -->
                <div class="post_body"><?php the_content();?></div>
            </article>

            <?php endwhile; ?>
            
            <?php else : ?>
                <div>記事が存在していないです。</div>
            <?php endif; ?>

         </div>
         <!-- サイトバー -->
        <?php get_sidebar(); ?>
    </div>
</section>

上記が固定ページのテンプレのコードです。

固定ページはカテゴリーがないので、カテゴリーを表示するコードを消しただけで後はsingle.phpと同じ構造になっています。page.phpのファイルにコピペしたら完成です。

固定ページは違うデザインにしたいという方はHTMLの構造などを自分でカスタマイズして使用してください。テンプレートタグの使い方が理解できれば後は自由にカスタマイズできると思います。

僕の他にもWordPressの記事を書いていますので、是非参考にしてみてください。またな。