Головні новини
Ви тут: Головна / Двигунці / Wordpress / Як створити свій віджет в WordPress

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



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

  • 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. widget_init

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

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



Автор Володимир Гривінський



Залишити коментар

Ваша електронна адреса не буде опублікована.

Вгору
UA TOP Bloggers