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

2018.02.27 2020.10.25 WordPress

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

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

完成したソースがこちら。

single.phpなど任意の場所に追加してください。

single.php

<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文字のみ表示されるようになっています。

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