导航菜单样式修改自定义css id属性

导航菜单样式修改自定义css id属性

在制作主题中发现调用的导航是自带属性的,但是有时候又不想去写样式想直接导出模板进去属性有对不上还得去修改,今天分享 可直接自定义属性方法 样式一 //菜单 li标签自定义新增class 百家素材 function xintheme_menu_classes($classes, $item, $args) { i...

在制作主题中发现调用的导航是自带属性的,但是有时候又不想去写样式想直接导出模板进去属性有对不上还得去修改,今天分享 可直接自定义属性方法

样式一

//菜单 li标签自定义新增class 百家素材
function xintheme_menu_classes($classes, $item, $args) {
 if($args->theme_location == 'mainmenu') { //这里的 main 是菜单id
    $classes[] = 'bbt'; //这里的 nav-item 是要添加的class类
 }
 return $classes;
}
add_filter('nav_menu_css_class','xintheme_menu_classes',1,3);

样式二

//菜单 a标签 li标签自定义新增class
function sonliss_menu_link_atts( $atts, $item, $args ) {
  $atts['class'] = 'baijia-item baijia-item-anchor';
  return $atts;
}
add_filter( 'nav_menu_link_attributes', 'sonliss_menu_link_atts', 10, 3 );

还有一种最简单的

激活方法如下:在functions.php文件中加入

if(function_exists('register_nav_menus')){  
  
register_nav_menus(  
array(  
'header-menu' => __( '导航自定义菜单' ),  
'footer-menu' => __( '页角自定义菜单' ),  
'sider-menu' => __('侧边栏菜单')  
)  
);  
}  

调用

<?php wp_nav_menu(  
array(  
'theme_location'  => '' //指定显示的导航名,如果没有设置,则显示第一个  
'menu'            => 'header-menu',  
'container'       => 'nav', //最外层容器标签名  
'container_class' => 'primary', //最外层容器class名  
'container_id'    => '',//最外层容器id值  
'menu_class'      => 'sf-menu', //ul标签class  
'menu_id'         => 'topnav',//ul标签id  
'echo'            => true,//是否打印,默认是true,如果想将导航的代码作为赋值使用,可设置为false  
'fallback_cb'     => 'wp_page_menu',//备用的导航菜单函数,用于没有在后台设置导航时调用  
'before'          => '',//显示在导航a标签之前  
'after'           => '',//显示在导航a标签之后  
'link_before'     => '',//显示在导航链接名之后  
'link_after'      => '',//显示在导航链接名之前  
'items_wrap'      => '<ul id="%1$s">%3$s</ul>',  
'depth'           => 0,////显示的菜单层数,默认0,0是显示所有层  
'walker'          => ''// //调用一个对象定义显示导航菜单 ));   
?>  

根据是否登录生成不同该菜单栏

<?php  
if ( is_user_logged_in() ) {  
     wp_nav_menu( array( 'theme_location' => 'logged-in-menu' ) );  
} else {  
     wp_nav_menu( array( 'theme_location' => 'logged-out-menu' ) );  
}  
?>  

移除菜单栏

<?php  
function my_wp_nav_menu_args( $args = '' )  
{  
    $args['container'] = false;  
    return $args;  
} // function  
  
add_filter( 'wp_nav_menu_args', 'my_wp_nav_menu_args' );  
?>  

原文链接:https://www.baijiascw.com/25581.html,转载请注明出处。

0

评论0

站内大部分资源收集于网络,若侵犯了您的合法权益,请联系我们删除! 心愿单
没有账号? 注册  忘记密码?

社交账号快速登录