WordPressで記事の中に最新記事のエリアを追加する【オリジナルテーマ・プラグインなし】

こんにちは、オトナ帝国です。

前回の記事ではsingle.phpの話をしてきましたが、今回の記事では、記事の中で最新記事を表示していく方法について、話していきたいと思います。

前回のおさらい：single.phpの記載

前回の記事のソースですが、改めてここでも記載しておきたいと思います。

//phpファイル
<?php if (have_posts()) : ?>
<?php while ( have_posts() ) : the_post(); ?>
    <?php
        $image = get_the_post_thumbnail_url();
        $title = get_the_title();
        $content = get_the_content();
    ?>
	<h1><?php echo($title); ?></h1>
	<?php if (has_post_thumbnail()) : ?>
	<p><img src="<?php echo($kv);?>" alt="キービジュアル"></p>
	<?php endif; ?>
	<div><?php echo($contentValue) ; ?></div>
<?php endwhile; endif; ?>
/* 今回の話追加エリアstart */
/* 今回の話追加エリアend */

これで記事の内容が出てきますね。今回はその記事の内容の下に最新記事を追加しようと思います。

対応の内容と方針について

まずは、①投稿の中で公開済みの最新の投稿を取得してきて、最新の投稿から表示している自分自身の投稿を除いて、3件を表示してくるということが目指すことになります。

まずは結論ですが、下記を/* 今回の話追加エリアstart */ と/* 今回の話追加エリアend */の間に記載していくことになります。

前半部分は記事の取得、後半部分は先日のアーカイブ記事での記載とほぼ同じです。本件は前半部分で決まっています。

//phpファイル
<?php
    $recentArgs = array(
      'post_type' => 'カスタム投稿タイプ名', // 投稿タイプのスラッグを指定
      'post_status' => 'publish', // 公開済の投稿を指定
      'posts_per_page' => 3, // 投稿件数の指定
      'post__not_in' => array($post->ID), // 現在表示している投稿を除外
    );
    $the_recentQuery = new WP_Query($recentArgs);
?>
<?php if ($the_recentQuery->have_posts()) : ?>
<ul>
<?php while ($the_recentQuery->have_posts()): $the_recentQuery->the_post(); ?>
<?php
    $link = get_the_permalink();
    $image = get_the_post_thumbnail_url();
    $time = get_the_time('Y.m.d');
    $title = get_the_title();
?>
<li>
  <a href="<?php echo $link; ?>">
    <?php if (has_post_thumbnail()) : ?>
    <p><img src="<?php echo $image; ?>" alt=""></p>
    <?php else : ?>
    <p class="noteArchiveList__image"><img src="サムネイルない場合のリンク" alt=""></p>
    <?php endif; ?>
    <p>
      <span><?php echo $time; ?></span>
      <span><?php echo $title; ?></span>
    </p>
  </a>
</li>
<?php endwhile; ?>
</ul>
<?php wp_reset_postdata(); ?>
<?php endif; ?>

肝は前半部分、WP_Query関数を使っていく

さて、Wordpressの中でも主役級に出てくる、WP_Query()ですね。さてこの関数、get_posts()関数と比較されることが多い関数でもあります。

WP_Query()とget_posts()の違い

結論、WP_Queryは投稿データ以外にも表示されているページそのものの情報も取得できるのに対して、get_postsは記事に関する情報しか取得できません。

get_posts()の返却値はwp_query()に含まれています。wp_query()にはタグ・カテゴリー情報などが含まれてました。例えば、記事を取得したうえでさらに条件を付けたい（タグで絞り込み）みたいなことをやりたいときは、wp_query()がおススメになります。

と、それっぽいこと書いてみましたが、扱うデータ量がwp_query()のほうが処理速度が・・・・とかありますが、あんま変わらないです。素直にwp_query()の方が拡張性は高いので、wp_query()でいいのかな、と思います。

ソースの解説WP_Query()

//phpファイル
<?php
    $recentArgs = array(
      'post_type' => 'カスタム投稿タイプ名', // 投稿タイプのスラッグを指定
      'post_status' => 'publish', // 公開済の投稿を指定
      'posts_per_page' => 3, // 投稿件数の指定
      'post__not_in' => array($post->ID), // 現在表示している投稿を除外
    );
    $the_recentQuery = new WP_Query($recentArgs);
?>

$RecentArgsの配列内に条件を書いていきます。コメントアウトのとおりですね。カスタム投稿タイプ名はカスタム投稿タイプの際に入れてください。

後半部分はいつものループ＆wp_Queryデータの削除は忘れない

//phpファイル
<?php if ($the_recentQuery->have_posts()) : ?>
<ul>
<?php while ($the_recentQuery->have_posts()): $the_recentQuery->the_post(); ?>
<?php
    $link = get_the_permalink();
    $image = get_the_post_thumbnail_url();
    $time = get_the_time('Y.m.d');
    $title = get_the_title();
?>
<li>
  <a href="<?php echo $link; ?>">
    <?php if (has_post_thumbnail()) : ?>
    <p><img src="<?php echo $image; ?>" alt=""></p>
    <?php else : ?>
    <p class="noteArchiveList__image"><img src="サムネイルない場合のリンク" alt=""></p>
    <?php endif; ?>
    <p>
      <span><?php echo $time; ?></span>
      <span><?php echo $title; ?></span>
    </p>
  </a>
</li>
<?php endwhile; ?>
</ul>
<?php wp_reset_postdata(); ?>
<?php endif; ?>

後はいつものループですが、if・whileループの引数がいつもと異なります。

//phpファイル
<?php if ($the_recentQuery->have_posts()) : ?>
<?php while ($the_recentQuery->have_posts()): $the_recentQuery->the_post(); ?>

それとここで作ったqueryはちゃんとリセットしましょう。

//phpファイル
<?php wp_reset_postdata(); ?>

また別の記事になりますが、最新の記事以外にもの他の記事一覧を掲載したいケースがあると思います。その場合上記が必須になります。

最後に

今回は最新の記事一覧を表示しいていきました。今後、関連の記事や人気の記事など、追加で表示したいケースも触れていきたいと思います。

それでは～★