WP Экспресс

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

Всем доброй пятницы, уважаемые читатели. Сегодня у нас перевод полезной, на мой взгляд, статьи о том, как создать плагин — таймер. Для чего это может быть нужно? Для разных целей. Например, вы можете сделать крутой анонс и использовать такой плагин для оповещения читателей о каком то мега важном событии на вашем блоге,  ну или просто показывать отсчет до каких то дат, праздников. Кроме того, это полезная практика в освоении 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
*/
Нам так же нужно изменить несколько ссылок в коде базового плагина, а именно базовые ссылки, так как это необходимо для отображения названия нашего плагина. В большинстве своем вам нужно изменить строки там, где стоит метка ‘TODO‘.

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

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

Figure-01

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

// 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' )
    )
);

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

Figure-02

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

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

Таким образом, вам нужно создать форму, которая будет использована для настройки нашего виджета, после его добавленя в сайдбар. 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 и добавить виджет в сайдбар. Выглядит это так:

Figure-03

Как это ни грустно, данные, введенные в поля данной формы, нельзя сохранить, Так мы должны модифицировать метод «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

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

Figure-04

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

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

/**
 * 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;

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

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

/**
 * 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, который позволяет вам показывать, сколько дней осталось до (или прошло) с того или иного события

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

Источник

Похожие

Один коммент

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

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

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.

Back to top button