【コピペOK】プラグインなしWordPressで　関連記事 を表示する方法

function codeless_get_related_posts( $post_id, $related_count, $args = array() ) {
  $terms = get_the_terms( $post_id, 'category' );
  
  if ( empty( $terms ) ) $terms = array();
  
  $term_list = wp_list_pluck( $terms, 'slug' );
  
  $related_args = array(
    'post_type' => 'post',
    'posts_per_page' => $related_count,
    'post_status' => 'publish',
    'post__not_in' => array( $post_id ),
    'orderby' => 'rand',
    'tax_query' => array(
      array(
       /*同じカテゴリーの関連記事を表示させます*/
        'taxonomy' => 'category',
        'field' => 'slug',
        'terms' => $term_list
      )
    )
  );
  return new WP_Query( $related_args );
}

<?php
  $the_query = codeless_get_related_posts( get_the_ID(), 4 );
	global $cl_from_element;
	$cl_from_element['is_related'] = true;						
	if ( $the_query->have_posts() ) : 
?>
<div class="container">
  <div class="row related_posts">
	  <h3><?php echo esc_attr__( '関連記事' ) ?></h3>
		<?php $i = 0;
			while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
		<div class="col-xs-12 related_post">
			<a href="<?php the_permalink(); ?>">
				<div class="related_thumb">
					<?php the_post_thumbnail('medium'); ?>
				</div>
				<p class="related_title">
					<?php the_title(); ?>
				</p>
			</a>
		</div>
		<?php	
			$i++;
			if( $i == 4 )
			break;
			endwhile ;?>	
		<?php endif; 
			wp_reset_query();
			$cl_from_element['is_related'] = false;
		?>
	</div>
</div>

.related_posts h3{
	margin-bottom: 30px;
}

.related_post {
	 border: 1px solid #F1F2F4;
    margin-bottom: 5%;
    margin-right: 2%;
    margin-left: 2%;
    padding-bottom: 20px;
	 text-align: center;
}

.related_thumb {
	margin-top: 30px;
	margin-bottom: 30px;
}

.related_thumb img {
	object-fit: fill;
	width: 95%;
	height: 200px;
}


@media screen and (min-width:768px) {
	.related_post {
	 width: 46%;
  }
}