ブログメインページの作成

続いて、投稿のメインページ（ブログトップページ）を作成していきましょう。

index.phpをコピーして、home.phpを作成します。

<?php
  $query = new WP_Query(
    array(
      'post_type' => 'post', //投稿タイプの指定
      'posts_per_page' => 3,
      'meta_query' => array(
        array(
          'key' => 'finish_reading',
          'value' => '5',
          'type' => 'UNSIGNED',
          'compare' => '<='
        )
      )
    )
  )
?>

<?php get_header(); ?>

<?php if ($query->have_posts() === true){ ?>
<section class="recommend">
  <h2>おすすめ：5分以内に読める記事</h2>
  <?php while($query->have_posts() === true){ ?>
    <?php $query->the_post(); ?>
    <?php $minutes = get_post_meta(get_the_ID(), 'finish_reading', true); ?>

    <h3>
      <?php the_title();?>
      (所要時間: <?php echo $minutes; ?>分)
    </h3>

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

<?php while(have_posts() === true){ ?>
  <?php the_post(); ?>

  <h2><?php the_title();?></h2>

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

<?php get_footer(); ?>

トップページでは、5分以内に読める記事の一覧を3件まで表示するものとします。

styles.cssに

.recommend {
  border: solid 1px black;
}

を追加しておき、おすすめ記事を枠線で囲んでわかりやすくしておきましょう。

さらに、おすすめ記事を再利用できるようにパーツ化します。 zeroフォルダ内にtemplatesフォルダを作成しましょう。templatesフォルダ内にrecommend.phpを作成し、

<?php
  $query = new WP_Query(
    array(
      'post_type' => 'post', //投稿タイプの指定
      'post_per_page' => 3,
      'meta_query' => array(
        array(
          'key' => 'finish_reading',
          'value' => '5',
          'type' => 'UNSIGNED',
          'compare' => '<='
        )
      )
    )
  )
?>

<?php if ($query->have_posts() === true){ ?>
<section class="recommend">
  <h2>おすすめ：5分以内に読める記事</h2>
  <?php while($query->have_posts() === true){ ?>
    <?php $query->the_post(); ?>
    <?php $minutes = get_post_meta(get_the_ID(), 'finish_reading', true); ?>

    <h3>
      <?php the_title();?>
      (所要時間: <?php echo $minutes; ?>分)
    </h3>

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

としておきましょう。

home.phpでは、templates/recommend.phpを読み込むだけにします。

<?php get_header(); ?>

<?php get_template_part( 'templates/recommend' ); ?>

<?php while(have_posts() === true){ ?>
  <?php the_post(); ?>

  <h2><?php the_title();?></h2>

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

<?php get_footer(); ?>

get_template_partは任意のテンプレートを指定して読み込むことができるテンプレートタグです。複数のページで利用するパーツについては積極的に利用していきましょう。テンプレートについてはフォルダを分けておくとわかりやすくなります。 これで、ブログトップページでのみおすすめ記事を表示する仕組みが出来上がりました。