Більше результатів...

Загальні селектори
Тільки точні збіги
Шукати у заголовках
Шукати у контенті
Вибір типів постів
Фільтрувати за категоріями
FAQ
Hostenko
Натхнення
Відео уроки
Новини
Плагіни
теми
Уроки
Хакі

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

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

| Завантажити вихідні |

inet.ws - Powerful VPS Hosting в США, Canada, UK та DE!

Базова структура

Базова схема нашого віджету дуже проста, є корисні функції, які вам потрібно знати. Костяком структури нашого віджету буде щось на кшталт цього:

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
inet.ws - Powerful VPS Hosting в США, Canada, UK та DE!
Олексій Шевченко
редактор wpcafe
Вивчає сайтобудування з 2008 року. Практикуючий вебмайстер, який спеціалізується на створенні сайтів на WordPress. Задати питання Олексію можна на https://profiles.wordpress.org/wpthemeus/

Коментарі до запису: 32

Дмитро:

Супер стаття! більше таких. є питання, як створювати сторінку результатів обробки форми віджету (якщо віджет — це пошуковий рядок, наприклад…)

Веди:

і куди всі ці коди вставляти та в якому порядку?

Nik Antal:

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

WordPresso:

Все правильно сказано! )

Миха:

а що зробити, щоб викликати файл віджету в functions.php?

WordPresso:

Потрібно вписати в цей файл команду підключення потрібного віджету типу add_action('wp_dashboard_setup', 'my_custom_dashboard_widgets');

Детальніше дивіться в уроці.

Миха:

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

Миха:

«ім'я файлу віджету» хотів сказати
дайте відповідь, будь ласка, тільки краще, у мене не такий гарний рівень володіння мовами, як у Вас.

WordPresso:

подивіться уважно початок цього уроку та перший скрипт з кодом. Там у коментарях на англ. написано, що робить кожен рядок. Окремо функція для завантаження, реєстрації віджету і т.д.

Миха:

Млинець! З написаного у Вас випливає що код, вказаний у «Базовій структурі» потрібно зберегти в окремий php-файл, а потім викликати цей файл з function.php Ось я і цікавлюсь як викликати цей php-файл з function.php Ваш крайній комент відповів на питання як бути коли код усередині function.php А як бути коли код в окремому файлі php? Що конкретно зробити, щоб цей окремий файл php підключити до function.php?

WordPresso:

Пропишіть у functions.php

include('шлях_до_файлу/ваш_файл.php');

Миха:

Дякую, друже! До речі, Ваш інфоблог – супер! Краще інформації по віджетах я не знайшов. Думаю, Ви і з інших тем — поза конкуренцією!)

Миха:

вставив «nclude('шлях_до_файлу/ваш_файл.php');» у "function sidebar_ads_125()" у файлі "functions.php". Файл - Ваш "simple-widget" без змін. Результату нема. Як бути?

Миха:

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

WordPresso:

Просто скачайте цей zip архів та додайте його як звичайний плагін через Консоль. Навіщо все ускладнювати, якщо у вас не виходить через include.

Миха:

Зробив. Віджет не з'являється. Що зробити, щоб віджет з'явився?

Миха:

Все, після додавання як звичайний плагін - вийшло. Але хотілося б звичайно щоб одним із перших 2 способів спрацювало.

Миха:

Текст вводиться в один рядок. Що зробити, щоб текст вводився багаторядково, щоб поле з текстом було певної ширини?

WordPresso:

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

Юрій Луковий:

Здравствуйте.
Підкажіть будь ласка, як зробити можливість дублювання віджетів. У мене різні віджети для різних типів сторінок. Але при додаванні новоствореного віджету до одного з них немає можливості додати до інших. Як це реалізувати? Дякую

WordPresso:

Це можна продати кастомними сайдбарами. Ми нещодавно писали в одному з уроків, як це зробити. Ви можете задавати в окремих сторінках унікальні довільні поля, і для цих сторінок підвантажуватимуться окремі сайдбари, а вже в них ви можете вставити в код будь-який віджет.

відлюдник:

А навіщо «id_base» у $control_ops?

Галина:

Гарна стаття, тільки ось щось селект не вдається вставити у формі відображається нормально, а отримує порожнє значення. Може є наочні приклади, як обробляти різні типи інпутів?

vvizard:

Навіщо викладати код, якщо ти не можеш його нормально скопіювати. Прохання наступного разу викладати картинку!

vvizard:

Вибачте не в те вікно.)

Ростислав:

Погано, не зрозуміло написано

VicFree:

Ростиславе! Що тут складного та незрозумілого?! Скача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');

про:

При підключенні відладчика йдуть помилки про застарілі функції, тому я замінив 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;
}

Дмитро:

Як додати плагін у віджети?

WPcafe:

Будь ласка уточніть питання.

Артур:

У мене просте завдання: хочу вивести WP Polls без віджетів, тому що мені потрібно додати умови, тому таким чином виводжу.

Все працює, коли в сайдбар додані якісь зареганные віджети, але біда: оскільки в зареєстрованих віджетах його немає, то коли він єдиний на сторінці, тоді взагалі sidebar не відображається.

Коротше, переміг і цю проблему, але виводиться не там візуально перед footer'ом. Виявляється справа у css-класі, який додається до body, коли є віджети.

Що можна зробити, щоб wordpress сприймав мій код як наявність віджету на сторінці та додавав до нього відповідний css-стиль, ніби я додав його стандартним чином у налаштуваннях? Чи можна йому id присвоїти?

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

PS У вас, як і раніше, не відображаються коментарі на сайті, тільки їх число.

Додати коментар або відгук