Как в WordPress добавить таймер обратного отсчета?

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

Как добавить таймер обратного отсчета?

В качестве неплохого решения задачи является бесплатный плагин T(-) Countdown.

Плагин T(-) Countdown

Плагин имеет всего одну функцию — вывод на сайте заданного отсчета времени. Следует отметить, что плагин для своей работы использует стандартные средства языка CSS, не задействуя при этом какие-либо высоконагруженные технологии (например, Flash), что в итоге не приведет к высокой нагрузке на хостинг. Итак, во-первых, необходимо установить и активировать плагин, после чего в админ-панели перейти в раздел Настройки -> T(-) Countdown.

Страница настроек плагина T(-) Countdown

Отметив опцию Enable Rockstar Features на странице настроек, Вы тем самым получите возможность настраивать плагин более гибко для виджетов боковой панели. Все остальные параметры — это настройка внешнего вида таймера с помощью CSS.
Для вывода таймера обратного отсчета плагин предлагает воспользоваться двумя методами: с помощью виджета и шорткода. Рассмотрим оба.

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

Виджет T(-) Countdown

В настройках необходимо будет заполнить такие данные: 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]

Редактирование страницы

В итоге пользователь, открывший эту страницу, увидит следующее:

Страница записи с обратным отсчетом

Курс WordPress-разработчик
Если Вам понравилась статья — поделитесь с друзьями
Михаил Петров
Привет! Меня зовут Михаил Петров. Я копирайтер и занимаюсь этим с 2013 года. Скрупулезность и ответственность - моя фишка! Не могу делать как попало и добиваюсь, чтоб заказчик сказал минимум “неплохо”. За все время своей работы пришлось написать и отредактировать немало разной “текстовухи”, включая SEO-тексты, отзывы и прочую чушь. На сегодняшний день специализируюсь на написании информационных статей и руководств технического направления. Вижу смысл и светлое будущее в текстах для людей, а не для машин.