Добавьте пользовательские классы CSS в Li и ссылку на меню в WordPress wp_nav_menu - Web-Global: Связывая миры через веб-технологии
Web-Global

Добавьте пользовательские классы CSS в Li и ссылку на меню в WordPress wp_nav_menu

Пост опубликован 15 марта 2023 в 16:10 и находится в рубриках Wordpress. 263
Поделиться:


Иногда вам нужно настроить систему меню WordPress по умолчанию, чтобы добавить свой собственный набор классов css. WordPress предоставляет пару фильтров для этого.

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

/ * Добавьте пользовательские классы в элемент списка "li" */
function _namespace_menu_item_class( $classes, $item ) {
        $classes[] = "nav-item"; // you can add multiple classes here
        return $classes;
    }

    add_filter( 'nav_menu_css_class' , '_namespace_menu_item_class' , 10, 2 );

Добавление пользовательского класса в ссылку на меню немного сложно, так как нет хука или фильтра для прямой работы с элементом “a”. Поэтому мы пойдем окольным путем и используем функцию замены строки

/ * Добавьте пользовательский класс в ссылку в меню */    
function add_menuclass($ulclass) {
        return preg_replace('/<a /', '<a class="nav-link"', $ulclass);
    }
    add_filter('wp_nav_menu','add_menuclass');

Что мы здесь делаем, так это добавляем функцию фильтра в wp_nav_menu, которая возвращает весь блок меню, а затем заменяет элемент “a” желаемым классом.

Регистрируем в functions.php menu

// This theme uses wp_nav_menu() in one location.
register_nav_menus(
	array(
		'menu-1' => esc_html__( 'Primary', 'avantaj-spb' ),
	)
);

Выводим меню где нам нужна 

<?php
   wp_nav_menu(
     array(
       'theme_location' => 'menu-1',
        'menu_id'        => 'primary-menu',
        'menu_class'     => 'navbar-nav',  //тут добавляем класс для ul
        'container' => 'false', /тут удаляем обертку
       )
        );
    ?>