【WordPress】カテゴリーやタグの関連記事を表示する方法！

最大52%OFF！

今、ブログを始めようとしている方、

今なら、ConoHaサーバーの「WINGパックプラン」が最大55%OFF！

「1,452円/月」が「643 円/月」の「低コスト」で始められるチャンスとなっております！

お申し込みはこちらから！

【国内最速No.1】高性能レンタルサーバーConoHa WING

ConoHa WINGは国内最速の高性能レンタルサーバーサービスで
初期費用無料、最低利用期間無しでご利用いただけます！

(この記事は2022年6月2日に投稿されました。)

WordPressではそれぞれの投稿ページに関連記事を表示することができます。

関連記事とは投稿記事の終わりの部分に、他の記事も見てもらえるよう同じブログ内の記事に関連する記事を複数選択して表示するものとなります。

他の記事も見てもらえることから、ユーザの滞在時間を長くさせる効果があり、SEO対策にも繋がりますのでつけておいて損はありません。

また、関連性の基準を変更することができるため、投稿記事の下の部分だけでなく、TOPページに「キーワードの関連記事」としても表示することもできます。

もし、関連記事を設置していない方や関連性の基準を変更したい方はこちらの記事を参考にしていただけますと幸いです。

今回はWordPressでカテゴリーやタグの関連記事を表示する方法について紹介していきます。

この記事はこんな方におすすめ

・投稿記事にその記事の関連記事を表示したい人
・キーワードの関連記事を表示したい人
・関連記事の関連性の基準を変更したい人

カテゴリーやタグの関連記事を表示する方法

関連記事は何を関連の基準とするかによって表示される記事が変わります。

例えば、関連の基準をカテゴリーにしている場合、同じカテゴリーに属している別の記事が関連記事として表示されるようになります。

また、関連の基準をタグにしている場合、同じタグがついている別の記事が関連記事として表示されるようになります。

そのため、関連記事の基準はカテゴリーやタグが基本になりますので、ここではカテゴリーやタグの関連記事を表示する方法を下記の2パターンでご紹介します。

特定したカテゴリーやタグの関連記事を表示する場合
カテゴリーやタグの関連記事の表示をページによって変える場合

特定したカテゴリーやタグの関連記事を表示する場合

まず1つ目は、特定したカテゴリーやタグの関連記事を表示する場合です。

こちらは、「A」というカテゴリーや「B」というタグなどの基準を特定して関連記事を表示するようになります。

例えば、「A」のカテゴリーを基準とした場合は、Aの関連記事が、「B」のタグを基準とした場合はBの関連記事がページ関係なく表示されます。

そのため、こちらはTOPページでキーワードの関連記事として表示されることが多いです。

カテゴリーとタグの両方についてご紹介します。

TOPページに「キーワードの関連記事」として表示すると、Googleのクローラーも巡回しやすくなるので、記事のインデックスや更新が早くなりますよ。

特定したカテゴリーの関連記事を表示する場合

まずは、特定したカテゴリーの関連記事を表示する場合です。

関連する基準をあるカテゴリーに設定するので、同じカテゴリーに属している記事を関連記事として表示します。

試しにTOPページに「球技」カテゴリーの関連記事を表示してみます。

⚫︎ front-page.php

<div class= "related_area">
	<h3>球技に関するスポーツ</h3>
<?php
$args = array(
    'post_type' => 'post', 
    'category_name' => 'kyugi',  //カテゴリーのスラッグ名
    'posts_per_page' => 9, // 表示件数
);
$cat_posts = get_posts( $args );
global $post;
if($cat_posts): ?>
<ul id="related-posts">
	<?php foreach(cat_posts as $post): 
		setup_postdata($post); ?>
		 <!-- ループstart -->
		 <li class= "related-post">				                 
			 <?php the_post_thumbnail('medium');?>
			 <p class= "postname">
				 <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
			 </p>
		 </li>
         <!-- ループend -->
	<?php endforeach; ?>
</ul>
<?php endif; ?>
<?php wp_reset_postdata(); ?>
</div>

<h3>球技に関するスポーツ</h3>

<?php

$args = array(

'post_type' => 'post',

'category_name' => 'kyugi', //カテゴリーのスラッグ名

'posts_per_page' => 9, // 表示件数

);

$cat_posts = get_posts( $args );

global $post;

if($cat_posts): ?>

<?php foreach(cat_posts as $post):

setup_postdata($post); ?>

<?php the_post_thumbnail('medium');?>

</p>

</li>

<?php endforeach; ?>

</ul>

<?php endif; ?>

<?php wp_reset_postdata(); ?>

</div>

⚫︎ CSS

.related-posts {
	display: flex;
    flex-wrap: wrap;
    width: 90%;
    margin: 0 auto;
}
.related-post {
    flex-grow: 1;
    border: 1px solid;
    text-align: center;
    margin: 30px 10px;
    width: 30%;
    box-shadow: 8px 8px 8px rgb(0 0 0 / 50%);
}
.related-post img {
    height: 87%;
    width: 100%;
}
.postname {
    font-size: 20px;
    padding: 14px;
}

.related-posts {

display: flex;

flex-wrap: wrap;

width: 90%;

margin: 0 auto;

}

.related-post {

flex-grow: 1;

border: 1px solid;

text-align: center;

margin: 30px 10px;

width: 30%;

box-shadow: 8px 8px 8px rgb(0 0 0 / 50%);

}

.related-post img {

height: 87%;

width: 100%;

}

.postname {

font-size: 20px;

padding: 14px;

}

実行結果

「球技」のカテゴリーに属している記事が関連記事として表示されてます。

そのため、球技スポーツが9つ並んで表示されています。

特定したタグの関連記事を表示する場合

続いて、タグの関連記事を表示する場合です。

関連する基準をタグに設定するので、同じタグがついている記事を関連記事として表示します。

こちらも試しに、TOPページに「個人」タグの関連記事を表示してみます。

<div class= "related_area">
	<h3>個人に関するスポーツ</h3>
<?php
$args   = array(
    'posts_per_page' => 10, // 表示する件数
    'tag'            => 'tag2' // 表示したいタグのスラッグを指定
);
$posts = get_posts( $args );
if ( $posts ): ?>
    <div id= "related-posts">
		<?php foreach ( $posts as $post ) :
			setup_postdata( $post ); ?>
			<div class= "related-post">				                 
				<?php the_post_thumbnail('medium');?>
				<p class= "postname">
					<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
				</p>
		</div>
		<?php endforeach; ?>
	</div>
<?php endif; ?>
<?php wp_reset_postdata(); ?>

<h3>個人に関するスポーツ</h3>

<?php

$args = array(

'posts_per_page' => 10, // 表示する件数

'tag' => 'tag2' // 表示したいタグのスラッグを指定

);

$posts = get_posts( $args );

if ( $posts ): ?>

<?php foreach ( $posts as $post ) :

setup_postdata( $post ); ?>

<?php the_post_thumbnail('medium');?>

</p>

</div>

<?php endforeach; ?>

</div>

<?php endif; ?>

<?php wp_reset_postdata(); ?>

⚫︎ CSS

.related-posts {
    display: flex;
    overflow-x: scroll;
    padding: 0 0 12px 0;
}
.related-post {
    width: 100%;
    margin: 0 20px;
    min-width: 280px;
    box-shadow: 8px 8px 8px rgb(0 0 0 / 50%);
    border: 1px solid black;
}
.related-post img {
    height: 87%;
    width: 100%;
}
.postname {
    text-align: center;
    font-size: 19px;
}

.related-posts {

display: flex;

overflow-x: scroll;

padding: 0 0 12px 0;

}

.related-post {

width: 100%;

margin: 0 20px;

min-width: 280px;

box-shadow: 8px 8px 8px rgb(0 0 0 / 50%);

border: 1px solid black;

}

.related-post img {

height: 87%;

width: 100%;

}

.postname {

text-align: center;

font-size: 19px;

}

実行結果

「球技」のカテゴリーに属している記事が表示されています。

また、横にスライドして表示するようにしています。

カテゴリーやタグの関連記事の表示をページによって変える場合

2つ目はカテゴリーやタグの関連記事の表示をページによって変える場合です。

こちらは、開いた記事が持っているカテゴリーやタグを基準とするため、記事によって表示される関連記事が変わります。

例えば、「サッカー」のページを開くと「球技」の関連記事が表示され、「剣道」のページを開くと「武道」の関連記事が表示されるようになります。

そのため、投稿ページの関連記事として表示されることが多いです。

こちらもカテゴリーとタグの両方でご紹介していきます。

ページのカテゴリーを関連記事として表示する場合

ページのカテゴリーを関連記事として表示してみます。

こちらの方法は投稿ページに表示することが多いので、「single.php」に下記のコードを記述していきます。

⚫︎ single.php

<div class= "related_posts_area">
	<p class= "cat_post_title">「<?php echo get_the_category_list('・'); ?>」に関連したスポーツ</p>
	<div class="related_post">
		<?php
		$categories = get_the_category($post->ID);
                if ( $categories ) :
		$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'=> 10,
			'category__in' => $category_ID,
		);
		$related_posts = new WP_Query($args);
		if( $related_posts-> have_posts() ): ?>
                <ul class="related_post">
		<?php
                while ($related_posts -> have_posts()) :
					$related_posts -> the_post();
		?>
		<li class= "post_list">
			<?php the_post_thumbnail('medium');?>
			<p class= "post_name">
				<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
			</p>
		</li>
		<?php endwhile; ?> 
                </ul>
		<?php else : ?>
		<p>関連記事はありません</p>
		<?php endif; ?>
	<?php wp_reset_postdata(); ?>
        <?php endif; ?>  
	</div>
</div>

<p class= "cat_post_title">「<?php echo get_the_category_list('・'); ?>」に関連したスポーツ</p>

<?php

$categories = get_the_category($post->ID);

if ( $categories ) :

$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'=> 10,

'category__in' => $category_ID,

);

$related_posts = new WP_Query($args);

if( $related_posts-> have_posts() ): ?>

<?php

while ($related_posts -> have_posts()) :

$related_posts -> the_post();

<?php the_post_thumbnail('medium');?>

</p>

</li>

<?php endwhile; ?>

</ul>

<?php else : ?>

<p>関連記事はありません</p>

<?php endif; ?>

<?php wp_reset_postdata(); ?>

<?php endif; ?>

</div>

実行結果

セパタクロと同じカテゴリー(「スポーツ一覧」や「球技」)がついているスポーツが関連記事として表示されています。

ページのタグを関連記事として表示する場合

ページのタグを関連記事として表示してみます。

こちらも「single.php」に下記のコードを記述していきます。

⚫︎ single.php

<div class= "related-posts-area">
	<p>「<?php echo get_the_tag_list( '<span>', '</span>・<span>', '</span>' ); ?>」に関連するスポーツ</p>
     <div class= "related-cat_post">
	<?php
	$current_tags = get_the_tags();
	if ( $current_tags ) :
		foreach ( $current_tags as $tag ) {
			$current_tag_list[] = $tag->term_id;
		}
		$args = array(
			'tag__in'        => $current_tag_list,
            'post__not_in'   => array( $post->ID ),
            'posts_per_page' => 5,
		);
		$related_posts = new WP_Query( $args );
		if( $related_posts->have_posts() ) : 
	?>
	<ul class="related_post">
		<?php 
		while ( $related_posts->have_posts() ) :
			$related_posts->the_post(); 
		?>
		<li class= "post_list">
			<?php the_post_thumbnail('medium');?>
			<p class= "post_name">
				<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
			</p>
		</li>
		<?php
		endwhile;
		?>
	</ul>
		<?php else : ?>
		<p>関連記事はありません</p>
		<?php endif; ?>
	<?php wp_reset_postdata(); ?>
	<?php endif; ?>
</div>

<p>「<?php echo get_the_tag_list( '<span>', '</span>・<span>', '</span>' ); ?>」に関連するスポーツ</p>

<?php

$current_tags = get_the_tags();

if ( $current_tags ) :

foreach ( $current_tags as $tag ) {

$current_tag_list[] = $tag->term_id;

}

$args = array(

'tag__in' => $current_tag_list,

'post__not_in' => array( $post->ID ),

'posts_per_page' => 5,

);

$related_posts = new WP_Query( $args );

if( $related_posts->have_posts() ) :

<?php

while ( $related_posts->have_posts() ) :

$related_posts->the_post();

<?php the_post_thumbnail('medium');?>

</p>

</li>

<?php

endwhile;

</ul>

<?php else : ?>

<p>関連記事はありません</p>

<?php endif; ?>

<?php wp_reset_postdata(); ?>

<?php endif; ?>

</div>

実行結果

セパタクロと同じタグ(「ドキドキ」や「団体」)がついているスポーツが関連記事として表示されています。

プラグインを使って関連記事を表示する場合

先ほどまでは、コードのみで関連記事を表示する方法について紹介しましたが、プラグインを使用することで関連記事を自動で表示することができます。

今回は試しに下記の2つのプラグインを使って関連記事を自動で表示してみます。

WordPress Related Posts Thumbnailsを使用した場合
Yet Another Related Posts Plugin(YARPP)を使用した場合

WordPress Related Posts Thumbnailsを使用した場合

まず1つ目は、「WordPress Related Posts Thumbnails」を使用した場合です。

WordPress Related Posts Thumbnailsはサムネイル付きで関連記事を表示することができるプラグインになります。

サムネイルだけでなく、関連記事の大きさやデザインなど、細かな部分をカスタマイズすることができます。

また、関連性の基準を選択することもきるため、カテゴリーやタグのみを基準とした関連記事を表示することができます。

実行結果 (カテゴリーの場合)

ラクロスと同じカテゴリーのスポーツが関連記事として表示されています。

実行結果 (タグの場合)

ラクロスと同じカテゴリーのスポーツが関連記事として表示されています。

また、ラクロスと同じタグを持つスポーツが関連記事として表示されています。

Yet Another Related Posts Plugin(YARPP)を使用した場合

2つ目は、Yet Another Related Posts Plugin(YARPP)を使用した場合です。

Yet Another Related Posts Plugin(YARPP)は投稿した記事のタイトルやタグ、カテゴリーなどから関連性の高い関連記事を自動的に表示することができるプラグインになります。

そのため、こちらのプラグインではカテゴリーやタグのみを基準とした関連記事を表示することができません。

実行結果

ラクロスと関連するスポーツが関連記事としてが表示されています。

まとめ

⚫︎ 関連記事とは投稿記事の下の部分に、同じブログ内の記事に関連する記事をランダムに選択して、表示させるもの

⚫︎ 関連記事はSEOに効果がある
(関連記事はユーザの滞在時間を長くさせる効果があるため)

⚫︎ カテゴリーやタグの関連記事を表示する方法としては下記の2つのパターンがある
・特定したカテゴリーやタグの関連記事を表示する場合
・カテゴリーやタグの関連記事の表示をページによって変える場合

⚫︎ プラグインを使用することでも関連記事を表示することができる
・WordPress Related Posts Thumbnails
・Yet Another Related Posts Plugin(YARPP)

関連記事とは

関連記事はSEOに効果がある

カテゴリーやタグの関連記事を表示する方法

特定したカテゴリーやタグの関連記事を表示する場合

特定したカテゴリーの関連記事を表示する場合

特定したタグの関連記事を表示する場合

カテゴリーやタグの関連記事の表示をページによって変える場合

ページのカテゴリーを関連記事として表示する場合

ページのタグを関連記事として表示する場合

プラグインを使って関連記事を表示する場合

WordPress Related Posts Thumbnailsを使用した場合

Yet Another Related Posts Plugin(YARPP)を使用した場合

まとめ

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル