Оформляем первый пост в WordPress

Наверно вы видели на каких-нибудь блогах, что первый пост на главной странице отображается по другому, в отличии от всех других? Вот это и попробуем сделать в сегодняшнем уроке.

Особое оформление первого поста притягивает внимание всех посетителей и с помощью этого способа можно увеличить количество переходов на него. К тому же первый пост на главной странице – это всегда последняя запись, а это как никогда важно, чтоб на него переходило как можно больше посетителей.

Настраиваем код

Изначально цикл вывода постов на главной странице выглядит вот так:

<?php if (have_posts()) : ?>
	<?php while (have_posts()) : the_post(); ?>
 
		<div class="post">
			...
		</div>
 
	<?php endwhile; ?>
<?php endif; ?>

Для того чтобы оформить именно первый пост, надо ему присвоить уникальный class, чтобы потом в CSS можно было задавать стили оформления. Для этого замените стандартный цикл на вот такой:

<?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; ?>

Схема работы очень проста, с начало мы задаём переменную ($i), которая ровна нулю, с каждым новым циклом к этой переменной будет прибавляется единичка ($i++), то есть для первого поста $i == 1, для второго поста $i == 2 и так далее. После этого мы в теге <div> который обрамляет сам пост вписываем условный оператор и указываем в нём:

if ($i == 1) echo ' first'; - Если переменная $i ровна 1, то пишем first.

После этого у первого поста будет уникальный класс first, для которого уже можно писать оформление в файле стилей css.

Получился вот такой не сложный урок, но как по мне – очень полезный.

А для тех кто участвует в SEO конкурсах, хочу сообщить, что в московской выдаче Google по запросу SEOCAFEинфошность конкуренция растет с каждым днем. Поэтому уже очень сложно пробится в ТОП.

На этом всё, спасибо за внимание, если у вас есть что добавить или исправить, то пишите в комментариях.SEOCAFEинфошность