Як у віджеті WordPress обгорнути блок у тег nav

Привіт 🙂 У цій короткій, але корисній, замітці покажу як у WordPress обгорнути HTML-блок (наприклад, список меню) у тег <nav> прямо у віджеті, навіть якщо WordPress не дає такої можливості з коробки.

🧩 Навіщо це потрібно?

Семантична розмітка HTML покращує доступність сайту, а також позитивно впливає на SEO. Якщо меню в підвалі (footer) сайту відображається просто як <ul>, то пошукові системи не завжди розпізнають його як навігацію. Тег <nav> чітко дає зрозуміти, що це — навігаційний блок.

💡 Вихідна ситуація

Нехай у футері віджет виводить меню наступним чином:

<ul id="menu-footer-pages-menu-1">
	<li><a href="https://site.com/en/case/">CASES</a></li>
	<li><a href="https://site.com/en/blog/">BLOG</a></li>
	<li><a href="https://site.com/en/about-us/">ABOUT US</a></li>
	<li><a href="https://site.com/en/contacts/">CONTACTS</a></li>
</ul>

Мета — обгорнути цей список у <nav>, щоб результат виглядав так:

<nav>
  <ul id="menu-footer-pages-menu-1">
	  <li><a href="https://site.com/en/case/">CASES</a></li>
	  <li><a href="https://site.com/en/blog/">BLOG</a></li>
	  <li><a href="https://site.com/en/about-us/">ABOUT US</a></li>
	  <li><a href="https://site.com/en/contacts/">CONTACTS</a></li>
  </ul>
</nav>

до змісту ↑

🚫 Чому просте додавання тегу через JS не працює?

При спробі додати тег <nav> перед елементом за допомогою JS, браузер автоматично закриває цей тег:

// НЕ ПРАЦЮЄ КОРЕКТНО
document.querySelector("#menu-footer-pages-menu-1").insertAdjacentHTML("beforebegin", "<nav>");

У результаті виходить:

<nav></nav>
<ul id="menu-footer-pages-menu-1">...</ul>

Це відбувається через автоматичну корекцію DOM, яка вважає, що <nav> не може містити <ul>, якщо <ul> додається пізніше.

до змісту ↑

✅ Рішення — використати jQuery .wrapAll()

Найпростіший і надійний спосіб — обгорнути елемент через jQuery. Додайте код у кінець сторінки, наприклад через хук wp_footer:

/**
 * Обгортаємо футер-меню у тег <nav>
 */
add_action( 'wp_footer', function() {
	?>
    <script>
		jQuery(function ($){
			// Обгортаємо потрібний елемент у <nav>
			$("#menu-footer-pages-menu-1").wrapAll("<nav>");
            
			// Якщо є інші меню, додаємо й їх:
			// $("#menu-footer-pages-menu-2").wrapAll("<nav>");
			// $("#menu-footer-pages-menu-3").wrapAll("<nav>");
		});
    </script>
	<?php
} );

до змісту ↑

🧰 Альтернативний спосіб — через фільтр widget_nav_menu_args

Якщо ви хочете семантичну розмітку без JS, і це саме меню, яке вставляється через стандартний віджет WordPress "Меню", то можна скористатися PHP-фільтром:

add_filter( 'widget_nav_menu_args', function( $args, $nav_menu, $args_raw ) {
	$args['container'] = 'nav';
	return $args;
}, 10, 3 );

до змісту ↑

📌 Підсумок

Спосіб	Переваги	Недоліки
jQuery .wrapAll()	Гнучкий, працює з будь-яким вмістом	Залежить від JS
widget_nav_menu_args	Семантичний, на рівні PHP	Працює лише для стандартного віджета "Меню"

до змісту ↑

🔚 Висновок

Якщо ви хочете покращити семантику вашого сайту, не забудьте обгортати навігаційні блоки у тег <nav>. І навіть якщо WordPress цього "не дозволяє", ви завжди знайдете обхідний шлях 😉