填写您的邮件地址,订阅我们的精彩内容:

WordPress后台菜单实现导航下拉菜单详解

有朋友问到wordpress博客某些主题怎么实现后台菜单设置为前台下拉菜单的问题,本文试图通过几个层次通过实例实现利用wordpress后台菜单功能为博客添加二级菜单的导航。

1、让你的博客支持后台菜单功能

在首页置顶文章《wordpress模板文件结构超详解中》我已经提及了wordpress菜单及导航的相关信息,本文则较为详细和系统的讲解该问题。

一 个新制作的wordpress主题,如果没有经过申明,后台外观》菜单功能是无法进行菜单制作的,wordpress2.9之后的博客拥有该功能,但之前 的很多主题并没有进行相关的声明,也没有使用菜单函数,因此根本不能使用新版的该功能。wordpress3.0默认主题tweentyten拥有了该功 能,我们才恍然大悟。

你需要在主题文件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);
}

你即可进入后台发现菜单功能已经使用了,并且进入之后你发现右侧已经拥有两个选项卡“主导航”和“顶部导航”了。

wordpress中如果需要使用菜单功能,需要用register_nav_menu()函 数申明,即上面代码中的第一个if语句,这是必须的。而第二个if语句则是增加菜单区域(后文讲到),是可选的,一般主题制作中并不使用第二个if语句, 而是通过后台添加。而我们在主题中调用菜单,则需要用到上文中声明的register_nav_menu()的第一个参数,如 mainmenu,topmenu。

2、后台设置你的菜单及wordpress中菜单机制

前文已经让你的主题支持菜单功能,接下来你就要设置你的菜单,以方便你之后在主题中调用。

进入后台菜单功能,右侧为上文代码第二个if语句的效果,左侧顶部导航选项为第一个if语句的效果,如果你只申明了一个register_nav_menu(),只会出现一个下拉框,申请几个出现几个下拉框,而在主题中调用的正是这个下拉框对应的值,而非右侧的菜单区域。

菜 单区域是我的一个称法,即一组菜单选项组成一个菜单,这个菜单可以被选为导航的值,我称为菜单区域。说得明白些就是我在后台添加一个名称为“导航条”的菜 单,即为菜单区域。菜单区域包含了若干可以拉动为层级布置的选项,这些选项可以从左侧的页面、分类中导入,布置好你的菜单层级之后点击保存菜单,这样你的 一个菜单区域即完成了,在左侧标题为“主导航”的导航的下拉框中选择它,然后保存。

wordpress中菜单的机制并非如我们一般的cms 中设置导航即可,而是需要有一个导航下拉选择,再保存的过程。在数据库中,每一个菜单的选项被添加为一条post记录,而每一个菜单也作为一条记录,每一 个导航也是如此,当我们将很多菜单选项在菜单区域中拖动时,数据库中的选项记录也会有属性的变化,当我们让某个菜单作为导航时,数据库中也会重新更新。因 此,我们要理解的是,在后台菜单设置中,右侧对某个选项卡(菜单区域)进行修改保存时,只是在对导航的备选元素进行修改,如果我们不让该菜单作为导航,那 么这些修改是不能在前台体现出来的。

实例:按照上文代码操作之后,我们第一次进入后台,在后台已经拥有“主导航”“顶部导航”两个菜单区域 (菜单、选项卡),我们选择“主导航”然后对其内的菜单拖动进行设置和修改,然后保存。前台导航没有任何变化。(前提是主题已经使用的对应的导航调用,后 文讲到)我们在左侧的“主导航”导航下拉中选择“主导航”,保存之后在看前台主导航,是否变化出现了。我们在“顶部导航”导航下拉菜单中选择“主导航”, 再保存,前台是否在顶部导航的地方也有了变化!这里你可不要将菜单选项卡中的“主导航”和左侧导航下拉上的“主导航”混为一谈哦,你可以通过修改上文代码 中的中文名称,来获悉他们将会引起哪里的变化。

到目前,你已经尝试了后台菜单功能的实现了,你需要理解:导航就像一个盒子,菜单区域就像小球,小球可以放在不同的盒子,盒子可以装不同的小球,但盒子每次只能装一个球。而菜单选项就像小球上面的很多不同颜色的斑点,它们链接到不同的页面。

3、前台调用已经设置好的菜单作为导航条

通过上面实例的操作之后,我们已经拥有了一个主导航,现在我们要在前台(主题中)调用这个主导航。

我们只需用到wp_nav_menu()函数,该函数将帮助我们调用一个导航[后台菜单设置中左侧顶部下拉框上的文字],上文中,我们让“主导航”这个菜单放置于“主导航”导航中,接下来我们就来调用“主导航”(mainmenu,上文中第一个if语句定义的导航ID)这个导航。

在你的主题模板中使用以下代码

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

甚至

<?php wp_nav_menu(‘theme_location=mainmenu’); ?>

即可实现调用,而我们把mainmenu改为topmenu,就将调用topmenu这个导航。wp_nav_menu()函数提供了一系列的函数参数,让我们在获得导航时有充分的控制。请看开发文档http://codex.wordpress.org/Function_Reference/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’????????? => );
?>

该函数的参数你可以尽情尝试,就不再赘述。

前台的呈现还包括小工具呈现,这在小工具设置中可以轻松实现,也不多讲。

4、让你的wordpress导航漂亮起来:基于jquery的wordpress经典下拉菜单

请看文章:基于jquery的wordpress经典下拉菜单

wordpress 的导航呈现的下拉菜单比较规律,即 用<ul><li><ul><li><ul><li></li>< /ul></li></ul></li></ul>这种列表嵌套模式,因此使用css控制的时候 还是比较容易的,不过在使用js进行操作时还是需要考虑诸如li的层级问题等。另外,当我们进入某个分类、某个页面、某篇文章时,它所对应的菜单会加上 current-XX属性。

5、总结:wordpress导航机制再回顾

wordpress导航机制分为:规定层+使用 层。我们在规定时确定在使用层调用的ID,而在使用层我们调用这个规定。而这个ID的规定和调用与后台的设置却没有任何关系,只要掌握了 wordpress的register_nav_menu和wp_nav_menu函数,wordpress导航菜单就基本不成问题了。

下面我简单说几句