Создание виджетов WordPress похоже на создание плагина, но оно более простое и понятное. Все, что вам нужно сделать, — это иметь один файл, в который входит весь PHP, и его легче кодировать, чем плагин, который может иметь более одного файла. Существует три основных функции виджета, которые можно разбить на виджет , обновить и сформировать .
function widget()-
function update() -
function form()
Базовая структура
Основная схема нашего виджета очень проста и есть несколько функций, которые вам нужно знать. Голая структура кости нашего виджета выглядит примерно так:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
|
add_action( ‘widgets_init’, ‘register_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 «. Это ловушка действий, и вы можете узнать больше об этом в кодексе WordPress .
|
1
|
add_action( ‘widgets_init’, ‘register_my_widget’ );
|
Следующее, что мы сделаем — зарегистрируем наш виджет в WordPress, чтобы он был доступен в разделе виджетов.
|
1
2
3
|
function register_my_widget() {
register_widget( ‘My_Widget’ );
}
|
Шаг 2
Мы вложим наш виджет в класс. Название класса важно! Следует иметь в виду, что имя класса и имя функции должны совпадать.
|
1
|
class My_Widget extends WP_Widget {}
|
Теперь мы передадим некоторые параметры настройки этому классу. Например, мы можем передать это ширина и высота. Мы также можем дать нашему виджету небольшое описание, если мы хотим, что полезно, если вы связываете этот виджет с вашей коммерческой темой.
|
1
2
3
4
5
6
|
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 Виджет функции ()
Первая функция связана с отображением нашего виджета. Мы передадим пару аргументов нашей функции виджета. Мы будем передавать аргументы из темы, которые могут быть заголовком и другими конкретными значениями. Далее мы передаем переменную экземпляра, которая связана с классом нашей функции.
|
1
|
function widget( $args, $instance )
|
После этого мы извлечем значения из аргумента, потому что мы хотим, чтобы значения были доступны локально. Если вы не знаете, о чем эта локальная переменная, просто не беспокойтесь об этом прямо сейчас и просто добавьте этот шаг!
|
1
|
extract( $args );
|
Далее мы будем устанавливать заголовок и другие значения для нашего виджета, которые могут быть отредактированы пользователем в меню виджетов. Мы также $before_widget специальные переменные, такие как $before_widget , $after_widget . Эти значения обрабатываются темой.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
|
$title = apply_filters(‘widget_title’, $instance[‘title’] );
$name = $instance[‘name’];
$show_info = isset( $instance[‘show_info’] ) ?
echo $before_widget;
// Display the widget title
if ( $title )
echo $before_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 Функция обновления ()
Далее идет функция обновления. Эта функция примет пользовательские настройки и сохранит их. Он просто обновит настройки в соответствии со вкусом пользователя.
|
01
02
03
04
05
06
07
08
09
10
|
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;
}
|
Здесь следует отметить одну вещь: мы убираем значения, чтобы из текста можно было удалить любой XHTML, что, простыми словами, может повлиять на работу нашего виджета.
Шаг 5 Форма Функция ()
Следующим шагом будет создание формы, которая будет служить в качестве поля ввода. Это займет пользовательские настройки и значения. Функция формы может включать флажки, поля ввода текста и т. Д.
Прежде чем мы создадим эти поля ввода, мы должны решить, что показывать, когда пользователь ничего не выбирает в виджете. Для этого мы передадим ему некоторые значения по умолчанию, такие как заголовок, описание и т. Д.
|
1
2
3
|
//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 );
|
Теперь мы создадим текстовое поле ввода. Мы будем заключать эти параметры в теги абзаца.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
|
// Widget Title: Text Input
<p>
<label for=»<?php echo $this->get_field_id( ‘title’ ); ?>»><?php _e(‘Title:’, ‘example’);
<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’);
<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 );
<label for=»<?php echo $this->get_field_id( ‘show_info’ ); ?>»><?php _e(‘Display info publicly?’, ‘example’);
</p>
|
Вывод
Вот и все. Вы просто сделали себе очень красивый и простой виджет, который отображает имя автора блога. Кроме того, он дает возможность пользователю показывать это публично аудитории. Сохраните код в файле PHP и загрузите его в каталог вашей темы. Назовите это в вашем functions.php . После этого перейдите на панель виджетов, и вы увидите только что созданный виджет.
Весь код включен в загружаемый файл, что облегчает его копирование и вставку. Веселиться!