Довільне меню WP 3.0+ (wp_nav_menu)
Широко відомо, що WordPress 3.0 додана підтримка довільних меню (настроюваних меню). Річ, на мій погляд, вкрай зручна та корисна. Власне, звідси ця стаття.
Зручність полягає в тому, що тепер можна створювати та конфігурувати меню прямо з адмінки, додаючи посилання кліками по чекбоксів та змінюючи порядок посилань простим перетягуванням. У меню можна додати посилання на сторінки, категорії та окремі пости. Можна створювати багаторівневі меню, також у меню можна додавати свої довільні посилання, про які WordPress не знає. Загалом повна свобода дій.
Однак, щоб така свобода була доступна, потрібно, скажімо так, легким рухом мишки, налаштувати виведення довільного меню в шаблон.
Використовувати такі меню буде вкрай зручно, якщо користуватися мультисайтовою можливістю WordPress, тому що для різних сайтів можна буде налаштовувати різні меню, а шаблон використовувати один.
Примітка: меню працює через таксономію (nav_menu) WordPress, а довільні (зовнішні) посилання записуються в основну таблицю БД posts. Такий підхід більш гнучкий та динамічний, проте потребує постійної генерації таких меню.
Отже, почнемо.
Відео по меню в WordPress
Включаємо підтримку довільних меню (wp_nav_menu)
Для початку потрібно зареєструвати можливість використання довільних меню та самі меню. Робиться це у файлі functions.php,за допомогою функції register_nav_menu() , так:
register_nav_menus(array( 'top' => 'Верхнє меню', // Назва розташування меню в шаблоні 'bottom' => 'Нижнє меню' //Назва іншого розташування меню у шаблоні ));
Зараз ми зареєстрували 2 меню з ідентифікаторами ‘ top ‘ та ‘ bottom ‘ з відповідними їм назвами. Ідентифікатори потрібні, щоб використовувати їх у темі, для вказівки того місця, де через функцію виведення wp_nav_menu() , буде виводитися створене в адмінці меню. Назви зареєстрованих розташування ми побачимо в адмінці, коли зайдемо в розділ Внешний вид -> Меню.
Після того, як меню зареєстровані, йдемо в адмінку і створюємо свої меню (в даному прикладі 2 меню):
Задаємо назву меню (меню у шаблоні можна виводити за вказаною назвою, функцією wp_nav_menu()
Створюємо пункти меню. Використовуємо лівий блок: сторінки посилання, рубрики
- Вибираємо де буде розташоване меню, так як ми зареєстрували 2 меню, у нас буде 2 варіанти: “Верхнє меню” і “Нижнє меню”.
Підтримка довільних меню WordPress включається для кожної теми окремо, таким рядком у файлі functions.php add_theme_support(‘menus’); Однак, у цьому рядку немає потреби, якщо ми реєструємо меню. У цьому випадку підтримка буде увімкнена автоматично.
Виведення довільних меню через функцію wp_nav_menu
Меню зареєстровані та створені, залишилося додати їх до шаблону. Це робиться функцією wp_nav_menu() , яка може приймати такі параметри:
wp_nav_menu( array( 'menu' => '', // (string) Назва меню, що виводиться (вказується в адмінці при створенні меню, пріоритетніше // чим вказане місце theme_location - якщо вказано, то параметр theme_location ігнорується) 'container' => 'div', // (string) Контейнер меню. Обгортач ul. Вказується тег контейнера (за замовчуванням у тег div) 'container_class' => '', // (string) class контейнера (div тега) 'container_id' => '', // (string) id контейнера (div тега) 'menu_class' => 'menu', // (string) class самого меню (ul тега) 'menu_id' => '', // (string) id самого меню (ul тега) 'echo' => true, // (boolean) Виводити на екран або повертати для обробки 'fallback_cb' => 'wp_page_menu', // (string) Функція, що використовується (резервна), якщо меню не існує (не вдалося отримати) 'before' => '', // (string) Текст перед <a> кожним посиланням 'after' => '', // (string) Текст після </a> кожного посилання 'link_before' => '', // (string) Текст перед анкором (текстом) посилання 'link_after' => '', // (string) Текст після анкору (тексту) посилання 'depth' => 0, // (integer) Глибина вкладеності (0 - необмежена, 2 - дворівневе меню) 'walker' => '', // (object) Клас збирає меню. Default: new Walker_Nav_Menu 'theme_location' => '' // (string) Розташування меню у шаблоні. (вказується ключ яким було зареєстровано меню функції register_nav_menus) )));
В даному прикладі в шаблон потрібно вставити приблизно (залежить від необхідних вам параметрів) такі, 2 коди:
#1. Виведення меню за розташуванням
Верхнє меню. Вставляємо в шапку шаблону (header.php), там де буде виводитись верхнє (top) меню:
<?php wp_nav_menu( array( 'menu_class'=>'menu', 'theme_location'=>'top', 'after'=>' /' ))); ?>
Виведе створене в адмінці меню, прикріплене до розташування “Верхнє меню” з такою структурою:
<div class='<класи WP>'> <ul class='menu'> <li><a class='<класи WP>' href="#">Анкор посилання</a> /</li> <li><a class='<класи WP>' href="#">Анкор посилання</a> /</li> <li><a class='<класи WP>' href="#">Анкор посилання</a> /</li> </ul> </div>
Нижнє меню. Вставляємо в підвал шаблону (footer.php), там де буде виводиться нижнє (bottom) меню:
<?php wp_nav_menu('menu_class=bmenu&theme_location=bottom'); ?>Виведе створене в адмінці меню, прикріплене до “Нижнє меню”. Структура буде ідентичною першою.
Зверніть увагу, що в першому варіанті параметри були передані через масив (array). У другому через рядок. Обидва варіанти правильні. Це звичайна справа для функцій WordPress – параметри можна передавати як масивом, так і рядком (рядок потім перетворюється на масив).
#2 Виводимо меню за назвою
Щоб вивести меню за його назвою, можна скористатися аргументом ‘menu’. Назва вказується, те, що було задано при створенні меню в адмінці. У прикладі (див. картинку) ” Головне меню ” . Аргумент menuмає більший пріоритет ніж theme_location, а значить, якщо ми виводимо за назвою, то параметр theme_location буде ігноруватися.
<?php wp_nav_menu('menu=Головне меню'); ?>Можна вказати ID меню, а не назву. Так, при зміні назви меню код залишиться робочим. ID меню можна переглянути в УРЛ під час редагування меню:
<?php wp_nav_menu('menu=455'); ?>
нотатки
Приберемо обгортку Div
Ви напевно звернули увагу, що меню “обертається”, часто, непотрібним тегом div. Його можна видалити, вказавши в аргументах функції wp_nav_menu() порожній параметр ‘container’=>” .
Змінюємо параметри за замовчуванням
Щоб постійно не вказувати один і той же параметр для меню, що вставляються, їх можна перевизначити в functions.php . Робиться це через фільтр wp_nav_menu_args:
register_nav_menus(array(
'top' => 'Верхнє меню',
'bottom' => 'Нижнє меню'
));
add_filter( 'wp_nav_menu_args', 'my_wp_nav_menu_args');
function my_wp_nav_menu_args( $args='' ){
$args['container'] = '';
return $args;
}
За аналогією, можна створити свої аргументи за умовчанням: $args['аргумент'] = 'значение'.
Перевірка чи зареєстровано меню
У WordPress також є функція умови: has_nav_menu(‘top’) – перевіряє чи було зареєстроване розташування меню top . Якщо меню не вказано, функція wp_nav_menu() спрацює, як wp_list_pages() , але “обертач” div залишиться, незважаючи на те, що в аргументах ми його прибрали. Вирішити цю проблему можна так:
if (has_nav_menu('top')){
wp_nav_menu( array(
'container' => '',
'theme_location' => 'top',
'menu_class' => 'menu')
);
} else {
echo '<ul class="menu">';
wp_list_pages( array('depth' => 1, 'title_li' => '' )));
echo '</ul>';
}
Параметр walker
З усіх аргументів, що передаються, незрозумілим є walker . Для тих, хто хоче розібратися, для чого він потрібен, читайте розділ в описі функції wp_nav_menu() . Там коротко та ясно описаний принцип. Якщо дуже коротко, то з його допомогою можна впровадитись у процес генерації меню та змінити його як завгодно.
Включення дод. параметрів у меню
Меню можна налаштувати, наприклад, можна додати можливість вказувати CSS клас для елемента меню, посилання меню. Для цього відкрийте вкладку «Налаштування екрана»:
