Построение простого виджета для WordPress

Создание виджета WordPress очень похоже на построение плагина, но является более простым и явным процессом. Все, что нужно - один файл, в котором будет находиться весь код PHP (для плагина может потребоваться достаточно сложная файловая структура).

Для организации виджета требуется всего три основных функции:

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

 

Основная структура

Шаблон виджета очень прост. Скелет, на котором строится код, выглядит обычно следующим образом:

add_action( 'widgets_init', 'register_my_widget' );	// Загрузка виджета

function register_my_widget() {}			// Функция регистрации виджета

class My_Widget extends WP_Widget () {}			//Класс виджета (как пример)

function My_Widget() {}					// Установки виджета

function widget() {}					// Вывод виджета

function update() {}					// Обнновление виджета

function form() {}					// Форма для опций виджета

 

Шаг 1

Для начала нужно загрузить виджет с помощью функции “widgets_init“. Это крюк действий и подробное описание вы можете найти в кодексе WordPress.

add_action( 'widgets_init', 'register_my_widget' );

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

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' => __('Виджет, который выводит имя автора ', '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

Функция widget()относится к выводу нашего виджета. Мы будем передавать в нее пару аргументов. Первый аргумент будет получен из темы, в нем передается название и другие параметры. А второй аргумент - экземпляр нашего класса.

function widget( $args, $instance )

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

Затем мы устанавливаем название и другие значения для нашего виджета, которые можно поменять в меню виджета. Также используются специальные переменные $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;

// Выводим название виджета
if ( $title )
	echo $before_title . $title . $after_title;

// Выводим имя
if ( $name )
	printf( '<p>' . __('Привет! Меня зовут %1$s.', 'example') . '</p>', $name );

if ( $show_info )
	printf( $name );

echo $after_widget;

 

Шаг 4

Теперь функция 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;
}

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

 

Шаг 5

Теперь создадим шаблон формы, которая будет служить для ввода значений. Здесь пользователь будет определять установки и значения. Функция form() будет содержать код для создания полей ввода, чекбоксов и так далее.

Прежде, чем приступить к созданию полей ввода информации, нужно определить значения по умолчанию.

//Устанавливаем параметры по умолчанию.
$defaults = array( 'title' => __('Пример', 'example'), 'name' => __('Иван Лбов', 'example'), 'show_info' => true );
$instance = wp_parse_args( (array) $instance, $defaults ); ?>

Теперь создаем поля ввода текста.

// Название виджета
<p>
	<label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e('Название:', '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>

//Поле ввода текста
<p>
	<label for="<?php echo $this->get_field_id( 'name' ); ?>"><?php _e('Ваше имя:', '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>

// Чекбокс
<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('Сделать информацию публичной?', 'example'); ?></label>
</p>

 

Заключение

Вот и весь код простого виджета, который выводит имя автора блога. Сохраните код в PHP файле, который надо разместить в папке темы. Затем надо вызвать его в файле functions.php, после чего виджет будет доступен для использования через панель администратора (раздел для виджетов).

Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/BE6yVjmCzcY/lessons.php

Читать комменты и комментировать

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



Защитный код
Обновить

Построение простого виджета для WordPress | | 2012-06-19 11:58:02 | | Статьи Web-мастеру | | Создание виджета WordPress очень похоже на построение плагина, но является более простым и явным процессом. Все, что нужно - один файл, в котором будет находиться весь код PHP (для плагина может | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: