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

28 января 2012 года, Размещено в категории: PHP / MySQL

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

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

Оформляем первый пост в 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инфошность






5 комментариев

  • 6 лет назад Ответить

    Спасибо за подсказку ))) У меня в теме по другому оформлен первый пост, хотела изменить чтобы было одинаково )))

    • 6 лет назад Ответить

      Пожалуйста, кому-то наоборот оформлять 🙂
      К слову можно не только первый пост оформлять, а любой.

  • 6 лет назад Ответить

    Спасибо автору! Как раз задумала начать свой блог, но только напишите пожалуйста для новичков поконкретнее, куда именно и где вставлять этот код…?
    И как потом задавать стили в CSS…?

    • 6 лет назад Ответить

      Этот код надо вставлять в index.php вашего шаблона, а стили CSS изменяются в файле style.css, который тоже находится в папке с вашим шаблоном.

  • 6 лет назад Ответить

    Спасибо за статью. Мне эта идея пока не приходила в голову, хотя видел много таких примеров. Сделаю у себя так же )

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Перед отправкой формы: