Як створити спеціальний віджет WordPress

Ви хочете створити власні віджети в WordPress? Віджети дозволяють додавати неконтентні елементи на бічну панель або будь-яку готову для віджетів область вашого веб-сайту.


Ви можете використовувати віджети для додавання банерів, реклами, форм для реєстрації на розсилку та інших елементів на свій веб-сайт.

У цій статті ми покажемо вам, як створити користувальницький віджет WordPress, крок за кроком.

Створення користувальницького віджета WordPress

Примітка: Цей підручник призначений для самих користувачів WordPress, які навчаються розробці та кодуванню WordPress.

Що таке віджет WordPress?

Віджети WordPress містять фрагменти коду, які ви можете додати до бічних панелей веб-сайту або областей, готових до віджетів.

Розгляньте їх як модулі, які можна використовувати для додавання різних елементів, використовуючи простий інтерфейс перетягування.

За замовчуванням WordPress оснащений стандартним набором віджетів, які можна використовувати з будь-якою темою WordPress. Дивіться посібник для початківців щодо того, як додавати та використовувати віджети в WordPress.

Додавання віджетів у WordPress

WordPress також дозволяє розробникам створювати власні власні віджети.

Багато преміальних тем WordPress та плагінів оснащені власними віджетами, які ви можете додати до бічних панелей.

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

Сказавши це, давайте подивимося, як легко створити власні власні віджети в WordPress.

Відеоурок

Підписуйтесь на WPBeginner

Якщо ви віддаєте перевагу письмовим інструкціям, тоді продовжуйте читати.

Створення користувальницького віджета в WordPress

Якщо ви вивчаєте кодування WordPress, вам знадобиться місцеве середовище розробки. Ви можете встановити WordPress на комп’ютер (Mac чи Windows).

Існує кілька способів додати власний код віджета в WordPress.

В ідеалі ви можете створити плагін, орієнтований на сайт, і вставте туди свій віджет-код.

Ви також можете вставити код у файл function.php теми. Однак він буде доступний лише тоді, коли ця конкретна тема активна.

Ще один інструмент, який ви можете використовувати – це плагін Code Snippets, який дозволяє легко додавати спеціальний код на ваш веб-сайт WordPress.

У цьому підручнику ми створимо простий віджет, який просто вітає відвідувачів. Мета тут – ознайомитись із класом віджетів WordPress.

Давайте розпочнемо.

Створення базового віджету WordPress

WordPress поставляється із вбудованим класом WordPress Widget. Кожен новий віджет WordPress розширює клас віджетів WordPress.

У посібнику розробника WordPress є 18 методів, які можна використовувати з класом WP Widget.

Однак заради цього підручника ми зупинимось на наступних методах.

  • __construct (): це частина, де ми створюємо ідентифікатор віджета, назву та опис.
  • віджет. Тут ми визначаємо вихід, створений віджетом.
  • Форма: у цій частині коду ми створюємо форму з параметрами віджетів для бекенда.
  • оновлення. Це частина, в якій ми зберігаємо параметри віджетів у базі даних.

Давайте вивчимо наступний код, де ми використовували ці чотири методи всередині класу WP_Widget.

// Створення віджета
клас wpb_widget розширює WP_Widget {

// Конструктивна частина
функція __construct () {

}

// Створення фронтального віджета
віджет загальнодоступних функцій ($ args, $ instance) {

}

// Створення віджету Backend
форма публічної функції ($ екземпляр) {

}

// Оновлення віджета, що замінює старі екземпляри новими
оновлення публічної функції ($ new_instance, $ old_instance) {

}

// Клас wpb_widget закінчується тут
}

Останній фрагмент коду – це те, де ми будемо фактично зареєструвати віджет і завантажимо його у WordPress.

функція wpb_load_widget () {
register_widget (‘wpb_widget’);
}
добавлення (‘widgets_init’, ‘wpb_load_widget’);

Тепер давайте зробимо все це разом, щоб створити базовий віджет WordPress.

Ви можете скопіювати та вставити наступний код у свій спеціальний плагін або файл function.php теми.

// Створення віджета
клас wpb_widget розширює WP_Widget {

функція __construct () {
батьківська :: __ конструкція (

// Базовий ідентифікатор вашого віджета
‘wpb_widget’,

// Ім’я віджета з’явиться в інтерфейсі користувача
__ (‘WPBeginner Widget’, ‘wpb_widget_domain’),

// Опис віджета
array (‘опис’ => __ (“Зразок віджета на основі посібника WPBeginner”, “wpb_widget_domain”),)
);
}

// Створення фронтального віджета

віджет загальнодоступних функцій ($ args, $ instance) {
$ title = apply_filters (‘widget_title’, $ instance [‘title’]);

// до і після аргументів віджетів визначаються теми
echo $ args [‘before_widget’];
if (! порожній ($ title))
echo $ args [‘before_title’]. $ назва. $ args [‘after_title’];

// Тут ви запускаєте код і показуєте вихід
echo __ (‘Привіт, світ!’, ‘wpb_widget_domain’);
echo $ args [‘after_widget’];
}

// Віджет Backend
форма публічної функції ($ екземпляр) {
if (isset ($ instance [‘title’])) {
$ title = $ instance [‘title’];
}
ще {
$ title = __ (‘Новий заголовок’, ‘wpb_widget_domain’);
}
// Форма адміністратора віджетів
?>

<?php _e (‘Назва:’); ?>

<?php
}

// Оновлення віджета, що замінює старі екземпляри новими
оновлення публічної функції ($ new_instance, $ old_instance) {
$ instance = array ();
$ instance [‘title’] = (! порожній ($ new_instance [‘title’]))? strip_tags ($ new_instance [‘title’]): ”;
повернути $ екземпляр;
}

// Клас wpb_widget закінчується тут
}

// Зареєструйте та завантажте віджет
функція wpb_load_widget () {
register_widget (‘wpb_widget’);
}
добавлення (‘widgets_init’, ‘wpb_load_widget’);

Після додавання коду, на який потрібно перейти Зовнішній вигляд »Віджети сторінки. Ви помітите новий віджет WPBeginner у списку доступних віджетів. Потрібно перетягнути цей віджет на бічну панель.

Демо-віджет

Цей віджет має заповнити лише одне поле форми, ви можете додати текст та натиснути кнопку Зберегти, щоб зберегти зміни.

Тепер ви можете відвідати ваш веб-сайт, щоб побачити його в дії.

Попередній перегляд користувальницького віджета

Тепер вивчимо код ще раз.

Спочатку ми зареєстрували “wpb_widget” і завантажили наш спеціальний віджет. Після цього ми визначили, що робить цей віджет, і як відобразити віджет заднім числом.

Нарешті, ми визначили, як обробити зміни, внесені у віджет.

Зараз є кілька запитань, які ви, можливо, захочете запитати. Наприклад, яка мета wpb_text_domain?

WordPress використовує gettext для обробки перекладу та локалізації. Цей wpb_text_domain та __e вказує gettext зробити рядок доступним для перекладу. Подивіться, як ви можете знайти готові до перекладу теми WordPress.

Якщо ви створюєте спеціальний віджет для своєї теми, ви можете замінити wpb_text_domain текстовим доменом вашої теми..

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

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map