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

Создавать виджет 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, о которой вы можете найти больше информации в WordPress codex.

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

Алексей Шевченко

редактор wpcafe

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