Создаём произвольные меню

Створення меню в Wordrpess, а також сортування сторінок і категорій часто стає досить складною проблемою для початківців вебмайстрів. До Вашоъ уваги – невелика інструкція, в якому ми докладно розглянемо, як створювати довільні меню в WordPress. З їх допомогою ви зможете самостійно створювати меню будь-якої розгалудженості, додавати або видаляти пункти меню, змінювати їх назву та розташування.

В останніх версіях WordPress з’явилася вбудована функція, яка дозволяє створювати довільні меню, не вдаючись до використання плагінів. Ця функція доступна у всіх версіях WordPress, починаючи з версії 3.0.

Відразу хочу звернути вашу увагу на те, що підтримка довільних меню включена не у всіх шаблонах. У зв’язку з цим стаття буде складатися з двох частин:

• в першій частині статті ми розглянемо, як створювати пункти меню в WordPress через адміністративну панель, якщо довільні меню вже підключені в шаблоні; 
• у другій частині статті ми навчимося самостійно включати підтримку довільних меню в WordPress і налаштовувати меню через PHP-функцію wp_nav_menu.

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

Створення меню та пунктів довільного меню через адміністративну панель WordPress

Для створення меню переходимо в Адміністративну панель -> Дизайн -> Меню і дивимося, чи дозволені довільні меню у вашому шаблоні. Якщо ні, то можемо поки пропустити даний крок і перейти відразу до другої частини статті. Якщо ж меню вже підтримується, то у вас відкриється сторінка приблизно такого змісту: 

Для створення нового меню, вписуємо його назву в полі “Введіть заголовок меню” і тиснемо: “Створити меню”. 

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

Після створення меню нам потрібно вибрати його в блоці “Області теми”, який знаходиться в лівій колонці, після чого зберегти результат, натиснувши на кнопку “Зберегти”.

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

Після збереження результатів для додавання нових пунктів в меню досить відзначити потрібні категорії або сторінки і натиснути кнопку “Додати до меню”.

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

Також можна редагувати текст посилання, додавати атрибут Назва або видаляти пункт меню.

Крім сторінок і рубрик ви також можете додавати в довільне меню і звичайні посилання. Для цього пропишіть посилання в блоці “Довільні посилання” і натисніть кнопку “Додати до меню”.

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

Тепер давайте перейдемо до другої частини статті і навчимося включати підтримку довільних меню в WordPress і виводити їх в шаблоні за допомогою функції wp_nav_menu.

Включення підтримки довільних меню в WordPress

Насамперед нам потрібно зареєструвати використання довільних меню і самих меню. Для цього відкриваємо на редагування файл function.php вашої теми оформлення і додаємо наступний код:

register_nav_menus(array(
’top’ => ‘Верхнее меню’
));

 Де «top» – ідентифікатор меню, а «Верхнє меню» – назва місця розташування.

Якщо потрібно додати кілька меню, то перераховуємо їх через кому:

register_nav_menus(array(
‘top’ => ‘Верхнее меню’,
‘left’ => ‘Левое меню’
));

Після додавання даного коду підтримка довільних меню буде включена автоматично. Переконатися в цьому ви можете, перейшовши в Адміністративну панель -> “Зовнішній вигляд” ->”Меню”.  Але самої реєстрації меню недостатньо. Меню потрібно ще вивести в шаблоні.  Для цього ми скористаємося спеціальною функцією wp_nav_menu.

Виведення довільного меню. Функція wp_nav_menu

Як вже говорилося вище, виводити довільні меню ми будемо за допомогою функції wp_nav_menu, яка може приймати такі параметри:

$args = array(
‘menu’ => ”, // Название меню (string).
‘container’ => ‘div’, // Контейнер меню (string). В него помещается список ul.
‘container_class’ => ”, // Класс контейнера (string).
‘container_id’ => ”, // Id контейнера (string).
‘menu_class’ => ‘menu’, // Класс тега ul (string).
‘menu_id’ => ”, // Id тега ul (string).
‘echo’ => true, // Выводить на экран или возвращать для обработки (boolean).
‘fallback_cb’ => ‘wp_page_menu’, // Резервная функция на случай, если произвольное меню не существует (string).
‘before’ => ”, // Текст перед <a> каждой ссылки (string).
‘after’ => ”, // Текст после </a> каждой ссылки (string).
‘link_before’ => ”, // Текст перед анкором ссылки (string).
‘link_after’ => ”, // Текст после анкора ссылки (string).
‘depth’ => 0, // Глубина вложенности (integer). 0 – неограниченно, 2 – двухуровневое произвольное меню.
‘walker’ => , // Класс, собирающий меню. Default: new Walker_Nav_Menu. (object).
‘theme_location’ => ”); // Расположение меню в шаблоне. Указываем идентификатор меню. (string).

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

Передача параметрів через масив:

<?php
$args = array(
‘menu_id’=>’topmenu’,
‘theme_location’=>’top’,
‘container’=>”
);
wp_nav_menu($args);
?>

Передача параметрів через рядок:

wp_nav_menu('menu_id=topmenu&theme_location=top&container=');

Особисто я віддаю перевагу другому варіанту, так як він більш компактний, на мій погляд. У будь-якому випадку результатом роботи функції буде наступний код:

<ul id=”topmenu”>
<li><a href=”#”>Пункт 1</a></li>
<li><a href=”#”>Пункт 2</a></li>
<li><a href=”#”>Пункт 3</a></li>
</ul>

На цьому я закінчую дану статтю. Основні моменти ми розглянули і в 99% випадків даної інформації вам буде достатньо для самостійного створення довільних меню в WordPress. Якщо ж у вас виникнуть якісь питання, ви завжди зможете задати їх в коментарях.

На цьому все. Удачі вам і успіхів у створенні сайтів на WordPress.