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

​  1. 原来wordpress自带的导航栏样式及显示效果,li标签样式比较多 ​ ​ 2. 删除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. 页面中调用代码

版权声明
文章标题:wordpress主题开发之《导航栏li标签样式自定义》
文章链接:https://blog.chiyuba.com/qianduanjishu/ui/132.html
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布,转载或引用请注明出处。
温馨提示:本文最后更新于 2021年6月27日,部分内容可能存在时效性,请注意甄别。

相关推荐

更多教程
wordpress主题制作之《WordPress安装》 php wordpress主题制作之《WordPress安装》

前言 最近有想法制作一款wordpres...

30 浏览
ssycms模板开发之模板文章列表 UI相关 ssycms模板开发之模板文章列表

  文章调用代码示例 id=&...

15 浏览
ssycms模板开发之模板常用的文章列表调用代码 UI相关 ssycms模板开发之模板常用的文章列表调用代码

最新文章 {tag:article id...

36 浏览

评论