WordPressの記事ページで関連する記事一覧を実装する方法をプラグインなしで解説！
みなさんこんにちは！エンジニアの高澤です！
今回はWordPressの記事ページで関連する記事一覧を実装する方法をプラグインなしで解説していきたいと思います。
今回の内容は投稿データ（詳細ページ）のあるブログやメディアサイト、ECサイトなどでしばしば実装される内容になるかと思います。
よろしければぜひ当記事をお仕事にご活用いただけましたら幸いです。
目次
今回実装する内容
それではまず今回実装する内容について解説していきたいと思います。
今回実装する内容は記事詳細ページに一般的によくある関連記事一覧の実装になります。
下図のようなイメージで、現在開いている記事ページと同一のカテゴリーが設定された記事をランダムに表示させる実装になります。
記事ページを更新するたびに関連記事一覧の内容がランダムに表示されるようになっております。
関連する記事一覧のメリット
関連する記事一覧を表示することでいくつかのメリットが考えられます。
- ユーザーとの関係値の向上
- SEO向上
- コンテンツの再利用と強化
- ユーザーのナビゲーションの支援
それぞれ解説いたします。
ユーザーとの関係値の向上
関連記事一覧を提供することで、訪問者が興味を持つかもしれない関連コンテンツに簡単にアクセスできます。これにより、ユーザーの滞在時間が増え、ページビュー数が向上する可能性があります。
SEO向上
関連記事を表示することで、サイト内のページ間の関連性が高まります。これにより、検索エンジンのクローラーがサイトの構造を理解しやすくなり、ランキング向上の可能性があります。
コンテンツの再利用と強化
関連記事一覧を通じて、以前のコンテンツを再利用し、更新する機会が生まれます。これにより、古いコンテンツが新しい読者にも見つけやすくなり、コンテンツの価値が強化されます。
ユーザーのナビゲーションの支援
ユーザーが関連記事を見つけやすいことで、サイト内をナビゲートする際のストレスが減ります。これにより、ユーザーエクスペリエンスが向上し、サイトへの再訪やリピート利用が促進される可能性があります。
実装する方法
それでは早速実装する方法について解説していきたいと思います。
PHPコードを記述
まず初めに以下のPHPコードをsingle.phpもしくはsingle-{post_type}.phpなどにコピー＆ペーストしてください。
<div class="single__detail__box__left__box__related">
<div class="single__detail__box__left__box__related__box">
<h2 class="single__detail__box__left__box__related__box__title">
関連する記事
</h2>
</div>
<ul class="single__detail__box__left__box__related__box__list">
<?php
$taxonomy = 'category';
$current_terms = get_the_terms($post->ID, $taxonomy);
$terms = array();
if($current_terms):
foreach($current_terms as $current_term):
array_push($terms, $current_term->slug);
endforeach;
endif;
$args = array(
'post_type' => 'post',
'posts_per_page' => 6,
'orderby' => 'rand',
'post__not_in' => array($post->ID),
'tax_query' => array(
array(
'taxonomy' => $taxonomy,
'terms' => $terms,
'field' => 'slug',
),
),
);
$my_query = new WP_Query($args);
if($my_query->have_posts()):
while($my_query->have_posts()):$my_query->the_post();
?>
<li class="single__detail__box__left__box__related__box__list__items">
<a class="single__detail__box__left__box__related__box__list__items__link" href="<?php echo get_permalink(); ?>">
<span class="single__detail__box__left__box__related__box__list__items__thumbnail">
<?php
if(has_post_thumbnail()):
the_post_thumbnail();
else:
?>
<img class="single__detail__box__left__box__related__box__list__items__thumbnail__img" src="<?php echo get_theme_file_uri(); ?>/image/noimage.png">
<?php
endif;
?>
</span>
<span class="single__detail__box__left__box__related__box__list__items__meta">
<h3 class="single__detail__box__left__box__related__box__list__items__meta__title">
<?php echo get_the_title(); ?>
</h3>
<span class="single__detail__box__left__box__related__box__list__items__meta__catAndTime">
<span class="single__detail__box__left__box__related__box__list__items__meta__cat">
<?php
$related_cats = get_the_terms($post->ID, $taxonomy);
if(!empty($related_cats)):
foreach($related_cats as $val):
?>
<span class="single__detail__box__left__box__related__box__list__items__meta__cat__link">
<?php echo $val->name; ?>
</span>
<?php
endforeach;
endif;
?>
</span>
<span class="single__detail__box__left__box__related__box__list__items__meta__time">
<?php echo get_the_time('Y.m.d'); ?>
</span>
</span>
</span>
</a>
</li>
<?php
endwhile;
else:
?>
<p>現在準備中です。</p>
<?php
endif;
wp_reset_postdata();
?>
</ul>
</div>上記コードをペーストして保存が完了したら、記事ページに開いているページと同じカテゴリーの記事が6つ表示されているかと思います。
ここでは投稿タイプは投稿「post」、タクソノミーはカテゴリー「category」で設定した上で実装しております。
もしこれを例えば投稿タイプがカスタム投稿タイプで「custom_post_type」であれば、以下のよう部分を…
'post_type' => 'post',以下のように変更していただき、
'post_type' => 'custom_post_type',またタクソノミーがカスタムタクソノミーの「custom_taxonomy」であれば以下の部分を…
$taxonomy = 'category';以下のように変更してください。
$taxonomy = 'custom_taxonomy';変更していただけますと、それぞれに対応してカスタマイズすることが可能です。
CSSコードを記述
次はCSSを記述してレイアウトを整えます。
以下のコードをCSSファイル等にコピー＆ペーストしてください。
.single__detail__box__left__box__related {
margin-top: 30px;
}
.single__detail__box__left__box__related__box {
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 1px solid #555;
}
.single__detail__box__left__box__related__box__title {
display: flex;
justify-content: space-between;
align-items: end;
font-size: 22px;
}
.single__detail__box__left__box__related__box__title__text {}
.single__detail__box__left__box__related__box__title__count {
font-size: 11px;
color: #888;
font-weight: 400;
}
.single__detail__box__left__box__related__box__list {}
.single__detail__box__left__box__related__box__list:after {
content: "";
display: block;
clear: both;
}
.single__detail__box__left__box__related__box__list__items {
width: 216px;
height: 250px;
float: left;
margin-right: 26px;
margin-bottom: 26px;
}
.single__detail__box__left__box__related__box__list__items:nth-child(3n) {
margin-right: 0;
}
.single__detail__box__left__box__related__box__list__items__link {}
.single__detail__box__left__box__related__box__list__items__thumbnail {
display: block;
margin-bottom: 12px;
}
.single__detail__box__left__box__related__box__list__items__thumbnail__img {
width: 100%;
height: 120px;
}
.single__detail__box__left__box__related__box__list__items__meta {
display: block;
}
.single__detail__box__left__box__related__box__list__items__meta__title {
font-size: 15px;
margin-bottom: 9px;
line-height: 1.5;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
}
.single__detail__box__left__box__related__box__list__items__meta__catAndTime {
display: flex;
align-items: center;
font-size: 13px;
}
.single__detail__box__left__box__related__box__list__items__meta__cat {}
.single__detail__box__left__box__related__box__list__items__meta__cat__link {
display: inline-block;
/* background: #333; */
background: #2a627e;
color: #fff;
padding: 3px 7px;
font-size: 11px;
border-radius: 2px;
}
.single__detail__box__left__box__related__box__list__items__meta__time {
display: inline-block;
margin-left: 9px;
color: #777;
}ペーストして保存が完了したら、以下のように関連記事一覧が実装できていることが確認できたかと思います。
多少見た目が違ったり崩れていたりする場合もあるかと思いますが、いずれにせよご自身にサイトに適した形にカスタマイズしていただけますと幸いです。
これで関連記事一覧の実装は完了です。お疲れ様でした！
まとめ
WordPressの記事ページで関連する記事一覧を実装する方法をプラグインなしで解説する内容は以上になります。
今回の内容はブログやメディアサイト、またECサイトなど投稿データ（詳細ページ）のあるサイトでしばしば実装される内容になるかと思います。
よろしければぜひ当記事をお仕事などにご活用いただけましたら幸いです。
