зачем вебмастеру может понадобиться таймер на сайт и рассмотрим несколько простых вариантов реализации подобной функции в WordPress: таймер обратного отсчета в виде интегрируемого в страницу скрипта и на основе бесплатных плагинов. Предлагаемые в статье решения подойдут как новичкам, так и опытным блогерам.
Зачем на сайте нужен таймер
В первую очередь, он необходим владельцам сайтов, задумывающимся о проведении акций или создании собственных продающих страниц. Как правило, таймер на сайте отсчитывает время в обратном порядке, наглядно показывая количество дней, часов и минут, оставшихся до окончания акции, раздачи бонусов или распродажи, побуждая посетителя к действию, например, приобретению рекламируемого на странице продукта. Таймеры обратного отсчета давно стали важным элементом Landing Page, создающим эффект срочности и ограниченного предложения товара/услуги.
Не менее популярен и востребован таймер для визуального отсчета времени до важного мероприятия или приближающегося праздника. Размещенный на главной странице, в сайдбаре или шапке сайта, такой счетчик будет уведомлять посетителей о приближающемся событии.
Еще один распространенный вариант использования таймера — на страницах-заглушках сайтов, находящихся в разработке, на реконструкции или техническом обслуживании. В данном случае счетчик показывает время, оставшееся до момента, когда сайт будет доступен для посещения.
Как установить скрипт таймера на сайт
Основные варианты используемых на сайтах таймеров:
- Скрипт в виде набора файлов, отвечающих за функционирование и оформление счетчика. Подразумевается правка кода страницы или файла шаблона сайта вручную. Подходит для администраторов сайтов, работающих с WordPress на уровне кода. Подобное решение предполагает, что перед вставкой таймера будет произведено резервное копирование файлов сайта.
- Онлайн-таймер — скрипт, сгенерированный сторонним сервисом и содержащий обращения к нему. Простой и удобный вариант для быстрого подключения счетчика к сайту на любой CMS. Добавление кода счетчика производится в редакторе страницы вручную.
- Плагин таймера для WordPress. Готовое решение, без необходимости копаться в коде. Плагины обратных таймеров на все случаи жизни имеются в официальном репозитории WordPress. С установкой и настройкой такого плагина, как правило, не возникает трудностей.
Два последних пункта предельно просты в реализации даже для новичков. Рассмотрим подробнее особенности их применения на сайте WordPress.
Онлайн-таймер обратного отсчета
Среди разнообразных генераторов скриптов для отсчета времени можно выделить E-Timer — русскоязычный сервис с многолетней историей, предоставляющий бесплатный онлайн-таймер обратного отсчета для сайта со всеми необходимыми настройками. Сервис заметно упрощает процесс реализации индивидуального варианта счетчика и работу со скриптом таймера, сокращая его до простых и понятных действий:
- установки нужной даты или функции перезапуска;
- настройки внешнего вида всех имеющихся элементов;
- размещения готового кода таймера на своем сайте.
От аналогичных онлайн-сервисов E-timer отличается возможностью гибкой настройки за счет большого количества опций и позволяет генерировать подходящие под любой дизайн уникальные и красивые таймеры.
Основные настройки
Во вкладке основных настроек скрипта задаются следующие параметры:
- подключение к сайту библиотеки JQuery;
- перезапуск счетчика (возможные варианты — раз в день, неделю, месяц);
- дата и время, до которых будет производиться отсчет;
- текст над цифрами и его размер.
Настройки отображения таймера
В этом разделе настроек находятся опции, отвечающие за визуальное отображение основного блока. Здесь можно выбрать один из четырех языков пояснительной надписи (английский, русский, украинский, казахский), ее шрифт и цвет, тип разделителя между цифровыми блоками, задать параметры отступов, границ и тени (числовые значения и цвет).
Настройки отображения цифр
В этой вкладке настроек скрипта таймера присутствует возможность установки наименьшей единицы отсчета (секунды, минуты, часы, дни), определяющей количество блоков. Так как именно динамично изменяющееся значение количества секунд в таймере делает его «живым» и привлекает внимание посетителей, блок секунд используется в подавляющем большинстве счетчиков.
В вашем распоряжении десяток наиболее распространенных гарнитур шрифтов, визуальный выбор цвета шрифта и степени его прозрачности, а также размера шрифта. Цвет фона и отступы в блоке с цифрой также можно подобрать под дизайн страницы, на которой размещен таймер обратного отсчета. Регулировка параметров тени позволяет добавить блокам с цифрами счетчика необходимый объем. Возможность изменять цвет, толщину и радиус закругления границ цифровых блоков — приятная особенность для дополнительной индивидуализации таймера на сайт.
Как добавить код таймера на сайт
Сгенерированный сервисом код отображается в специальном поле в правой части страницы онлайн сервиса, скопировать его оттуда и добавить в нужное место на своей странице не составляет никакого труда. Используется при вставке таймера на сайт html-режим редактора страницы, в этом случае javascript обрабатывается корректно, WordPress выводит работающий счетчик в том виде, какой был задан в настройках онлайн-сервиса.
Главный недостаток использования онлайн-таймеров заключается в привязке скрипта к стороннему сервису, т.е. полная зависимость таймера обратного отсчета от доступности и работоспособности чужого сайта.
Таймер для сайта онлайн — отличный вариант для лендинг пейдж с кратковременными акциями. При необходимости добавления на страницу «вечного», периодически обновляющегося счетчика, имеет смысл для этой цели использовать скрипты, выполняющиеся на собственном сайте.
Плагин-таймер: быстрое решение для WordPress
Для большинства страниц и лендингов, где может понадобиться таймер обратного отсчета, WordPress плагин — вполне достаточное и разумное решение. Поиск из админки по ключевым словам Timer и Countdown в официальном репозитории WordPress выдаст несколько десятков плагинов со схожими возможностями, с основным бесплатным функционалом и дополнительными настройками, доступными при покупке премиум-версии плагина. Рассмотрим несколько популярных плагинов таймера отсчета на сайт.
Evergreen Countdown Time
Простой таймер с понятными настройками на одной странице, без спецэффектов и необычного оформления. В базовой (бесплатной) версии предоставляется возможность выбора:
- даты, до которой ведется отсчет;
- цвета счетчика (черный или белый);
- размера цифр и подписей (в пикселях);
- метода отслеживания посетителей (по cookie или IP-адресу).
С помощью этого плагина на сайте можно создать несколько таймеров обратного отсчета. Добавление выбранного счетчика на страницу производится в визуальном редакторе WordPress с помощью шорткода вида:
[ec id="1"]Конечный результат в виде простого одноцветного счетчика вряд ли впечатлит требовательного вебмастера, поэтому идем дальше.
Countdown Timer Ultimate
Плагин с гибкими настройками и красивыми визуальными эффектами, что позволяет подстраивать внешний вид таймера под дизайн страницы. Особенности этого плагина:
- Полностью отзывчивый таймер обратного отсчета WordPress.
- Возможность установки размеров таймера и выбора одного из двух типов анимации.
- Возможность скрыть любой из счетчиков (дни, часы, минуты, секунды).
- Возможность изменения ширины, цвета фона и цвета каждого счетчика.
Добавление счетчика на сайт производится с помощью шорткода, который появляется в списке после сохранения настроек и публикации таймера:[wpcdt-countdown id="1"]
При необходимости можно вставить обратный таймер на сайт в файл шаблона через функцию:<?php echo do_shortcode('[wpcdt-countdown id="1"]'); ?>
Внешний вид таймера, добавленного на страницу с помощью плагина, будет примерно следующий:
Аналогичного вида таймер можно создать с помощью плагина Countdown Builder, отличительной особенностью которого является наличие предпросмотра внешнего вида счетчиков прямо на странице настроек.
Uji Countdown
Наиболее продвинутый из рассматриваемых плагинов, использующий возможности HTML5. После установки плагина из репозитория в консоли WordPress (меню Настройки) появляется пункт Uji Countdown. Несмотря на англоязычный интерфейс, все настройки интуитивно понятны. Также присутствует блок предпросмотра, при необходимости быстро скорректировать выбранные опции не составляет труда.
Добавление собственного оформления доступно при переходе на вкладку Add new style. Здесь есть все, что может потребоваться при создании красивого и стильного таймера:
Плагин интересен тем, что позволяет задавать разный цвет фона для верхней и нижней части цифрового блока (опция Select Box Color). Приятный бонус — большой выбор начертаний из всего многообразия Google Fonts. Во вкладке Settings имеются поля, в которых можно вручную прописать перевод используемых единиц времени (секунды, минуты, часы и т.д.).
Отредактированный и сохраненный стиль появляется во вкладке My Styles. Здесь можно добавлять, редактировать и удалять стили, что очень удобно.
На панели инструментов в редакторе контента WordPress появляется кнопка в виде циферблата часов, при нажатии на которую в нужном месте страницы легко добавить таймер с выбранным стилем и задать нужное время. Здесь же можно выбрать действие, которое будет совершаться, если время истекло (скрывать цифры или делать редирект на определенный URL). В пункте Recurring Time присутствует возможность перезапуска таймера через определенные отрезки времени, что делает таймер «вечным». Как видим, в бесплатной версии плагина настроек много.
Заключение
Таймер обратного отсчета на сайт можно добавить любым из рассмотренных способов. В большинстве случаев для этого не потребуется специальных знаний и особых навыков, достаточно скопировать в редактор страницы готовый скрипт стороннего онлайн-сервиса или добавить сформированный плагином шорткод.
Если вы используете не рассмотренный в статье скрипт или плагин таймера, позволяющий реализовать на странице красивое решение, предлагаю поделиться им в комментариях.
