【WordPress】記事ページにプラグインなしで関連記事を表示させる

<?php
// 表示中の記事のカテゴリーを取得
$categories = get_the_category();
$category_ids = array();
foreach($categories as $category){
  $category_ids[] = $category->term_id;
}

// 同じカテゴリーを持つ記事を新しい順に 3 件取得（表示中の記事は除く）
$related_posts = get_posts(array(
  'post_type' => 'post',
  'posts_per_page' => 3,
  'post__not_in' => array($post->ID),
  'category__in' => $category_ids,
  'orderby' => 'date'
));
?>
<?php if(count($related_posts)) : ?>
  <aside>
    <h2>関連記事</h2>
    <ul class="related-posts">
      <?php foreach($related_posts as $post) : ?>
        <?php setup_postdata($post); ?>
        <li>
          <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
            <div class="thumbnail"><?php the_post_thumbnail('thumbnail'); ?></div>
            <div class="title"><?php the_title(); ?></div>
            <div class="date"><?php the_time(__(' Y.m.d')) ?></div>
          </a>
        </li>
      <?php endforeach; ?>
    </ul>
  </aside>
<?php endif; ?>

// カテゴリーが完全一致する記事を新しい順に 3 件取得（表示中の記事は除く）
$related_posts = get_posts(array(
  'post_type' => 'post',
  'posts_per_page' => 3,
  'post__not_in' => array($post->ID),
  'category__and' => $category_ids,
  'orderby' => 'date'
));

// 同じカテゴリーを持つ記事をランダムに 3 件取得（表示中の記事は除く）
$related_posts = get_posts(array(
  'post_type' => 'post',
  'posts_per_page' => 3,
  'post__not_in' => array($post->ID),
  'category__in' => $category_ids,
  'orderby' => 'rand'
));

// 表示中の記事のタグを取得
$tags = get_the_tags();
$tag_ids = array();
foreach($tags as $tag){
  $tag_ids[] = $tag->term_id;
}

// 同じタグを持つ記事を新しい順に 3 件取得（表示中の記事は除く）
$related_posts = get_posts(array(
  'post_type' => 'post',
  'posts_per_page' => 3,
  'post__not_in' => array($post->ID),
  'tag__in' => $tag_ids,
  'orderby' => 'date'
));

.related-posts {
  display: flex;
  gap: 20px;
}

.related-posts li {
  flex-basis: calc(100% / 3 - 20px / 3 * 2);
}

.related-posts li a {
  display: flex;
  flex-direction: column;
  font-weight: 500;
  color: inherit;
  height: 100%;
}

.related-posts li a:hover {
  opacity: 0.7;
}

.related-posts .thumbnail {
  margin-bottom: 5px;
  text-align: center;
}

.related-posts .title {
  flex-grow: 1;
  line-height: 1.6;
  font-size: var(--body-font-size-16);
}

.related-posts .date {
  text-align: right;
  color: #999;
  font-size: var(--body-font-size-14);
}