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

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

2/18の記事ではsingle.phpの話を2/20の記事では最新記事の表示の話をしてきました。今回は同一タグのエリアを記事ページに表示していく話していきたいと思います。

投稿ページsingle.php上での表現を書いていきます。

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

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

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

//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 */

前半部分は記事の取得、後半部分は先日の最新記事表示での記載とほぼ同じです。本件は前半部分で決まっています（キリ）。

ソース内での設定と解説

今回は便宜上、カスタムタクソノミーをtestcat、その中のタグを取得、取得したタグと同様のタグが設定されている記事を取得してくるという流れになっています。

//phpファイル
<?php
   $terms = get_the_terms($post->ID, 'testcat');
   $terms_slug = array_column($terms, 'slug');
   $relatedArgs = array(
      'tax_query' => array(
            array(
              'taxonomy' => 'testcat', //タクソノミーを指定
              'field' => 'slug', //ターム名をスラッグで指定する
              'terms' => $terms_slug,
            ),
          ),
      'post_type' => 'testcat', // 投稿タイプのスラッグを指定
      'post_status' => 'publish', // 公開済の投稿を指定
      'posts_per_page' => 3, // 投稿件数の指定
      'post__not_in' => array($post->ID), // 現在表示している投稿を除外
    );
    $the_relatedQuery = new WP_Query($relatedArgs);
?>
<?php if ($the_relatedQuery->have_posts()) : ?>
<h2>関連記事</h2>
<ul>
    <?php while ($the_relatedQuery->have_posts()): $the_relatedQuery->the_post(); ?>
        <?php
            $link = get_the_permalink();
            $image = get_the_post_thumbnail_url();
            $time = get_the_time('Y.m.d');
            $title = get_the_title();
        ?>
        <p><?php print_r($the_relatedQuery);?></p>
        <li>
          <a href="<?php echo $link; ?>">
            <?php if (has_post_thumbnail()) : ?>
            <p><img src="<?php echo $image; ?>" alt=""></p>
            <?php endif; ?>
            <p>
        	<span><?php echo $time; ?></span><br>
        	<span><?php echo $title; ?></span>
            </p>
          </a>
        </li>

    <?php endwhile; ?>
</ul>
<?php wp_reset_postdata(); ?>
<?php endif; ?>

繰り返しになりますが、肝は前半です。コメントアウトのとおりですが、少しずつ見ていきましょう。

表示記事自体のカスタムタクソノミー情報取得

//phpファイル
$terms = get_the_terms($post->ID, 'testcat');

まず、表示する記事自体のWP_Term Object情報を取得（get_terms()関数）します。WP_Term Object情報は[term_id][name][slug][term_group][term_taxonomy_id][taxonomy][description][parent][count][filter]の情報が含まれます。

はい、これではぐちゃぐちゃでよくわからないので、今回の制御方法を決めます。今回はslugでの絞り込みにします。slugはWordpress管理画面上のタグ(test)の情報の下記のところです。

多次元配列からは特定の値に絞っていく際にはarray.column()で取得していきます。

//phpファイル
$terms_slug = array_column($terms, 'slug');

これによって、[slug]に絞った項目にできます。これで記事自身のタグ情報が取得できます。

取得したタグに紐づく記事情報を取得

//phpファイル
$relatedArgs = array(
      'tax_query' => array(
            array(
              'taxonomy' => 'testcat', //タクソノミーを指定
              'field' => 'slug', //ターム名をスラッグで指定する
              'terms' => $terms_slug,
            ),
          ),
      'post_type' => 'testcat', // 投稿タイプのスラッグを指定
      'post_status' => 'publish', // 公開済の投稿を指定
      'posts_per_page' => 3, // 投稿件数の指定
      'post__not_in' => array($post->ID), // 現在表示している投稿を除外
);
$the_relatedQuery = new WP_Query($relatedArgs);

ここで$relatedArgsに投稿条件を入れて、WP_Query関数に当て込んでいきます。この辺りは、こちらのページで最新記事の取得方法を解説している内容と似ていますね。

//phpファイル
array(
      'taxonomy' => 'testcat', //タクソノミーを指定
      'field' => 'slug', //ターム名をスラッグで指定する
      'terms' => $terms_slug,
),

ここの 'terms' => $terms_slugとすることで、前段部分で記事本体で取得したタグ情報で絞り込める形になります。

残りはいつものif/whileループ

//phpファイル
<?php if ($the_relatedQuery->have_posts()) : ?>
    <?php while ($the_relatedQuery->have_posts()): $the_relatedQuery->the_post(); ?>
        <?php
            $link = get_the_permalink();
            $image = get_the_post_thumbnail_url();
            $time = get_the_time('Y.m.d');
            $title = get_the_title();
        ?>
    <?php endwhile; ?>
<?php wp_reset_postdata(); ?>
<?php endif; ?>

あとはよく出てくる、if/while構文。WP_Query()関数で作成した$the_relatedQueryでループを回していきます。最後に作成したデータを削除するために下記のreset構文をお忘れなく！

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

最後に

今回は関連記事（同一タグ）の表示についてまとめてみました。関連する記事はユーザーが読んでくれた記事と近い内容になっているので、そのまま関連するものも読んでくれる可能性が高いエリアになってきまさう。

サイト内回遊の参考になれば、と思います。

それでは～★

---

---