ワードプレスの投稿ページに関連記事を表示させるカスタマイズ方法

本日はワードプレスの投稿ページに関連記事を表示するカスタム方法をご紹介いたします。本記事で解説している関連記事は「同じカテゴリーに属している記事をランダムで抽出して表示する方法」です。まだ投稿している記事数が少ない頃のブログ運営初期に最適でとても使いやすいのでぜひともご活用くださいませ。

ワードプレスの投稿ページに関連記事を表示させるカスタマイズ方法

以下が関連記事を表示するためのソースです。html5に最適化されています。もしテーマに「html4」が採用されている場合はソースの一部を書き換えてご利用ください。schema.orgの仕様通りにHTMLをマークアップしていますので「html5」が採用されているテーマを使っている方にはぴったりのスクリプトですね。

関連記事のスクリプト

以下が関連記事を表示する用のPHPソースです。同じカテゴリーに投稿されている記事をランダムで出力。

<!-- 関連記事 -->
<?php
  if( has_category() ) {
  $cats = get_the_category();
  $catkwds = array();
    foreach($cats as $cat) {
      $catkwds[] = $cat->term_id;
    }
  }
?>

<?php
  $myposts = get_posts( array(
  'post_type' => 'post',
  'posts_per_page' => '6',
  'post__not_in' => array( $post->ID ),
  'category__in' => $catkwds,
  'orderby' => 'rand'
  ) );
  if( $myposts ):
?>

<div class="related">
  <h3 class="related-title">関連記事</h3>
  <ul class="related-list">
    <?php foreach($myposts as $post):
    setup_postdata($post); ?>
    <li>
      <article id="post-<?php echo the_ID(); ?>" <?php post_class(); ?> itemscope="itemscope" itemtype="http://schema.org/BlogPosting">
        <section class="post-content" itemprop="text">
          <figure class="post-thumbnail"><a href="<?php the_permalink(); ?>" rel="nofollow">
          <?php if( get_the_post_thumbnail() ) { ?>
          <?php the_post_thumbnail('large'); ?>
          <?php }else{ ?>
          <img src="<?php echo esc_html(get_stylesheet_directory_uri()); ?>/images/noimg.png" alt="">
          <?php  } ?></a>
          </figure>
        </section>
      <div class="post-header">
      <p class="post-title" itemprop="headline"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></p>
      </div>
      </article>
    </li>
    <?php endforeach; ?>
  </ul>
</div>
<?php wp_reset_postdata(); endif; ?>
<!-- 関連記事ここまで -->

関連記事のレイアウトを調整するCSS

そして、以下がレイアウトを調整する用のCSSです。以下のCSSでは「.site-content」などでクラスを指定しているのでXeoryBase専用となります。別のテーマで使う場合はCSSを書き換えて微調整ください。

.single .site-content .related{
  padding: 57px 32px 0;
}

.single .site-content .related-title{
  margin: 0 0 30px;
  padding: 25px 0 15px;
  margin-bottom: 20px;
  border-left: 0;
  border-bottom: 3px solid #a0e2e3;
  position: relative;
  font-size: 18px;
}

.single .site-content .related-title:before {
  content: '';
  width: 17%;
  height: 3px;
  background: #0097AD;
  position: absolute;
  bottom: -3px;
  left: 0;
}

@media screen and (max-width: 991px) {
  .single .site-content .related-title {
    font-size: 20px;
    padding: 13px 0 12px;
  }
  .single .site-content .related-title:before {
    width: 18%;
  }
}

.single .site-content article .related-list{
  display: flex;
  flex-wrap: wrap;
}

.single .site-content article .related-list  > li{
  width: 33.3%;
  padding: 0 10px 20px;
}

.single .site-content article .related-list li .post-thumbnail{
  padding-top: 90%;
  position: relative;
  overflow: hidden;
  margin-bottom: 10px;
}

.single .site-content article .related-list li .post-thumbnail img{
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  height: 100%;
  object-fit: cover;
  transition: all .4s;
}

.single .site-content article .related-list li .post-thumbnail:hover img{
  transform: translate(-50%,-50%) scale(1.15);
}

.single .site-content article .related-list li .post-title{
  font-size: 15px;
  font-weight: normal;
}

@media screen and (max-width: 768px){
  .single .site-content .related{
    padding: 24px 0px 0;
  }
  .single .site-content article .related-list > li{
    width: 50%;
  }
  .single .site-content article .related-list li  article.post{
    margin-bottom: 20px;
  }
  .single .site-content article .related-list li .post-title{
    margin-bottom: 0;
    font-size: 14px;
  }
}

使い方

１つ目のPHPコードは「single.php」に差し込みます。場所は関連記事を表示させたい場所で構いません。そして２つ目のCSSスクリプトはstyle.cssなどテーマ内のCSSファイルに直接ペーストすればOKです。関連記事が表示された例は本記事の少し下あたりを見てもらえれば確認いただけます。

まとめ

本日はワードプレスの投稿ページ内に関連記事を表示させる方法をざっとご紹介いたしました。同じカテゴリー内の記事を抽出してランダムで出力する命令文なので記事が少ない頃には最適です。記事が増えてくるとカテゴリー内の投稿が１００記事以上になってくるためカテゴリーよりもタグで切り替えの制御をかけるのもよし。

個人的には、カテゴリーを取得して、タグで類似性を判断する方法が好きです。よくある手法としては記事の類似性をカテゴリーとタグでポイント計算する組み方。同じカテゴリーに属する記事であれば+3点、同じタグがついている記事なら+5点で記事の関連度を算出して上位６記事を順番に表示させると精度が高まります。

もちろん、費用を抑える場合はタグのみで判断するのもOKです。記事が少ない時期、記事が増えた後、などあらゆる状況を考慮して組み上げる必要もあるので柔軟に対応できるポイント性が良さそうですね。