プラグインなしで関連記事の一覧を表示する方法【WordPress】

こんにちは、ゆうがです。

今回はWordPressで関連記事の一覧を表示する方法を解説していきます。

関連記事があると、それが内部リンクになりクローラーとユーザーにとって良い設計になるので、SEOで評価が上がったりユーザーにとって親切なサイトになるのでぜひ実装しましょう。

具体的な見た目は下記です。

完成イメージ

プラグインなしで関連記事の一覧を表示する方法【WordPress】

上記のとおりに実装していきます。

それではさっそくいきましょう!

スポンサーリンク

プラグインなしで関連記事の一覧を表示する方法

結論は下記のコードをWordPressのsingle.phpに貼ればOKです。

PHP

<div class="related">
  <h2>関連記事</h2>
  <ul class="related__list">
<?php
	$orig_post = $post;
	global $post;
	$tags = wp_get_post_tags($post->ID);
	

	if ($tags) {
	$tag_ids = array();
	foreach($tags as $individual_tag) $tag_ids[] = $individual_tag->term_id;
	$args=array(
	'tag__in' => $tag_ids,
	'post__not_in' => array($post->ID),
	'posts_per_page'=>4,
	'caller_get_posts'=>1
	);

	$my_query = new wp_query( $args );

	while( $my_query->have_posts() ) {
	$my_query->the_post();
	?>

	<li class="related__item"><a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('thumbnail'); ?><h3><?php the_title(); ?></h3></a></li>

	<?}
	}
	$post = $orig_post;
	wp_reset_query();
?>

</ul>
</div>

 

コードの参考記事プラグイン要らず!WordPressで関連記事を実装する方法

貼り方は「外観→テーマエディター→single.php」を選択してそのまま貼ればOKです。

スポンサーリンク

関連記事の一覧部分のCSSコード

つぎに下記のCSSコードをstyle.cssに書けば完了です!

CSS

.related h2 {
  padding: 10px 20px;
  color: #191919;
  border-left: 8px solid #1e73be;
  border-bottom: 1px solid #e5e5e5;
}

.related__list {
  list-style-type: none;
}
.related__item {
  padding-top: 20px;
}
.related__item:first-child {
  padding-top: 0;
}
.related__item::after {
  content: "";
  display: block;
  clear: both;
}
.related img {
  display: block;
  float: left;
  width: 90px;
  height: 90px;
  overflow: hidden;
}
.related__item h3 {
  width: calc(100% - 100px);
  float: right;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 10px;
  color: #63acb7;
}

 

これで完了です!
記事が参考になれば幸いです。

それでは最後まで読んでくださりありがとうございました。