WordPress как на ладони

Нестандартный вывод записей в категории

Есть вот такая страница в макете, нужно вывести первую запись большой, следующие за ней 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>
Заметки к вопросу:
campusboy 8.5 лет назад

Если ещё нужно, могу набросать код

0
Гость
8.5 лет назад
  • 0
    campusboy4742 www.youtube.com/c/wpplus

    Не проверял работоспособность, получилось так:

    <?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; ?>
    Комментировать
На вопросы могут отвечать только зарегистрированные пользователи. Вход . Регистрация