Нестандартный вывод записей в категории
Есть вот такая страница в макете, нужно вывести первую запись большой, следующие за ней 4 маленькими и остальные по стандарту. Как можно подобное реализовать?
Вот моя верстка:
<div id="category-top"> <div class="row"> <div class="col-md-6"> <div class="category-big-post"> <div class="cbp-image"><a href="#"><img src="img/catimg.png" alt=""></a></div> <h4><a href="#">Разновидности пластиковых вазонов для цветов</a></h4> <p>Эстет, любитель прекрасного, уюта и комфорта не только внутри вашего жилища ...</p> </div> </div> <div class="col-md-6"> <div class="category-min-post"> <a href="#"><img src="img/catmin.png" alt=""></a> <div class="cmp-cont"> <h5><a href="#">Делаем дорожки в саду участка</a></h5> <p>Самое популярные дорожки ...</p> </div> </div> <div class="category-min-post"> <a href="#"><img src="img/catmin.png" alt=""></a> <div class="cmp-cont"> <h5><a href="#">Делаем дорожки в саду участка</a></h5> <p>Самое популярные дорожки ...</p> </div> </div> <div class="category-min-post"> <a href="#"><img src="img/catmin.png" alt=""></a> <div class="cmp-cont"> <h5><a href="#">Делаем дорожки в саду участка</a></h5> <p>Самое популярные дорожки ...</p> </div> </div> <div class="category-min-post"> <a href="#"><img src="img/catmin.png" alt=""></a> <div class="cmp-cont"> <h5><a href="#">Делаем дорожки в саду участка</a></h5> <p>Самое популярные дорожки ...</p> </div> </div> </div> </div> </div> <div id="category"> <div class="category-item"> <a href="#"><img src="img/catstandart.png" alt=""></a> <div class="ci-content"> <h4><a href="#">Разновидности пластиковых вазонов для цветов</a></h4> <p>Эстет, любитель прекрасного, уюта и комфорта не только внутри вашего жилища, но и снаружи, то этот сайт именно для вас.</p> </div> </div> <div class="category-item"> <a href="#"><img src="img/catstandart.png" alt=""></a> <div class="ci-content"> <h4><a href="#">Разновидности пластиковых вазонов для цветов</a></h4> <p>Эстет, любитель прекрасного, уюта и комфорта не только внутри вашего жилища, но и снаружи, то этот сайт именно для вас.</p> </div> </div> <div class="category-item"> <a href="#"><img src="img/catstandart.png" alt=""></a> <div class="ci-content"> <h4><a href="#">Разновидности пластиковых вазонов для цветов</a></h4> <p>Эстет, любитель прекрасного, уюта и комфорта не только внутри вашего жилища, но и снаружи, то этот сайт именно для вас.</p> </div> </div> </div>
Заметки к вопросу:
Если ещё нужно, могу набросать код
Гость
Не проверял работоспособность, получилось так:
<?php $post_cnt = 0; if (have_posts()) : while (have_posts()) : the_post(); $post_cnt++; ?> <div id="category-top"> <!-- Отображаем блок с 5 записями --> <?php if ($post_cnt =< 5) { ?> <div class="row"> <!-- 1 запись --> <?php if ( $post_cnt == 1 ) { ?> <div class="col-md-6"> <div class="category-big-post"> <div class="cbp-image"><a href="<?php the_permalink() ?>"><?php the_post_thumbnail('medium'); ?></a></div> <h4><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h4> <p><?php the_content(); ?></p> </div> </div> <!-- / 1 запись --> <!-- оставшиеся 2,3,4,5 записи --> <div class="col-md-6"> <?php } else { ?> <div class="category-min-post"> <a href="<?php the_permalink() ?>"><?php the_post_thumbnail(); ?></a> <div class="cmp-cont"> <h5><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h5> <p><?php the_content(); ?></p> </div> </div> <?php } ?> </div> <!-- / 2,3,4,5 записи --> </div> </div> <!-- / Отображаем блок с 5 записями --> <!-- Отображаем блок с оставшимися записями (хоть 100) --> <div id="category"> <?php } else { ?> <div class="category-item"> <a href="<?php the_permalink() ?>"><?php the_post_thumbnail(); ?></a> <div class="ci-content"> <h4><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h4> <p><?php the_content(); ?></p> </div> </div> <?php } ?> </div> <!-- / Отображаем блок с оставшимися записями (хоть 100) --> <?php endwhile; ?> <?php else: ?> <b class="center">Извините, записей не найдено</b> <?php endif; ?>