Підручник із теми WordPress для початківців – Частина 9: Області меню та віджетів
Цей урок розповідає про те, як додати дві основні функції WordPress до нашої теми; меню та області віджетів. Ми дізнаємося, як зареєструвати розташування для головного навігаційного меню сайту та вивести меню в наші шаблони, а також дозволити додавати віджети на нашій бічній панелі та нижньому колонтитулі.
Любителі з вас могли помітити, що ані «Меню», ані «Віджети» недоступні з меню «Вигляд» на панелі адміністратора. Це тому, що наша тема ще не підтримує їх. Ми виправимо це в цьому уроці, починаючи з меню .
Меню WordPress
Додавання меню у вашу тему складається з двох частин. Спочатку вам потрібно визначити одне або кілька місць меню у вашому файлі functions.php. Прикладом є головне меню, яке буде в заголовку всіх сторінок. Друга частина полягає в додаванні коду в те місце, яке ви хочете вивести в меню. Наприклад, header.phpу тому місці, де ви хочете розмістити головне меню.
У цьому підручнику ми додамо одне розташування меню для основної навігації сайту та розмістимо його вихідні дані в нашому header.php. Почнемо з реєстрації розташування в functions.php, що виконується за допомогою функції register_nav_menu :
add_action('init', 'wptutorial_register_menu');
function wptutorial_register_menu() {
register_nav_menu('main-nav', __('Main Navigation', 'wptutorial'));
}Нам потрібно підключитися до гачка init, який WordPress вирішив як хороший «контрольний пункт» для реєстрації розташування меню. Усередині нашої функції ми викликаємо register_nav_menu(), яка приймає мінімум два параметри; дескриптор меню, який є унікальним слагом, який ви використовуватимете як ідентифікатор під час візуалізації меню, і видима назва меню, яка з’являється на панелі адміністратора. Зверніть увагу, що я загорнув ім’я всередину __(), щоб зробити його перекладним, як ми дізналися в попередньому кроці.
Якщо ви оновите панель адміністратора, ви побачите новий пункт підменю в розділі «Вигляд»; «Меню». Вітаємо, ваша тема тепер підтримує створення меню!
Якщо ви не знайомі зі створенням і адмініструванням меню в WordPress, це хороший посібник для вас.
Створіть нове меню в «Вигляд > Меню» – воно може містити все, що завгодно, я щойно додав фіктивні публікації, які створив у своєму WordPress.
Після того, як ви збережете своє перше меню, під областю редагування меню з’явиться новий розділ під назвою «Параметри меню», який дозволить вам вибрати місце для цього меню. У ньому має бути вказано одне доступне місце, яке ми створили; «Головна навігація».
Поставте галочку в «Головна навігація» та натисніть «Зберегти». Тепер ваше щойно створене меню пов’язане з розташуванням і буде автоматично відображатися там, де ви додасте код для виведення цього розташування меню. Давайте зробимо це зараз.
Відкрийте header.phpта скрізь, де ви хочете, щоб вихід меню був, додайте виклик до wp_nav_menu(). Ця функція приймає цілу купу аргументів у масиві, щоб справді налаштувати вивід меню. Найважливіше, що нам потрібен параметр, який вкаже йому отримати розташування «Основна навігація». Для цього ми додаємо аргумент ‘ theme_location‘ і встановлюємо його в дескриптор нашого меню; ‘ main-nav‘.
Я додав вихідні дані меню одразу після початку <body>тегу, але якщо ви доповнили свої шаблони за допомогою HTML, вирішуйте самі, де ви бажаєте розмістити меню.
Оновіть інтерфейс, і ви побачите меню, яке ви створили в адміністраторі, у вигляді невпорядкованого списку на початку шаблону.
Як завжди, я заохочую вас трохи глибше заглибитися в параметри wp_nav_menuв документації WordPress Codex і пограти з тим, яким ви хочете отримати результат. Наприклад: ви можете не виводити його у списку HTML, ви можете обмежити пункти меню лише певними рівнями (щоб запобігти підменю) тощо.
Якщо вас цікавить частина стилю; подивіться на класи, які WordPress автоматично додає до кожного пункту меню. Ви зможете легко додавати стилі для активного пункту меню, елементів, які мають дочірні елементи, батьківського елемента для активного дочірнього елемента тощо.
Примітка. Будь-який користувач теми завжди може створити кілька меню та вибрати їх відображення за межами зареєстрованих місць теми за допомогою віджетів. Однак для цього ваша тема має визначити деякі області віджетів! Давайте зробимо це далі.
Області віджетів
Області віджетів працюють подібно до роботи меню. Ви реєструєте розташування (для віджетів ви визначаєте область, де користувач теми може розміщувати віджети), і де б ви не хотіли, щоб розташування/область з’явилася у ваших шаблонах, ви додаєте трохи коду, який посилається на ідентифікатор маркера, який ви надали у своєму код реєстрації.
Давайте визначимо область віджетів на бічній панелі та одну в нижньому колонтитулі. Теми зазвичай містять кілька областей віджетів у нижньому колонтитулі, щоб гарно розділити їх на стовпці, але в цьому посібнику ми просто додамо одну до нижнього колонтитула.
Області віджетів називаються «бічними панелями» в коді WordPress, але це не виключно для старої правої бічної панелі на веб-сайтах. Схоже, якась застаріла назва просто залишилася з часів, коли веб-сайти зазвичай мали лише область віджетів на бічній панелі. Не думайте, що «бічні панелі» стосуються лише фактичних бічних панелей.
Зареєструйте області віджетів
Ми починаємо з реєстрації двох областей віджетів у нашому functions.php. Ми використовуємо цю функцію register_sidebarдля реєстрації наших бічних панелей, підключених до widgets_initгачка, який WordPress визначив як найкращий гачок для реєстрації областей віджетів (і користувацьких віджетів).
Функція register_sidebar()приймає досить багато аргументів, як мінімум вам потрібні аргументи «id» і «name». Доступні параметри, які визначають, як ви бажаєте виводити оболонки HTML віджетів.
Оновіть панель адміністратора, і тепер ви побачите пункт меню «Віджети» в розділі «Вигляд». На панелі адміністратора «Віджети» ви можете побачити дві доступні області віджетів у правій області; яка є нашою «Областю віджетів бічної панелі» та «Областю віджетів нижнього колонтитула».
Розмістіть довільний віджет на нашій бічній панелі або в області віджетів нижнього колонтитула, щоб ви могли побачити його в дії.
Виведення області віджета в шаблоні
Остання частина — виведення областей віджетів у наші шаблони. Для цього ми використовуємо функцію dynamic_sidebar()та надаємо маркер як параметр. Відкрийте sidebar.phpта додайте в <aside>теги наступне:
Зверніть увагу, що я загорнув його в тег невпорядкованого списку (<ul>). Це тому, що за умовчанням dynamic_sidebarвиводяться всі віджети, загорнуті в <li>елементи. Я заохочую вас пограти з вихідними параметрами, якщо вам не подобається, що віджети є списком.
Що стосується нижнього колонтитула, ми додаємо його на самому початку footer.php, загорнувши в <footer>тег (якщо бажаєте).
Ось і все для областей меню та віджетів. Тепер у вашій темі користувач може створювати нове меню та використовувати віджет для його відображення на бічній панелі чи нижньому колонтитулі. У наступному уроці цієї серії посібників ми створимо більше шаблонів для нашої теми.