Как добавить класс в <li> с помощью wp_nav_menu() в Wordpress?

Ответ 1

Вы не можете добавить класс непосредственно в LI очень легко, но есть ли какая-либо причина не нацеливать их на несколько иной, но одинаково определенный способ (по их родительскому ul)?

Вы можете установить класс или идентификатор меню с параметрами menu_class и menu_id (прикрепленные к родительскому элементу UL от LI), а затем нацеливать li через CSS таким образом:

<?php wp_nav_menu('menu_id=mymenu'); ?>

И для CSS:

ul#mymenu li {
    /* your styles here */
}

Изменить: на момент написания в 2013 году это был самый простой способ добавить его, но обновления с тех пор добавили эту функцию для добавления классов CSS непосредственно в редактор навигации администратора. Подробнее см. Последние ответы.

Ответ 2

ЗДЕСЬ WordPress добавить пользовательский класс в ссылки wp_nav_menu

ИЛИ вы можете добавить класс <li class='my_own_class'><a href=''>Link</a></li> с панели администратора:

• Перейдите к YOURSITEURL/wp-admin/nav-menus.php

• открыть SCREEN OPTIONS

• сделайте отметку CSS CLASSES, затем вы увидите CSS Classes (optional) поле в каждой ссылке меню.

Ответ 3

Вы можете добавить фильтр для действия nav_menu_css_class в вашем файле functions.php.

Пример:

function atg_menu_classes($classes, $item, $args) {
  if($args->theme_location == 'secondary') {
    $classes[] = 'list-inline-item';
  }
  return $classes;
}
add_filter('nav_menu_css_class', 'atg_menu_classes', 1, 3);

Документы: https://developer.wordpress.org/reference/hooks/nav_menu_css_class/

Ответ 4

Нет необходимости создавать пользовательские ходунки. Просто используйте дополнительный аргумент и установите фильтр для nav_menu_css_class.

Например:

$args = array(
    'container'     => '',
    'theme_location'=> 'your-theme-loc',
    'depth'         => 1,
    'fallback_cb'   => false,
    'add_li_class'  => 'your-class-name1 your-class-name-2'
    );
wp_nav_menu($args);

Обратите внимание на новый аргумент add_li_class.

И установите фильтр на functions.php

function add_additional_class_on_li($classes, $item, $args) {
    if($args->add_li_class) {
        $classes[] = $args->add_li_class;
    }
    return $classes;
}
add_filter('nav_menu_css_class', 'add_additional_class_on_li', 1, 3);

Ответ 5

используйте этот фильтр nav_menu_css_class как показано ниже

function add_classes_on_li($classes, $item, $args) {
    $classes[] = 'nav-item';
    return $classes;
}
add_filter('nav_menu_css_class','add_classes_on_li',1,3);

ОБНОВИТЬ

Чтобы использовать этот фильтр с определенным меню

if ( 'main-menu' === $args->theme_location ) { //replace main-menu with your menu
    $classes[] = "nav-item"; 
}

Ответ 6

Добавление класса в <li> без редактирования файла functions.php:

1. Зайдите в Внешний вид → Меню → Параметры экрана → Классы CSS
2. Вы активируете опцию CSS Class в окне Menu Items

Ответ 7

Ни один из этих ответов действительно не отвечает на вопрос. Здесь что-то похожее на то, что я использую на моем сайте, путем таргетинга на пункт меню по его названию/имени:

function add_class_to_menu_item($sorted_menu_objects, $args) {
    $theme_location = 'primary_menu';  // Name, ID, or Slug of the target menu location
    $target_menu_title = 'Link';  // Name/Title of the menu item you want to target
    $class_to_add = 'my_own_class';  // Class you want to add

    if ($args->theme_location == $theme_location) {
        foreach ($sorted_menu_objects as $key => $menu_object) {
            if ($menu_object->title == $target_menu_title) {
                $menu_object->classes[] = $class_to_add;
                break; // Optional.  Leave if you're only targeting one specific menu item
            }
        }
    }

    return $sorted_menu_objects;
}
add_filter('wp_nav_menu_objects', 'add_class_to_menu_item', 10, 2);

Ответ 8

Как насчет использования str_replace, если вы просто хотите "Добавить классы":

<?php
    echo str_replace( '<li class="', '<li class="myclass ',
        wp_nav_menu(
            array(
                'theme_location'    => 'main_menu',
                'container'         => false,
                'items_wrap'        => '<ul>%3$s</ul>',
                'depth'             => 1,
                'echo'              => false
            )
        )
    );
?>

Жестко это быстрое решение для одноуровневых меню или меню, которое вы хотите добавить Classes ко всем элементам <li>, и не рекомендуется для более сложных меню

Ответ 9

<?php
    echo preg_replace( '#<li[^>]+>#', '<li class="col-sm-4">',
            wp_nav_menu(
                    array(
                        'menu' => $nav_menu, 
                        'container'  => false,
                        'container_class'   => false,
                        'menu_class'        => false,
                        'items_wrap'        => '%3$s',
                                            'depth'             => 1,
                                            'echo'              => false
                            )
                    )
            );
?>

Ответ 10

Правильным для меня является решение Zuan. Помните, что нужно добавить isset в $args->add_li_class, однако вы получили Notice: Undefined property: stdClass::$add_li_class если вы не установили свойство во всех wp_nav_menu() функциях wp_nav_menu().

Это функция, которая работала для меня:

function add_additional_class_on_li($classes, $item, $args) {
    if(isset($args->add_li_class)) {
      $classes[] = $args->add_li_class;
    }
    return $classes;
}
add_filter('nav_menu_css_class', 'add_additional_class_on_li', 1, 3);

Ответ 11

Без walker menu его невозможно напрямую добавить. Однако вы можете добавить его javascript.

$('#menu > li').addClass('class_name');