WordPressテーマを自作しよう（8）トップページと記事ページで別のものを表示する

前回の記事で、アイキャッチを表示できるようになりました。

今のところ、記事の一覧と単体での表示ができていますが、一覧と単体で表示されるものが全く同じです。
例えばアイキャッチの表示サイズを一覧では小さくするとか、記事の内容は一覧では表示しないとか、状況に応じて表示するもの・レイアウトを切り替えたくなってきましたね。

今回は、トップページ（記事一覧）と記事単体で別のものを表示できるようにしてみましょう。

テンプレートファイルを追加して切り替える

WordPressでは、閲覧しようとしているページに対応したファイルが呼び出される「テンプレートファイル」という仕組みがあります。
現在は index.php しか作成していないのでこれしか呼ばれませんが、記事単体ページに対応したテンプレートファイルを作成すればそちらが優先して呼び出されるようになります（index.phpは対応するテンプレートファイルが存在する時に呼び出されるファイルです）

テンプレートファイルは細かく分けるとたくさんありますが、今回は記事単体、つまり「投稿した記事の詳細を表示するページ」のテンプレートファイル「single.php」だけ追加してみましょう。

• WordPressのテンプレートファイルの種類と使い方を覚える
• File:Template Hierarchy.png（英語）

1. index.phpをコピーして single.phpを作成する

今ある index.phpファイルをコピーして、新しい方を single.php という名前にしましょう。

このシリーズ記事に沿って作成していた場合、こんなかんじの内容になっていると思います。

<?php get_header(); ?>

<?php if ( have_posts() ) : ?>
  <!-- 記事を探し、1つずつデータを拾って処理を繰り返すループ -->
  <?php while ( have_posts() ) : the_post(); ?>
  <!-- ループ内処理　ここから -->

  <article class="contents-list">
	  <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
    <?php the_time('（投稿日時： Y年n月j日 H:i）'); ?>
    <?php the_modified_time('（更新日時： Y年n月j日 H:i）'); ?><br/>
    <?php 
    if ( has_post_thumbnail() ) { // 投稿にアイキャッチ画像が割り当てられているかチェックします。
      the_post_thumbnail();
    } 
    ?>
    <?php the_content(); ?>
  </article>

  <!-- ループ内処理　ここまで -->
  <?php endwhile;?>
<?php else : ?>
  <!-- 記事が1件も見つからなかった時に表示される -->
  お探しの記事は見つかりませんでした。<br/>
<?php endif; ?>

<?php get_footer(); ?>

試しにアイキャッチ画像と記事の内容は、はトップページでは表示しないようにしてみましょう。
index.php の方だけ12-17行目を削除します。

<?php get_header(); ?>

<?php if ( have_posts() ) : ?>
  <!-- 記事を探し、1つずつデータを拾って処理を繰り返すループ -->
  <?php while ( have_posts() ) : the_post(); ?>
  <!-- ループ内処理　ここから -->

  <article class="contents-list">
	  <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
    <?php the_time('（投稿日時： Y年n月j日 H:i）'); ?>
    <?php the_modified_time('（更新日時： Y年n月j日 H:i）'); ?><br/>
  </article>

  <!-- ループ内処理　ここまで -->
  <?php endwhile;?>
<?php else : ?>
  <!-- 記事が1件も見つからなかった時に表示される -->
  お探しの記事は見つかりませんでした。<br/>
<?php endif; ?>

<?php get_footer(); ?>

そしたら実際に表示してみましょう。

記事一覧は下のようにシンプルに、

アイキャッチ画像は記事単体でだけ表示されるようになったはずです。

条件分岐タグを使って状況を知る

状況に応じて表示内容を変更する方法は、シチュエーションに合ったテンプレートファイルを用意する以外にもあります。

「今表示されているのは何？」を知ることができる「条件分岐タグ」という仕組みがあります。

• 条件分岐タグ

今回の例だと「記事詳細ページか？」を区別すればいいので、次のように書きます。

if (is_single()){
	//投稿記事の詳細ページ
}else{
	//その他のページ
}

条件分岐タグを駆使すれば index.php だけでいろいろなシチュエーションに対応できますが、使いすぎてコードがぐちゃぐちゃになって、何をやってたんだかわからなくなってしまうと後が大変です。

基本的にはテンプレートファイルを作って大まかなレイアウト切り替えを行い、条件分岐タグは header.phpや footer.phpの一部をちょっと変えたくなった時などに使用すると良いでしょう。

まとめ

記事詳細だけ表示内容を変更したい時は index.php をコピーして single.php を作成し、そちらを書き換えるようにしましょう。
もしくは、条件分岐タグの「is_single」を使用すれば「記事詳細ページか？」を区別することができます。