WordPress主题开发：如何为导航<a>标签添加自定义类？

步骤1：在functions.php中添加过滤器函数 #

function add_additional_class_on_a($atts, $item, $args) {
    // 判断是否传入自定义的a类参数
    if (isset($args->add_a_class)) {
        // 将自定义类追加到现有class属性
        $atts['class'] = isset($atts['class']) ? $atts['class'] . ' ' . $args->add_a_class : $args->add_a_class;
    }
    return $atts;
}
add_filter('nav_menu_link_attributes', 'add_additional_class_on_a', 10, 3);

// 给当前菜单项添加sr-only标记
function add_sr_only_to_current_menu($item_output, $item, $depth, $args) {
    if (in_array('current-menu-item', $item->classes)) {
        $item_output = str_replace('</a>', ' <span class="sr-only">(current)</span></a>', $item_output);
    }
    return $item_output;
}
add_filter('walker_nav_menu_start_el', 'add_sr_only_to_current_menu', 10, 4);

步骤2：修改header.php中的wp_nav_menu参数 #

在原有参数基础上，新增add_a_class指定标签的类：

<?php
wp_nav_menu( 
    array(
        "theme_location" => "top-menu",
        "menu_class" => "navbar-nav ml-auto",
        "container" => "div",
        "container-class" => "collapse navbar-collapse",
        "container-id" => "navbarDefault",
        "fallback_cb" => false,
        "add_li_class" => "nav-item",
        "add_a_class" => "nav-link page-scroll" // 新增a类参数
    )
);
?>

方法二：正确编写自定义Walker类（适合复杂定制） #

如果你之前自定义Walker导致网站崩溃，大概率是代码存在语法错误或未正确继承Walker_Nav_Menu类。以下是稳定可用的自定义实现：

步骤1：在functions.php中定义Walker类 #

class Custom_Nav_Walker extends Walker_Nav_Menu {
    function start_el(&$output, $item, $depth = 0, $args = null, $id = 0) {
        // 处理li标签的类
        $classes = empty($item->classes) ? array() : (array)$item->classes;
        $classes[] = 'nav-item';
        $class_names = join(' ', apply_filters('nav_menu_css_class', array_filter($classes), $item, $args));
        $class_names = $class_names ? ' class="' . esc_attr($class_names) . '"' : '';

        $id = apply_filters('nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args);
        $id = $id ? ' id="' . esc_attr($id) . '"' : '';

        $output .= '<li' . $id . $class_names . '>';

        // 处理a标签属性
        $atts = array();
        $atts['href'] = ! empty($item->url) ? esc_url($item->url) : '';
        $atts['class'] = 'nav-link page-scroll';
        if (in_array('current-menu-item', $item->classes)) {
            $atts['class'] .= ' current';
        }

        $atts = apply_filters('nav_menu_link_attributes', $atts, $item, $args);
        $attributes = '';
        foreach ($atts as $attr => $value) {
            if (! empty($value)) {
                $value = ('href' === $attr) ? esc_url($value) : esc_attr($value);
                $attributes .= ' ' . $attr . '="' . $value . '"';
            }
        }

        // 拼接菜单项输出
        $item_output = $args->before;
        $item_output .= '<a' . $attributes . '>';
        $item_output .= $args->link_before . apply_filters('the_title', $item->title, $item->ID) . $args->link_after;
        if (in_array('current-menu-item', $item->classes)) {
            $item_output .= ' <span class="sr-only">(current)</span>';
        }
        $item_output .= '</a>';
        $item_output .= $args->after;

        $output .= apply_filters('walker_nav_menu_start_el', $item_output, $item, $depth, $args);
    }
}

步骤2：在header.php中调用自定义Walker #

修改wp_nav_menu参数，指定使用自定义Walker：

<?php
wp_nav_menu( 
    array(
        "theme_location" => "top-menu",
        "menu_class" => "navbar-nav ml-auto",
        "container" => "div",
        "container-class" => "collapse navbar-collapse",
        "container-id" => "navbarDefault",
        "fallback_cb" => false,
        "walker" => new Custom_Nav_Walker() // 指定自定义Walker
    )
);
?>

内容的提问来源于stack exchange，提问作者Adam Bukovsek