Главная WordPress

WordPress: выделить первый пост в цикле

Может возникнуть необходимость выделения особым образом первого поста в цикле (например, когда нужно сделать совершенно другой дизайн в отличие от остальных постов), будь то главная страница, страница архивов, поиска и т. д. Такая задача решается путем добавления специального CSS-класса с помощью несложного PHP-кода.

Первоначально имеем примерно такой стандартный цикл вывода наших постов:

<?php if (have_posts()) : ?>
	<?php while (have_posts()) : the_post(); ?>

		<div class="post">
			...
		</div>

	<?php endwhile; ?>
<?php endif; ?>

Чтобы сменить оформление первого поста с помощью CSS, добавим к нему класс first. Код цикла примет следующий вид:

<?php $i = 0; ?>
<?php if (have_posts()) : ?>
	<?php while (have_posts()) : the_post(); ?>
	<?php $i++ ?>

		<div class="post<?php if ($i == 1) echo ' first'; ?>">
			...
		</div>

	<?php endwhile; ?>
<?php endif; ?>

Вот и все. Теперь, остается, используя класс first, переопределить стили для первого поста.

Комментарии (4)

  1. Еще вопрос: как изменить при таком подходе, к примеру, внешний вид поста? Речь не о css. К примеру я хочу в первый пост засунуть the_excerpt () или the_post_thumbnail (), или же просто html разметку изменить. Это реально как-то осуществить? Заранее благодарен.

  2. Попробовал так сделать, для первого поста свою структуру прописал, для остальных следом стандартную, в итоге на странице посты начали дублироваться, подскажите, пожалуйста, что не так?

Ваш комментарий