【カスタム投稿タイプ】今読んでいる記事と同じカテゴリーの記事を関連記事として表示する方法【WordPress】

WordPress作成したサイトで、記事本文の下に関連記事が表示されているのを見たことがあると思います。

関連記事があることにより、他の記事へのトラフィックアップも期待できます。

今回はWordPressでオリジナルテーマを作成する際、作成したカスタム投稿タイプの個別ページで関連記事をプラグイン無しで表示する方法を紹介します。

読んでいる記事と同じカテゴリー（ターム）の記事を何件か取得して表示するときに使えるコードだと思います。

今回の記事を読めば、カスタム投稿タイプの個別ページで下記のような関連記事の表示を実装することができます。

基本的には下記のコードをコピーして、関連記事を表示させたい箇所にペーストしていただければOKかと思います。

【前提条件】
テンプレート / single-blog.php
カスタム投稿タイプ名 / blog
タクソノミー / blog-cat

<?php
$terms = get_the_terms($post->ID, 'blog-cat'); // 表示している記事のタクソノミーを取得
$term_ID = [];

foreach ((array) $terms as $term):
    array_push($term_ID, $term->term_id); // タクソノミーのIDを格納
endforeach;

$args = [
    'post_type' => 'blog', //カスタム投稿タイプ名
    'post__not_in' => [$post->ID], // 今読んでいる記事を除く
    'posts_per_page' => 3, // 表示させたい記事数
    'orderby' => 'rand', // ランダムに表示、降順の場合は'desc'
    'tax_query' => [ // タクソノミーに関連付けられた投稿を表示
        [
            'taxonomy' => 'blog-cat', // タクソノミー名
            'terms' => $term_ID, // タクソノミーターム
        ],
    ],
];
$wp_query = new WP_Query($args);
if ($wp_query->have_posts()): ?>
<div class="container">
    <h2 class="related-title">関連記事</h2>
    <ul class="related-list">
        <?php while ($wp_query->have_posts()) : $wp_query->the_post(); ?>
        <li class="related-item">
            <a href="<?php the_permalink(); ?>" class="related-card">
                <div class="related-img">
                    <?php the_post_thumbnail(); // 関連記事のアイキャッチを表示 ?>
                </div>
                <div class="related-text-wrap">
                    <div class="related-info">
                        <?php $terms = get_the_terms($post->ID, 'blog-cat'); // 関連記事が属するカテゴリーを取得 ?>
                        <?php foreach ($terms as $term) : ?>
                        <span class="category"><?php echo esc_html($term->name); // 関連記事のカテゴリー名を表示 ?></span>
                        <?php endforeach; ?>
                    </div>
                    <h3 class="related-card-title"><?php the_title(); // 関連記事タイトル?></h3>
                </div>
            </a>
        </li>
        <?php endwhile; ?>
    </ul>
</div>
<?php endif; ?>
<?php wp_reset_postdata(); ?>

こちらのコードの場合、今読んでいる記事と同じカテゴリー（ターム）の記事がランダムで3件表示されるかと思います。

表示記事数などは適宜変更してください。

これを「関連記事」として表示しておけば他のページにリンクしやすくなり、サイト内の回遊性も高まるかと思います。

下記のCSSは上記のコードで実装した場合の一例になります。

こちらも適宜変更してください。

/* スタイルのリセット */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

a {
    text-decoration: none;
}

/* ここから関連記事のCSS */

.container {
    max-width: 1000px;
    width: 100%;
    margin: 0 auto;
    padding: 5%;
}

.related-title {
    margin-bottom: 15px;
    font-size: 20px;
}

.related-list {
    display: flex;
    flex-wrap: wrap;
}

.related-card {
    color: #222;
}

.related-item {
    width: 33.3333%;
    list-style: none;
}

.related-img img {
    width: 100%;
    height: auto;
    vertical-align: bottom;
}

.related-text-wrap {
    padding: 15px;
}

.related-card-title {
    margin-bottom: 5px;
    font-size: 18px;
}

.related-info {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.related-info .category {
    margin-right: 5px;
    margin-bottom: 5px;
    padding: 0 5px;
    font-size: 12px;
    color: #fff;
    background-color: #33ccff;
    border-radius: 3px;
}

@media screen and (max-width: 767px) {
    .related-item {
        width: 100%;
    }

    .related-item:not(:first-child) {
        margin-top: 10px;
    }
}

以上、今読んでいる記事と同じカテゴリーの記事を関連記事として表示する方法でした。