Как заставить WordPress использовать тег для сгенерированных меню?

На чтение 3 мин Опубликовано 29.09.2024

Вопрос или проблема

Так как формальным контейнером для элементов меню является тег <menu>, как мне заставить WordPress использовать тег <menu> в качестве обертки для элементов меню вместо более общего <ul>?

ПРАВКА: Я полагаю, что это то, к чему я стремлюсь, а это кажется решением.

Если вы просто пытаетесь заменить <ul...> и </ul> на <menu...> и </menu> в сгенерированном HTML, вы можете использовать фильтр wp_nav_menu:

add_filter( 'wp_nav_menu', 'wpse_426932_menu_fix' );
/**
 * Исправляет HTML меню, чтобы использовать <menu> вместо <ul>.
 *
 * @param  string $html HTML меню.
 * @return string       Исправленный HTML меню.
 */
function wpcs_426932_menu_fix( $html ) {
    $html = str_replace(
        array( '<ul', '</ul>' ),
        array( '<menu', '</menu>' ),
        $html
    );
    return $html;
}

Вы можете добавить этот код в файл functions.php вашей активной темы или сделать его простым плагином. (Я предпочитаю путь с плагином, потому что таким образом он продолжает работать, даже если вы измените тему.)

Примечание: Это очень простая замена строк. Если вам нужно что-то более сложное, вам может понадобиться использовать preg_replace().

Ответ или решение

Для того чтобы использовать тег <menu> в сгенерированных меню WordPress вместо стандартного <ul>, вы можете воспользоваться фильтром wp_nav_menu. Вот подробные инструкции по изменению HTML кода меню:

Добавить фильтр в файл functions.php:
Вам нужно вставить следующий код в файл functions.php вашей активной темы. Этот код заменит теги <ul> на <menu>:

add_filter( 'wp_nav_menu', 'wpse_426932_menu_fix' );
/**
* Замена HTML меню с &lt;ul&gt; на &lt;menu&gt;.
*
* @param  string $html HTML меню.
* @return string       Исправленный HTML меню.
*/
function wpse_426932_menu_fix( $html ) {
   $html = str_replace(
       array( '<ul', '</ul>' ),
       array( '<menu', '</menu>' ),
       $html
   );
   return $html;
}

Использовать плагин вместо изменения темы:
Если вы хотите, чтобы это изменение продолжало работать, даже если вы смените тему, рекомендуется создать простой плагин. Для этого:
- Создайте папку в директории wp-content/plugins/, назовите её, например, custom-menu-tag.
- В этой папке создайте файл custom-menu-tag.php и вставьте в него следующий код:
```
<?php
/*
Plugin Name: Custom Menu Tag
Description: Использует тег <menu> для меню в WordPress.
Version: 1.0
Author: Ваше Имя
*/

add_filter( 'wp_nav_menu', 'wpse_426932_menu_fix' );
function wpse_426932_menu_fix( $html ) {
   $html = str_replace(
       array( '<ul', '</ul>' ),
       array( '<menu', '</menu>' ),
       $html
   );
   return $html;
}
```
- После этого активируйте его из административной панели WordPress в разделе "Плагины".
Замечания:
- Обратите внимание, что данный метод представляет собой простую замену строк. Если вам нужно более сложное изменения структуры меню, можете использовать функцию preg_replace(), которая позволяет более гибко обрабатывать HTML-строки.
- Убедитесь, что использование тега <menu> соответствует вашим требованиям и стандартам, так как в HTML5 он предназначен для других целей (например, для контекстных меню).

Запомните, адаптация HTML-структуры в WordPress может повлиять на стилизацию и взаимодействие с JavaScript в вашем сайте, поэтому всегда тестируйте изменения после их применения.