Создавать виджет 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

Вам понравился материал?

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

Такой e-mail уже зарегистрирован. Воспользуйтесь формой входа или введите другой.

Вы ввели некорректные логин или пароль

Извините, для комментирования необходимо войти.

29 комментариев

сначала новые
по рейтингу сначала новые по хронологии

При подключении отладчика идут ошибки об устаревших функциях, поэтому я заменил function MY_Widget() на function __construct() и внес изменения в function widget:

function __construct() {
$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' );

parent::__construct( 'example-widget', __('Example Widget', 'example'), $widget_ops, $control_ops );
}

function widget( $args, $instance ) {
extract( $args );

//Our variables from the widget settings.
if (! empty( $instance['title'] ) ) { $title = apply_filters('widget_title', $instance['title'] );}
if (! empty( $instance['name'] ) ) {$name = $instance['name'];}
$show_info = isset( $instance['show_info'] ) ? $instance['show_info'] : false;

echo $before_widget;

// Display the widget title
if ( ! empty($title) )
echo $before_title . $title . $after_title;

//Display the name
if ( ! empty($name) )
printf( '' . __('Hey their Sailor! My name is %1$s.', 'example') . '', $name );

if ( $show_info )
printf( $name );

echo $after_widget;
}

Ростислав

Плохо, не понятно написано

Ростислав! Что тут сложного и непонятного?! Скачаq исходник, скопируй из архива файл в корень темы и воткни код вызова виджета в функции темы(((
if ( ! function_exists( 'alx_load' ) ) {

function alx_load() {
// Load custom widgets
load_template( get_template_directory() . '/simple-widget.php' );

}

}
add_action( 'after_setup_theme', 'alx_load' );

Зачем выкладывать код если ты не можешь его нормально скопировать. Просьба в следующий раз выкладывать картинку!.

Простите не в то окно.)

Хорошая статья, только вот что-то селект не получается вставить в форме отображается нормально а получает пустое значение. Может есть наглядные примеры как обрабатывать различные типы инпутов?

А зачем "id_base" в $control_ops ?

Юрий Луковой

Здравствуйте.
Подскажите пожалуйста, как сделать возможность дублирования виджетов. У меня разные виджеты для разных типов страниц. Но при добавлении новосозданного виджета в один из них, нет возможности добавить в другие. Как это реализовать? Спасибо

Это можно реализовать кастомными сайдбарами. Мы совсем недавно писали в одном из уроков, как это сделать. Вы можете задавать в отдельных страницах уникальные произвольные поля, и для этих страниц будут подгружаться отдельные сайдбары, а уже в них вы можете вставить в код любой виджет.

Вводимый текст вводится в одну строчку. Что сделать чтобы текст вводился многострочно, чтобы поле с текстом было определённой ширины?

Для этого можно задать несколько правил оформления в таблице стилей style.css

Подскажите, пожалуйста, после какого кода файла "functions.php" вставить код виджета? Или после какого кода файла "functions.php" вставлять "include('путь_к_файлу/ваш_файл.php');"? У меня никаких результатов. Файл виджета - Ваш исходник, доступный для скачивания в Вашем уроке, "simple-widget.php".

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

Сделал. Виджета не появляется. Что сделать чтобы виджет появился?

Всё, после добавления как обычный плагин - получилось. Но хотелось бы конечно чтобы одним из первых 2 способов сработало.

а что сделать чтобы вызвать файл виджета в functions.php?

Нужно вписать в этот файл команду подключения нужного виджета, типа add_action('wp_dashboard_setup', 'my_custom_dashboard_widgets');

Детальнее смотрите в уроке.

извините а в каком именно уроке? Не нашёл.
что писать вместо 'wp_dashboard_setup' и 'my_custom_dashboard_widgets'
вместо "wp_dashboard" - файла виджета?

"имя файла виджета" хотел сказать
ответьте, пожалуйста, только пороще, у меня не такой хороший уровень владения языками, как у Вас.

посмотрите внимательно начало этого урока и первый скрипт с кодом. Там в комментариях на англ. написано, что делает каждая строчка. Отдельно функция для загрузки, для регистрации виджета и т.д.

Блин! Из написанного у Вас следует что код, указанный в "Базовая структура" нужно сохранить в отдельный php-файл, а потом вызвать этот файл из function.php Вот я и интересуюсь как вызвать этот php-файл из function.php Ваш крайний коммент ответил на вопрос как быть когда код внутри function.php А как быть когда код в отдельном файле php? Что конкретно сделать чтобы этот отдельный файл php подключить в function.php?

Пропишите в functions.php

include('путь_к_файлу/ваш_файл.php');

вставил "nclude('путь_к_файлу/ваш_файл.php');" в "function sidebar_ads_125()" в файле "functions.php". Файл - Ваш "simple-widget" без изменений. Результата нет. Как быть?

Спасибо, дружище! Кстати, Ваш инфоблог - супер! Лучше инфы по виджетам я так и не нашёл. Думаю, Вы и по другим темам - вне конкуренции!)

и куда все эти коды вставлять и в каком порядке?

в таком порядке, в какому указано в первом блоке кода :)
А куда -- в function.php темы или создать и подключить отдельный файл (и незабыть подключить его в function.php)

Все верно сказано! )

Дмитрий

Супер статья! побольше бы таких. есть вопрос, как создавать страницу результатов обработки формы виджета (если виджет - это поисковая строка например...)