【コピペ】新着記事一覧をプラグインなしで表示｜関連コンテンツ風

<?php $myposts = get_posts('numberposts=6'); ?>
<?php $my_post_count=1; ?>
<aside class="my-recent-post">
<ul>
<?php foreach($myposts as $post):setup_postdata($post); ?>
<?php if($my_post_count == 1): ?>
<li><a href="<?php the_permalink(); ?>"> <?php if( has_post_thumbnail() ): ?>
<?php $postthumb = wp_get_attachment_image_src( get_post_thumbnail_id(), 'Img320x210'); ?>
<div id="my-first-recent-post" class="thumb" style="background-image: url(<?php echo $postthumb[0]; ?>)"></div> <?php elseif( preg_match( '/wp-image-(\d+)/s', $post->post_content, $thumbid ) ): ?>
<?php $postthumb = wp_get_attachment_image_src( $thumbid[1], $size ); ?>
<div id="my-first-recent-post" class="thumb" style="background-image: url(<?php echo $postthumb[0]; ?>)"></div> <?php else: ?>
<div id="my-first-recent-post" class="thumb" style="background-image: url(<?php echo get_stylesheet_directory_uri(); ?>/noimage.png)"></div> 
<?php endif; ?> <div id="my-first-recent-post-text" class="text">
<?php the_title(); ?><br>
<div class="list-cat"><?php $cat = get_the_category(); $cat = $cat[0]; { echo $cat->cat_name; } ?></div>
</div>
</a></li>
<?php else:?>
<li><a href="<?php the_permalink(); ?>"> <?php if( has_post_thumbnail() ): ?>
<?php $postthumb = wp_get_attachment_image_src( get_post_thumbnail_id(), 'Img320x210'); ?>
<div class="thumb" style="background-image: url(<?php echo $postthumb[0]; ?>)"></div> <?php elseif( preg_match( '/wp-image-(\d+)/s', $post->post_content, $thumbid ) ): ?>
<?php $postthumb = wp_get_attachment_image_src( $thumbid[1], $size ); ?>
<div class="thumb" style="background-image: url(<?php echo $postthumb[0]; ?>)"></div> <?php else: ?>
<div class="thumb" style="background-image: url(<?php echo get_stylesheet_directory_uri(); ?>/noimage.png)"></div> 
<?php endif; ?> <div class="text">
<?php the_title(); ?><br>
<div class="list-cat"><?php $cat = get_the_category(); $cat = $cat[0]; { echo $cat->cat_name; } ?></div>
</div>
</a></li>
<?php endif; ?>
<?php $my_post_count++; ?>
<?php endforeach; ?> </ul>
</aside>
<?php wp_reset_postdata(); ?> 

.my-recent-post {
margin: 0 auto 0;
}
.my-recent-post ul {
list-style: none;
margin: 0px;
padding: 0px;
}
.my-recent-post li {
margin-top: 2px;
} 
.my-recent-post li a {
padding: 5px 0;
border: none;
color: #000000;
flex: 1;
font-size: 14px;
text-decoration: none;
display: block;
font-weight:bold;
}
.my-recent-post li a:hover {
background-color: #eeeeee;
}
.my-recent-post li .text {
line-height: 1.5em;
}
@media (max-width: 599px) {
.my-recent-post {
padding: 10px 0;
}
.my-recent-post #my-first-recent-post {
width: 100%;
height: 250px;
float: none;
background-size: cover;
background-position: center center;
}
.my-recent-post li .thumb {
width: 100px;
height: 80px;
float: left;
background-size: cover;
background-position: center center;
}
.my-recent-post li .text {
margin-left: 110px;
}
.my-recent-post #my-first-recent-post-text {
padding-top: 10px;
margin-left: 0px;
} 
.my-recent-post li a:after {
content: "";
display: block;
clear: both;
}
}
@media (min-width: 600px) {
.my-recent-post ul {
display: flex;
flex-wrap:wrap;
}
.my-recent-post li{
display: flex;
flex: 0 0 33%;
padding: 0 5px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.my-recent-post li .thumb{
width: 100%;
height: 210px;
margin-bottom: 5px;
background-size: cover;
background-position: center center;
}
.my-recent-post li .text{
margin-left: 0;
}
}
.my-recent-post-title {
border-bottom: solid 3px orange;
position: relative;
width:200px;
text-align:left;
padding-left: 1em;
padding-bottom: 10px;
display:inline-block;
font-size: 16px;
}
.my-recent-post-title:after {
position: absolute;
content: " ";
display: block;
border-bottom: solid 3px gold;
bottom: -3px;
width: 20%;
}
.list-cat {
font-size: 12px;
color: darkgray !important;
font-weight: normal;
margin-top:5px;
}

<?php $myposts = get_posts('numberposts=3'); ?>

<?php $myposts = get_posts('numberposts=6&cat=-111'); ?>