WordPressでプラグインを使わずに関連記事を表示する方法

さらに前回に引き続き、今回はプラグインを使わずに関連記事を表示する方法をご紹介します。

やりたい事

当ブログでやりたい事は以下の条件になります。

1. プラグインは使わない。
2. カテゴリで関連記事を抽出する。
3. できれば子カテゴリのみで抽出したい。
4. サムネイルも表示したい。

設置方法

STEP1：single.phpの編集

当ブログでは、single.phpに記事の最後に表示される箇所に以下のコードを追加しました。

<?php
// カテゴリ情報から関連記事を呼び出す
$cats = get_the_category($post->ID);
$cats_ID = array();
foreach($cats as $cat){
	// 下記if文のコメントアウトを外すと子カテゴリのみ抽出
	//if($cat->parent)
	array_push($cats_ID, $cat->cat_ID);
}
$args = array(
	"post__not_in" 	=> array($post->ID),
	"posts_per_page"=> 4,	// 表示件数
	"category__in" 	=> $cats_ID,
	"orderby" 		=> "rand",
);

$query = new WP_Query($args);

if($query->have_posts()) : ?>
	<div class="site-content site-related">
		<h3>関連する記事</h3>
		<ul>
	<?php while($query->have_posts()) : $query->the_post(); ?>
			<li>
				<div class="thumb"><a href="<?php the_permalink(); ?>"><?php the_post_thumbnail("medium"); ?></div>
				<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
			</li>
	<?php endwhile;?>
		</ul>
	</div>
<?php
endif;
wp_reset_postdata();
?>

若干ややこしいですが、2行目～17行目が関連する記事の抽出処理を行って、19行目～32行目でタグを書き出す処理を行っています。

7行目のコメントアウトされているif文ですが、コメント通り、コメントアウトを外すと子カテゴリのみを対象とした関連記事を抽出するようになります。
当ブログはまだそれほど記事の数がないので、一旦コメントアウトしています。。。

あと、19行目で関連記事が存在するかチェックした後に、大枠のdivタグ、h3タグ、ulタグを書き出しているので、関連記事がない場合は、大枠丸ごと表示されないようになっています。

STEP2：スタイルシートの編集

スタイルシートは以下のようになっています。

.site-related{
  margin: 80px 0 0 !important;
}

.site-related h3{
  font-size: 2.4rem;
  font-weight: normal;
  border: none;
  border-top: 2px solid #0081BA;
  border-bottom: 1px solid #DFDFDF;
  padding: 16px 0 !important;
  margin: 0 0 32px !important;
}

.site-related ul{
  display: flex;
  justify-content: flex-start;
  margin-left: -2%;
}

.site-related li{
  width: 23%;
  line-height: 1.5;
  font-size: 1.2rem;
  margin-left: 2%;
}

.site-related .thumb{
  margin-bottom: 8px;
}
.site-related .thumb img{
  max-width: 100%;
  height: auto;
}

結果

表示内容は、「シェアする」の下にある「関連する記事」の通りです。
お好みにカスタマイズどうぞ♪