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

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

%title插图%num%title插图%num

%title插图%num%title插图%num

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

%title插图%num%title插图%num

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'
    )) : ''; //删除当前菜单的四个选择器

}

%title插图%num

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

%title插图%num

5. 页面中调用代码

%title插图%num%title插图%num

版权声明:
作者:小何
链接:https://ligo100.cn/qianduanjishu/ui/132.html
来源:小何博客
文章版权归作者所有,未经允许请勿转载。

THE END
分享
二维码
打赏
< <上一篇
下一篇>>
文章目录
关闭
目 录