Вопрос или проблема
Я создаю меню, которое будет иметь подпункт > подпункт > подпункт. Стилизация действительно сложная, поэтому было бы идеально переименовать класс “sub-menu” в зависимости от уровня подпункта или хотя бы добавить класс (например, для 1-го подпункта добавить .top-sub-menu, для 2-го подпункта добавить .second-level-sub-menu, для 3-го подпункта добавить .third-level-sub-menu).
- Есть ли способ сделать это в WP core?
- Если нет, то как лучше всего достичь этого результата?
Я прикрепил HTML-код того, что у меня есть, если это поможет. Любая помощь очень appreciated. Спасибо!
Мне удалось решить эту задачу, используя хук, который я взял из ответа Артемия Егоровa на этот пост https://stackoverflow.com/questions/5034826/wp-nav-menu-change-sub-menu-class-name, так что я решил поделиться, на случай если кому-то это тоже понадобится:
add_filter( 'nav_menu_submenu_css_class', 'rename_sub_menus', 10, 3 );
function rename_sub_menus( $classes, $args, $depth ){
foreach ( $classes as $key => $class ) {
if ( $class == 'sub-menu' && $depth == 0) {
$classes[ $key ] = 'first-level-sub-menu';
} else if ( $class == 'sub-menu' && $depth == 1) {
$classes[ $key ] = 'second-level-sub-menu';
} else if ( $class == 'sub-menu' && $depth == 2) {
$classes[ $key ] = 'third-level-sub-menu';
}
}
return $classes;
}
.
Ответ или решение
Чтобы создать кастомные имена классов для подменю в WordPress, вам необходимо немного изменить стандартное поведение темы. Это можно сделать при помощи фильтра, который добавляет новые классы на основе уровня вложенности подменю.
Шаги для изменения классов подменю
-
Используйте фильтр
nav_menu_submenu_css_class: Этот фильтр позволяет вам изменять массив классов CSS для подменю в зависимости от глубины вложенности. -
Создайте функцию для изменения классов: Ваша функция будет проверять уровень глубины и изменять классы в соответствии с нужными вам именами.
-
Добавьте код в файл
functions.php: Для того чтобы ваши изменения вступили в силу, скопируйте и вставьте приведённый ниже код в файлfunctions.phpвашей темы.
Пример кода
add_filter( 'nav_menu_submenu_css_class', 'rename_sub_menus', 10, 3 );
function rename_sub_menus( $classes, $args, $depth ) {
foreach ( $classes as $key => $class ) {
// Проверяем уровень вложенности и меняем класс подменю
if ( $class == 'sub-menu' && $depth == 0 ) {
$classes[ $key ] = 'first-level-sub-menu';
} elseif ( $class == 'sub-menu' && $depth == 1 ) {
$classes[ $key ] = 'second-level-sub-menu';
} elseif ( $class == 'sub-menu' && $depth == 2 ) {
$classes[ $key ] = 'third-level-sub-menu';
}
}
return $classes;
}Изменения в коде
-
Функция
rename_sub_menus: Эта функция принимает три параметра: массив классов$classes, объект$argsи уровень вложенности$depth. Мы перебираем массив классов и меняем имя классаsub-menuна нужное название в зависимости от уровня вложенности. -
Проверка глубины: Используя переменную
$depth, мы можем установить, на каком уровне меню мы находимся, и присвоить соответствующий класс.
Заключение
Этот подход позволяет организовать стилизацию подменю. Он обеспечивает необходимую гибкость в кастомизации и позволяет избежать конфликта с другими стилями, используя уникальные классы для каждого уровня вложенности. Результат: вы получаете чистый и понятный код, который легко поддерживать и модифицировать в будущем.
Если у вас возникнут дополнительные вопросы или потребуется помощь в настройке стилей, не стесняйтесь обращаться за поддержкой. Надеюсь, этот ответ был полезен для решения вашей задачи!