投稿用テンプレページ作成

ここでは、投稿ページ用のテンプレートを作成していきます。

目次

• 投稿ページ用テンプレート(single.php)を作成する
• 投稿ページ用テンプレートsingle.phpを作成する
• 投稿の投稿日時を表示する
• 投稿のカテゴリー情報を表示する
• functions.phpを作成して投稿アイキャッチ画像を表示する

投稿ページ用テンプレート(single.php)を作成する

投稿ページのテンプレートの優先順位は下記の通り。single.phpを作成すればindex.phpよりも優先されるので、single.phpを作成していきます。

投稿ページ用テンプレートsingle.phpを作成する

投稿ページ用テンプレートsingle.phpを作成していきます。

基本的にpage.phpを作成した時と同じ手順で作成できます。

ここでは、page.phpを流用して作ります。page.phpをコピーしてsingle.phpにリネームして下さい。

続けて管理画面の投稿から適当な記事を公開してみて下さい。

投稿に書いた内容が表示されていることがわかります。

これもpage.phpの際に解説した以下の構文により、WordPressが投稿用の中身を探してくれて表示してくれています。

固定ページと中身が同じなのに、そのままコピーしただけで投稿の中身も同様に出力させてくれるんですね。

上記の構文のif (have_posts()) : while (have_posts()) : the_post();は、メインループという機能でWordPressのテンプレートファイルに応じた中身(page.phpなら固定ページの内容/single.phpなら投稿ページの内容）を出力してくれています。

このメインループ内で、タイトルや本文をはじめ、次の章で説明する投稿日時やカテゴリー、アイキャッチなどの属性値を取得することができます。

投稿の投稿日時を表示する

お知らせなどで利用することが多い投稿ページの場合は、投稿された日付を表示してあげると親切です。

そこで、single.phpのタイトルの下に以下のように日付が入る箇所を追記してあげましょう。作成日時を表示するには、get_the_date()関数を使用します。

・・・
<div id="main" class="col-md-9">
  <?php
  if (have_posts()) :
    while (have_posts()) : the_post();
  ?>
      <h1><?php the_title(); ?></h1>
      <div class="mb-3" id="post-meta">
      <p>作成日時：<?php echo get_the_date(); ?></p>
      </div>
      <section>
        <?php the_content(); ?>
      </section>
  <?php
    endwhile;
  endif;
  ?>
</div>
・・・

これで、投稿が作成された日時を表示することができます。

なお、上の例では「年(Y)-月(M)-日(D)」といった形式で日付が表示されていますが、こちらはWordPressの「設定＞一般」にある日付形式から変更できます。

投稿のカテゴリー情報を表示する

日付の下にカテゴリー情報も表示させましょう。

カテゴリー情報を表示させるには、the_category()関数を使用します。

・・・
<div id="main" class="col-md-9">
  <?php
  if (have_posts()) :
    while (have_posts()) : the_post();
  ?>
      <h1><?php the_title(); ?></h1>
      <div class="mb-3" id="post-meta">
        <p>作成日時：<?php echo get_the_date(); ?></p>
        <?php the_category(); ?>
      </div>
      <section>
        <?php the_content(); ?>
      </section>
  <?php
    endwhile;
  endif;
  ?>
</div>
・・・

<?php the_category(); ?>ではul・liタグを使って設定されているカテゴリー情報が全てリンク付きで出力されるので、必要に応じてスタイルを変更してあげましょう。

functions.phpを作成して投稿アイキャッチ画像を表示する

最後にタイトル下にアイキャッチ画像が表示されるように設定します。

初期状態ではアイキャッチ機能は有効化されておらず、アイキャッチの設定ができない状態になっています。

1. WordPressのアイキャッチ機能を有効化する

まず、テーマフォルダ内にWordPressの動作を制御するファイル「functions.php」を作成し、その中にアイキャッチ機能をONにする関数を記述します。

テーマフォルダ(ここでは、webst8)の直下にfunctions.phpを新規作成しましょう。

functions.phpができたら、下記のような記述をして保存しましょう。

<?php
function original_setup() {
   add_theme_support( 'post-thumbnails' ); //アイキャッチ画像をON
}
add_action( 'after_setup_theme', 'original_setup' ); //テーマ初期化のタイミングで関数を読み込み

functions.phpに記述した内容の解説

上記は、任意の名前の関数(function original_setup()）を定義し、その中に引数としてpost-thumbnailsを指定したadd_theme_support()関数を記述しています。

add_theme_support()は、テーマがパラメータで指定した機能を有効化するようにする関数です。

本例では、add_theme_support( “post-thumbnails” ); でアイキャッチ画像を有効化しています。

このoriginal_setup関数をアクションフック（add_action）機能を利用してテーマ初期化のタイミングで呼び出しました。

functions.phpとは？

functions.phpとは、WordPressサイトの動作を制御したり、機能を追加することができるファイルです。

必須ファイルではありませんが、このfunctions.phpにWordPressの動作を制御する関数を記述できて便利なので、通常はfunctions.phpを作成することがほとんどです。

WordPressでは、Webページを表示する際に、毎回自動でfunctions.phpを読み込んでいます。

なお記述方法を間違うとエラーでWebページが表示されなくなるので注意しましょう。

こういうエラー画面見ると怖いですね！気をつけないといけませんね！

アクションフック、フィルタフックとは？

WordPressでは特定のタイミングで任意の関数を呼び出して作動させることができます(〇〇の動作のタイミングに合わせて、〇〇の関数(機能)を実行させる)。

フックには「アクションフック」と「フィルターフック」の2つが用意されています。アクションフックの場合にはadd_action()、フィルターフックの場合にはadd_filter()を呼び出して、特定のフックに作成した関数を登録します。

先ほど説明したfunctions.phpのコードの一部「add_action( “after_setup_theme”, “webst8_setup” );」は、after_setup_theme(テーマ初期化のタイミング)にwebst8_setupという関数を実行しなさいという記述になります。

これでテーマが初期化された後に関数が実行され、アイキャッチ画像の指定画面が表示されるようになります。

WordPressの編集画面でアイキャッチが設定できるようになっていればOKです。

2. テンプレートにアイキャッチ画像を出力する設定をする

次にsingle.phpを編集して、アイキャッチ画像が実際に表示させるように設定していきます（現状は設定できても表示されない状態）。

設定されたアイキャッチ画像を表示させるには、the_post_thumbnail()関数を使用します。今回は、記事タイトルの下にアイキャッチ画像を設定します。

<?php
if (have_posts()) :
  while (have_posts()) : the_post();
?>
    <h1><?php the_title(); ?></h1>
    <?php if (has_post_thumbnail()) : ?> 
      <?php the_post_thumbnail(); ?>
    <?php endif; ?>
    <div class="mb-3" id="post-meta">
      <p>作成日時：<?php echo get_the_date(); ?></p>
      <?php the_category(); ?>
    </div>
    <section>
　　　　・・・

上のように<?php if (has_post_thumbnail()):?><?php endif; ?>とセットで記述することで、サムネイルが設定されている場合のみサムネイルを表示させることが可能です。

なお、the_post_thumbnail()に引数を入れることで、アイキャッチ画像の出力サイズを変更することもできます。詳しくは「the_post_thumbnail() – Function | Developer.WordPress.orgをご参照ください。

チェックテスト

<div class="content wrapper">
   <?php if(have_posts()): ?>
     <?php while(have_posts()):the_post(); ?>
       <h1 class="page-title"><?php the_title(); ?></h1>
       <div id="item">
         <div class="item-text">
           <?php the_content(); ?>
         </div>
       </div>
     <?php endwhile; ?>
   <?php endif; ?>
</div>