Добавляем значок «New» новым опубликованным статьям WordPress

Без плагина WordSmall

Может быть, вы когда-нибудь замечали на сайтах или даже форумах, возле новых добавленных статей, значок с надписью «New». Это однозначно бросается в глаза, и помогает быстрее определить свежие опубликованные посты. Тем более, когда на странице находится сразу много материала, например, на новостных проектах где глаза просто разбегаются по сторонам. Чтобы такого маленького неудобства не было, добавляется ярлык в виде надписи «New» или маленькой gif-картинки.

Давайте и мы сделаем такую же фишку на нашей любимой платформе WordPress. Реализовывается это довольно-таки просто, без плагинов, отдельным кодом, который нужно будет вставить в определенное место. К примеру, значок «New» будем выводить на главной странице сайта, а, значит, открываем файл index.php. Находим функцию вывода тайтла поста. Выглядит примерно так:

<h2><a href="<?php the_permalink(); ?>" title="<?php the_title( ); ?>"><?php the_title( ); ?></a></h2>

И перед закрывающим тегом ссылки </a> добавляем ниже представленный код.

<?php
date_default_timezone_set('Europe/Moscow');//часовой пояс мск
$t1=$post->post_date;
$t2=date("Y-m-d H:i:s");
$diff=(strtotime($t2)-strtotime($t1))/3600;
if($diff<24){echo "<span class='newpost'>New</span>";} //вывод ярлыка
else{echo "";} //по окончании времени вывод пуст
?>

Давайте немного разберем его:

date_default_timezone_set('Europe/Moscow'); — часовой пояс.

if($diff<24){echo "<span>New</span>";} — здесь указывается тот период времени, за который статьям будет добавлена надпись «New». Изначально стоит сутки, но вы можете изменить на свое время (1, 5, 12, 48 и т. ). Это означает, что статьи, опубликованные за последние 24 часа, получат ярлык, а по окончании времени он исчезнет.

Осталось добавить стили оформления. Открываем файл style.css и в конце прописываем следующий код:

span.newpost {
    background: #d9534f;
    border: 1px solid #ce4844;
    border-radius: 2px;
    color: #fff;
    font-size: 12px;
    line-height: 26px;
    margin: 0 0 0 5px;
    padding: 1px 3px;
    vertical-align: bottom;
}

А также вместо надписи «New» можно использовать gif-картинку, но код нужно будет подкорректировать. Следующим образом:

<?php
date_default_timezone_set('Europe/Moscow');//часовой пояс мск
$t1=$post->post_date;
$t2=date("Y-m-d H:i:s");
$diff=(strtotime($t2)-strtotime($t1))/3600;
if($diff<24){echo '<img src="'.get_bloginfo('template_directory').'/images/new.gif" alt="Новая статья за последних 24 часа" title="Новая статья за последних 24 часа" />';}   //вывод ярлыка
else{echo "";} //по окончании времени вывод пуст
?>

Результат.

иконка new вордпресс

Скачать анимированные значки «New» здесь.

Источник: http://www.wpdaxue.com/wordpress-new-post-sign.html

Автор, он же Андрей, он же Admin, он же WordSmall

Лентяй-любитель, окончил высшую школу безделья с многочисленными знаками отличия. Создатель этого небольшого «чудо-блога» о еще более «чудном» контенте.

E-mail Google+ Twitter
Комментариев: 2
  • Алексей

    Спасибо классная штука... А подскажи пожалуйста, когда ставишь gif картинку, то как сделать отступ между титлом и самой картинкой? А то больно плотно идет к названию поста. Просто в css я не бум бум)))

    • WordSmall

      Можно просто в спан обернуть и дать отступ, вот так

      <span style="margin-left:10px;"><img src="'.get_bloginfo('template_directory').'/images/new.gif" alt="Новая статья за последних 24 часа" title="Новая статья за последних 24 часа" /></span>

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