如何向 wp 自定义导航 <li> 和 <a> 元素添加类答案

【问题标题】：How to add classes to wp custom nav <li> and <a> elements如何向 wp 自定义导航 <li> 和 <a> 元素添加类
【发布时间】：2021-03-01 11:04:26
【问题描述】：

我有自定义导航，我确实在 nav ul 元素上放置了自定义类，但我不能在 li 和 a 元素上放置。有我的代码

functions.php：

    function wpb_custom_new_menu() {
  register_nav_menu('primary_navigation',__( 'Main Menu' ));
}
add_action( 'init', 'wpb_custom_new_menu' );

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);

header.php:

                <?php
                    wp_nav_menu( array( 
                        'theme_location' => 'primary_navigation', 
                        'container' => 'ul',
                        'menu_class'    => 'navbar-nav mr-auto py-4 py-md-0',
                        'list_item_class' => 'nav-item',
                        'link_class' => 'nav-link'
                    )); 
                ?>

【问题讨论】：

标签： php html wordpress menu nav

【解决方案1】：

您可以在主题的functions.php 文件中使用此代码将自定义类添加到li 和a 元素

向 li 添加类：-

  function add_menu_classes_li($classes, $item, $args) {
        if($args->menu == 'Menu Name'){
    
            if($item->post_title == 'Schedule a Demo'){
                $classes[] = 'class-name';
            }
        }
        return $classes;
    }
    add_filter('nav_menu_css_class', 'add_menu_classes_li', 1, 3);

将类添加到：-

function add_class_to_menu_anchors( $atts, $item, $args, $depth ) {
    if ( 0 !== $depth ) {
        $atts['class'] = 'dropdown-item';
    }
    else{
        $atts['class'] = 'custom-class';
    }

    return $atts;
}
add_filter( 'nav_menu_link_attributes', 'add_class_to_menu_anchors', 10, 4 );

【讨论】：