Как добавить класс в ссылку в wp_nav_menu?

Ответ 1

Благодаря комментарию Сергея Параскива проблема была ограничена 1.

Поэтому это должно быть в function.php:

function add_menuclass($ulclass) {
   return preg_replace('/<a /', '<a class="list-group-item"', $ulclass);
}
add_filter('wp_nav_menu','add_menuclass');

ОБНОВИТЬ

На самом деле есть лучший способ, который дает нам гораздо больший контроль, а фрагмент кода предоставлен Джеффом Старром в этом посте.

ПРИМЕЧАНИЕ: это не добавляет текущий класс, хотя

Создайте свое меню на wp, затем не забудьте щелкнуть место в редакторе меню, а затем в своей функции:

// custom menu example @ https://digwp.com/2011/11/html-formatting-custom-menus/
function clean_custom_menus() {
    $menu_name = 'nav-primary'; // specify custom menu name
    if (($locations = get_nav_menu_locations()) && isset($locations[$menu_name])) {
        $menu = wp_get_nav_menu_object($locations[$menu_name]);
        $menu_items = wp_get_nav_menu_items($menu->term_id);

        $menu_list = '<nav>' ."\n";
        $menu_list .= "\t\t\t\t". '<ul>' ."\n";
        foreach ((array) $menu_items as $key => $menu_item) {
            $title = $menu_item->title;
            $url = $menu_item->url;
            $menu_list .= "\t\t\t\t\t". '<li><a href="'. $url .'">'. $title .'</a></li>' ."\n";
        }
        $menu_list .= "\t\t\t\t". '</ul>' ."\n";
        $menu_list .= "\t\t\t". '</nav>' ."\n";
    } else {
        // $menu_list = '<!-- no list defined -->';
    }
    echo $menu_list;
}

Наконец мы можем вызвать наше меню:

<?php if (function_exists(clean_custom_menus())) clean_custom_menus(); ?>

Приведенный выше код взят из поста, на который мы ссылались выше, я подумал включить этот ответ, так как кажется, что этот вопрос имеет много посещений.

ОБНОВЛЕНИЕ 2

Другое решение будет (возможно, лучшим):

header.php:

    <?php
      wp_nav_menu( array(
        'theme_location'  => 'topnav',
        'menu'            =>'topnav',
        'container'       => 'div', 
        'container_class' => 'collapse navbar-collapse', 
        'container_id'    => 'navbarCollapse',
        'menu_class'      => 'menu', 
        'echo'            => true,
        'fallback_cb'     => 'wp_page_menu',
        'items_wrap'      => '<ul class="nav justify-content-end w-100 %2$s">%3$s</ul>',
        'depth'           => 0
      ) );
    ?>

function.php:

 // register the nav
 function register_my_menu() {
  register_nav_menu('topnav',__( 'topnav' ));
 }
 add_action( 'init', 'register_my_menu' );

// let add "*active*" as a class to the li

add_filter('nav_menu_css_class' , 'special_nav_class' , 10 , 2);
function special_nav_class($classes, $item){
     if( in_array('current-menu-item', $classes) ){
             $classes[] = 'active ';
     }
     return $classes;
}

// let add our custom class to the actual link tag    

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

function add_menuclass($ulclass) {
   return preg_replace('/<a /', '<a class="nav-link"', $ulclass);
}
add_filter('wp_nav_menu','add_menuclass');

Ответ 2

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

В вашем functions.php добавьте:

function add_menu_link_class( $atts, $item, $args ) {
  if (property_exists($args, 'link_class')) {
    $atts['class'] = $args->link_class;
  }
  return $atts;
}
add_filter( 'nav_menu_link_attributes', 'add_menu_link_class', 1, 3 );

При желании вы можете добавить опцию добавления классов в элементы списка:

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

Теперь, в вашем шаблоне, чтобы построить меню, вы просто добавляете два новых аргумента, например:

wp_nav_menu([
    'theme_location'=> 'primary_navigation',
    'menu_class'    => 'navbar-nav ml-auto flex-nowrap',
    'list_item_class'  => 'nav-item',
    'link_class'   => 'nav-link m-2 menu-item nav-active'
]);

Хорошо работает с темами с несколькими меню, которые имеют различный внешний вид.

Ответ 3

Я хочу добавить класс 'item' в li должен написать этот код:

add_filter('nav_menu_css_class' , 'nav_class' , 10 , 2);
function nav_class($classes, $item){
    $classes[] = 'item';
    return $classes;
}

Ответ 4

Мое решение простое, используйте наш друг JQuery

в меню ввести свой собственный menu_id

<?php 
   wp_nav_menu(array(
     'theme_location'=>'primary', 
     'container'=>false,
     'menu_class'=>'navbar-nav mr-auto',
     'menu_id'=>'customAclassInWp_nav_menu'
    )
  ); 
?>

затем используйте jquery, чтобы добавить отсутствующий класс.

$( "#customAclassInWp_nav_menu li a" ).addClass( "nav-link" );

тадамммм :)

наслаждаться