WordPressで、プラグインを使用せずにサムネイル付きの関連記事を出力する方法です。

Contents

  1. 関連記事を表示させる
    1. related-posts.phpを作成する
    2. single.phpを編集する

関連記事を表示させる

「single.php」の関連記事を表示させたい箇所に、以下を直接記述しても問題はありませんが、コードが長く煩雑になるので、今回は「related-posts.php」という名前でテンプレートファイルを作成し、それを「single.php」で呼び出すようにしていきます。

related-posts.phpを作成する

テーマフォルダ直下に用意した、「related-posts.php」に下記を記述します。

<aside class="related-posts">

  <h2>Related posts</h2>

  <?php
    $categ = get_the_category($post->ID);
    $catID = array();

    foreach($categ as $cat){
      array_push($catID, $cat -> cat_ID);
    }

    $args = array(
      'post__not_in' => array($post->ID),　// 表示している記事は除く
      'category__in' => $catID,　// カテゴリーのIDで記事を取得
      'posts_per_page' => 6,　// 表示する件数
      'orderby' => 'rand' // ランダムで取得
    );

    $the_query = new WP_Query($args);
    if($the_query -> have_posts()): ?>

    <div class="related-posts__list">
    <?php while($the_query -> have_posts()) : $the_query -> the_post();
    ?>
      
        <div class="related-posts__item">
          <a href="<?php the_permalink(); ?>">

            <div class="related-posts__item-thumb">
              <?php if(has_post_thumbnail()): ?>
                <?php the_post_thumbnail(); ?>
              <?php endif; ?>
            </div>

            <h3 class="post-title"><?php the_title(); ?></h3>
          </a>
        </div>
        <?php endwhile; ?>
      </div>
    <?php endif; wp_reset_postdata(); ?>
  </aside>

カテゴリ情報を元に、関連記事を6個ランダムに呼び出すようにしています。

single.phpを編集する

テーマフォルダ直下に用意した「related-posts.php」を「single.php」内の関連記事を表示させたい箇所に、以下の様に記述して先ほど作成した、「related.posts.php」を呼び出します。

<?php get_template_part( 'related-posts' ); ?>

以上が、プラグインを使用せずに関連記事を表示する方法でした。