Як створити свій віджет у WordPress

Створювати віджет WordPress - Це приблизно, як створювати плагін, але набагато простіше і зрозуміліше. Все, що вам потрібно, це один файл з усім PHP кодом, який писати набагато простіше, ніж плагін, який має кілька файлів. Є три основні функції віджету: це віджет, оновлення и форму.

• 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. Це зачіпка до дію, про яку ви можете знайти більше інформації в Кодекс WordPress.

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()

Перша функція відноситься до відображення нашого віджету. Ми передамо кілька аргументів у нашу функцію. Ми передаватимемо аргументи з теми, це можуть бути заголовок або якісь інші параметри. Тепер ми передаємо змінну екземпляряка пов'язана з класом нашої функції.

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()

Далі функція оновлення. Ця функція прийме налаштування користувача та збереже їх. Вона просто оновить налаштування відповідно до бажання користувача.

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()

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

Перед тим, як ми створимо ці поля для введення, потрібно визначитися, що показувати, коли користувач не вибирає нічого з віджету. Щоб зробити це, ми передаємо значення за замовчуванням для параметрів, наприклад, заголовок, опис і т.д.

//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/