WordPressでプラグインを使わずに関連記事一覧を表示する方法

2018.02.27 2018.03.26WordPress
WordPressでプラグインを使わずに関連記事一覧を表示する方法

WordPressの投稿(シングルページ)に関連記事を表示するプラグインはいろいろありますが、今回はプラグインを使わずに表示する方法をご紹介します。

WordPress投稿ページに関連記事一覧を表示するソース

まずは完成したソースから。

<div class="post">

<!-- 投稿ループここから -->
<?php if(have_posts()) : while(have_posts()) : the_post(); ?>
<?php the_title(); ?>
<?php the_content(); ?>
<?php endwhile; else : ?>
  <p>記事が見つかりません。</p>
<?php endif; ?>
<?php wp_reset_postdata(); wp_reset_query(); ?>
<!-- 投稿ループここまで -->

<!-- 関連記事一覧ここから -->
<div class="related">
<div class="headline">関連記事</div>

<ul>

<?php
  $categories = get_the_category($post->ID);
  $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'=> 6,
    'category__in' => $category_ID,
    'orderby' => 'rand',
    );
  $query = new WP_Query($args);
?>
<?php if( $query -> have_posts() ): ?>
<?php while ($query -> have_posts()) : $query -> the_post(); ?>

<li>
  <a href="<?php the_permalink(); ?>">

    <div class="thumb">
    <?php if ( has_post_thumbnail() ): ?>
      <?php the_post_thumbnail( 'thumb640' ); ?>
    <?php else: ?>
      <img src="<?php bloginfo('template_url'); ?>/images/no_image_640.png" alt="<?php the_title(); ?>" />
    <?php endif; ?>
    </div>

    <div class="inner">
      <div class="date"><?php echo get_the_date('Y.m.d'); ?></div>
      <div class="title">
        <?php
          if(mb_strlen($post->post_title)>30):
            $title= mb_substr($post->post_title,0,30) ; echo $title. '...' ;
          else:
            echo $post->post_title;
          endif;
        ?>
      </div>
    </div>

  </a>
</li>

<?php endwhile; else : ?>
  <li>記事が見つかりません。</li>
<?php endif; ?>
<?php wp_reset_postdata(); wp_reset_query(); ?>

</ul>

</div>
<!-- 関連記事一覧ここまで -->

</div>
<!-- .post -->

投稿部分のループは今回は本題ではないのでサラッと書いてあります。必要に応じて書き換えてください。

上のソースでは、関連記事をリストタグで囲み、クラス名「thumb」というdivでサムネイルを表示、サムネイル画像が設定されていない場合には代替画像が表示されます。記事タイトルは最初の30文字のみ表示されるようになっています。

この辺りの作り方は通常のループと変わりありませんので、お好みに合わせてカスタマイズしてください。

ループのクエリ設定により関連記事を抽出

今回ご紹介したソースでは、ループのクエリ設定で関連記事を抽出しています。

一言で「関連記事」と言っても何を基準に関連しているとするのか? というのが微妙なところですが、今回は同じカテゴリ―に属する記事をランダムで抽出して6件表示するよう指定しています。

関連記事を表示するプラグインを見てみると、今回のようにカテゴリーなどから記事を抽出するものもあれば、共通する単語が多い記事を取得するという面白いものもありました。

回遊率を高めるためにも、関連記事は重要なコンテンツです。今後も抽出条件など検証しつつ共有できればと思います。

WordPressテーマ『HIGHLAND』公開しました

WordPressテーマ『HIGHLAND』を公開しました

このブログで紹介しているカスタマイズを、これでもかと盛り込んだ高性能なテーマになっております。商用・非商用問わず無料、是非ご利用ください。

柴田 竹思

柴田 竹思

日本&ベトナム二拠点生活中のWeb系フリーランス。最近は育児6:仕事4のバランスで生活してます。これでもかってくらい奥さんの尻に敷かれてる座布団系男子です。

プロフィールはこちら