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

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

Всем хорошей пятницы, почетаемые читатели. Сейчас у нас перевод полезной, на мой взор, статьи о том, как сделать плагин — таймер.

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

Не считая того, это нужная практика в освоении 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: TODOPlugin URI: TODODescription: TODOVersion: 1.0Author: TODOAuthor URI: TODOAuthor Email: TODOText Domain: widget-name-localeDomain Path: /lang/Network: falseLicense: GPLv2 or laterLicense URI: http://www.gnu.org/licenses/gpl-2.0.htmlCopyright 2012 TODO (email@domain.com)This program is free software; you can redistribute it and/or modifyit under the terms of the GNU General Public License, version 2, aspublished 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 ofMERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See theGNU General Public License for more details.You should have received a copy of the GNU General Public Licensealong with this program; if not, write to the Free SoftwareFoundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA*/123456789101112131415161718192021222324252627282930<?php/*Plugin Name: TODOPlugin URI: TODODescription: TODOVersion: 1.0Author: TODOAuthor URI: TODOAuthor Email: TODOText Domain: widget-name-localeDomain Path: /lang/Network: falseLicense: GPLv2 or laterLicense URI: http://www.gnu.org/licenses/gpl-2.0.htmlCopyright 2012 TODO (email@domain.com)This program is free software; you can redistribute it and/or modifyit under the terms of the GNU General Public License, version 2, aspublished 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 ofMERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.

  See theGNU General Public License for more details.You should have received a copy of the GNU General Public Licensealong with this program; if not, write to the Free SoftwareFoundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA  02110-1301  USA*/Давайте исправим шапку и внесем подходящую нам информацию:<?php/*Plugin Name: Wptuts+ CountdownerPlugin URI: TODODescription: A widget to display a countdown timer in your site’s sidebar.Version: 1.0Author: JaphAuthor URI: http://wp.tutsplus.com/author/JaphText Domain: wptuts-countdowner-localeDomain Path: /lang/Network: falseLicense: GPLv2 or laterLicense URI: http://www.gnu.org/licenses/gpl-2.0.htmlCopyright 2013 JaphThis program is free software; you can redistribute it and/or modifyit under the terms of the GNU General Public License, version 2, aspublished 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 ofMERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See theGNU General Public License for more details.You should have received a copy of the GNU General Public Licensealong with this program; if not, write to the Free SoftwareFoundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA*/1234567891011121314151617181920212223242526272829<?php/*Plugin Name: Wptuts+ CountdownerPlugin URI: TODODescription: A widget to display a countdown timer in your site’s sidebar.Version: 1.0Author: JaphAuthor URI: http://wp.tutsplus.com/author/JaphText Domain: wptuts-countdowner-localeDomain Path: /lang/Network: falseLicense: GPLv2 or laterLicense URI: http://www.gnu.org/licenses/gpl-2.0.htmlCopyright 2013 JaphThis program is free software; you can redistribute it and/or modifyit under the terms of the GNU General Public License, version 2, aspublished 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 ofMERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.

  See theGNU General Public License for more details.You should have received a copy of the GNU General Public Licensealong with this program; if not, write to the Free SoftwareFoundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA  02110-1301  USA*/Нам так же необходимо поменять несколько ссылок в коде базисного плагина, а конкретно базисные ссылки, потому что это нужно для отображения наименования нашего плагина. В большинстве собственном вам необходимо поменять строчки там, где стоит метка ‘TODO‘.Найдите «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’ )))12345678910// 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’ )));12345678910// 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 variableif ( ! 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 forminclude( plugin_dir_path(__FILE__) . ‘/views/admin.php’ );} // end form12345678910111213141516171819202122232425262728293031/*** 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 variableif ( ! 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 forminclude( 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 ); ?>» /></p12345678<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 widget1234567891011121314151617/*** 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 widget12345678910111213141516171819202122/*** 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 и добавляем последующий код:<?phpif ( ! empty( $event ) )echo $before_title . $event . $after_title;if ( ! empty( $event_date ) )echo $event_date12345<?phpif ( ! 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 widget12345678910111213141516171819202122232425262728/*** 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 дней). Для определения того к прошлому либо к будущему относится наша дата мы используем:<?phpif ( ! empty( $event ) )echo $before_title . $event . $after_title;if ( ! empty( $event_date ) )echo $event_date . ‘ ‘ . $suffix;12345<?phpif ( ! 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 pluginwp_enqueue_script( ‘wptuts-countdowner-admin-script’, plugins_url( ‘wptuts-countdowner/js/admin.js’ ) );} // end register_admin_scripts12345678910/*** 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 pluginwp_enqueue_script( ‘wptuts-countdowner-admin-script’, plugins_url( ‘wptuts-countdowner/js/admin.js’ ) );} // end register_admin_scriptsregister_admin_styles/*** Registers and enqueues admin-specific styles.*/public function register_admin_styles() {// TODO: Change ‘wptuts-countdowner’ to the name of your pluginwp_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_styles12345678910/*** Registers and enqueues admin-specific styles.*/public function register_admin_styles() {// TODO:    Change ‘wptuts-countdowner’ to the name of your pluginwp_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 herejQuery(‘.wptuts-event-date’).datepicker({dateFormat : ‘yy-mm-dd’});});}(jQuery));123456789(function ($) {«use strict»;$(function () {// Place your administration-specific JavaScript herejQuery(‘.wptuts-event-date’).datepicker({dateFormat : ‘yy-mm-dd’});});}(jQuery));Подчищаем готовый плагинСейчас плагина содержит части кода, которые не употребляются. Таким макаром, было бы хорошо облегчить его загрузку, удалив их.Вот эти излишние файлы:/css/admin.css/css/widget.css/js/widget.jsТак же убираем эти функции из файла wptuts-countdowner.php:activatedeactivateregister_widget_scriptsregister_widget_stylesИ еще удаляем эти строчки: wp_enqueue_style( ‘wptuts-countdowner-admin-styles’, plugins_url( ‘wptuts-countdowner/css/admin.css’ ) ); из функции register_admin_stylesЗаключениеВот и пожалуй все о создание виджета! WordPress-плагин, сделанный на базе Widget Boilerplate, который позволяет вам демонстрировать, сколько дней осталось до (либо прошло) с того либо другого событияНадеюсь, данная статья будет вам полезна!Источник

источник: {https://artstroy.net/sozdanie-vidzheta-s-tajmerom-obratnogo-otscheta-vremeni/|Создание виджета с таймером обратного отсчета времени|ArtStroy.net}

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

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