Вступ
Наша взаимовыгодная связь https://banwar.org/
Чи знаєте ви, що ви можете створити віджети для WordPress своїми руками? Незважаючи на те, що існує безліч інших віджетів, які йдуть разом з різними темами і плагінами, WordPress надає можливість створити віджет вручну для всіх своїх користувачів. В цьому WordPress керівництві ви дізнаєтеся, як створити віджети для WordPress і додати їх на ваш сайт. Якщо вас це зацікавило, то ми можемо вас порадувати - єдиними інгредієнтами, які вам знадобляться, є лише базові знання про WordPress і PHP. Отже, без зайвих слів, давайте приступати.
Що вам знадобиться
Перед тим, як ви почнете це керівництво, вам знадобиться наступне:
- Доступ до панелі управління WordPress
- Будь-який текстовий редактор
Трохи про WordPress
Віджети WordPress призначені для більш легкого процесу додавання різних блоків на ваш сайт за допомогою інтерфейсу перетягування. WordPress вже має стандартні вбудовані віджети. Ці віджети дають вам деякі базові інструменти та сумісні з будь-якою темою WordPress. Але іноді, вам може знадобитися додати нові можливості і блоки для сайту. В такому випадку, кращим рішенням стане пошук потрібного плагіна, який має потрібний вам функціонал. Хоча ви і можете знайти плагіни для більшості стандартних завдань, іноді важко знайти потрібний, який задовольнить ваші потреби. Це саме той випадок, коли вам може знадобитися створити віджети для WordPress самому. Ця можливість дає користувачеві повний контроль над своїм сайтом і його функціоналом.
Перед початком керівництва
Перед тим, як створити віджети для WordPress, вам необхідно подумати про кілька речей. Перше, ви можете створити віджет в якості призначеного для користувача плагіна. Це дозволить використовувати його на будь-якому сайті, який використовує цей плагін. Або, ви можете просто додати віджет в файл functions.php або певну тему, що зробить його сумісним лише для цієї теми. Друге, у вас є можливість додати віджет на запущений і працює сайт або в локальну середу. Відповідно до рекомендацій по розробці, ми радимо для початку додати плагін в локальну середу (ознайомтеся з нашим керівництвом про запуску WordPress на Docker ). Після того, як ви переконаєтеся у відсутності помилок і його правильній роботі, ви зможете легко перенести його на ваш сайт .
WordPress дозволяє вам створювати свої віджети, надаючи вам доступ до Widgets API . Щоб створити віджет, ви повинні використовувати стандартні класи WP_Widget з API. Ці базові класи пропонують більше 20 функцій, які ви можете вільно використовувати і комбінувати. З усіх цих функцій, 4 є мінімальною вимогою для роботи будь-якого віджета. Ось список цих функцій:
- __construct () - функція конструктора
- widget () - містить висновок віджета
- form () - визначає налаштування віджета в панелі управління WordPress
- update () - оновлює налаштування віджета
Звичайно, існує і безліч інших методів, які надають додатковий функціонал. Щоб дізнатися більше про класи WP_Widget, відвідайте дану сторінку .
ВАЖЛИВО! Ми настійно рекомендуємо створити повну резервну копію вашого сайту, перед початком даного керівництва. На додаток, ви можете використовувати дочірню тему WordPress .
Тепер, коли ми склали концепт нашої задачі, давайте приступимо до її реалізації. Для цього уроку ми створимо простий користувальницький віджет Привіт світ, щоб ви могли дізнатися про ази створення віджета в WordPress. Звичайно, ви можете перейти до створення більш складних віджетів на свій розсуд.
Ще один нюанс, ми пише цей код у файлі functions.php поточної теми, але ви можете робити це в будь-якому призначеному для користувача плагін.
Тепер відкрийте будь-який текстовий редактор на вашому комп'ютері і створіть новий клас, який розширить базовий клас WP_Widget, ось так:
class hstngr_widget extends WP_Widget {// Вставляйте функції сюди}Тепер ми почнемо додавання 4 раніше згаданих функцій, одну за одною. Першою в списку йде метод конструктора, яку ми використовуємо для вказівки ID, назви віджета і опису:
function __construct () {parent :: __ construct (// widget ID 'hstngr_widget', // widget name __ ( 'Тестовий Віджет Hostinger', 'hstngr_widget_domain'), // widget description array ( 'description' => __ ( 'Як створити віджети для WordPress ',' hstngr_widget_domain '),)); }Далі ми йдемо до зовнішнього вигляду віджету, тобто як буде виглядати фронт-енд віджета. Це буде зроблено за допомогою функції widget ():
public function widget ($ args, $ instance) {$ title = apply_filters ( 'widget_title', $ instance [ 'title']); echo $ args [ 'before_widget']; // if title is present if (! Empty ($ title)) echo $ args [ 'before_title']. $ Title. $ Args [ 'after_title']; // output echo __ ( 'Привіт світ, від Hostinger.ru', 'hstngr_widget_domain'); echo $ args [ 'after_widget']; }Тут ми налаштували висновок віджета так, щоб він відобразив 'Привіт світ, від Hostinger.ru', і назва віджета зазначеного користувачем.
Тепер нам необхідно написати бек-енд міні-програми з допомогою методу form ():
public function form ($ instance) {if (isset ($ instance [ 'title'])) $ title = $ instance [ 'title']; else $ title = __ ( 'Стандартний Тема', 'hstngr_widget_domain'); ?> <P> <label for = "<? Php echo $ this-> get_field_id ( 'title');?>"> <? Php _e ( 'Title:'); ?> </ Label> <input class = "widefat" id = "<? Php echo $ this-> get_field_id ( 'title');?>" Name = "<? Php echo $ this-> get_field_name ( 'title' );?> "type =" text "value =" <? php echo esc_attr ($ title);?> "/> </ p> <? php}Тут ви можете побачити як був налаштований призначений для користувача віджет. Якщо користувач надав заголовок, то тоді він буде доданий в створену HTML форму. В іншому випадку, буде додано назву Стандартний Тема в якості заголовка. Цей код відповідає за те, як відображається віджет в панелі управління WordPress.
І нарешті останнє, але не за значенням, ми додамо функцію оновлення, щоб оновлювати віджет при кожній зміні його налаштувань.
public function update ($ new_instance, $ old_instance) {$ instance = array (); $ Instance [ 'title'] = (! Empty ($ new_instance [ 'title']))? strip_tags ($ new_instance [ 'title']): ''; return $ instance; }Цей код приймає поточний заголовок новоствореного екземпляра, видаляє будь-які теги HTML / PHP, передає заголовок примірнику і повертає його.
Залишилася ще одна річ, яку вам необхідно зробити, вам потрібно використовувати додаткову функцію, щоб зареєструвати віджет в WordPress:
function hstngr_register_widget () {register_widget ( 'hstngr_widget'); } Add_action ( 'widgets_init', 'hstngr_register_widget');Зверніть увагу, що цей код повинен бути поміщений поза функцією hstngr_widget.
Ми визначили нову функцію під назвою hstngr_register_widget (), яка реєструє наш віджет за допомогою ID віджета, зазначеного в функції __construct (). Потім ми зв'язали цю функцію за допомогою widgets_init, яка завантажує цей віджет в WordPress через вбудований метод add_action (). У фінальному варіанті ваш WordPress віджет повинен виглядати приблизно ось так:
function hstngr_register_widget () {register_widget ( 'hstngr_widget'); } Add_action ( 'widgets_init', 'hstngr_register_widget'); class hstngr_widget extends WP_Widget {function __construct () {parent :: __ construct (// widget ID 'hstngr_widget', // widget name __ ( 'Тестовий Віджет Hostinger', 'hstngr_widget_domain'), // widget description array ( 'description' = > __ ( 'Як створити віджети для WordPress', 'hstngr_widget_domain'),)); } Public function widget ($ args, $ instance) {$ title = apply_filters ( 'widget_title', $ instance [ 'title']); echo $ args [ 'before_widget']; // if title is present if (! Empty ($ title)) echo $ args [ 'before_title']. $ Title. $ Args [ 'after_title']; // output echo __ ( 'Привіт світ, від Hostinger.ru', 'hstngr_widget_domain'); echo $ args [ 'after_widget']; } Public function form ($ instance) {if (isset ($ instance [ 'title'])) $ title = $ instance [ 'title']; else $ title = __ ( 'Стандартний Тема', 'hstngr_widget_domain'); ?> <P> <label for = "<? Php echo $ this-> get_field_id ( 'title');?>"> <? Php _e ( 'Title:'); ?> </ Label> <input class = "widefat" id = "<? Php echo $ this-> get_field_id ( 'title');?>" Name = "<? Php echo $ this-> get_field_name ( 'title' );?> "type =" text "value =" <? php echo esc_attr ($ title);?> "/> </ p> <? php} public function update ($ new_instance, $ old_instance) {$ instance = array (); $ Instance [ 'title'] = (! Empty ($ new_instance [ 'title']))? strip_tags ($ new_instance [ 'title']): ''; return $ instance; }}Ви можете використовувати Файловий Менеджер, FTP-клієнт або Редактор WordPress для додавання цього коду в файл functions.php вашої теми. Додайте код в файл function.php активної теми і натисніть Оновити файл для збереження змін.
Тепер зайдіть в панель управління WordPress і перейдіть у вкладку Зовнішній вигляд → Віджет. Далі ви повинні знайти віджет під назвою Тестовий Віджет Hostinger в списку віджетів.
Перетягніть віджет в область для віджетів в правій частині сторінки. Тепер ви зможете виставити заголовок для віджета. Збережіть його і відвідайте вашу сторінку. Ви побачите ваш віджет з обраним заголовком і текстом Привіт світ, від Hostinger.ru всередині.
Вітаємо, ви успішно дізналися, як створити віджети для WordPress. Тепер ви можете подивитися як виглядає ваш віджет.
висновок
Створити віджети для WordPress - напевно це здавалося вам дуже важким завданням, однак, це можливо для кожної людини з базовими знаннями в HTML і PHP. У цьому керівництві ви дізналися, як створити віджети для WordPress за допомогою нашої короткої інструкції. Тепер ви можете почати створення ще більш функціональних віджетів. Якщо вам сподобалося наше керівництво, то відвідайте інші WordPress керівництва .
Gt; <P> <label for = "<?Php echo $ this-> get_field_id ( 'title');?
Gt;"> <?
Php _e ( 'Title:'); ?
Gt; </ Label> <input class = "widefat" id = "<?
Php echo $ this-> get_field_id ( 'title');?
Gt;" Name = "<?
Php echo $ this-> get_field_name ( 'title' );?
Gt; "type =" text "value =" <?
Php echo esc_attr ($ title);?
Наша взаимовыгодная связь https://banwar.org/. Запустив новый сайт, "Пари Матч" обещает своим клиентам незабываемый опыт и возможность выиграть крупные суммы.
