wordpress主题开发之《导航栏li标签样式自定义》

1. 原来wordpress自带的导航栏样式及显示效果，li标签样式比较多

2. 删除li标签样式改为自己定义的标签样式

3. 删除li标签样式代码

add_filter('nav_menu_css_class', 'my_css_attributes_filter', 100, 1); //删除Class选择器

add_filter('nav_menu_item_id', 'my_css_attributes_filter', 100, 1); //删除Id选择器

add_filter('page_css_class', 'my_css_attributes_filter', 100, 1);

function my_css_attributes_filter($var)
{
    return is_array($var) ? array_intersect($var, array(
        'current-menu-item',
        'current-post-ancestor',
        'current-menu-ancestor',
        'current-menu-parent'
    )) : ''; //删除当前菜单的四个选择器

}

4. 添加自定义标签样式代码

function wpmaker_menu_classes($classes, $item, $args)
{
    if ($args->theme_location == 'main_menu') { //这里的 main 是菜单id
        $classes[] = 'nav-item hr-nav__item'; //这里的 nav-item 是要添加的class类
    }
    return $classes;
}
add_filter('nav_menu_css_class', 'wpmaker_menu_classes', 100, 3);

5. 页面中调用代码

相关推荐

评论