関連プラグインYARPPで、関連記事のリストをサムネイル付きで表示

<?php
/*
YARPP Template: Kanren
Author: Kj
Description: 関連DEMO用テンプレート
*/
?>

<?php if (have_posts()) : ?>
    <?php while (have_posts()) : the_post(); ?>
        <div class="kenren_box">
			<div class="about-works-icon  zoomIn">
				<a href="<?php echo esc_url(get_permalink()); ?>">
					<?php if(has_post_thumbnail()): ?>
                    	<?php the_post_thumbnail('medium_large'); ?>
                	<?php endif; ?>
				</a>
			</div>	
			<a class="detail-link" href="<?php echo esc_url(get_permalink()); ?>">
              	<p class="title"><?php the_title(); ?></p>
              	<p class="news-text">
					<?php
        				$terms = get_the_terms($post->ID, 'demo-cat');
        				if ($terms) :
							foreach ($terms as $term) {
								echo '<span>' . $term->name . '</span>';
							}
						endif;
        			?>
				</p>
			</a>
		</div>					
    <?php endwhile; ?>
    <?php else: ?>
    <p>関連記事はありません</p>
<?php endif; ?>

.yarpp{
	width: 80%;
	max-width: 1800px;
	margin: auto;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1em;
}

.kenren_box .title{
	margin-top:2em;
	padding-top:0.5em;
	font-size:1.3em;
}

.kenren_box .about-works-icon {
	width:100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	object-position:50% 50%;
	margin-bottom:12px;
	border-radius: 5px;
	will-change: transform;
	background: #fff;
}

.about-works-icon img{
	width:100%;
	height:100%;
	object-fit: cover;
}
	
@media screen and (min-width: 1250px) {

	.yarpp{
		grid-template-columns: repeat(4, 1fr);
	}

}

<?php
	if (function_exists('yarpp_related')) {
		yarpp_related();
	}
?>
<?php endif; ?>