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

function motoki_news2() {
    $items = get_posts(array('post_type' => 'post', 'post_status' => 'publish', 'posts_per_page' => 4, 'orderby' => 'date', 'order' => 'DESC', 'has_password' => false));
    if (!$items) return '<p>公開記事はまだありません。</p>';
    $out = '<div class="motoki_news_area">';
    foreach ($items as $item) {
        $id = $item->ID;
        $categories = get_the_category($id);
        $category = $categories ? $categories[0]->name : '';
        $src = get_the_post_thumbnail_url($id, 'medium');
        $image = $src ? '<img src="' . esc_url($src) . '" alt="" loading="lazy">' : '<span class="news2-placeholder" aria-hidden="true">画像なし</span>';
        $out .= '<div class="news2-card"><a class="news2-link" href="' . esc_url(get_permalink($id)) . '">' . $image;
        $out .= '<div class="news2-info"><div class="news2-title">' . esc_html(get_the_title($id)) . '</div>';
        $out .= '<span class="news2-date">' . esc_html(get_the_date('Y/m/d', $id)) . '</span> <span class="news2-cat">' . esc_html($category) . '</span></div></a></div>';
    }
    return $out . '</div>';
}
add_shortcode('motoki_news2', 'motoki_news2');

.motoki_news_area { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.5em; }
.motoki_news_area .news2-card { min-width:0; border:1px solid #ccc; border-radius:8px; }
.motoki_news_area .news2-link { display:block; height:100%; color:inherit; text-decoration:none; border-radius:8px; }
.motoki_news_area .news2-link:focus-visible { outline:3px solid #075aab; outline-offset:3px; }
.motoki_news_area img, .motoki_news_area .news2-placeholder { width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:8px 8px 0 0; }
.motoki_news_area .news2-placeholder { display:grid; place-items:center; background:#eee; color:#333; }
.motoki_news_area .news2-info { padding:1em; overflow-wrap:anywhere; }
.motoki_news_area .news2-title { margin-bottom:1em; font-weight:700; }
.motoki_news_area .news2-date, .motoki_news_area .news2-cat { font-size:.85em; }
@media (max-width:600px) { .motoki_news_area { grid-template-columns:1fr; } }

<?php
$num = isset($args['num']) ? max(1, min(20, absint($args['num']))) : 5;
$information = get_posts(array('post_type' => 'post', 'post_status' => 'publish', 'posts_per_page' => $num, 'orderby' => 'date', 'order' => 'DESC', 'has_password' => false));
if ($information): ?>
<div class="news-box"><ul>
<?php foreach ($information as $item):
    $categories = get_the_category($item->ID);
    $category = $categories ? $categories[0]->name : '';
?>
<li><a href="<?php echo esc_url(get_permalink($item->ID)); ?>">
<span class="news-date"><?php echo esc_html(get_the_date('Y.m.d', $item->ID)); ?></span>
<span class="news-cat"><?php echo esc_html($category); ?></span>
<span class="news-article"><?php echo esc_html(get_the_title($item->ID)); ?></span>
<span class="news-arrow" aria-hidden="true">→</span>
</a></li>
<?php endforeach; ?>
</ul></div>
<?php else: ?>
<p>公開記事はまだありません。</p>
<?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 ul { padding:0; list-style:none; }
.news-box li { margin:0; border-bottom:1px solid #ccc; }
.news-box a { display:flex; flex-wrap:wrap; align-items:center; gap:.5em 1em; padding:1em; color:inherit; text-decoration:none; }
.news-box a:focus-visible { outline:3px solid #075aab; outline-offset:2px; }
.news-box .news-date { color:#555; }
.news-box .news-cat { border:1px solid #777; border-radius:4px; padding:0 .4em; }
.news-box .news-article { flex:1 1 12em; overflow-wrap:anywhere; }
.news-box .news-arrow { margin-left:auto; }