Как добавить свои классы li, a в wp_nav_menu?

Question

[Socrates]

Ребят создал свое меню, при помощи:

register_nav_menus(
array(
    'top-menu' => __( 'Top Menu', 'blankslate' ),
    'bottom-menu' => __( 'Footer Menu', 'blankslate' )
  )
);

Вызвал меню:

wp_nav_menu(array(
        'menu' => 'top-menu',
        'theme_location' => 'Top Menu',
        'depth' => 2,
        'container' => 'ul',
        'container_class' => ' ',
        'menu_class' => 'top-menu',
        'menu_id' => ' '
      ));

Не могу понять, как задать свои классы элементам li, a ?
Буду очень признателен за информацию!

Answer 1

[Денис Янчевский]

Ну либо в Внешний вид -> Меню в верхнем правом углу открыть Настройки экрана, включить классы CSS и прописать нужные пунктам, либо подобрать фильтр.
Например, попробовать так

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

function special_nav_class($classes, $item){
    $classes[] = 'your-custom-class';
    return $classes;
}

Видео с примерами.

Comments

[Socrates]

Спасибо

[bazliiii]

БОЖЕ МОЙ СРАБОТАЛО , СПАСИБО!

[kenes1987]

Помоги пожалуйста, у меня все так, но есть проблема. У меня два меня, верхнее и боковое. Но проблема в том что классы у обеих меню стали одинаковыми li и a. Как сделать так, чтобы их можно было редактировать отдельно?

function theme_add_anchor_links_sidebar($classes, $item, $args) {
$classes['class'] = "wrapper_menu_a_sidebar";
return $classes;
}

add_filter("nav_menu_link_attributes", "theme_add_anchor_links_sidebar", 1, 3);

//adding classes to anchor links
function theme_add_anchor_links($classes, $item, $args) {
$classes['class'] = "wrapper_menu_a";
return $classes;
}

add_filter("nav_menu_link_attributes", "theme_add_anchor_links", 1, 3);

[Денис Янчевский]

kenes1987, например, добавить условие проверки идентификатора расположения меню

function theme_add_anchor_links_sidebar( $classes, $item, $args ) {
    if ( $args->theme_location == 'sidebar' ) {
        $classes[ 'class' ] = "wrapper_menu_a_sidebar";
    }
}

function theme_add_anchor_links($classes, $item, $args) {
    if ( $args->theme_location == 'primary' ) {
        $classes[ 'class' ] = "wrapper_menu_a";
    }
}

sidebar и primary нужно заменить на те значения, которые используются в твоей теме.

[kenes1987]

Денис Янчевский, в смысле которые я назначил, в

//register nav menu
function theme_nav_config_sidebar(){
register_nav_menus(array(
"theme_secondary" => "Theme Sidebar",
));
}

?
я их уже назначил.
Запись для верхнего меню я пока удалил, но там я его отдельно назначал, а пока поставил просто хтмл. Чтобы вордпресс не назначил в верхнее меню те же стили. что и в боковом.

Answer 2

[anwebdev]

Можно также с помощью jQuery:
jQuery('#my_menu > li').addClass('my_class');

Comments

[Ivan6463]

Это плохой вариант, редактировать фронт черед бэк, так лучше не делать