Таймер обратного отсчета на странице. Часть 2 из 3

В предыдущем уроке серии использовался плагин jQuery для установки таймера обратного отсчета. Но что делать, если знаний для использования JavaScript недостаточно, а установить таймер обратного отсчета на своем блоге или веб сайте, который работает под WordPress или Joomla, очень нужно? Ответ прост - использовать плагины.

WordPress

Для WordPress можно найти несколько плагинов, которые откроют возможность использовать таймер обратного счета на страницах или записях. В данном уроке рассматривается плагин Easy Timer. Он прост в установке, настройке и русифицирован.

Установка

Скачиваем архив с плагином. Распаковываем его содержимое (папка easy-timer) в каталог веб сайта \wp-content\plugins. Затем переходим в панель инструментов с сайта с правами администратора. На вкладке "Плагины" находим Easy Timer и активируем его.

Активация плагина Easy Timer

Внимание. Установите нужное значение "Часовой пояс" для вашего сайта, чтобы значение времени соответствовало вашему часовому поясу.

Использование

Теперь надо перейти в редактирование страницы/записи/виджета и там, где планируется использовать таймер вставить прямо в текст следующий код для отсчета времени до определенной даты:

[countdown date=YYYY/MM/DD-hh:mm:ss]
Текст сообщения о времени отсчета [timer] [after] Сообщение, которое будет выводиться после завершения отсчета.
[/countdown]

YYYY - год, MM - месяц, DD - число, hh - час, mm - минуты, ss - секунды. Вместо кода [timer] будет выводиться время в формате, определенном в настройках плагина. Текст между кодами [after] и [/countdown] будет выводиться только после достижения  установленного времени (мало того, он даже не будет грузиться в браузер посетителя). В тексте сообщений можно использовать разрешенные HTML теги и форматировать его визуальным редактором так, как нужно.

Использование таймера Easy Timer

При загрузке страницы код будет преобразовываться в счетчик. Плагин автоматически распознает язык выводимой страницы страницы и используют термины для счетчика на соответствующем языке:

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

Для установки формата выводимого значения счетчика в панели инструментов нужно перейти на вкладку "Параметры" на страницу "Easy Timer" и выбрать формат значений в выпадающем списке:

Настройка формата выводимого значения счетчика

Для формата времени таймера можно выбрать следующие коды (их можно использовать и в тексте сообщений вместо [timer]):

    [dhmstimer]  - дни, часы, минуты и секунды;

    [dhmtimer]  - дни, часы и минуты;

    [dhtimer]  - дни и часы;     [dtimer] - дни;

    [hmstimer] - часы, минуты и секунды;

    [hmtimer] - часы и минуты;

    [htimer] - часы;     [mstimer] - минуты и секунды;

    [mtimer] - минуты;     [stimer] - секунды.

Дополнительные возможности плагина

Можно использовать таймер для отсчета времени после определенной даты

[countup date=YYYY/MM/DD-hh:mm:ss]
Текст сообщения после указанного времени! [before] Сообщение, которое выводится до указанной даты.
[/countup]

Сообщение будет выводиться после наступления указанной даты. Текст между кодами [before] и [/countup] будет выводиться до установленной даты.

Можно использовать  несколько дат в счетчике. Даты разделяются символом //. При этом сообщения будут менять в соответствии с достижением установленных дат:

[countdown date=2011/12/25//2012/01/01]
Осталось [timer] до Рождества у буржуинов![after]
Осталось [timer] до Нового 2012 года![after]
С наступившим  новым годом 2012![/countdown]

Для счетчика можно использовать время относительно момента загрузки страницы.

[countdown date=+d:h:m:s]
Осталось [timer]![after]Подсчет окончен!
[/countdown]

Также плагин дает возможность выводить время (код [clock]), день в году (код [yearday]), номер недели (код [yearweek]), месяц (код [month]), день месяца (код [monthday]). Код надо вставлять в текст страницы или записи, там где нужно вывести соответствующее значение.

На одной странице можно устанавливать несколько таймеров.

Заключение.

Плагин Easy Timer является отличным инструментом для подсчета времени в различных ситуациях. Однако полное его описание выходит за рамки темы урока. А приведенной информации вполне достаточно для организации обратного отсчета и проведения различных акций на его основе.

В следующем уроке будет представлен таймер для Joomla.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.ruseller.com
Автор: Сергей Фастунов
Урок создан: 14 Июня 2011
Просмотров: 39750
Правила перепечатки


5 последних уроков рубрики "Wordpress"

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 14 Июня 2011 22:10
    Kapi
    WTF? фейспалм.джпг. давайте уроки по установке джумлы на локалхост и скрипта на пхп:
    <?php print 'Hello Worl';
    ?>
    
    • 15 Июня 2011 11:17
      xcreotiff
      Уроков в инете полно как установить Джумлу на локале, а что бы прикрутить рнр (js, html) скрипт, юзай модуль mod_php
  • 15 Июня 2011 07:45
    GCDner
    Во всяком случае, полезно !
  • 15 Июня 2011 11:37
    rubyx
    а я промолчу, у меня уже одно Предупреждений: 1 есть :))
  • 16 Июня 2011 17:19
    Vasek91
    А все заметили, что при изменение времени на компьютере и последующем обновление страницы происходит и обновление счетчика))) Как сделать так, чтобы посетитель не мог влиять на таймер???
  • 10 Марта 2012 01:22
    dimon1006
    Подскажите! Я установил плагин "Easy Timer". Но после окончания времени отсчета страница начинает каждую секунду перезагружаться и время отсчета начинается опять с 3 минут. Как это можно исправить и есть ли другие плагины для обратного отсчета?
  • 10 Августа 2012 16:25
    login2030
    Такой вопрос- таймер обновляется только после перезагрузки страницы, но галочку"Использовать скрипт на языке JavaScript" в настройках плагина я не убирал, как же все таки сделать так чтобы таймер обновлялся самостоятельно? И еще- для чего нужна строчка <span class="custom-field"> в коде [countdown date=<span class="custom-field">YYYY/MM/DD-hh:mm:ss</span>] 2 Текст сообщения о времени отсчета [timer] [after] Сообщение, которое будет выводиться после завершения отсчета. 3 [/countdown] , с ней таймер показывает как будто он уже закончился, независимо от выставленной даты
  • 20 Мая 2015 18:05
    abu_abdullah
    доброго времени суток. подскажите пожалуйста, как установить таймер и форму обратной связи на слайдер.
  • 15 Января 2016 22:28
    Asadbek
    Очень полезный урок. Супер хочу работать с Евгением Поповом
  • Комментарий удален
    • 14 Июня 2011 22:06
      Alter_Ego
      facepalm. Для новых посетителей этот урок может быть вполне полезным.
  • Комментарий удален
    • 15 Июня 2011 00:19
      SonikAbstain
      я думаю, серьезные уроки они попридержали для своих платных курсов :)
      • 15 Июня 2011 16:51
        unframed
        Однако уроки по Zend как-то мало читаются. Буквально в разы меньше прочтений.
^ Наверх ^