<style>
.top_blog_list {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.top_blog_list>li {
width: 50%;
/* margin-bottom: 40px; */
position: relative;
}
.top_blog_list>li:before {
position: absolute;
content: '';
background: #486295;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 0;
transition: 0.3s;
}
.top_blog_list>li:hover:before {
opacity: 0.3;
}
.top_blog_list>li>a {
padding: 60px;
display: block;
color: #fff;
position: relative;
z-index: 1;
height: 100%;
}
.top_blog_list>li>a h2 {
margin-bottom: 50px;
font-size: 34px;
}
.top_blog_list>li>a time {
display: block;
}
.top_blog_list>li>a .t_blog_item {
border: 1px solid #fff;
padding: 4px 8px;
display: inline-block;
font-size: 13px;
font-weight: bold;
line-height: 1;
margin-bottom: 8px;
}
.top_blog_list>li>a .t_blog_text {
margin-top: 2px;
}
.top_blog_list>li>a .t_blog_button {
margin-top: 80px;
text-align: right;
padding-right: 90px;
position: relative;
}
.top_blog_list>li>a .t_blog_button:after {
position: absolute;
content: '';
background: #fff;
width: 68px;
height: 1px;
top: 50%;
right: 0;
transform: translate(0%, 0%);
}
@media screen and (max-width: 768px) {
.top_blog_list>li {
width: 100%;
}
.top_blog_list>li>a {
padding: 60px 30px;
}
.top_blog_list>li>a h2 {
font-size: 25px;
}
}
</style>
<ul class="top_blog_list">
<?php
// カテゴリーの取得
$categories = get_categories();
foreach ($categories as $category) :
if ($category->term_id == 1) { // 特定のカテゴリーを非表示にする
continue; // 次のカテゴリーへ移動
} ?>
<?php
// 画像
if (SCF::get_term_meta($category->term_id, 'category', 'category_image')) {
$image = SCF::get_term_meta($category->term_id, 'category', 'category_image');
$image = wp_get_attachment_image_src($image, 'full');
$image_url = esc_url($image[0]);
} else {
$image_url = "";
}
?>
<li class="fadein" style="background: url(<?php echo $image_url; ?>) center / cover;">
<a href="<?php echo esc_url(get_category_link($category->term_id)); ?>">
<?php
// カテゴリー名を表示
echo '<h2>' . esc_html($category->name) . '</h2>';
// クエリの設定
$args = array(
'cat' => $category->term_id,
'posts_per_page' => 1,
'order' => 'ASC' // 最初の投稿を取得
);
// クエリの実行
$query = new WP_Query($args);
// 投稿があるかどうかチェック
if ($query->have_posts()) {
while ($query->have_posts()) {
$query->the_post(); ?>
<p class="t_blog_item">NEW</p>
<time datetime="<?php the_time('Y-m-d') ?>"><?php the_time('Y.m.d') ?></time>
<p class="t_blog_text"><?php echo get_the_title(); ?></p>
<?php }
wp_reset_postdata();
} ?>
<p class="t_blog_button">一覧はこちら</p>
</a>
</li>
<?php endforeach; ?>
</ul>