Стиль последнего поста WordPress по-разному

Моя текущая страница блога показывает все мои записи блога в сетке 3 на «х». Однако в верхней части я хочу отобразить последний пост в блоге в качестве своего рода популярного поста и таким образом оформить его немного по-другому (т. Е. Во всю ширину). Я пытался сделать это через css с: first-child, но это не очень хорошо работало. Так что теперь я пробую подход php. Я, однако, понятия не имею, как подойти к этому. Кто-нибудь может показать мне, с чего начать? Это мой текущий код.

<section id="blogs" class="cards-list">
<div class="container cards">
<div class="row center-xs">
<?php
if(get_post_type() == 'post') {
$currentBlog = get_the_ID();
} else {
$currentBlog = '';
}
$loopBlog = new WP_Query(array(
'post_type'      => 'post',
'posts_per_page' => -1,
'post__not_in'   => array($currentBlog)
));
while ( $loopBlog->have_posts() ) : $loopBlog->the_post();
$blogIntro    = get_field('blog_intro');
$blogImage    = get_field('blog_image');
$blogImageUrl = $blogImage['sizes']['large'];
?><div class="col col-xs-12 col-md-4">
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" class="card card-event">
<figure style="<?php if($blogImageUrl != '') { echo "background-image:url('".$blogImageUrl."');"; } ?>"></figure>
<div class="content">
<span class="tag"><?php the_time('M d Y'); ?></span>
<div class="link"><h3><span><?php the_title(); ?></span></h3></div>
</div>
</a>
</div>
<?php
endwhile; wp_reset_query();
?>
</div>
</div>

1

Решение

Вы должны быть в состоянии использовать current_post внутри цикла и выведите разную разметку для первого поста:

while ( $loopBlog->have_posts() ) : $loopBlog->the_post();
$blogIntro    = get_field('blog_intro');
$blogImage    = get_field('blog_image');
$blogImageUrl = $blogImage['sizes']['large'];
?>

<?php if ($loopBlog->current_post == 0): ?>
<!-- Output some other markup for the first post here -->
<div class="container-fluid">

</div>
<?php else: ?>
<div class="col col-xs-12 col-md-4">
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" class="card card-event">
<figure style="<?php if($blogImageUrl != '') { echo "background-image:url('".$blogImageUrl."');"; } ?>"></figure>
<div class="content">
<span class="tag"><?php the_time('M d Y'); ?></span>
<div class="link"><h3><span><?php the_title(); ?></span></h3></div>
</div>
</a>
</div>
<?php endif; ?>
<?php endwhile; wp_reset_query(); ?>
2

Другие решения

Других решений пока нет …

По вопросам рекламы ammmcru@yandex.ru
Adblock
detector