投稿テンプレートの作成

続いて、投稿の表示用テンプレートを作成しておきましょう。

投稿部分のテンプレートを分離する。

まずは現在の投稿部分のテンプレートを分離します。index.phpから

  <!-- タイトルと本文を出力 -->
  <h2>
  <?php the_title(); ?></h2>

  <p><?php the_content(); ?></p>

  <p><?php the_date(); ?></p>

の部分を取り出し、templatesディレクトリの中にcontent.phpとして保存しましょう。

その上で、index.phpは

<?php 

//ヘッダーを取得
get_header(); 
?>


<?php while(have_posts() === true){ ?>
  <?php the_post(); //1件記事を取得($postに代入) ?>

  <!-- 投稿テンプレート -->
  <?php get_template_part('templates/content'); ?>

<?php } ?>

<?php get_footer(); ?>

とします。すると、index.phpにはすでにphpでの記述しか無くなっているので

<?php 
//ヘッダーを取得
get_header(); 

while(have_posts() === true){
  the_post(); 

  get_template_part('templates/content'); 

}

get_footer();

と純粋なphpファイルにすることも可能です。試しておきましょう。

同様にhome.phpも

<?php 
get_header(); 

get_template_part( 'templates/recommend' );

while(have_posts() === true){
  the_post();
  get_template_part('templates/content');
}

get_footer();

に変更しておきましょう。

投稿テンプレートの作り込み

現在の投稿テンプレートは非常にシンプルなものになっているため、本格的な投稿テンプレートとして作り込んでおきましょう。

content.phpを

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

  <header class="post__header">
    <h2>
      <a href="<?php the_permalink(); ?>">
        <?php the_title(); ?>
      </a>
      <span class="post__header__date">
        <?php the_date(); ?>
      </span>
    </h2>
  </header>

  <?php if( has_post_thumbnail() ) { ?>
  <!--サムネイルを表示-->
  <a class="post__thumbnail" href="<?php the_permalink(); ?>">
        <?php the_post_thumbnail(); ?>
    </a>
    <?php } ?>

  <section class="post__content">
    <p><?php the_content(); //$post->contentを出力する関数 ?></p>
  </section>

  <footer class="post__footer">
    <!--フッターはとりあえず確保だけしておきます。-->
  </footer>

</article><!-- #post-<?php the_ID(); ?> -->

としておきます。

post_class()

body_classによく似た、各投稿用のクラスを出力する関数です。

the_permalink()

投稿へのパーマリンクを出力する関数です。

has_post_thumbnail()

投稿のアイキャッチ画像が設定されているかどうかを判定する関数です。

アイキャッチ画像について

投稿のアイキャッチ画像はデフォルトでは利用できません。アイキャッチ画像の利用には

add_theme_support( 'post-thumbnails' );

を実行する必要があります。

functions.phpのafter_setup_themeへの設定箇所に

add_action('after_setup_theme', function(){
    add_theme_support( 'title-tag' );

    // （追記）アイキャッチ画像を利用する
    add_theme_support( 'post-thumbnails' );
});

と追記しておきましょう。この記述により、投稿作成画面で、アイキャッチ画像が設定できるようになります。

記事テンプレートの作成