WorePressでプラグインを使わずにカテゴリー別に関連記事を表示

完成予想図

同じカテゴリーに所属する関連記事を、希望する記事の数だけ表示させていきます。
また、アイキャッチ画像が設定されていない場合は、No image画像がかわりに表示するように考えていきます。

WordPressの記事ページ(single.php等)に記述

HTML側への記述として、single.phpなどの記事ページにあたる部分の記事の最後に表示するように想定して記述していきます。
下記をそのまま任意の場所へコピー

<div class="related_posts">
<h3>関連するページはこちら

    <?php
    // 同じカテゴリから記事を4件呼び出す
    $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'=> 4,
      'category__in' => $category_ID,
      'orderby' => 'rand', // ランダムに記事を選ぶ
    );
    $query = new WP_Query($args);
    if( $query -> have_posts() ): while ($query -> have_posts()) : $query -> the_post();
    ?>
    <div class="col2">
        <a href="<?php the_permalink(); ?>">
        <?php 
            if ( has_post_thumbnail() ) { // 投稿にアイキャッチ画像が割り当てられているかチェックします。
                the_post_thumbnail('post-thumbnails', array('width' => '100%', 'alt' => the_title_attribute('echo=0')));
            } else {
            echo '<img src="http://segnotes.com/wp-content/uploads/2020/10/noimage.jpg" width="100%" />';
            }
        ?>
        <h4 class="title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h4>
        </a>
    </div>
    <?php endwhile; endif; ?>
    <?php wp_reset_postdata(); ?>
</div>

‘posts_per_page’=> 4の部分は、現在４記事だけ表示する設定ですが、任意で変更してください。

cssでレイアウトを整える。

cssでレイアウトを整えてあげます。

.related_posts h3 {
    font-size: 24px;
    text-align: left;
    line-height: 1.5;
    background: #f3f3f3;
    border-left: 4px solid #80AEBF;
    padding: 14px 20px 13px;
    margin: 1em 0 1em;
    clear: both;
}
    .col2 {
        float: left;
        width: 48%;
        margin-right: 1%;
        margin-left: 1%;
        margin-top: 20px;
        margin-bottom: 20px;
        padding-bottom: 20px;
    }
    .col2 h4{
        display: block;
        font-size: 20px;
        font-weight: bold;
        color: #333332;
        padding: 0px 0 0px 0;
        text-align: left;
        line-height: 150%;
        letter-spacing: 1px;
    }

以上です。