Wordpress: добавляем анимированный таймер

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

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

После установки Wordpress на хостинг https://s-host.com.ua/ мы решили протестировать, как установить и настроить анимированный таймер. Для этого был выбран плагин Countdown Timer Ultimate. Его преимущества очевидны: яркий, привлекательный внешний вид и гибкость настроек.

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

Чтобы установить плагин, вам нужно перейти в раздел "Консоль"/"Плагины"/"Добавить новый". Далее воспользуйтесь поиском и найдите Countdown Timer Ultimate. Нажмите поочередно на кнопки “Установить” и “Активировать”. После этого вы увидите, что в консоли появился новый пункт:

Создание таймера

Как видно из меню плагина, здесь нет базовых настроек, а значит можно сразу переходить к созданию таймера. Нажмите на кнопку Add Timer:

• укажите заголовок;
• выберите нужную дату в поле Expiry Date (календарь появляется при клике на поле с датой):

• выберите тип анимации в поле Choose Animation;
• настройте ширину круга в поле Circle Width, перемещая ползунок влево или вправо;
• настройте ширину фона в поле Background Width аналогичным способом;
• укажите ширину в поле Countdown Width;
• выберите цвет фона в поле Background Color:

В поле Foreground Color настраивается цветовое решение отдельно для дней, часов, минут и секунд. Обратите внимание на то, что если вы, например, не хотите отображать секунды, просто снимите галочку с этого пункта:

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

Что касается вывода таймера на сайт, то здесь все предельно просто:

• перейдите на страницу WP Countdown Timer;
• найдите нужный таймер (если у вас много таймеров, используйте фильтр для более удобного поиска);
• скопируйте шорткод таймера:

• вставьте шорткод на страницу или в запись:

• обновите страницу и проверьте, как отображается таймер обратного отсчета:

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