Мы все любим празднование, и теперь, когда Пасха закончилась, мы с нетерпением ждем следующего случая. Как далеко вы собираетесь отпраздновать в следующий раз? Что бы это ни было, давайте создадим плагин виджетов, чтобы добавить таймер обратного отсчета на нашу боковую панель, показывающий, сколько нам осталось ждать.
1. Начало работы
Каждый раз, когда мы разрабатываем плагин для WordPress, и, в частности, виджет, нам нужно сделать ряд вещей. Благодаря одному из наших авторов здесь, на Wptuts +, Тому Макфарлину, мы можем быстро начать работу, используя шаблонную панель WordPress Widget .
Чтобы использовать шаблон WordPress Widget Boilerplate, загрузите его, разархивируйте и переместите каталог widget-кипаринг в каталог / wp-content / plugins / . Затем переименуйте его в wptuts-countdowner .
Внутри этого каталога вы найдете основной файл PHP, plugin.php , который мы также переименуем в wptuts-countdowner.php .
Теперь мы готовы войти в код.
2. Повторная маркировка котельной пластины
Внутри файла wptuts-countdowner.php лежит вся тяжелая работа, проделанная за нас с помощью шаблона. Для начала нам просто нужно настроить его так, чтобы он отражал название нашего плагина. Затем, как только мы напишем наш собственный код, мы также сможем избавиться от лишних битов в шаблоне, которые нам могут не понадобиться.
Информация заголовка плагина будет выглядеть так:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
<?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 protected])
This program is free software;
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;
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program;
Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA
*/
|
Так что исправьте это с деталями нашего плагина:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
<?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;
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;
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program;
Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA
*/
|
Нам также необходимо изменить несколько ссылок по всему шаблону кода, чтобы изменить общие ссылки для использования нашего имени плагина. Большинство мест, где вам нужно сделать это, обозначено « TODO ».
Найдите и замените « widget-name » на « wptuts-countdowner », а также « Widget_name » на « Wptuts_Countdowner ». Теперь плагин имеет собственное имя!
Теперь у вас есть плагин, который вы можете активировать в своей панели WordPress. После активации, когда вы посмотрите под Внешний вид -> Виджеты, вы увидите начало нашего виджета:
Как видите, на данный момент это выглядит довольно обобщенно. Поэтому обновите следующий код:
|
01
02
03
04
05
06
07
08
09
10
|
// TODO: update classname and description
// TODO: replace ‘wptuts-countdowner-locale’ to be named more plugin specific.
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’ )
)
);
|
Чтобы отразить название и описание нашего виджета:
|
01
02
03
04
05
06
07
08
09
10
|
// TODO: update classname and description
// TODO: replace ‘wptuts-countdowner-locale’ to be named more plugin specific.
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’ )
)
);
|
Теперь у нас есть это:
3. Соберите информацию от пользователя
Нашему виджету понадобятся имя и дата для события, которое будет отсчитываться (или увеличиваться).
Итак, нам нужно создать форму для использования, когда наш виджет добавляется на боковую панель для конфигурации. WordPress Widget Boilerplate разделяет HTML-часть на файлы представления для хорошего, четкого разделения проблем . Мы настроим наши переменные в методе, а затем и саму форму в представлении администратора.
Вот метод. Изменения для нашего плагина указаны с подсветкой.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
/**
* 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( ‘Ymd’ );
}
// Display the admin form
include( plugin_dir_path(__FILE__) . ‘/views/admin.php’ );
} // end form
|
Вы заметите, что в конце метода есть include для представления. Так что откройте /wp-content/plugins/wptuts-countdowner/views/admin.php . Добавьте следующий код в этот файл:
|
1
2
3
4
5
6
7
8
|
<p>
<label for=»<?php echo $this->get_field_id( ‘event’ ); ?>»><?php _e( ‘Event:’ );
<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:’ );
<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 следующим образом:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
|
/**
* 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
|
Теперь у нас есть рабочий виджет админа! Вы можете перетащить виджет на боковую панель и сохранить сведения о событии, например, в Рождество:
4. Отображение на передней части
Теперь у нас есть сведения о событии для времени обратного отсчета, давайте покажем его в передней части сайта на боковой панели.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
|
/**
* 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. Откройте файл /wp-content/plugins/wptuts-countdowner/views/widget.php и добавьте следующее:
|
1
2
3
4
5
|
<?php
if ( ! empty( $event ) )
echo $before_title .
if ( ! empty( $event_date ) )
echo $event_date;
|
5. Подсчет дней
Итак, у нас есть событие и дата / время, отображаемые сейчас, но это не дает нам обратный отсчет. Нам нужно добавить немного кода, чтобы определить, сколько дней между датой нашего события и сегодняшней датой. Поскольку наша дата может быть в прошлом или будущем, нам также нужно добавить суффиксное слово, чтобы указать, какой именно.
Вот код, который мы добавляем в интерфейсную часть виджета:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
/**
* 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 дней ). Мы также определяем, будет ли дата суффикса использоваться в зависимости от того, наступит ли дата события в прошлом или будущем.
Теперь у нас есть суффиксное слово, нам лучше добавить его в представление:
|
1
2
3
4
5
|
<?php
if ( ! empty( $event ) )
echo $before_title .
if ( ! empty( $event_date ) )
echo $event_date .
|
Теперь у нас есть кое-что, что выглядит немного респектабельнее и имеет больше смысла.
6. Выберите дату
Немного некрасиво вводить дату вручную, поэтому давайте добавим в DatePicker пользовательский интерфейс jQuery, посмотрев, как он включен в WordPress.
Одна вещь, которая не включена, это CSS для выбора даты. Поэтому возьмите каталог CSS-файлов и изображений из хранилища jQuery UI WP Admin Хелен Хоу-Сэнди на GitHub и поместите их в каталог / wp-content / plugins / wptuts-countdowner / css / .
Затем нам нужно заставить WordPress загружать их, изменив стандартные методы register_admin_scripts и register_admin_styles , например, так:
register_admin_scripts
|
01
02
03
04
05
06
07
08
09
10
|
/**
* 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
|
01
02
03
04
05
06
07
08
09
10
|
/**
* 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, чтобы привязать средство выбора даты к полю.
|
1
2
3
4
5
6
7
8
9
|
(function ($) {
«use strict»;
$(function () {
// Place your administration-specific JavaScript here
jQuery(‘.wptuts-event-date’).datepicker({
dateFormat : ‘yy-mm-dd’
});
});
}(jQuery));
|
7. Очистка
В шаблоне есть несколько вещей, которые мы не использовали в этом плагине, поэтому было бы неплохо облегчить нагрузку и снять их. Дополнительно эти файлы:
- /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, основанный на Boilerplate Widget, который позволяет вам показать, сколько дней до (или после) события.
Я надеюсь, что вы нашли это полезным, пожалуйста, поделитесь своими мыслями в комментариях ниже.