给wordpress添加导航,实现后台的生成菜单调用,并在前台显示

正在很努力的加载中...

最近发现一款主题,很不错,但是接手之后,发现好多功能都不能实现,于是我通过查找资料,自己千万次测试,终于实现了一些功能。

这款主题可能是在wordpress3.0之前制作的吧,由于设置比较费力,不能在后台直接添加导航分类,也不能在后台添加友情链接,更不能实现下拉菜单以及cms模块分类,只能查找代码在本地一一手动添加ID和分类菜单标签以及链接,由于好多都是原作者之前的链接和分类标签,导致主题实现很费力。费时费力不说,以后想更换菜单还得改代码,真麻烦。鉴于我迫切需要这样一款cms类型的主题,网上用这款的人还很少,基本上没有,我估计是这款主题功能不完善吧。

经过在本地搭建php环境,测试了一遍又一遍,初步实现了后台生成菜单调用在前台显示,也实现了后台调用友情链接。实现了一些比如说前台登陆,登陆跳转,通过修改CSS修复了一些错位等等的问题,至于分类ID后台直接设置的功能暂时还不能很快实现,等我以后慢慢再研究吧。等主题基本可用的时候欢迎大家围观我的新站。这里就不献丑了。

这篇文章简单介绍一下我实现导航菜单的一些细节,由于网上的教程都很繁琐不能弄明白,我简单介绍一下,本人新手,就不在大侠面前班门弄斧了,只说一下经验。给wordpress添加导航,实现后台的生成菜单调用,并在前台显示

如果你的主题是很早以前的版本,不能实现后台直接设置调用,或者你想要给你的主题新添加导航的话,我这里或许可以给你一些启发。

你需要接触到的是WordPress 3.0 的wp_nav_menu函数,这个函数主要用途是通过该方法,实现后台的生成菜单调用,并在前台显示。即后台这个地方:给wordpress添加导航,实现后台的生成菜单调用,并在前台显示

使用该功能之前,必须激活主题3.0+菜单功能。

你需要在主题文件functions.php中作如下申明:

// 菜单声明
if(function_exists('register_nav_menu')){
register_nav_menu('mainmenu','主导航');
register_nav_menu('topmenu','顶部导航');
}
if (!is_nav_menu('主导航')||!is_nav_menu('顶部导航')){
$menu_id_1 = wp_create_nav_menu('主导航');
$menu_id_2 = wp_create_nav_menu('顶部导航');
wp_update_nav_menu_item($menu_id_1, 0);
wp_update_nav_menu_item($menu_id_2, 1);
}

申明之后,进入后台你就会发现菜单功能已经可以试用了,并且出现了主导航和顶部导航两个菜单。

以上代码的具体意义我就不过多说明了,相信经验丰富的你一看就知道是什么意思,鉴于是采用别人的代码,我自己也不敢妄加评说。

只是提醒大家,如果不需要添加顶部导航的话,可以把代码精简一下,我自己删减了几行,如下:

// 菜单声明
if(function_exists('register_nav_menu')){
register_nav_menu('mainmenu','主导航');
}
if (!is_nav_menu('主导航')){
$menu_id_1 = wp_create_nav_menu('主导航');
wp_update_nav_menu_item($menu_id_1, 0);
}

这样的话,就只剩下“主导航”菜单了。

接下来你就可以在主导航里添加你想要的分类或者页面了。别急,这还不能在前台显示,要想在前台显示,你还需要在要在前台(主题中)调用这个主导航。

在你的主题模板中使用以下代码(在index.php挥着herder.php  footer.php中,由于我想要弄顶部的大导航,所以我是添加在herder.php里。

<?php wp_nav_menu('menu=主导航&theme_location=mainmenu'); ?>

或者

<?php wp_nav_menu('theme_location=mainmenu'); ?>

即可实现调用,而我们把mainmenu改为topmenu,就将调用topmenu这个导航。wp_nav_menu()函数提供了一系列的函数参数,让我们在获得导航时有充分的控制。函数如下:

<?php $defaults = array(
'theme_location'  => ,
'menu'            => ,
'container'       => 'div',
'container_class' => 'menu-{menu slug}-container',
'container_id'    => ,
'menu_class'      => 'menu',
'menu_id'         => ,
'echo'            => true,
'fallback_cb'     => 'wp_page_menu',
'before'          => ,
'after'           => ,
'link_before'     => ,
'link_after'      => ,
'items_wrap'      => '<ul id=\"%1$s\" class=\"%2$s\">%3$s</ul>',
'depth'           => 0,
'walker'          => );
?>
<?php wp_nav_menu( $defaults ); ?>

这个函数是官方给出的,用于设置导航显示出的效果,我通过谷歌浏览器的翻译功能,仔细研究了一下。结合我的主题本身给出的参数,就在以上的参数种选择性的截取了几条加在了我的herder.php中。

以下做简单翻译,当然我不懂的就不翻译了:

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

根据我的导航条需要,由于一些参数我的herder.php里原先就有,于是我截取了如下内容:

<?php $defaults = array(
'theme_location' => 'mainmenu',
'fallback_cb' => 'wp_page_menu',
'link_before' => '<span>',
'link_after' => '</span>',
'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>',
'depth' => 0,
); ?>

<?php wp_nav_menu( $defaults ); ?>

最终我的导航部分的所有代码如下:

<div class="hd-box">
<div class="hd-main">
<ul id="hd-nav">
<li class="hp"><a href="<?php echo get_option('siteurl'); ?>"><span>首页</span></a></li>
<?php $defaults = array(
'theme_location' => 'mainmenu',
'fallback_cb' => 'wp_page_menu',
'link_before' => '<span>',
'link_after' => '</span>',
'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>',
'depth' => 0,
); ?>

<?php wp_nav_menu( $defaults ); ?>

</ul>
</div>
</div>

通过以上设置再加上CSS的控制,导航部分基本可以显示正确的效果了,由于我没有做IE6的测试,不敢保证能兼容ie6等一些冷门浏览器。我也不是很懂CSS,最近几天才接触,只会一些位置以及颜色的设置,所以也就不班门弄斧了。

以上设置只能显示横排一级导航,二级导航显示会错位,还需要设置滑动的下拉菜单。下拉菜单的设置我就不讲了,大家在网上都可以一清二楚。

写这篇文章的目的不是为了重复,而是更详细的说明应该怎么设置,对于在网上盲目找教程的同志们能有一些帮助吧。把经验分享给大家也是我的初衷。

以后我还会慢慢总结一些更详细的教程。这里先告一段落。谢谢大家围观。

文章出自:http://www.zuifengyun.com/build-menu-calls-wordpress-add-navigation-background-in-the-foreground.html 版权所有,除注明外皆为原创。文章仅为作者个人观点,不代表醉风云立场。

正在很努力的加载中...

关于本文作者:HuiSir

建站爱好者,互联网评论家,网页视觉设计师

  1. 看起来蛮麻烦的,还不如手动折腾一个,不在后台修改也没什么