Створюємо віджет із таймером зворотного відліку для WordPress

Всі ми любимо свята, і після травневих ми з нетерпінням чекатимемо наступних свят чи вихідних. Скільки часу лишилося до наступного свята? Яке б свято ви не очікували, на сайті можна створити таймер для зворотного відліку днів або часу, що залишився до нових подій чи святкових дат у календарі. У цьому уроці ми докладно опишемо процедуру створення такого таймера. Давайте приступимо.

| Завантажити вихідні |

1. З чого почати

Є ряд обов'язкових складових, які потрібно врахувати та виконати при розробці плагіна для WordPress, і тим більше для віджету на сайті. Для розробки віджетів можна використовувати WordPress Widget Boilerplate.

Для цього скачайте WordPress Widget Boilerplate, розпакуйте архів та збережіть його вміст у папку widget-boilerplate у каталозі / Wp-content/plugins /. Перейменуйте цю папку на wptuts-countdowner.

У самій папці знайдіть основний PHP-файл під назвою plugin.php, перейменуємо його в wptuts-countdowner.php.

Тепер перейдемо до написання та оформлення коду.

2. Робимо налаштовуваний бейдж та оформлення

У файлі 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
*/

Також нам треба змінити ряд посилань у коді фреймворк-плагіна, щоб зберегти загальну структуру посилань для нашого плагіна та нашого сайту. Більшість коду, де треба внести правки, зазначена додаванням 'ALL».

Знайдіть та замініть ім'я віджета текстом wptuts-countdowner, і ще - Widget_name текстом Wptuts_Countdowner. Тепер у нашого плагіна з'явиться власна назва.

Створивши плагін, ми можемо активувати його в Панелі управління WordPress. Після активації зайдіть у Зовнішній вигляд → Віджети, і ви побачите початковий вид віджету:

Як бачите, віджет у такому форматі досить загальний та не налаштований. Обновимо його за допомогою наступного коду:

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

Ось що у нас тепер є:

3. Збираємо дані, введені користувачем

Нашому віджету треба тепер дати назву та вказати ту дату, яку ви встановлюєте для відліку (до якого свята або дня в календарі ми ведемо зворотний відлік).

Нам треба створити форму, яка буде використовуватися для додавання конфігурації до бічної панелі. WordPress Widget Boilerplate розділяє HTML-файли вид від блоку виразів і змінних, ми налаштуємо набір змінних для обраного методу і саму форму.

Всі зміни в коді плагіна виділені "підсвічуванням":

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

Ви помітите, що є параметр включати. Відкрийте файл /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 і додайте віджет у бічну панель, виглядатиме це приблизно так:

На жаль, введені дані в полях форми поки що не зберігаються, так що нам треба відредагувати метод оновлення наступним чином:

/**
 * 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. Робота з front-end

Якщо зі зворотним відліком розібралися, настав час розібратися із зовнішнім виглядом:

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

Для форми ми відкриваємо файл /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;

5. Відлік днів

Тепер у нас відображається дата і час, До якої ведеться зворотний відлік. Додамо трохи коду, щоб визначити, скільки днів залишається до події, та вказати поточну дату. Наша дата може бути в минулому чи в майбутньому, а тому треба вказати префікс, який визначатиме, де саме знаходиться наша дата: у минулому чи майбутньому періоді.

Ось код, який треба внести до інтерфейсних нашого віджету:

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

Нам треба додати маркування часу до події та відображення поточної дати. При цьому треба перетворити напис на зрозумілий людині формат. Треба для цього використовувати префікс, який визначає час у минулому чи майбутньому.

Вигляд наші редагування мають наступний:

<?php
if ( ! empty( $event ) )
    echo $before_title . $event . $after_title;
if ( ! empty( $event_date ) )
    echo $event_date . ' ' . $suffix;

І ось у нас вийде красиво оформлений і тямущий віджет:

6. Вибираємо дату

Ще додамо до нашого віджету jQuery UI Datepicker, який відображається у вигляді, як включений до складу WordPress.

Що не входить до його складу, то це оформлення CSS. Візьміть CSS-файл та папку із зображеннями з бібліотеки WP Admin jQuery UI в GitHub, помістіть їх у папку /wp-content/plugins/wptuts-countdowner/css/.

А тепер треба завантажити нову функцію шляхом правок у складі 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));

7. Остаточне наведення порядку

Ще залишилося кілька частин коду, які ми не використовуються, так що немає нічого поганого в тому, щоб прибрати ці додаткові файли і код. Ось вони:

• /css/admin.css
• /css/widget.css
• /js/widget.js

І ось такі функції у файлі wptuts-countdowner.php:

• активоване
• відключити
• 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 для відображення лічильника із кількістю днів до певної події. Сподіваюся, ця стаття буде вам корисною, а свої думки та зауваження можете залишити у коментарях до цього матеріалу.

Джерело: WP.tutsplus.com

Олексій Шевченко

редактор wpcafe

Вивчає сайтобудування з 2008 року. Практикуючий вебмайстер, що спеціалізується на створенні сайтів WordPress. Задати питання Олексію можна на https://profiles.wordpress.org/wpthemeus/