8.WordPressテーマにhome.phpやarchive.phpなどを作成し分岐を行う

WordPressでは、独自に決められたテンプレートを追加することで、様々なページの表示を分けて出力することができます。

トップページやアーカイブページ(カテゴリやタグの一覧ページ)ページに個別の要素を追加したり、投稿や固定ページに専用のテンプレートを用意したりして、自分だけのWordPressテーマに仕上げていきましょう。

今回は、トップページやアーカイブページに加え、投稿や固定ページに様々なテンプレートを適応する方法についてご紹介します。

WordPressのテンプレートの優先順位について理解する

トップページ

トップページのテンプレートの優先順位は下記の通りになります。

優先順位(高い　>　低い)
front-page.php	home.php ※1	固定ページテンプレート ※2	index.php

※1　『設定 > 表示設定 > ホームページの表示』の設定が最新の投稿の場合。
※2　『設定 > 表示設定 > ホームページの表示』の設定が固定ページの場合。固定ページのテンプレート優先順位については、下で解説。

トップページは、『front-page.php』が最優先で表示されます。『front-page.php』は、WordPressの『設定 > 表示設定 > ホームページの表示』の設定に関係なく優先して表示されるため、トップページの表示を絶対に変えたくない場合などに使用します。

次の『home.php』は、『設定 > 表示設定 > ホームページの表示』の設定によって分岐されるテンプレートです。設定が『最新の投稿』のときは『home.php』、『固定ページ』のときは『page.php』がテンプレートとして適応されます。

アーカイブ

アーカイブページのテンプレートの優先順位は下記の通りになります。

	優先順位(高い　>　低い)
カテゴリー	category-{slug}.php	category-{ID}.php	category.php	archive.php	index.php
タグ	tag-{slug}.php	tag-{ID}.php	tag.php	archive.php	index.php
日付	date.php	archive.php	index.php
著者	author-{name}.php	author-{ID}.php	author.php	archive.php	index.php

全てのアーカイブページのベースとなるのは、『archive.php』と『index.php』で、それ以上に細かく出力を分けたい場合は、更に優先順位の高いテンプレートを作成するというイメージです。

また、各アーカイブページに大きな違いがない場合は、各テンプレートを作成するのではなく『archive.php』内で各ページごとの条件分岐を行ってコンテンツを分ける方法があります。

投稿・固定ページ

投稿・固定ページの基本的なテンプレートの優先順位は下記の通りになります。

	優先順位(高い　>　低い)
投稿	カスタムテンプレート.php	single.php	singler.php	index.php
固定ページ	カスタムテンプレート.php	page-{slug}.php	page-{ID}.php	page.php	singular.php	index.php

投稿と固定ページで、最優先されるテンプレートは『カスタムテンプレート』になります。(※作成方法については、本記事の『投稿や固定ページに様々なテンプレートを適応する』で解説します。)

デモでは、投稿と固定ページのテンプレートを『single.php』と『page.php』に分けて作成していますが、『single.php』と『page.php』を作成せずに『singler.php』を作成することで、投稿と固定ページを共通のテンプレートで出力できます。

基本的なテンプレートの優先順位については以上です。上記の他にも『カスタム投稿』『カスタムタクソノミー』『検索結果』『404』ページなどの分岐がありますが、今回は作成しないので別の記事で詳しく説明しています。

上記を踏まえた上で、各テンプレートをWordpressテーマに追加・編集していきましょう。

トップページに独自の要素とデザインを追加する

『2.WordPressテーマの骨組みをレスポンシブレイアウトに構築する』で作成したデザインに合わせて独自のトップページを作成していきます。

まずは、WordPress内の『index.php』を複製し、『home.php』ファイルを作成してください。

※管理画面の設定を反映させたい場合は『home.php』、反映させない場合は『front-page.php』を作成しましょう。

home.phpに要素を追加する

『home.php』を作成したら、TOPページに独自の要素を追加します。デモでは、一番最新の記事だけ独自のデザインで出力されるように調整します。まずは、要素を『home.php』に追加しましょう。

home.phpの<div class="container">の下に追加

<?php if ( !is_paged()): ?>
<div class="home-top">
  <?php if(have_posts()): the_post(); ?>
    <article <?php post_class( 'article-list article-top' ); ?>>
      <a href="<?php the_permalink(); ?>">
        <div class="img-wrap">
        <!--画像を追加-->
        <?php if( has_post_thumbnail() ): ?>
          <?php the_post_thumbnail('full'); ?>
        <?php else: ?>
          <img src="<?php echo get_template_directory_uri(); ?>/images/no-image.gif" alt="no-img"/>
        <?php endif; ?>
        <!--カテゴリ-->
        <?php if (!is_category() && has_category()): ?>
          <span class="cat-data">
          <?php $postcat=get_the_category(); echo $postcat[0]->name; ?>
          </span>
        <?php endif; ?>
        </div><!--end img-warp-->
        <div class="text">
          <span class="new-post"><i class="fas fa-star"></i> NEW POST</span>
          <!--タイトル-->
          <h2><?php the_title(); ?></h2>
          <!--投稿日を表示-->
          <span class="article-date">
            <i class="far fa-clock"></i>
            <time datetime="<?php echo get_the_date( 'Y-m-d' ); ?>">
              <?php echo get_the_date(); ?>
            </time>
          </span>
          <span class="article-author">
            <i class="fas fa-user"></i><?php the_author(); ?>
          </span>
          <!--抜粋-->
          <?php the_excerpt(); ?>
        </div><!--end text-->
      </a>
    </article>
  <?php endif; ?>
</div><!--end home-top;-->
<?php endif;?>

基本的な部分は、『loop-content.php』とほぼ一緒ですが、少しだけ要素を追加したり、条件分岐を追加したりしています。追加や変更点は下記の通りです。

条件分岐

<?php if ( !is_paged()): ?>
<!--ここにコンテンツを記述-->
<?php endif;?>

上記は、トップページが1ページ目なのかどうかを判別するため条件分岐です。追加することで、トップページの1ページ目のみ独自のコンテンツを表示し、ページャーで2ページ目以降に飛んだときは、独自コンテンツを表示せずに通常のループコンテンツのみ表示します。

ループ

<?php if(have_posts()): the_post(); ?>
<!--ここにコンテンツを記述-->
<?php endif; ?>

記事を出力するためのメインループは、記事を1つだけ取得するように通常のループコンテンツと違い、繰り返しの処理である『while(): ～ endwhile;』を省いて記述します。

サムネイル画像

<?php if( has_post_thumbnail() ): ?>
  <?php the_post_thumbnail('full'); ?>
<?php else: ?>
  <img src="<?php echo get_template_directory_uri(); ?>/images/no-image.gif" alt="no-img"/>
<?php endif; ?>

コンテンツが大きくなるため、呼び出すサムネイルのサイズを変更しています。『 the_post_thumbnail('full')』でフルサイズのサムネイル画像を出力してください。

NEW POSTアイコン

<span class="new-post"><i class="fas fa-star"></i> NEW POST</span>

『NEW POST』というアイコンを追加します。星マークのアイコンは、Font Awesomeのアイコンフォントで設置しています。

上記以外にも、追加する要素に独自のCSSを追加するために、『home-top』『article-top』などのclassを追加しています。

上記の要素を『home.php』に追加すると下記の画像のように出力されます。

変更点・追加点がきちんと出力されていれば、要素の追加は完了です。

home.php用のCSSを追加する

要素の出力が完了したら、トップページ用のCSSをスタイルシートに追加しましょう。

style.cssに記述

.home-top .article-top .img-wrap img {
  width: 600px;
  height: 400px;
}

.home-top .article-top .text {
  margin-left: 630px;
}

.home-top .article-top .new-post {
  font-weight: bold;
  display: block;
  margin-bottom: .5rem;
  color: #f00;
}

.home-top .article-top .text h2 {
  font-size: 1.6rem;
  margin-bottom: 1rem;
}

.home-top .article-top .text .article-date,
.home-top .article-top .text .cat-data {
  margin-bottom: 1rem;
}

@media(max-width: 1024px) {
  .home-top .article-top .img-wrap img {
    width: 420px;
    height: 280px;
  }

  .home-top .article-top .text {
    margin-left: 440px;
  }
}

@media(max-width: 800px) {
  .home-top .article-top .img-wrap {
    float: none;
  }

  .home-top .article-top .img-wrap img {
    width: 100%;
    height: 60vw;
  }

  .home-top .article-top .text {
    margin-left: 0;
  }

  .home-top .article-top .new-post,
  .home-top .article-top .text h2,
  .home-top .article-top .text .article-date,
  .home-top .article-top .text .cat-data {
    margin-bottom: 0;
  }
}

CSSをそのまま反映すると、上記の画像のようにデザインが反映されます(PC)。好みに合わせて、サイズや色を調整してください。

アーカイブにタイトルとディスクリプションを追加する

現状のテーマでアーカイブページを見てみると、カテゴリ・タグ・日付別・著者ページなどがすべて同じデザイン・要素で構成されています。このままだと、ユーザーがどの記事の一覧を見ているかが分かりづらいので、各ページにタイトルと説明を追加しましょう。

まずは、WordPress内の『index.php』を複製し、『archive.php』ファイルを作成してください。

今回は、タイトルと説明を追加するだけなので『archive.php』に各アーカイブページの要素を条件分岐で記述しますが、出力する要素などを細かく分けたい場合は、『category.php』や『tag.php』など、細かくテンプレートを分けて作成してください。

archive.phpに要素を追加する

『archive.php』を作成したら、各アーカイブページ用に条件分岐を行い要素を追加します。デモでは、記事の一覧の上にタイトルと説明を追加していきます。

archive.phpの<div class="contents">の開始タグの後に追加

<div class="archive-top">
  <?php
  if(is_category()):
    $archive_title = single_cat_title('', false).'の記事';
    $archive_description = category_description();
  elseif(is_tag()):
    $archive_title = single_cat_title('', false).'の記事';
    $archive_description = tag_description();
  elseif(is_year()):
    $archive_title = get_the_time("Y年").'の記事';
  elseif(is_month()):
    $archive_title = get_the_time("Y年m月").'の記事';
  elseif(is_day()):
    $archive_title = get_the_time("Y年m月d日").'の記事';
  elseif(is_author()):
    $author_id = get_query_var('author');
    $author_name = get_the_author_meta( 'display_name', $author_id );
    $archive_title = $author_name.'が投稿した記事一覧';
  endif;

  if(!empty($archive_title)):
    echo '<h1>'.$archive_title.'</h1>';
  endif;

  if(!empty($archive_description)):
    echo '<p>'.$archive_description.'</p>';
  endif;
  ?>
</div><!--end archive-top-->

上記のように、『カテゴリー』『タグ』『日付』『著者』の各アーカイブごとに条件分岐をして、タイトルを出力します。

ディスクリプションは、カテゴリーとタグアーカイブのみ出力しています。出力される文言は、Wordpress管理画面のカテゴリーとタグの編集画面の説明に入力した内容が出力されます。

カテゴリーとタグ以外のアーカイブページにもディスクリプションを出力したい場合は、出力したいページの条件分岐の中に『$archive_description = 任意の文言』を追加してください。

上記の要素を『archive.php』に追加すると下記の画像のように出力されます。(下記画像はカテゴリページ)

archive.php用のCSSを追加する

要素の出力が完了したら、アーカイブページに新しく追加した、タイトルとディスクリプション用のCSSをスタイルシートに追加しましょう。

style.cssの記事一覧のCSSを記述している場所に追加

.archive-top h1 {
  font-size: 1.6rem;
  margin-bottom: 1.5rem;
}

.archive-top p {
  font-size: .875rem;
  line-height: 1.7;
  margin-bottom: 1.5rem;
}

@media(max-width: 600px) {
  .archive-top h1 {
    font-size: 1.25rem;
    margin-bottom: 1rem;
  }

  .archive-top p {
    font-size: .8125rem;
    margin-bottom: 1rem;
  }
}

CSSをそのまま反映すると、上記の画像のようにデザインが反映されます(PC)。好みに合わせて、サイズや色を調整してください。

これで、WordPressのテーマとして基本的な機能は全て整いましたので、実際に運用することができます。

ここからは、実際にテーマを作成・運用するときによく使うものについて簡単にご紹介します。頭の片隅にいれておくだけで、WordPressテーマを作成する際の幅がぐんと広がるので覚えておきましょう。

投稿や固定ページに様々なテンプレートを適応する

固定ページ用の専用テンプレートの作り方

WordPressの固定ページを出力する場合には、通常は『page.php』が適応されますが、新たにテンプレートファイルを作成することで、デザインや出力する要素を各固定ページごとに切り替えることができます。

固定ページ用の専用テンプレートを作成する場合は、WordPressテーマ内に新しく『.php』形式のテンプレートを追加します。テンプレートの名前の指定は特にないので、管理しやすい名前をつけましょう。

作成したら、下記のコードをソースの一番最初に記述してください。

<?php
/*
Template Name: テンプレートの名前
*/
?>

『テンプレートの名前』の部分を自分の付けたいテンプレート名に変更してください。反映されると、固定ページの編集画面で使用するテンプレートを選択できるようになります。

投稿用の専用テンプレートの作り方

固定ページと同様に、投稿でもWordPressテーマ内に新しく『.php』形式のテンプレートファイルを作成することで、デザインや出力を各投稿ごとに切り替えることができます。こちらも、テンプレートの名前にこれといった決まりは無いので、管理しやすい名前をつけましょう。

作成したら、下記のコードをソースの一番最初に記述してください。

<?php
/*
Template Name: テンプレートの名前
Template Post Type: post
*/
?>

『テンプレートの名前』の部分を自分の付けたいテンプレート名に変更してください。反映されると、投稿の編集画面で使用するテンプレートを選択できるようになります。

テンプレートを呼び出して使用する

WordPressでは、様々なテンプレートで出力やデザインを指定していますが、複数のテンプレートに共通の内容があることも少なくありません。

共通する部分が複数ある場合は、共通部分を記述した新たなテンプレートを作成し呼び出しましょう。共通部分のテンプレートを外部化することで、修正する際なども一箇所訂正するだけで済むので効率的にWordPressのテーマを編集することができます。

共通部分は好きな名前でテンプレートを作成してもOKです。新しく作成したテンプレートを呼び出す場合には、下記の記述を呼び出したい場所に追加してください。

<?php get_template_part( '呼び出したいテンプレート名' ); ?>

『'呼び出したいテンプレート名'』の部分には拡張子は不要です。

これで、WordPressレスポンシブテーマ作成は終了です。様々なWordPressに追加できる機能については『WP機能追加』カテゴリで紹介しています。新たな機能をWordPressに追加したいときに覗いてみてください。

今回作成したWordPressテーマに追加する機能としておすすめは、『404ページ』と『検索機能のカスタマイズ』『パンくずリストの追加』です。

作成したテーマをベースに自分好みな機能やデザインを追加して、自分好みのWordPressテーマにカスタマイズしてください！

下記よりwordpressレスポンシブテーマ作成で作成したテーマの完成版サンプルをダウンロードできます。