Новости
- Відображення віджета: а) реєстрація області віджету
- Відображення віджета: б) висновок області віджету в шаблоні сайту
Віджети дозволяють додавати і розширювати функціональність сайту на движку WordPress. Їх можна використовувати для додавання різних меню, списків, простого тексту, програмного коду та багато чого іншого в потрібні області сайту. І ці області не обмежуються тільки бічними панелями (тобто сайдбарі). Багато сучасні теми для Вордпресс спроектовані так, що області віджетів доступні практично у всіх структурних місцях сайту: хедері, футере, сайдбарі, до, після і всередині контенту.
Ця стаття покликана допомогти початківцям користувачам Вордпресс розібратися з віджетами і навчитися створювати стільки віджетів, скільки буде необхідно. Якщо вам мало вбудованих в дефолтні теми Вордпресс віджетів (таких як Календар, Теги, Категорії і т.д.) і ви хочете мати більший вплив на відображення вашого сайту - ймовірно і вам ця стаття стане в нагоді.
Відображення віджета: а) реєстрація області віджету
Є два основні кроки для початку відображення нового віджету в WordPress. По-перше, потрібно зареєструвати нову область віджету в файлі functions.php шаблону, по-друге, потрібно викликати цю нову область нового віджету десь в потрібному файлі вашої теми.
Спочатку потрібно вирішити, де ви хочете бачити новий віджет і яке завдання він повинен вирішувати. Варіантів маса: це може бути віджет показу останніх 5 статей в футере, віджет рекламного банера в шапці сайту, віджет погоди, віджет останніх коментарів, пошук і т.д. і т.п.
Як приклад, ми створимо нову область віджету, включимо її відображення в шаблоні, а потім створимо новий екземпляр віджета під назвою «Віджет для реклами» і будемо показувати його в новій області в сайдбарі.
Щоб зареєструвати область віджета створіть у файлі functions.php вашої теми нову функцію з унікальним ім'ям. Ця функція буде викликати системну функцію Вордпресс register_sidebar.
Приклад коду:
function registraciya_oblasti_widgeta () {register_sidebar (array ( 'name' => 'Нова область віджетів', 'id' => 'mesto-dlya-reklami', 'description' => 'Опис: Це нова область для віджетів, в якій ми будемо потім показувати віджет з рекламою. ',' before_widget '=>' <aside id = "% 1 $ s" class = "widget% 2 $ s"> ',' after_widget '=>' </ aside> ',' before_title '=>' <h2 class = "widget-title"> ',' after_title '=>' </ h2> ',)); } Add_action ( 'widgets_init', 'registraciya_oblasti_widgeta');PS Ваша тема вже може містити функцію, яка викликає реєстрацію області, тому спочатку перевірте наявність такої функції викликає register_sidebar. Якщо вона існує, тоді реєстрацію нової області віджета можна зробити простим копіюванням / вставкою ділянки коду register_sidebar (....); і змінивши потім ім'я, опис і ID нової області. Зразок можете підглянути в дефолтной темі для WordPress Twenty Fifteen в файлі functions.php в функції twentyfifteen_widgets_init ().
Після того як ви додали нову область, можете перевірити її поява в адмінці сайту: перейдіть в Консоль - Зовнішній вигляд - Віджети і там має з'явитися новий блок «Нова область віджетів». 
Відображення віджета: б) висновок області віджету в шаблоні сайту
Тепер ми повинні підключити новостворену область віджетів в шаблоні. Без цього ми не зможемо її побачити на сайті (у фронтенді), навіть якщо і в адмінки її видно.
Аналізуємо поставлену задачу і вирішуємо, що найбільш підходящим місцем для майбутнього міні-програми з рекламою буде бічна колонка сайту - сайдбар. У нашій «піддослідної» темі Twenty Fifteen, сайдбар виводиться окремим файлом-шаблоном, а саме sidebar.php. Відкриваємо цей файл і додаємо область віджету в потрібне місце, тобто після підключення вже існуючої області віджетів з ідентифікатором «sidebar-1».
Приклад коду:
... <? Php if (is_active_sidebar ( 'sidebar-1')):?> <Div id = "widget-area" class = "widget-area" role = "complementary"> <? Php dynamic_sidebar ( 'sidebar- 1 '); ?> </ Div> <! - .widget-area -> <? Php endif; ?> <! - Далі йде підключення нашої нової області -> <? Php if (is_active_sidebar ( 'mesto-dlya-reklami')):?> <Div class = "widget-s-reklamoy"> <? Php dynamic_sidebar ( 'mesto-dlya-reklami'); ?> </ Div> <? Php endif; ?> ....У цьому прикладі коду ми використовуємо дві вбудовані функції WordPress: is_active_sidebar (яка перевіряє активна чи область віджетів і чи є в ній додані віджети) і dynamic_sidebar (яка виводить всі додані в область віджети). Умовою if перевіряємо активність області віджетів з ідентифікатором "mesto-dlya-reklami" і якщо умова повертає true, тобто область є і в ній є віджети, виводимо область в блоці div з класом widget-s-reklamoy.
Нічого складного!
Тепер можемо перевірити відображення віджетів в цій області віджетів, шляхом додавання в неї тестових віджетів (поки ми не створили новий цільової віджет для реклами). Для цього в адмінці перейдіть в Консоль - Зовнішній вигляд - Віджети і простим перетягуванням з лівої колонки «Доступні віджети» перемістіть віджет Текст в блок «Нова область віджетів» в правій колонці. Впишіть будь-який текст і натисніть Зберегти. Оновлення фронтенд сайту і в боковій колонці повинен з'явитися доданий текст.
Подібним чином ми можемо тепер створювати нові області віджетів в потрібних нам місцях сайту і додавати туди цільові віджети. Реєструєте область віджета і підключаєте її в потрібному місці і в потрібному шаблоні (наприклад, щоб відображати область в футере сайту - потрібно редагувати файл теми footer.php і так далі). Потім через Консоль «вкладаєте» в цю область необхідні віджети, щоб вони з'явилися на самому сайті.
У цьому розділі ми створимо новий екземпляр віджета, який будемо використовувати для показу рекламного банера в сайдбарі сайту. Після створення віджета він стане активним в лівій колонці «Доступні віджети» і його можна буде «вкладати» в будь-які наявні області віджетів на сайті.
Для створення нового екземпляра віджета потрібно виконати кілька кроків:
- Зареєструвати віджет
- Створити Клас для зберігання функцій віджета
- Написати функцію construct для конструювання віджета
- Написати функцію widget для виведення віджету під Front-end
- Написати функцію form для відображення форми в меню Зовнішній вигляд - Віджети
- Написати функцію update, щоб віджет можна було оновлювати з форми
Базова структура примірника віджета в WordPress виглядає так:
class Reklamniy_Widget extends WP_Widget {function __construct () {} function widget ($ args, $ instance) {} function form ($ instance) {} function update ($ new_instance, $ old_instance) {}} function registraciya_widgeta_function () {register_widget ( ' Reklamniy_Widget '); } Add_action ( 'widgets_init', 'registraciya_widgeta_function');Давайте більш детально розглянемо цей код на практичному прикладі (показ рекламного блоку 300х600 Google AdSense за допомогою віджета). Нижче представлений робочий код подібного міні-програми з коментарями.
<? Php / * Plugin Name: Рекламний віджет Description: Віджет для показу рекламного блоку 300x600 Google AdSense в боковій колонці сайту Version: 1.0 Author: SebWeo Author URI: https://sebweo.com * / / * Клас віджета. Цей клас обробляє все те, що повинно бути оброблено для віджета: настройки, форму, відображення в Front-end і оновлення налаштувань * / class Reklamniy_Widget extends WP_Widget {function __construct () {parent :: __ construct (/ * унікальний ID віджета * / ' sebweo_reklamniy_widget ', / * заголовок віджета - відображається в настройках в меню Віджети * / __ (' Reklamniy Blok ',' sebweo-loc-domen '), / * опції віджета, тут ми передаємо клас CSS, і опис для даного віджету * / array ( 'classname' => 'reklamniy-widget', 'description' => __ ( 'This widget displays the ads in the site sidebar', 'sebweo-loc-domen'))); } / * Функція для відображення віджета у фронтенді сайту * / function widget ($ args, $ instance) {extract ($ args); / * Заголовок * / $ title = apply_filters ( 'widget_title', $ instance [ 'title']); / * Унікальний код рекламодавця, в форматі ca-pub-xxxxxxxxxxxxxxxx * / $ data_ad_client = $ instance [ 'data_ad_client']; / * Обраний слот для рекламного коду * / $ data_ad_slot = $ instance [ 'data_ad_slot']; echo $ before_widget; if ($ title) {echo '<aside class = "widget reklamniy-widget">'. "\ n"; echo '<h4 class = "widget-title">'. $ title. '</ h4>'; } Else {echo '<aside class = "widget reklamniy-widget">'; } / * Нижче виводимо код рекламного оголошення * /?> <Div class = "google-ad-300x600"> <script async src = "// pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script > <! - Ads300x600 -> <ins class = "adsbygoogle" style = "display: inline-block; width: 300px; height: 600px" data-ad-client = "<? php echo $ data_ad_client;?>" data-ad-slot = "<? php echo $ data_ad_slot;?>"> </ ins> <script> (adsbygoogle = window.adsbygoogle || []). push ({}); </ script> </ div > <? php echo $ after_widget; } / * Функція відображає форму для вказівки налаштувань віджета в меню Віджети * / function form ($ instance) {/ * налаштування за замовчуванням * / $ defaults = array ( 'title' => __ ( 'Zagolovok', 'sebweo-loc- domen '),' data_ad_client '=>' ca-pub-xxxxxxxxxxxxxxxx ',' data_ad_slot '=>' 1234567890 '); $ Instance = wp_parse_args ((array) $ instance, $ defaults); / * Нижче йде html-розмітка форми * /?> <P> <label for = "<? Php echo $ this-> get_field_id ( 'title');?>"> <? Php _e ( 'Title:', ' sebweo-loc-domen '); ?> </ Label> <input class = "widefat" type = "text" id = "<? Php echo $ this-> get_field_id ( 'title');?>" Name = "<? Php echo $ this-> get_field_name ( 'title');?> "value =" <? php echo $ instance [ 'title'];?> "/> </ p> <p> <label for =" <? php echo $ this-> get_field_id ( 'data_ad_client');?> "> <? php _e ( 'Google ad-client number:', 'sebweo-loc-domen'); ?> </ Label> <input type = "text" id = "<? Php echo $ this-> get_field_id ( 'data_ad_client');?>" Name = "<? Php echo $ this-> get_field_name ( 'data_ad_client' );?> "value =" <? php echo esc_attr ($ instance [ 'data_ad_client']);?> "/> </ p> <p> <label for =" <? php echo $ this-> get_field_id ( 'data_ad_slot');?> "> <? php _e ( 'Google ad-slot number:', 'sebweo-loc-domen'); ?> </ Label> <input type = "text" id = "<? Php echo $ this-> get_field_id ( 'data_ad_slot');?>" Name = "<? Php echo $ this-> get_field_name ( 'data_ad_slot' );?> "value =" <? php echo esc_attr ($ instance [ 'data_ad_slot']);?> "/> </ p> <? php} / * функція для збереження змін в настройках віджету * / function update ( $ new_instance, $ old_instance) {$ instance = $ old_instance; $ Instance [ 'title'] = strip_tags ($ new_instance [ 'title']); $ Instance [ 'data_ad_client'] = strip_tags ($ new_instance [ 'data_ad_client']); $ Instance [ 'data_ad_slot'] = strip_tags ($ new_instance [ 'data_ad_slot']); return $ instance; }} / * Функція реєстрації нового примірника віджета * / function registraciya_widgeta_function () {register_widget ( 'Reklamniy_Widget'); } / * За допомогою хука widgets_init викликаємо функцію реєстрації віджета * / add_action ( 'widgets_init', 'registraciya_widgeta_function'); ?>Просто скопіюйте вище вказаний код і вставте його в текстовий файл ReklamniyWidget.php і потім завантажте його в папку плагінів сайту за адресою / wp-content / plugins /. Потім активуйте плагін в Консолі і почніть експериментувати з віджетом.
В налаштуваннях віджета зараз є 3 опції: Тема віджета, Унікальний номер рекламного клієнта Google AdSense, Унікальний номер слота для розміщення рекламного блоку. Дві останні опції ви можете дізнатися при створенні рекламного оголошення в сервісі Google AdSense.
Використовуючи даний код в якості прикладу, а також всі рекомендації з даного поста, ви можете створити стільки екземплярів віджетів, скільки потрібно, і використовувати віджети не тільки для реклами, але і для відображення іншого корисного контенту.
Lt;?Php if (is_active_sidebar ( 'sidebar-1')):?
Php dynamic_sidebar ( 'sidebar- 1 '); ?
Php endif; ?
Php if (is_active_sidebar ( 'mesto-dlya-reklami')):?
Php dynamic_sidebar ( 'mesto-dlya-reklami'); ?
Php endif; ?
Lt;?
Lt;/ h4>'; } Else {echo '<aside class = "widget reklamniy-widget">'; } / * Нижче виводимо код рекламного оголошення * /?
Php echo $ data_ad_client;?