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

Может быть, вы когда-нибудь замечали на сайтах или даже форумах, возле новых добавленных статей, значок с надписью «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» здесь.

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

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

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

Оставить ответ

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