Создание виджета с таймером обратного отсчета времени
Всем доброй пятницы, уважаемые читатели. Сегодня у нас перевод полезной, на мой взгляд, статьи о том, как создать плагин — таймер. Для чего это может быть нужно? Для разных целей. Например, вы можете сделать крутой анонс и использовать такой плагин для оповещения читателей о каком то мега важном событии на вашем блоге, ну или просто показывать отсчет до каких то дат, праздников. Кроме того, это полезная практика в освоении WordPress. Приятного чтения.
Мы все любим праздники, и, отпраздновав один, мы с нетерпением ждем наступления очередного праздника. Как много времени осталось до следующего радостного события? Какого бы праздника вы не ждали, давайте создадим виджет, добавляющий в сайдбар таймер обратного отсчета времени, который будет показывать сколько еще осталось ждать до наступления того или иного события.
Подготовка к быстрому старту
Прежде чем начать писать WordPress плагин, а тем более виджет, мы должны основательно подготовиться к этому действу. К счастью благодаря Тому Макфарлину – одному из авторов сайта Wptuts+ , мы можем быстро запустить наш проект, использовав WordPress Widget Boilerplate.
Чтобы использовать WordPress Widget Boilerplate, нужно скачать его, распаковать и положить папку с плагином в директорию /wp-content/plugins/. Затем переименовать эту папку в wptuts-countdowner. Внутри этой папки, вы найдете основной PHP-файл — plugin.php, который мы переименуем в wptuts-countdowner.php. Теперь мы готовы, капатся в коде.
Создаем новую «этикетку» для виджета
Если вы откроете wptuts-countdowner.php, то увидите, что вся тяжелая работа уже сделана за вас, и для начала, нам всего лишь нужно изменить название нашего плагина. Раз уж мы пишем наш собственный плагин, мы можем удалить дополнительные части кода, которые нам не нужны.
Информация в «шапке» плагина выглядит следующим образом:
<?php /* Plugin Name: TODO Plugin URI: TODO Description: TODO Version: 1.0 Author: TODO Author URI: TODO Author Email: TODO Text Domain: widget-name-locale Domain Path: /lang/ Network: false License: GPLv2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Copyright 2012 TODO (email@domain.com) This program is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License, version 2, as published by the Free Software Foundation. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details. You should have received a copy of the GNU General Public License along with this program; if not, write to the Free Software Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA */
Давайте исправим шапку и внесем нужную нам информацию:
<?php /* Plugin Name: Wptuts+ Countdowner Plugin URI: TODO Description: A widget to display a countdown timer in your site's sidebar. Version: 1.0 Author: Japh Author URI: http://wp.tutsplus.com/author/Japh Text Domain: wptuts-countdowner-locale Domain Path: /lang/ Network: false License: GPLv2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Copyright 2013 Japh This program is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License, version 2, as published by the Free Software Foundation. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details. You should have received a copy of the GNU General Public License along with this program; if not, write to the Free Software Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA */
Найдите «widget-name» и замените на «wptuts-countdowner», а также «Widget_name» — на «Wptuts_Countdowner». Теперь унашего плагина есть собственное название!
Сейчас плагин можно активировать в панели управления WordPress. Активировав плагин и кликнув Внешний вид -> Widgets, вы увидите стартовый вид виджет:
Как вы можете видеть, сейчас виджет имеет совершенно базовый вид. Давайте внесем изменения в этот кусок кода:
// TODO: update classname and description // TODO: replace 'wptuts-countdowner-locale' to be named more plugin specific. Other instances exist throughout the code, too. parent::__construct( 'wptuts-countdowner-id', __( 'Widget Name', 'wptuts-countdowner-locale' ), array( 'classname' => 'wptuts-countdowner-class', 'description' => __( 'Short description of the widget goes here.', 'wptuts-countdowner-locale' ) ) )
Добавляем код, чтоб отобразить название о писание нашего виджета:
// TODO: update classname and description // TODO: replace 'wptuts-countdowner-locale' to be named more plugin specific. Other instances exist throughout the code, too. parent::__construct( 'wptuts-countdowner-id', __( 'Wptuts+ Countdowner', 'wptuts-countdowner-locale' ), array( 'classname' => 'wptuts-countdowner-class', 'description' => __( "A widget to display a countdown timer in your site's sidebar.", 'wptuts-countdowner-locale' ) ) );
Мы пришли к такому результату:
Сбор пользовательских данных
Нашему виджету нужны название и дата события, до которого (или с которого) ведется отсчет времени.
Таким образом, вам нужно создать форму, которая будет использована для настройки нашего виджета, после его добавленя в сайдбар. WordPress Widget Boilerplate отделяет HTML код в файлах view от контейнера выражений и переменных, согласно принципу «разделения ответственности»Мы внесем некоторые изменения набор переменных метода и саму форму.
/** * Generates the administration form for the widget. * * @param array instance The array of keys and values for the widget. */ public function form( $instance ) { // TODO: Define default values for your variables $instance = wp_parse_args( (array) $instance ); // TODO: Store the values of the widget in their own variable if ( ! empty( $instance['event'] ) ) { $event = $instance['event']; } else { $event = __( 'Event Name', 'wptuts-countdowner-locale' ); } if ( ! empty( $instance['event_date'] ) ) { $event_date = $instance['event_date']; } else { $event_date = date( 'Y-m-d' ); } // Display the admin form include( plugin_dir_path(__FILE__) . '/views/admin.php' ); } // end form
В самом конце метода вы можете заметить, что у нас имеется параметр «include», отвечающий за подключение файла admin.php из папки views
Открываем wp-content/plugins/wptuts-countdowner/views/admin.php и добавляем следующий код:
<p> <label for="<?php echo $this->get_field_id( 'event' ); ?>"><?php _e( 'Event:' ); ?></label> <input class="widefat" id="<?php echo $this->get_field_id( 'event' ); ?>" name="<?php echo $this->get_field_name( 'event' ); ?>" type="text" value="<?php echo esc_attr( $event ); ?>" /> </p> <p> <label for="<?php echo $this->get_field_id( 'event_date' ); ?>"><?php _e( 'Event Date:' ); ?></label> <input class="widefat wptuts-event-date" id="<?php echo $this->get_field_id( 'event_date' ); ?>" name="<?php echo $this->get_field_name( 'event_date' ); ?>" type="text" value="<?php echo esc_attr( $event_date ); ?>" /> </p
Теперь мы можем обновить панель управления WordPress и добавить виджет в сайдбар. Выглядит это так:
Как это ни грустно, данные, введенные в поля данной формы, нельзя сохранить, Так мы должны модифицировать метод «update», как это показано ниже:
/** * Processes the widget's options to be saved. * * @param array new_instance The previous instance of values before the update. * @param array old_instance The new instance of values to be generated via the update. */ public function update( $new_instance, $old_instance ) { $instance = $old_instance; // TODO: Here is where you update your widget's old values with the new, incoming values $instance['event'] = strip_tags( $new_instance['event'] ); $instance['event_date'] = strip_tags( $new_instance['event_date'] ); return $instance; } // end widget
Теперь у нас есть полнофункциональный в серверной части виджет. Вы можете перетащить видже в сайдбар и сохранить внесенную информацию:
Отображение пользовательской части виджета
Теперь, когда отсчет до события уже ведется, давайте покажем этот таймер пользователям сайта.
/** * Outputs the content of the widget. * * @param array args The array of form elements * @param array instance The current instance of the widget */ public function widget( $args, $instance ) { extract( $args, EXTR_SKIP ); echo $before_widget; // TODO: Here is where you manipulate your widget's values based on their input fields $event = apply_filters( 'wptuts_countdowner_event', $instance['event'] ); $event_date = apply_filters( 'wptuts_countdowner_event_date', $instance['event_date'] ); include( plugin_dir_path( __FILE__ ) . '/views/widget.php' ); echo $after_widget; } // end widget
С клиентской частью, мы будем работать также как и серверной: HTML-код держим отдельно и работает с файлами «view». Открываем файл wp-content/plugins/wptuts-countdowner/views/widget.php и добавляем следующий код:
<?php if ( ! empty( $event ) ) echo $before_title . $event . $after_title; if ( ! empty( $event_date ) ) echo $event_date
Отсчет дней
Теперь у нас отображаются событие и дата/время, но у нас еще нет таймера как такового, Нам нужно добавить немного кода для определения, сколько времени осталось нашего событию. Так как наша дата, может относиться, как к прошлому, так и к будущему, мы должны добавить префикс, чтоб человеку было понятно, что мы имеем в виду
Код для добавления в клиентскую часть виджета:
/** * Outputs the content of the widget. * * @param array args The array of form elements * @param array instance The current instance of the widget */ public function widget( $args, $instance ) { extract( $args, EXTR_SKIP ); echo $before_widget; // TODO: Here is where you manipulate your widget's values based on their input fields $event = apply_filters( 'wptuts_countdowner_event', $instance['event'] ); $event_date = apply_filters( 'wptuts_countdowner_event_date', $instance['event_date'] ); $event_date_seconds = date( 'U', strtotime( $event_date ) ); $today_date_seconds = date( 'U' ); $event_date = human_time_diff( $event_date_seconds ); $suffix = ( $event_date_seconds > $today_date_seconds ? 'away' : 'ago' ); include( plugin_dir_path( __FILE__ ) . '/views/widget.php' ); echo $after_widget; } // end widget
Сейчас мы занимаемся добавлением маркировки времени в секундах для события и для текущей даты. Обязательно нужно привести все к формату, понятному человеку (например, 267 дней). Для определения того к прошлому или к будущему относится наша дата мы используем:
<?php if ( ! empty( $event ) ) echo $before_title . $event . $after_title; if ( ! empty( $event_date ) ) echo $event_date . ' ' . $suffix;
После внесения правок:
Теперь мы получили что-то вроде этого. Выглядит более серьезно и уже можно понять, какова задумка:
Добавляем выбор даты
Как-то это не очень здорово, когда приходится вбивать дату вручную, давайте-ка подключим 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
/** * Registers and enqueues admin-specific JavaScript. */ public function register_admin_scripts() { wp_enqueue_script( 'jquery-ui-datepicker' ); // TODO: Change 'wptuts-countdowner' to the name of your plugin wp_enqueue_script( 'wptuts-countdowner-admin-script', plugins_url( 'wptuts-countdowner/js/admin.js' ) ); } // end register_admin_scripts
register_admin_styles
/** * Registers and enqueues admin-specific styles. */ public function register_admin_styles() { // TODO: Change 'wptuts-countdowner' to the name of your plugin wp_enqueue_style( 'wp-admin-jquery-ui', plugins_url( 'wptuts-countdowner/css/jquery-ui-fresh.css' ) ); wp_enqueue_style( 'wptuts-countdowner-admin-styles', plugins_url( 'wptuts-countdowner/css/admin.css' ) ); } // end register_admin_styles
Финальным аккордом добавляем код jQuery в файл admin.js, чтобы прицепить функцию ввода даты к полю.
(function ($) { "use strict"; $(function () { // Place your administration-specific JavaScript here jQuery('.wptuts-event-date').datepicker({ dateFormat : 'yy-mm-dd' }); }); }(jQuery));
Подчищаем готовый плагин
Сейчас плагина содержит части кода, которые не используются. Таким образом, было бы неплохо облегчить его загрузку, удалив их.
Вот эти лишние файлы:
/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, который позволяет вам показывать, сколько дней осталось до (или прошло) с того или иного события
Надеюсь, данная статья будет вам полезна!
Спасибо огромное за Ваши советы. Обязательно ими воспользуюсь!