【サムネ付きカスタマイズ】YARPPで関連記事を表示させる方法

<?php if (have_posts()) : ?>
<h4 class="post-connection">関連記事</h4>
<div class="related-post">
	<?php while (have_posts()) : the_post(); ?>
	<?php if (has_post_thumbnail()) : ?>
	<article>
		<div class="imgtxt">
			<a href="<?php the_permalink(); ?>">
				<?php
					$url = wp_get_attachment_url(get_post_thumbnail_id($post->ID));
					?>
				<?php if ($url) : ?>
				<div class="img bg" style="background-image: url( '<?php echo $url; ?>' );"></div>
				<?php endif; ?>
			</a>
		</div>
		<div class="ttl">
			<dl>
				<dt datetime="<?php the_time('Y-m-d'); ?>"><?php the_time('Y/m/d(D)') ?></dt>
				<dd>
					<p class="title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></p>
				</dd>
			</dl>
		</div>
	</article>
	<?php endif; ?>
	<?php endwhile; ?>
</div>
<?php else : ?>
<?php endif; ?>

.bg{
width: 100%;
background-size: cover;
background-repeat:repeat;
background-position:center center;
}
.post-connection{
text-align:left;
border-bottom: 1px solid #4a4a4a;
width: 100%;
padding:0 0 5px 0;
margin:40px 0 20px 0;
}
.post-connection::before{
content: "";
}
.related-post article{
width: 100%;
padding: 0;
display: flex;
margin-bottom:30px;
}
.related-post article .imgtxt{
width: 30%;
margin:0;
}
.related-post article .imgtxt .img{
margin: 0;
width: 100%;
}
.related-post article .ttl{
padding-left:20px;
}
.related-post h2{
padding: 10px 0;
font-size: 15px;
background-color:inherit;
border: none!;
font-weight: bold;
margin-top:0;
}
.related-post .title a{
font-weight:bold;
font-size: 15px;
}
.related-post p{
margin: 0;
}
.related-post a{
font-weight: normal;
color: #333;
}
@media screen and (max-width:768px){
.related-post .title a{
font-weight:bold;
font-size: 14px;
}