Оформляем первый пост в WordPress
28 января 2012 года, Размещено в категории: PHP / MySQL
Наверно вы видели на каких-нибудь блогах, что первый пост на главной странице отображается по другому, в отличии от всех других? Вот это и попробуем сделать в сегодняшнем уроке.
Особое оформление первого поста притягивает внимание всех посетителей и с помощью этого способа можно увеличить количество переходов на него. К тому же первый пост на главной странице – это всегда последняя запись, а это как никогда важно, чтоб на него переходило как можно больше посетителей.

Настраиваем код
Изначально цикл вывода постов на главной странице выглядит вот так:
<?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инфошность
9 лет назад
Спасибо за подсказку ))) У меня в теме по другому оформлен первый пост, хотела изменить чтобы было одинаково )))
9 лет назад
Пожалуйста, кому-то наоборот оформлять 🙂
К слову можно не только первый пост оформлять, а любой.
Анжела
9 лет назад
Спасибо автору! Как раз задумала начать свой блог, но только напишите пожалуйста для новичков поконкретнее, куда именно и где вставлять этот код…?
И как потом задавать стили в CSS…?
9 лет назад
Этот код надо вставлять в index.php вашего шаблона, а стили CSS изменяются в файле style.css, который тоже находится в папке с вашим шаблоном.
9 лет назад
Спасибо за статью. Мне эта идея пока не приходила в голову, хотя видел много таких примеров. Сделаю у себя так же )