ゼロから始めるWordPress自作テーマ #7「投稿ページをつくろう」

「ゼロから始めるWordPress自作テーマ」では、既成のテーマを使わずにゼロからWordPressサイトを構築する方法を、私のブログサイト「OUNI studio」の構築例をもとに紹介します。

WordPressの既成テーマは簡単にインストールできますが、実際にサイトを構築する際には、既成のテーマをカスタマイズするよりも、自分でテーマを作成した方が簡単な場合が多いです。自分でWordPressテーマを作れるようになれば、サイトを自由にデザインできるようになります。

第7回は「投稿ページをつくろう」です。

投稿ページをつくるには、投稿ページ用のファイルを読み込む必要があります。WordPressでは、特定のファイル名のファイルがあれば自動的にそのファイルが読み込まれる仕組みがあります。この仕組を理解して、実際に投稿ページとトップページを分けて表示させていきます。

完成形

今回の完成形は以下のようになります。

今回の完成形。トップページから投稿ページへ遷移します。

今回の記事の完成形のソースコードは以下から取得できます。

トップページと投稿ページのファイルを作成

テンプレート階層とは

WordPressには「テンプレート階層」という仕組みがあります。テンプレート階層とは、ページの内容に従って必要なファイルを読み込む仕組みです。

例えば、トップページは以下のような順序でファイルが読み込まれます。

  1. front-page.php があれば、それが読み込まれる
  2. front-page.php がない場合は home.php が読み込まれる
  3. home.php もない場合は index.php が読み込まれる

また、投稿ページは以下の順序で読み込まれます。

  1. single-post.php というファイルがあれば、それが読み込まれる
  2. single-post.php がない場合は single.php が読み込まれる
  3. single.php がない場合は singlar.php が読み込まれる
  4. singlar.php がない場合は index.php が読み込まれる

このようにファイル名と読み込まれる順序が事前に決まっています。この順序は以下のように定義されています。

WordPressのテンプレート階層の順

前段の場合は特定のページに特化していて、後段の場合は汎化しています。テンプレート階層についての詳細は、以下の公式サイトが参考になります。

テンプレート階層に沿って、トップページと投稿ページを分ける

それでは、実際にトップページと投稿ページを分けてみます。

これまでは、index.php にコードを書いていました。そのため、トップページでも投稿ページでも同じファイルが読み込まれていました。今回は、トップページは投稿一覧を表示して、投稿ページはその投稿の内容を表示させるようにします。そのために、以下のように2つのファイルに分けます。

  1. トップページは front-page.php
  2. 投稿ページは single.php

front-page.php はこれまでの index.php の内容をそのままコピペします。

そして、今回つくる投稿ページは single.php に書いていきます。

投稿ページの中身を作成する

投稿ページの中身は front-page.php よりもシンプルです。基本は front-page.php の内容と同じで、投稿の内容を the_content() で表示させています。

<!------------------------------------------------>
<!-- 投稿ページ -->
<!------------------------------------------------>
<?php get_header(); ?>

<main id="main-single">
        <?php while (have_posts()) : ?>
          
          <div id="content-single">
            <!-- 投稿を取得 -->
            <?php the_post(); ?>

            <!-- タイトル -->
            <h1 id=""><?php echo the_title(); ?></h1>
            <!-- カテゴリ -->
            <span id="new-post-category"><?php the_category(', '); ?></span>
            <!-- 投稿日時 -->
            <time id="new-post-date" datetime="<?php the_time('Y-m-d'); ?>">作成日:<?php the_time('Y.m.d'); ?></time>
          </div>

          <!-- アイキャッチ画像 -->
          <?php the_post_thumbnail('full', array( 'class' => 'img-post' ) ); ?>
		      
          <!-- 投稿のコンテンツ -->
          <div id="content-single">
            <?php the_content(); ?>
          </div>

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

<?php get_footer(); ?>

CSSについては、特殊なことはしていません。完成形の style.css を参照ください。

まとめ

今回はブログ投稿ページを作成しました。テンプレート階層の仕組みが分かったので、固定ページやカテゴリページなど他のページも同じ要領で作成することができます。

次回は、「このブログについて」や「コンタクト」などの固定ページを作ります。