SWELL│新着記事リストを表示するカスタマイズ

function motoki_news2(){
	$str = '<div class="motoki_news_area">';
	global $post;
	$arg   = array(
    	'posts_per_page' => 4,
    	'orderby'        => 'date', 
    	'order'          => 'DESC',
	);
	global $wp;
	setup_postdata($post);
	$posts = get_posts($arg);
	foreach($posts as $post):
	setup_postdata($post);
    $post_id = $arg[0];
    $title = get_the_title($post_id);
    $url = get_permalink($post_id);
	$post_date = get_the_date('Y/m/d', $post_id);
	$category = get_the_category($post_id);
    if (has_post_thumbnail($post_id)) {
        $thumb_id = get_post_thumbnail_id($post_id);
        $thumb_img = wp_get_attachment_image_src($thumb_id, 'medium');
        $src = $thumb_img[0];
    } else {
        $src = wp_upload_dir()['baseurl'].'/2022/10/dummy.png';
    }	
	$str.='<div class="news2-card"><a href="'.$url.'" class="news2-link"><img src="'.$src.'" alt="'.$title.'"><div class="news2-info"><div class="news2-title">'.$title.'</div><span class="news2-date">'.$post_date.'</span><span class="news2-cat">'.$category[0]->name.'</span></div></a></div>';
	endforeach;
	$str.='</div>';
	wp_reset_postdata();
	return $str;
}
add_shortcode('motoki_news2', 'motoki_news2');

.motoki_news_area {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 2em 0;
}
.news2-info {
    padding: 0.5em;
}
.news2-card {
	margin: 0 auto;
	max-width: 46%;
	border-radius: 8px;
	box-shadow: 0px 5px 15px 0px rgb(0 0 0 / 35%);
	background-color: #fff;
}
.news2-card img {
    border-radius: 8px 8px 0 0;
}
.news2-card a {
	text-decoration: none;
	color: #000;
}
.news2-title {
	line-height: 1.8em;
	margin: 0 0.5em 1.5em 0.75em;
}
.news2-date {
	margin-left: 0.75em;
}
.news2-cat {
	margin-left: 1em;
}
.news2-date, .news2-cat {
  font-size:0.8em;
}

<?php
$num = $args['num'];
$information = get_posts(array(
'posts_per_page' => $num,
));
if ($information):
?>
<div class="news-box">
<ul>
<?php
foreach ($information as $post):
setup_postdata($post);
$cat = get_the_category();
$catname = $cat[0]->cat_name;
?>
<li>
    <a href="<?php the_permalink(); ?>">
    <span class="news-date"><?php the_time('Y.m.d');?></span>
    <span class="news-cat"><?php echo $catname; ?></span>
    <span class="news-article"><?php echo mb_substr($post->post_title, 0, 20, 'UTF-8').'...'; ?></span>
    <span class="news-arrow"><?php echo do_shortcode(''); ?></span>
</a>
</li>
<?php
endforeach;
wp_reset_postdata();
?>
</ul>
</div>
<?php else: ?>
<?php endif; ?> 

function motoki_news() {
    ob_start();
	$args = [
	  'num' => 5, //新着記事数
	];	
    get_template_part('motoki_news',null,$args);
    return ob_get_clean();
}
add_shortcode('motoki_news', 'motoki_news');

.news_box img {
    margin-bottom: 1em;
}
.news-box ul {
    padding-left: 0em;
    list-style: none;
}
.news_box li {
    margin-bottom: 1em;
}
.news-arrow {
    color: #000;
}
.news-date {
    color: #b18e37;
    margin-right: 1em;
}
.news-article {
    color:#3d3d3d;
    display: inline-block;
}
.news-arrow {
    top: 5px;
    position: absolute;
    right: 0;
}
.news-cat {
    color: #fff;
    background-color: #b18e37;
    padding: 1px;
    font-size: 0.9em;
    display: inline-block;
    width: 100px;
    text-align: center;
    border-radius: 4px;
    margin-right: 1em; 
}