Новости

Как правильно применять в JavaScript асинхронные функции: примеры работы с ES 2017
От автора: возможность писать на JavaScript асинхронные функции является важным обновлением в ES2017. Что такое асинхронные функции? Асинхронные функции — это функции, которые возвращают promise. Мы

WordPress JavaScript — как правильно подключить файл скрипта к шаблону сайта
Использование в шаблонах WordPress JavaScript скриптов давно стало обычным делом. Их подключение возможно несколькими способами, начиная с классического варианта с использование голого HTML. Но чтобы все

Как исправить JavaScript error "ВКонтакте"? Что делать при ошибках JavaScript в "ВКонтакте"?
"ВКонтакте" - это на сегодняшний день самый удобный русскоязычный ресурс, который является не только популярнейшей социальной сетью, но и сервисом для прослушивания аудиозаписей и просмотра видео. Здесь

Правильное использование Tor Browser
Tor Browser полностью анонимен – Миф или реальность? Многие считают, что Tor — это полностью анонимное и безопасное средство для интернет-серфинга, которое не дает никому возможность контролировать то,

Javascript error object is not a function вконтакте как исправить
"ВКонтакте" - это на сегодняшний день самый удобный русскоязычный ресурс, который является не только популярнейшей социальной сетью, но и сервисом для прослушивания аудиозаписей и просмотра видео. Здесь

Как исправить ошибку javascript error вконтакте
На сегодняшний день «Вконтакте» является наиболее удобным русскоязычным ресурсом, который представляет собой не только крупнейшую социальной сеть, но и сервис для просмотра видео и прослушивания аудиозаписей.

Что такое JavaScript и для чего он используется?
Подробности декабря 10, 2015 Просмотров: 20225 В интернете миллионы веб-страниц,

Практика javascript синтаксис написания
Javascript — это язык программирования, который активно используется для построения динамических веб страниц. Собственно с этой целью он и был изобретен. У нашего с вами языка еще есть такое интересное

JavaScript учебник
Код функций в JavaScript начинает выполнение после их вызова. Функции являются одним из наиболее важных строительных блоков кода в JavaScript. Функции состоят из набора команд и обычно выполняют

Рекомендации решившим начать изучать JavaScript
Если вы решили начать изучать JavaScript , то эта статья для вас. Надеюсь, что её прочтение избавит вас в будущем от множества ошибок и сделает его изучения более простым, быстрым и эффективным. В статье

Как создать свой виджет в WordPress

Опубликовано: 01.09.2018

Создавать виджет WordPress – это примерно, как создавать плагин, но гораздо проще и понятнее. Все, что вам нужно, это один файл со всем PHP кодом, который писать гораздо проще, чем плагин, у которого несколько файлов. Есть три основные функции виджета: это widget , update и form .

function widget() function update() function form()

| Скачать исходники |

Базовая структура

Базовая схема нашего виджета – очень простая, есть полезные функции, которые вам нужно знать. Костяком структуры нашего виджета будет что-то вроде этого:

add_action( 'widgets_init', 'register_my_widget' ); // function to load my widget function register_my_widget() {} // function to register my widget class My_Widget extends WP_Widget () {} // The example widget class function My_Widget() {} // Widget Settings function widget() {} // display the widget function update() {} // update the widget function form() {} // and of course the form for the widget options

Шаг 1.  widget_init

Перед тем, как мы все это сделаем, нам нужно загрузить наш виджет с помощью функции widget_init . Это зацепка к action , о которой вы можете найти больше информации в .

add_action( 'widgets_init', 'register_my_widget' );

Следующее, что мы сделаем, это зарегистрируем наш виджет в WordPress, чтобы он был доступен в разделе виджетов.

function register_my_widget() { register_widget( 'My_Widget' ); }

Шаг 2. Класс

Мы заключим наш виджет в класс . Имя класса имеет значение! Что мы должны иметь в виду, так это что имя класса и имя функции должны быть одинаковыми .

class My_Widget extends WP_Widget {}

Теперь мы передадим классу некоторые параметры настроек. Например, мы можем передать ширину и высоту . Мы также можем дать небольшое описание нашему виджету, если хотим. Это будет полезно, если вы связываете виджет с вашей коммерческой темой.

function My_Widget() { function My_Widget() { $widget_ops = array( 'classname' => 'example', 'description' => __('A widget that displays the authors name ', 'example') ); $control_ops = array( 'width' => 300, 'height' => 350, 'id_base' => 'example-widget' ); $this->WP_Widget( 'example-widget', __('Example Widget', 'example'), $widget_ops, $control_ops ); }

Теперь, когда мы закончили с основными требованиями к нашему виджету, мы обратим наше внимание на три функции , о которых мы говорили ранее, и которые являются важными функциями или основными блоками для построения нашего виджета!

Шаг 3. function widget()

Первая функция относится к отображению нашего виджета. Мы передадим несколько аргументов в нашу функцию. Мы будем передавать аргументы из темы, это могут быть заголовок или какие-то другие параметры. Теперь мы передаем переменную instance , которая связана с классом нашей функции.

function widget( $args, $instance )

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

extract( $args );

Дальше мы установим заголовок и другие параметры для нашего виджета, которые могут быть изменены пользователем в меню видежета. Мы также добавляем специальные переменные типа $before_widget, $after_widget . Эти параметры обрабатываются темой.

$title = apply_filters('widget_title', $instance['title'] ); $name = $instance['name']; $show_info = isset( $instance['show_info'] ) ? $instance['show_info'] : false; echo $before_widget; // Display the widget title if ( $title ) echo $before_title . $title . $after_title; //Display the name if ( $name ) printf( '<p>' . __('Hey their Sailor! My name is %1$s.', 'example') . '</p>', $name ); if ( $show_info ) printf( $name ); echo $after_widget;

Шаг 4.  function update()

Дальше функция update . Эта функция примет настройки пользователя и сохранит их. Она просто обновит настройки в соответствии с желанием пользователя.

function update( $new_instance, $old_instance ) { $instance = $old_instance; //Strip tags from title and name to remove HTML $instance['title'] = strip_tags( $new_instance['title'] ); $instance['name'] = strip_tags( $new_instance['name'] ); $instance['show_info'] = $new_instance['show_info']; return $instance; }

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

Шаг 5.  function form()

На следующем шаге мы создадим форму , которая послужит блоком ввода . Она примет определяемые пользователем настройки и значения. Функция form может включать чекбоксы, поля для ввода текста и т.д.

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

//Set up some default widget settings. $defaults = array( 'title' => __('Example', 'example'), 'name' => __('Bilal Shaheen', 'example'), 'show_info' => true ); $instance = wp_parse_args( (array) $instance, $defaults ); ?>

Теперь мы создадим текстовое поле ввода . Мы заключим эти значения в тег абзаца.

// Widget Title: Text Input <p> <label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e('Title:', 'example'); ?></label> <input id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" value="<?php echo $instance['title']; ?>" style="width:100%;" /> </p> //Text Input <p> <label for="<?php echo $this->get_field_id( 'name' ); ?>"><?php _e('Your Name:', 'example'); ?></label> <input id="<?php echo $this->get_field_id( 'name' ); ?>" name="<?php echo $this->get_field_name( 'name' ); ?>" value="<?php echo $instance['name']; ?>" style="width:100%;" /> </p> // Checkbox <p> <input class="checkbox" type="checkbox" <?php checked( $instance['show_info'], true ); ?> id="<?php echo $this->get_field_id( 'show_info' ); ?>" name="<?php echo $this->get_field_name( 'show_info' ); ?>" /> <label for="<?php echo $this->get_field_id( 'show_info' ); ?>"><?php _e('Display info publicly?', 'example'); ?></label> </p>

Заключение

Ну вот и все. Вы только что сделали самостоятельно симпатичный и простой виджет, который показывает имя автора блога. Более того, он дает возможность пользователю выбирать, показывать информацию аудитории или нет. Сохраните код в PHP файл и загрузите в папку своей темы. Вызовите его в вашем functions.php . После этого, перейдите в консоли в Внешний вид → Виджеты и вы увидите ваш виджет.

Весь этот код включен в прикрепленный к статье файл, так что скопировать и вставить можно еще проще. Наслаждайтесь!

Источник:   WP.tutsplus.com
rss