太闲了,就改了一下导航栏,使它支持wordpress自带的自定义菜单,以后修改菜单的功夫也都省了。

以前大家在弄导航栏的时候是不是都在用那个页面来做导航栏菜单呢? 想改为链接就用插件将那个页面重定向另一个网址。不过这样的方法也太扯了,花了好几个步骤才弄好那么一个链接。何不修改主题致使支持自带的自定义菜单功能呢,要添加个链接或什么页面的直接按添加即可,再也不用重定向或修改代码了。
20130819023643

折腾开始

主题要支持wp_nav_menu() 函数,就要在functions.php下加入register_nav_menus():注册自定义菜单;

//自定义菜单
if(function_exists('register_nav_menus')){
register_nav_menus(
array(
'header-menu' => __( '导航自定义菜单' ), //修改为自定义菜单的名称
// 还可以在这里添加一些菜单 显示在其他位置
//footer-menu=>__( '页面底部自定义菜单' ),
)
);
}

添加后可以在后台外观,菜单 下看到有一款主题支持自定义菜单,在此就需要创建个菜单了,这里就不详细说了都很容易。要注意的就是这里保存的菜单名字要和上面代码的名字一样。默认是可以创建多级的,当然这个还得要你主题本身的jq或js支持多级菜单。

20130819023517

接着找到主题原来的菜单栏的位置,像inove默认的菜单就在templates/header.php下,把旧的替换为一下即可;

<!-- menus START -->
<?php wp_nav_menu( array('container_id' => 'menubar', 'container_class' => ' ', 'menu_id' => 'menus', 'menu_class' => 'menus', 'theme_location' => 'header-menu') ); ?>
<!-- menus END -->

上面的这些代码的作用是定义id类和class样式的,也是需要按需修改的,修改为跟原来css对应就行了,下面附带一个表需要的项目就自己添加上去就行了。

<?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' => ''// //调用一个对象定义显示导航菜单 ));
?>

 

折腾结束

到此就大功告成了,修改后自定义菜单的CSS也是有变化的,通过自定义菜单出来的idclass都可能与你主题本来的那个css不一样,只需要自己修改调整即可。至于那个多级菜单也需要默认JQ的支持,如果本来你的主题就支持的,那自定义生成的二级菜单只需要改下id类和class样式就差不多了。

Last modification:June 25, 2021
如果解决了你的困扰, 赏杯咖啡吧!
正文字体: 苍耳字库(屏幕显示字体)·苍耳今楷