WordPressで関連記事をランダムに表示するときに、「メイン」のカテゴリーで絞り込む方法

本記事では、プラグインを使用せずにWordPressのシングルページで関連記事をランダムに表示する方法をご紹介します。

関連記事を表示するには、「WordPress Related Posts」や「YARPP」などの関連記事表示プラグインを使う方法もありますね。
しかし、プラグインの多用はサイトの読み込み速度低下を招きます。特に、「WordPress Related Posts」は記事数が多いと動作が重くなることで知られています。
またWordPress本体のアップデートやプラグインの開発停止によりプラグインが使えなくなるなどのデメリットもあります。
というわけで、今回はプラグインなしで関連記事表示機能を追加したいと思います。

関連記事機能を導入したいけれど、プラグインは使用したくないという方におすすめです。

  1. 「メイン」のカテゴリーとは
  2. 関連記事の表示部分(出力するHTML)
  3. 関連記事を出力する処理(single.phpに記載)

「メイン」のカテゴリーとは

記事タイトルにもありますが、そもそも「メイン」のカテゴリーとは何なのでしょうか?

プラグイン「Yoast SEO」の機能で、カテゴリーやタームを複数選択した場合「メイン」を選べるようになります。
つまり、優先的に表示させるカテゴリー、タームを「メイン」として指定することができるのです。

今回はこの機能を利用して、より関連性が高い記事を表示していきます。

SEO Yoastでメイン(Primary)に設定したカテゴリー、タームのスラッグ名、名前を取得
プラグイン「Yoast SEO」をインストールすると、カテゴリーやタームで「メイン」を選べるようになります。複数のカテゴリー、タームを設定時に、優先的に表示させるカテゴリー、タームを選択できて便利です。…
https://sendai-kuraso.com/work/wordpress/wpseo_primary_term.html

関連記事の表示部分(出力するHTML)

例として、関連記事を表示するHTMLをご紹介します。

<a href="#"><img src="recommend-img.png" alt="">Post Title</a>

recommend-img.png がアイキャッチ画像、Post Title が関連記事のタイトルです。

関連記事を出力する処理(single.phpに記載)

「メイン」カテゴリーの取得

「メイン」は複数カテゴリーを選択しないと取得できないので、一つのカテゴリーしか選択していない場合の記述も else で記載しておきましょう。

if(class_exists('WPSEO_Primary_Term')){
	$wpseo_primary_term = new WPSEO_Primary_Term('category', get_the_ID());
	$wpseo_primary_term = $wpseo_primary_term->get_primary_term();
	$category = get_category($wpseo_primary_term);
	$category_slug = $category->slug;
} else {
	$category = get_the_category($post->ID);
	$category_slug = $category[0]->slug;
}

WP_Query を設定

$args = array(
	'post__not_in' => array($post->ID),
	'posts_per_page' => 3,
	'category_name' => $category_slug,
	'orderby' => 'rand'
);
$query = new WP_Query($args);

ループを作成

if($query->have_posts()): while($query->have_posts()): $query->the_post();
if(has_post_thumbnail()) {
	$thumbnail = get_the_post_thumbnail($post->ID, 'thumbnail');
} else {
	$thumbnail = '';
}
echo '<a href="'.get_permalink().'">'.$thumbnail.the_title('','',false).'</a>';
endwhile;
else:
	echo '<p>記事はありませんでした</p>';
endif;
wp_reset_postdata();

合体

下記コードを single.php の関連記事を表示したい場所に記載します。
すると、同じカテゴリー(「メイン」指定がある場合は「メイン」カテゴリー)に属する記事がランダムで表示されます。

<?php
if(class_exists('WPSEO_Primary_Term')){
	$wpseo_primary_term = new WPSEO_Primary_Term('category', get_the_ID());
	$wpseo_primary_term = $wpseo_primary_term->get_primary_term();
	$category = get_category($wpseo_primary_term);
	$category_slug = $category->slug;
} else {
	$category = get_the_category($post->ID);
	$category_slug = $category[0]->slug;
}
$args = array(
	'post__not_in' => array($post->ID),
	'posts_per_page' => 3,
	'category_name' => $category_slug,
	'orderby' => 'rand'
);
$query = new WP_Query($args);
if($query->have_posts()): while($query->have_posts()): $query->the_post();
if(has_post_thumbnail()) {
	$thumbnail = get_the_post_thumbnail($post->ID, 'thumbnail');
} else {
	$thumbnail = '';
}
echo '<a href="'.get_permalink().'">'.$thumbnail.the_title('','',false).'</a>';
endwhile;
else:
	echo '<p>記事はありませんでした</p>';
endif;
wp_reset_postdata();
?>

MovableType/WordPressを使ったホームページ制作、機能追加や設置代行などの改修、システム開発、サイトの保守を手掛けております。


アナタが実現させたい機能、やりたい事をお聞かせいただけませんか? そのイメージを一緒に実現しましょう!
お問い合わせは以下のページから!!

やまライダーのサイトへ

書いた人:やまライダー(嫁)

Web屋さんで8時間フルタイム勤務をしている、いわゆるワーキングマザー。
夫婦共働きで、ムスメ氏を育てています。
主に資産運用にかかわるお金の話、ムスメ氏を育てていく上での子育ての話、そしてたまにお仕事関連の記事を書いていく予定。
プロフィールを見る