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

<?php
$categories = get_the_category($post->ID); // 表示している記事のカテゴリーを取得

$category_ID = [];

foreach ($categories as $category):
    array_push($category_ID, $category->cat_ID);
endforeach;

$args = [
    'post__not_in' => [$post->ID], // 今読んでいる記事を除く
    'posts_per_page' => 3, // 表示させたい記事数
    'category__in' => $category_ID, // カテゴリーIDを使って、そのカテゴリーに属する記事を表示:
    'orderby' => 'rand', // ランダムに表示、降順の場合は'desc'
];
$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">
                    <h3 class="related-card-title"><?php the_title(); // 関連記事タイトル ?></h3>
                    <div class="related-info">
                        <?php $categories = get_the_category(); // 関連記事が属するカテゴリーを取得?>
                        <?php foreach ($categories as $category) : ?>
                        <span class="category"><?php echo esc_html($category->cat_name); // 関連記事のカテゴリー名を表示 ?></span>
                        <?php endforeach; ?>
                    </div>
                </div>
            </a>
        </li>
        <?php endwhile; ?>
    </ul>
</div>
<?php endif; ?>
<?php wp_reset_postdata(); ?> 

/* スタイルのリセット */
* {
    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;
    }
}