WordPressで関連記事を取得する方法

WordPressで直使う処理として、「その記事に関連する記事を取得する」というものがあるかと思います。
例えば、記事下の関連記事とかおすすめ記事みたいなパーツでよく使われますね。

ソースコード

関連記事とひとくちに行っても様々な条件があるかと思います。
・同じカテゴリの記事
・同じタグの記事
・その両方
・今の記事を読んでいる人が良く読む記事
など

今回は、一番簡単な同じカテゴリの記事を取得するパターンを考えてみます。

single.php

<?php
	// 同じカテゴリから記事を4件呼び出す
	$categories = get_the_category();
	$category_ID = array();
	foreach($categories as $category):
		array_push( $category_ID, $category->cat_ID);
	endforeach ;
	$args = array(
		'post__not_in' => array($post->ID), // 現在の記事を除く
		'posts_per_page'=> 4,
		'category__in' => $category_ID,
		'orderby' => 'rand', // ランダムに記事を選ぶ
	);
	$related_posts = get_posts($args);
?>
<?php if($related_posts) { ?>
	<div class="RelatedArticle_Div">
		<div class="RelatedArticle">
			<p class="RelatedArticle_Title">Related Posts</p>
			<ul class="RelatedArticle_ul">
				<?php // ========== 1記事 - Start ========== ?>
				<?php 
					$count = 1; 
					foreach($related_posts as $post): setup_postdata($post);
				?>
					<li class="RelatedArticle_li">
						<a href="<?php the_permalink(); ?>" class="RelatedArticle_Cover_A" />
						<div class="RelatedArticle_li_Inner_Div">
							<a href="<?php the_permalink(); ?>" class="RelatedArticle_thumbnail_a">
								<p class="RelatedArticle_thumbnail_img" style="background-image:url(<?php echo the_post_thumbnail_url('medium'); ?>);"></p>
							</a>
							<div class="RelatedArticle_Info">
								<div class="RelatedArticle_Info_Title">
									<div class="RelatedArticle_Info_Title_Cell">
										<a class="RelatedArticle_Info_Title_a" href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
									</div>
								</div>
							</div>
						</div>
					</li>
				<?php
					if($count % 2 == 0) {
						// 偶数時にfloat解除
						echo '<li class="RelatedArticle_Reset"></li>';
					}
					endforeach;
					if($count == 1) {
						// 1記事しかない場合もfloat解除
						echo '<li class="RelatedArticle_Reset"></li>';
					}
					wp_reset_postdata();
				?>
				<?php // ========== 1記事 - End ========== ?>
				
			</ul>
		</div>
	</div>
<?php } ?>

処理解説

HTML生成

関連記事を取得できたら、次にそれをもとにHTMLを生成していきます。
ここはデザインにもよると思いますが、今回は例として当サイトのHTML生成処理を見ていきます。

まず、取得した記事をforeachで回して1記事ごとのHTMLを生成していきます。
1記事ごとのHTML要素は、「// ========== 1記事 - Start ==========」から「// ========== 1記事 - End ==========」の部分になります。

the_permalink()でその記事へのリンクを取得しています。
the_permalink()とは、$postの記事のリンクを取得する処理です。
foreachで$postに記事を代入しているので、その記事のリンクを取得することができます。

サムネイルのリンクは、the_post_thumbnail_urlで取得することができます。
この関数は引数でサムネイルのサイズを指定することができます。
今回は、そこまで大きく表示しないので、thumbnailを指定したいところですが、thumbnailだとアスペクト比(縦横比)を保ってくれません。
強制的に短編が150pxになるように圧縮され、はみ出た部分はカットされてしまいます。
なので、mediumを採用しています。

ちなみに引数の種類としては、thumbnail, medium, large, fullを指定できます。
(それぞれ、150px、300px、640px、オリジナルサイズとなります。)
これらはあらかじめWordPress側で用意されたサイズになります。
これらのサイズでは事足りない場合は、

php

the_post_thumbnail_url( array(100, 100) );	 // width:100px,height:100pxで画像を取得

のような形式で、直接指定することもできます。
しかし、リサイズしてくれるわけではなく、そのサイズの画像が既にある場合にしか使えません。

引数についての詳細は以下を参照ください。
Function Reference/the post thumbnail url ≪ WordPress Codex

php

<?php
	if($count % 2 == 0) {
		// 偶数時にfloat解除
		echo '<li class="RelatedArticle_Reset"></li>';
	}
	endforeach;
	if($count == 1) {
		// 1記事しかない場合もfloat解除
		echo '<li class="RelatedArticle_Reset"></li>';
	}
	wp_reset_postdata();
?>

の部分は、float解除に関する処理なので、今回の処理の本筋とは外れます。
内容的には、横2列にfloat表示したいので、2列表示するごとにfloatを解除しているというものになります。

WordPressで関連記事を取得する方法

ソースコード

処理解説

関連記事の取得

HTML生成