記事詳細ページ（single.php）、固定ページ（page.php）のテンプレートファイルを作成する – [15]WordPressテーマ制作レッスン

  • ブックマーク
  • -
    コピー

このレッスンでは、サイト内に作られているグローバルメニューのリンクを設置していき、他にウェブサイトの情報などを出力するテンプレートタグを設置してきます。

動画

レッスンの準備

Olein-jp/wp-theme-develop-lesson
Contribute to Olein-jp/wp-theme-develop-lesson development by creating an account on GitHub.
github.com

このレッスンでは、上記リポジトリのwp-lesson-15というディレクトリにあるファイルを使って学習を進めていきます。

WordPressのルートディレクトリにあるwp-contentの中のthemesにwp-lesson-15ディレクトリを設置しましょう。

投稿詳細ページ用のテンプレートファイル（single.php）を作成する

このレッスンでは、投稿一覧ページの任意の記事をクリックした先に表示される投稿詳細ページのテンプレートファイルを作成していきます。

一般的に、投稿詳細ページに使用されるテンプレートファイルはsingle.phpというファイルになります。

他にも、特定のカスタム投稿タイプ用にsingle-{post_type}.phpというものや、投稿と固定ページの詳細ページを同じテンプレートファイルsingular.phpを用意して管理することもできます。

優先順位としては、

  1. single-{post_type}.php
  2. single.php
  3. singular.php
  4. index.php となります。

single-{post_type}.phpが無ければ、single.phpを探し、無ければsingular.phpを探し、それでも無ければindex.phpを読み込みます。

index.phpを複製してsingle.phpを作る

まずはindex.phpを複製してsingle.phpという名前のファイルを作りましょう。

まず、6行目あたりの以下のコードを削除しましょう。

<h1 class="p-archive-title">BLOG</h1>

次に、アイキャッチ画像をクリックすると投稿詳細ページに遷移するようにリンク(<a href>)を設置してありますが、遷移先の投稿詳細で利用するテンプレートファイルですので、リンクは必要ありません。以下のように削除してみましょう。

<figure class="c-hentry-thumbnail">
    <?php if ( has_post_thumbnail() ) : ?>
        <?php the_post_thumbnail(); ?>
    <?php else : ?>
        <img src="<?php echo get_theme_file_uri() . '/images/no-thumbnail.png'; ?>"
             alt="ダミーアイキャッチ画像">
    <?php endif; ?>
</figure>

同様に、投稿タイトル部分のリンクも必要ありません。リンクを削除しましょう。そして、投稿ページの主題は投稿タイトルですので、<h2>タグから<h1>タグへ変更しておきましょう。

<h1 class="entry-title">
    <?php the_title(); ?>
</h1>

次に、記事の抜粋を表示していた以下のソースコード

<div class="entry-excerpt">
    <?php the_excerpt(); ?>
</div>

こちらに、実際のコンテンツを表示したいので、以下のように書き換えましょう。

<div class="entry-content">
    <?php the_content(); ?>
</div>

index.phpには、ページ下部にthe_posts_pagination()が設置してあったのですが、その部分にthe_post_navigation()を設置します。

single.phpを複製してpage.phpを作成する

上で作成したsingle.phpを複製してpage.phpというテンプレートファイルを作成します。

固定ページのテンプレートファイル優先順位は以下の通りです。

  1. カスタムテンプレートファイル（別レッスンで扱います）
  2. page-{slug}.php
  3. page-{id}.php
  4. page.php
  5. singular.php
  6. index.php

デフォルト状態では、固定ページにカテゴリーやタグをつけることはできないので（カスタムタクソノミーなどを用意すれば可能）、カテゴリーとタグの表示部分を削除しておきます。

<span class="category-links">
    <?php the_category( ' ' ); ?>
</span>
<span class="tag-links">
    <?php the_tags( '', '', '' ); ?>
</span>

この部分を削除しておきましょう。

このレッスンの関連動画一覧を見る
WordPress