Лучший плагин таймера обратного отсчета для wordpress

Приветствую вас, дорогие читатели!

Сегодня мы поговорим о том, как можно очень просто и быстро добавить таймер обратного отсчета на ваш сайт работающий на WordPress.

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

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

Установка плагина

Для реализации данной задачи нам понадобится плагин Uji Countdown.

На самом деле плагинов с такими счетчиками очень много, но я остановила свой выбор именно на этом потому, что:

• Во первых он позволяет выводить такой счетчик на сайте при помощи шорткода.
• Во-вторых у него можно с легкостью настроить внешний вид и подстроить оформление под стиль вашего сайта.
• В-третьих, он имеет весь необходимый функционал который может понадобится для такого счетчика обратного отсчета.
• И последнее — данный плагин реализован при помощи HTML 5, благодаря чему он достаточно хорошо работает и отображается не только на компьютере, но и на все остальных видах устройств.

Устанавливается этот плагин точно также как и любой другой. Просто копируем его название, переходим в административную часть нашего сайта, заходим в Плагины=>Добавить новый, водим название в строку поиска, нажимаем кнопку установить и, после установки, активируем его.

Настройка таймера обратного отсчёта

Теперь в боковом меню нашего сайта нам нужно перейти в раздел «Настройки».
Здесь у нас появился новый пункт, который называется Uji Countdown.
У этого плагина множество различных настроек, все они разделены на пять вкладок:

На первой вкладке содержится общая информация о плагине а также предложение приобрести премиумную версию данного плагина.

1. 1. Адаптивный дизайн таймера
2. 2. Неограниченном количестве таймеров на одной странице
3. 3. Наличие новых стилей с возможностью их редактирования

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

Давайте перейдем на вкладку «Add new style» и создадим свой собственный стиль оформления этого счетчика так как по умолчанию, этот таймер будет какого-то сиреневого цвета, и далеко не каждому сайту такой стиль подойдёт.

На этой вкладке мы можем задать следующие параметры:

1. 1. Прежде всего, нам необходимо задать название нашего стиля.
2. 2. Если вы используете на своем сайте Google-шрифты и хотите, что бы этот счетчик, по своему стилю, тоже подходил к шрифтам вашего сайта, можете здесь его выбрать.
3. 3.Далее можно выбрать выравнивание счётчика на странице:
   • без выравнивание
   • выравнивание по левому краю
   • выравнивание по центру
   • выравнивание по правому краю
4. 4.Задаём формат счетчика. По умолчанию здесь отображается количество оставшихся дней, часов, минут и секунд. Вы можете при желании убрать секунды, или наоборот, убрать дни, что бы у вас показывались только часы. В основном, используются все четыре блока. Так же, вы можете, помимо этих четырех блоков, добавить сюда годы, месяцы и недели.
5. 5.Следующая настройка Animation for seconds. Вы можете сделать, что бы секунды менялись просто без анимации, либо добавить небольшую анимацию.
6. 6.Display time label text — это те самые подписи: дни, часы, минуты и секунды. Вы можете сделать так, что бы они не отображались вообще, для этого нужно просто снять галочку возле этого пункта.
7. 7.Timer size — при помощи ползунка вы можете изменять размер вашего таймера, так чтобы он подходил под размер блока, в котором вы собираетесь его разместить.
8. 8.Select box colors – здесь можно задать цвет таймера в виде градиента.
   Bottom – это нижний цвет. Top – верхний цвет.
9. 9.Text color -данное свойство позволят задать цвет текста и цвет тени.
10. 10.Label color — задает цвет подписей счетчика.
11. 11.Label size – позволяет задать размер подписей.
12. 12.Enable Subsscribe Form – можно добавить к таймеру форму подписки. Честно говоря, для формы подписки использование данного плагина — это не самое лучшее решение, поэтому, я обычно не использую эту опцию.

После того как мы все это сделали, нам нужно сохранить наш стиль. Нажимаем на кнопку «Save style».
Таким образом мы можем создавать разные стили оформления, а потом выбирать один из них при добавлении таймера на страницу.

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

Теперь перейдем на вкладку «Settings» и посмотрим, какие здесь есть настройки.

1. 1. Enable user time – по умолчанию данный таймер работает на основании времени, которое установлено на вашем сервере, т. е. там где размещен ваш сайт. Вы можете поставить здесь галочку, и таким образом этот таймер будет подстраиваться под ту часовую зону, в которой находится сам пользователь.
2. 2. Right-To-Left (RTL) — честно говоря, я не очень поняла смысл этой настройки. Дословно она переводится как — написание начинается с права страницы и продолжается налево. В большинстве сайтов такая опция не используется, поэтому я тоже здесь ни чего не ставлю.
3. 3.Remove settings – если вы поставите здесь галочку, то после удаления данного плагина, все ваши стили удалятся из базы данных.
4. 4.Quick Translation – это очень важная опция, которая позволяет осуществить быстрый перевод на любой язык. По умолчанию плагин идет на английском языке, и все подписи идут на английском.

Чтобы перевести его на свой язык достаточно просто вписать значения слов в нужные поля.

Примерно так:

• В поле «Days» — пишем «дней».
• В поле «Day» — пишем «день» и так далее.

Далее нажимаем на кнопку «Save changes».

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

Редактирование созданного стиля

Если вам нужно отредактировать один из созданных стилей, например изменить цвет или размер таймера, то для этого нужно:

1. 1. Перейти на вкладку «My styles»
2. 2. Нажать на ссылку «Edit» напротив названия нужного вам стиля.

3. 3. Внести нужные изменения и сохранить стиль.

Добавление таймера обратного отсчёта на страницу

Для того, что бы добавить таймер вам необходимо:

1. 1. Открыть нужную страницу для редактирования (или создать новую) и на вкладке визуально на панели инструментов нажать ярлык с изображением часов.

2. 2. В открывшемся окне задаём настройки. Первое, что вам нужно сделать, это выбрать из раскрывающегося списка стиль оформления таймера.
3. 3.Следующая настройка — Expire Date. Задаем, до какой даты будет действовать наш таймер.
4. 4. Select Time — выставляем время окончания акции или предложения.
5. 5. After expiration – позволяет, после завершения срока действия таймера скрыть его, для этого нужно поставить галочку возле «Hide countdown». Можно сделать так, чтобы после завершения акции осуществлялся переход на какой-то другой адрес. Для этого нужно в поле ниже задать адрес страницы для перехода.
6. 6. Recurring Time – позволяет обновлять время акции через определенные промежутки времени. Так же можно задать количество циклов повторения.
7. 7. Campaign name – можно задать имя компании.

После того как задали все настройки, нажимаем кнопку «Insert».

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

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

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

Видеоинструкция

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

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