WP Экспресс

Создание виджета с таймером обратного отсчета времени

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

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

Подготовка к быстрому старту

Прежде чем начать писать WordPress плагин, а тем более виджет, мы должны основательно подготовиться к этому действу. К счастью благодаря Тому Макфарлину – одному из авторов сайта Wptuts+ , мы можем быстро запустить наш проект, использовав WordPress Widget Boilerplate.

Чтобы использовать WordPress Widget Boilerplate, нужно скачать его, распаковать и положить папку с плагином в директорию /wp-content/plugins/. Затем переименовать эту папку в wptuts-countdowner. Внутри этой папки, вы найдете основной PHP-файл — plugin.php, который мы переименуем в wptuts-countdowner.php. Теперь мы готовы, капатся в коде.

Создаем новую «этикетку» для виджета

Если вы откроете wptuts-countdowner.php, то увидите, что вся тяжелая работа уже сделана за вас, и для начала, нам всего лишь нужно изменить название нашего плагина. Раз уж мы пишем наш собственный плагин, мы можем удалить дополнительные части кода, которые нам не нужны.

Информация в «шапке» плагина выглядит следующим образом:

Давайте исправим шапку и внесем нужную нам информацию:

Нам так же нужно изменить несколько ссылок в коде базового плагина, а именно базовые ссылки, так как это необходимо для отображения названия нашего плагина. В большинстве своем вам нужно изменить строки там, где стоит метка ‘TODO‘.

Найдите «widget-name» и замените на «wptuts-countdowner», а также «Widget_name» — на «Wptuts_Countdowner». Теперь унашего плагина есть собственное название!

Сейчас плагин можно активировать в панели управления WordPress. Активировав плагин и кликнув Внешний вид -> Widgets, вы увидите стартовый вид виджет:

Figure-01

Как вы можете видеть, сейчас виджет имеет совершенно базовый вид. Давайте внесем изменения в этот кусок кода:

Добавляем код, чтоб отобразить название о писание нашего виджета:

Мы пришли к такому результату:

Figure-02

Сбор пользовательских данных

Нашему виджету нужны название и дата события, до которого (или с которого) ведется отсчет времени.

Таким образом, вам нужно создать форму, которая будет использована для настройки нашего виджета, после его добавленя в сайдбар. WordPress Widget Boilerplate отделяет HTML код в файлах view от контейнера выражений и переменных, согласно принципу «разделения ответственности»Мы внесем некоторые изменения набор переменных метода и саму форму.

В самом конце метода вы можете заметить, что у нас имеется параметр «include», отвечающий за подключение файла admin.php из папки views

Открываем wp-content/plugins/wptuts-countdowner/views/admin.php и добавляем следующий код:

Теперь мы можем обновить панель управления WordPress и добавить виджет в сайдбар. Выглядит это так:

Figure-03

Как это ни грустно, данные, введенные в поля данной формы, нельзя сохранить, Так мы должны модифицировать метод «update», как это показано ниже:

Теперь у нас есть полнофункциональный в серверной части виджет. Вы можете перетащить видже в сайдбар и сохранить внесенную информацию:

Figure-04

Отображение пользовательской части виджета

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

С клиентской частью, мы будем работать также как и серверной: HTML-код держим отдельно и работает с файлами «view». Открываем файл wp-content/plugins/wptuts-countdowner/views/widget.php и добавляем следующий код:

Отсчет дней

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

Код для добавления в клиентскую часть виджета:

Сейчас мы занимаемся добавлением маркировки времени в секундах для события и для текущей даты. Обязательно нужно привести все к формату, понятному человеку (например, 267 дней). Для определения того к прошлому или к будущему относится наша дата мы используем:

После внесения правок:

Figure-05

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

Добавляем выбор даты

Как-то это не очень здорово, когда приходится вбивать дату вручную, давайте-ка подключим jQuery UI Datepicker, в таком виде, в котором он присутствует в WordPress.

Но есть один нюанс – в набор не включен CSS файл для «выборщика даты». Так берем файл CSS и папку с изображениями из библиотеки WP Admin jQuery UI на сайте GitHub и помещаем все это в папку /wp-content/plugins/wptuts-countdowner/css/

Затем нам нужно «научить» WordPress загружал новую функцию. Для этого нужно внести правки в register_admin_scripts и register_admin_styles:

register_admin_scripts

register_admin_styles

Финальным аккордом добавляем код jQuery в файл admin.js, чтобы прицепить функцию ввода даты к полю.

Подчищаем готовый плагин

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

Вот эти лишние файлы:

/css/admin.css

/css/widget.css

/js/widget.js

Так же убираем эти функции из файла wptuts-countdowner.php:

activate

deactivate

register_widget_scripts

register_widget_styles

И еще удаляем эти строки: wp_enqueue_style( ‘wptuts-countdowner-admin-styles’, plugins_url( ‘wptuts-countdowner/css/admin.css’ ) ); из функции register_admin_styles

Заключение

Вот и пожалуй все о создание виджета! WordPress-плагин, созданный на основе Widget Boilerplate, который позволяет вам показывать, сколько дней осталось до (или прошло) с того или иного события

Надеюсь, данная статья будет вам полезна!

Источник

Метки

Related Articles

1 thought on “Создание виджета с таймером обратного отсчета времени”

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Тоже интересно

Close
Close

Обнаружен Adblock

Уважайте труд вебмастера. Пожалуйста, отключите свой блокировщик рекламы.