Таймеры обратного счета обычно устанавливают на сайтах предоставления разнообразных услуг или в интернет-магазинах. Таким способом можно объявить о запуске новой услуги, скидки, акции или о поступлении нового брендового товара. Видя подобный отсчет, посетитель сайта будет в курсе, сколько дней или часов осталось до начала оказания услуги или продажи товара.
Как добавить таймер обратного отсчета?
В качестве неплохого решения задачи является бесплатный плагин T(-) Countdown.
Плагин T(-) Countdown
Плагин имеет всего одну функцию – вывод на сайте заданного отсчета времени. Следует отметить, что плагин для своей работы использует стандартные средства языка CSS, не задействуя при этом какие-либо высоконагруженные технологии (например, Flash), что в итоге не приведет к высокой нагрузке на хостинг. Итак, во-первых, необходимо установить и активировать плагин, после чего в админ-панели перейти в раздел Настройки -> T(-) Countdown.
Отметив опцию Enable Rockstar Features на странице настроек, Вы тем самым получите возможность настраивать плагин более гибко для виджетов боковой панели. Все остальные параметры – это настройка внешнего вида таймера с помощью CSS.
Для вывода таймера обратного отсчета плагин предлагает воспользоваться двумя методами: с помощью виджета и шорткода. Рассмотрим оба.
Для вывода таймера в виджете, необходимо в админ-панели перейти Внешний вид -> Виджеты и перетянуть одноименный виджет в желаемое место показа, в итоге появится возможность его настройки.
В настройках необходимо будет заполнить такие данные: Title – заголовок таймера; Target – дата и время окончания работы таймера; Style – шаблон оформления таймера. В блоке Rockstar Features (который был активирован на странице настроек плагина) есть возможность прописать код HTML, который будет отображаться над и под таймером (поля Above Countdown и Below Countdown соответственно). Кроме того, настройка When Countdown Reaches Zero позволит прописать HTML-код, который выполнится после остановки таймера.
Второй метод вставки на сайт обратного отсчета подразумевает добавление специального шорткода, который имеет вид:
[tminus t= “DD-MM-YYYY HH:MM:SS”] код HTML после завершения отсчета [/tminus]
Шорткод может быть добавлен в любое место сайта. Для примера выведем таймер на отдельной странице. Для этого нужно открыть на редактирование существующую страницу (или создать новую через Страницы -> Добавить новую) и в блоке контента вставить шорткод:
До конца акции осталось: [tminus t= "18-01-2018 17:00:00" style="jedi"] Акция завершилась(: [/tminus]
В итоге пользователь, открывший эту страницу, увидит следующее:
Нажмите, пожалуйста, на одну из кнопок, чтобы узнать понравилась статья или нет.