5 способов добавить виджет даты и времени на ваш сайт WordPress

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

Однако отображение текущей даты и времени предназначено не только для новостных сайтов. Есть множество причин, по которым другим сайтам стоит подумать о том же:

• Вы можете отображать текущее время в своем часовом поясе, чтобы клиенты знали, когда они смогут связаться со службой поддержки.
• Это заставляет ваш сайт выглядеть живым и актуальным, даже если ваш контент немного старше. Это важно, поскольку большинство из нас ищут самую свежую и актуальную информацию.
• Если на вашей странице есть предстоящие события, текущее время и дата помогают посетителям понять, сколько еще им нужно их ждать (в качестве альтернативы, используйте модуль таймера обратного отсчета, такой как тот, который включен в тему Divi)

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

В следующей статье мы покажем вам несколько способов создания виджета даты и времени для своего веб-сайта. Сначала мы рассмотрим, как это сделать вручную, а затем поговорим о некоторых плагинах, которые позволяют делать то же самое без какого-либо кодирования.

Звучит отлично? Тогда давайте не будем мелочиться, а сразу перейдем к делу.

Как вручную создать виджет даты и времени в WordPress

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

Создать шорткод

Наш первый шаг - настроить фактический шорткод. Для этого мы сначала откроем functions.php нашей текущей темы. Мы настоятельно рекомендуем вам использовать для этого дочернюю тему, чтобы не потерять никаких изменений при обновлении родительской темы.

После того, как мы открыли файл, вставьте этот фрагмент кода в его конец:

function current_time_date(){
return date('F jS, Y, H:i:s');
}

add_shortcode( 'time_date', 'current_time_date' );

Некоторая информация по этому поводу: приведенный выше код - это функция, которая выводит текущую дату и время, а затем назначает их шорткоду с именем [time_date] . Если вы введете шорткод на своем сайте, он вызовет функцию в действие.

В формате, который мы использовали выше, время и дата выводятся в следующем формате: 6 июля 2017 г., 12:35:41. Однако вы можете использовать разные форматы, о которых вы можете узнать здесь.

Теперь, чтобы протестировать код, просто скопируйте шорткод где-нибудь на своем сайте. Однако имейте в виду, что по умолчанию шорткоды не работают внутри виджетов. Чтобы использовать их, вам нужно либо установить плагин Shortcode Widget, либо добавить эту строку в functions.php .

add_filter('widget_text','do_shortcode');

После этого вот результат:

Перейти на JavaScript

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

Это потому, что PHP является серверным языком, а это означает, что вам нужно делать дополнительные вызовы на сервер для обновления информации. По этой причине нам лучше работать с клиентским языком, таким как JavaScript.

К счастью, в сети доступно множество часов JavaScript. Короткий поиск в Google покажет множество примеров. Я использовал эту службу для создания кода JavaScript для желаемого формата. После этого я ввожу код в файл с именем clock.js, который копирую в папку своей темы.

Сценарий вызывает div имени clockbox . По этой причине я изменил свою предыдущую функцию на следующую:

function current_time_date(){

echo '<div id="clockbox"></div>';

}

add_shortcode( 'time_date', 'current_time_date' );

Теперь все, что осталось, - это вызвать мой новый файл JavaScript:

wp_enqueue_script( 'clock', get_theme_file_uri('/clock.js'));

И вуаля:

Добавить стиль

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

#clockbox {
font-size: 22px;
font-style: italic;
color: #999;
}

Вот результат:

Теперь это было не так уж и сложно, не так ли? Сказал, что это будет легко. Однако это всего лишь один из способов создания собственного виджета даты и времени. С дополнительными приемами кодирования вы можете добиться гораздо большего.

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

Плагины для создания виджетов времени и даты для вашего сайта

Хотя количество доступных плагинов в каталоге WordPress невелико, есть несколько экземпляров, которые работают достаточно хорошо.

Дата в реальном времени

Наш первый соперник - этот плагин. Как следует из названия, он позволяет вам добавить часы и дату на ваш сайт WordPress.

Их виджет времени и даты предлагает множество вариантов настройки. Вы можете выбирать между 12 или 24-часовым циклом, обновлять ли часы каждую минуту или секунду, отображать или скрывать дату и определять их порядок. В виджете даже есть раздел для настраиваемого CSS, поэтому вы можете использовать тот же шрифт, что и ваш сайт, и многое другое.

К сожалению, в остальном возможности форматирования несколько ограничены. Например, нельзя удалить день недели из даты. Однако, помимо этого, плагин делает то, что должен.

Виджет даты и времени

Во-первых, небольшое предупреждение. Этот плагин немного устарел и последний раз обновлялся два года назад. Как следствие, нет гарантии, что он будет работать со всеми современными темами и последней версией WordPress. Однако, поскольку он отлично работал в моем тесте с WordPress 4.8 и предлагает хороший набор опций, я подумал, что стоит включить его.

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

Как видите, вы можете настроить формат времени и даты (или полностью отключить его), изменить семейство и размер шрифта, а также цвет текста и цвет фона (включая шестнадцатеричные коды). Таким образом, виджет будет легко подогнать под вашу тему. Если этого недостаточно, в виджете достаточно классов HTML, поэтому вы можете легко реализовать свои собственные правила CSS.

Текущая дата и время

Последний плагин в этом списке достаточно прост. Установите, активируйте и вы получите новый виджет под названием « Текущая дата и время» , который можно перетащить в любую область виджетов. Выполнено.

Результат выглядит достойно и автоматически подстраивается под стиль вашей темы. Он также адаптивен к мобильным устройствам, что в наши дни просто необходимо. С другой стороны, он не предлагает никаких возможностей для настройки. Доступен только одноразовый формат, для большего вам нужно купить профессиональную версию.

Заключение

Есть много причин для отображения виджета даты и времени на вашем сайте WordPress. Это хороший способ сообщить вашим клиентам, когда они смогут связаться с вами, насколько актуален ваш контент и многое другое.

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

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

Миниатюра статьи Джейн Келли / shutterstock.com