人気記事プラグインWPPで、人気記事一覧をサムネイル付きで表示

<div class="blog-container">
	<?php 
		if (function_exists('wpp_get_mostpopular')) {
  			$arg = array (
				'range' => 'weekly',//集計する期間 {daily(1日), weekly(1週間), monthly(1ヶ月), all(全期間)}
    			'order_by' => 'views',//表示順｛views（閲覧数),comments（コメント数）,avg（1日の平均）}
				'post_type' => 'all_demos',//ポストタイプを指定 {post, page, カスタムポスト名}
				'stats_date' => 1,//日付を表示 { 1(表示), 0(非表示) }
				'stats_date_format' => 'Y.m.d',//日付表示フォーマット
				'limit' => 4, //表示数
				'post_html' => '<li>
									<article class="blog-grid">
										<div class="blog-icon">
											{thumb}
										</div>
										<div class="blog-article">
											<h4 class="title">{title}</h4>
											<div class="time2" >{date}</div>
										</div>
									</article>
        						</li>'//表示されるhtmlの設定（{thumb}はリンク付きのサムネイル画像,{title}はリンク付きのタイトル,{date}は日付）
				);  
			wpp_get_mostpopular($arg);//リストの出力	
		}
	?>
</div>

.blog-container {
	display: grid;
	grid-template-columns: repeat(1, 1fr);
    gap: 1em;
}

.blog-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
    gap: 1em;
	border-bottom: 1px solid #ccc;
	padding-bottom:1em;
}

.blog-icon {
	width: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	margin-right: 1.5em;
	object-position: 50% 50%;
	margin-bottom: 12px;
	border-radius: 5px;
}

.blog-icon img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.title {
	text-align: left;
	font-size: 1.3em;
}

@media screen and (min-width: 740px) {

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

	.blog-grid {
		grid-template-columns: repeat(1, 1fr);
		border-bottom: none;
		padding-bottom:0;
	}

}