Хук wp_nav_menu_container_allowedtags позволяет разработчикам WordPress управлять списком допустимых HTML-тегов, которые могут быть использованы в качестве контейнеров для меню. По умолчанию разрешены только теги <div> и <nav>, но с помощью этого фильтра можно расширить этот список, добавляя другие теги, такие как <section> или <header>.
apply_filters( 'wp_nav_menu_container_allowedtags', string[] $tags );
Этот фильтр полезен, когда вы хотите использовать разные HTML-теги для структуры вашего меню, чтобы улучшить семантику или стиль. Например, вместо <div> можно использовать <header> для навигационного меню, расположенного в верхней части страницы.
Параметры
$tags(массив строк): Массив допустимых HTML-тегов для использования в качестве контейнеров меню. По умолчанию это массив, содержащий тегиdivиnav.
Пример 1: Добавление тега <section> в список допустимых
В этом примере мы добавим тег <section> в набор допустимых тегов для использования в контейнерах меню.
add_filter( 'wp_nav_menu_container_allowedtags', function ( $allowed_tags ) {
$allowed_tags[] = 'section'; // Добавляем тег section
return $allowed_tags;
} );
// Выводим меню
wp_nav_menu( [
'theme_location' => 'main-menu',
'container' => 'section',
] );
После применения этого кода, вывод меню будет выглядеть следующим образом:
<section class="menu-main-menu-container">
<ul id="menu-main-menu" class="menu">
<li id="menu-item-1" class="menu-item">
<a href="http://example.com/page-1">Запись 1</a>
</li>
<li id="menu-item-2" class="menu-item">
<a href="http://example.com/page-2">Запись 2</a>
</li>
<li id="menu-item-3" class="menu-item">
<a href="http://example.com/page-3">Запись 3</a>
</li>
</ul>
</section>
Пример 2: Добавление тега <aside>
Этот пример демонстрирует, как добавить тег <aside> как допустимый контейнер для меню. Тег <aside> может быть полезен для обозначения боковой навигации или дополнительных ссылок.
add_filter( 'wp_nav_menu_container_allowedtags', function ( $allowed_tags ) {
$allowed_tags[] = 'aside'; // Добавляем тег aside
return $allowed_tags;
} );
// Выводим меню
wp_nav_menu( [
'theme_location' => 'sidebar-menu',
'container' => 'aside',
] );
Результирующий HTML-код будет выглядеть так:
<aside class="menu-sidebar-menu-container">
<ul id="menu-sidebar-menu" class="menu">
<li id="menu-item-4" class="menu-item">
<a href="http://example.com/about">О нас</a>
</li>
<li id="menu-item-5" class="menu-item">
<a href="http://example.com/services">Услуги</a>
</li>
<li id="menu-item-6" class="menu-item">
<a href="http://example.com/contact">Контакты</a>
</li>
</ul>
</aside>
Пример 3: Добавление нескольких тегов
В этом примере мы добавим сразу несколько тегов, включая <header>, <footer> и <main>, чтобы расширить возможности разметки для различных областей меню.
add_filter( 'wp_nav_menu_container_allowedtags', function ( $allowed_tags ) {
$allowed_tags[] = 'header';
$allowed_tags[] = 'footer';
$allowed_tags[] = 'main';
return $allowed_tags;
} );
// Пример вывода меню в заголовке
wp_nav_menu( [
'theme_location' => 'top-menu',
'container' => 'header',
] );
// Пример вывода меню в подвале
wp_nav_menu( [
'theme_location' => 'footer-menu',
'container' => 'footer',
] );
Заключение
Хук wp_nav_menu_container_allowedtags является полезным инструментом для управления структурой меню в WordPress. С его помощью можно добавлять различные HTML-теги для контейнеров, что помогает улучшить семантику разметки и адаптировать её под конкретные потребности. Благодаря приведённым примерам вы можете легко настроить меню на своём сайте и использовать теги, соответствующие вашим требованиям.