Dtabs – wordpress导航栏下拉菜单插件使用方法与教程

很多人喜欢将自己的wordpress博客的导航栏打扮成拥有下拉菜单的导航栏，一来可以让浏览者更快地找到自己的需要的东西，另外也可以增加用户的体验度，为你的wordpress博客赢来不少的回头客。

今天免费资源部落介绍的Dtabs插件就可以帮助你实现wordpress导航栏下拉菜单的愿望。Dtabs功能非常强大，兼容最新wordpress版本，并且样式兼容大部分主题,实现的下拉导航可以兼容不同的浏览器。

使用Dtabs你可以将你的wordpress页面的分类、文章、标签、存档、书签设置为导航，另外如果你想将其它的链接也添加到你的博客导航栏话，可以使用Dtabs自定义链接导航栏的功能。

使用Dtabs导航栏你也可以让你的导航栏实现平铺或者下拉方式显示，还可以实现动态Ajax效果。下面是免费资源部落重点要介绍的使用方法，如果你是第一次用Dtabs插件的话，建议按照下面的方法一步一步去尝试。

Dtabs – wordpress导航栏下拉菜单插件使用方法与教程：

1、首先下载Dtabs插件：http://wordpress.org/extend/plugins/dtabs/ Dtabs

2、下载完Dtabs插件后上传到plugin文件中，进行“插件”选项中激活。

3、添加调用Dtabs插件代码。免费资源部落建议你添加到header文件中，如果你要将导航栏放在其它的位置，你也可以放在如siderbar、page等文件中，代码如下:

<?php

if (function_exists(‘dtab_list_tabs’)) {

dtab_list_tabs();

}

?>

注意如果你上面这段代码直接复制到你的header文件中时，请检查php语句有没有错误，一般是 ‘ 号会变成中文的 ’，如果有这种情况，请将其改正过来。

4、Dtabs插件相关设置。

Tab Numbe这个设置导航栏目的顺序。Tab type是选择导航的分类，这里面几乎包括了wordpress所有的内容：页面、分类、链接、文章等，另外还一个是other，这个你可以自定义链接。

例如把免费资源部落添加到导航中，可以这样设置：

Tab name是设置你要显示的标题，如上面设置为免费资源部落，那么在导航栏就会显示免费资源部落栏目。

5、Tab Description，这是导航栏目的说明，当鼠标移动到导航栏目时就会出你填写的说明文字。

Show menu on hover，意思是说让导航栏目是否以下拉菜单形式显示，这个依据个人喜好来设置。

6、设置完成后，点击“save tab”保存设置，现在要设置导航栏的css。

在下面的“css”栏中你需要将：Automatic CSS generation勾选，然后如果选择“Use default”是不会产生下拉菜单的样式，选择“Try layered menu css”则是可以显示下拉菜的，这个依据个人喜好设置。

7、另外Use class=”tabbar” instead of id=”tabbar”选项，如果你想在你的wordrpess博客中设置两个以上的导航栏的话，可以勾选它，如果只是设置一个的话，就没有这个必要。这个选项的作用就是将两个以上的导航栏区别开来，从而分别为导航栏设置不同的css。

8、设置完成css后，点击“update css setting”按钮，保存。现在你可以打开你的wordpress博客，一个漂亮的拥有下拉式菜单的导航栏已经出现了。另外，也可以自定义你的css样式，这样可以让Dtabs导航栏与你的主题相适宜。

这里有一些css的示例，大家可以借鉴一下：http://dynamictangentconceptions.dtcnet.co.uk/downloads/wp-plugins/dtabs-dynamic-tabs-wordpress-plugin/#eg

9、注意：Dtabs实现导航栏下拉菜单失败和错误以及解决的办法

大部分情况下Dtabs是兼容所有的wordpress主题的，不过免费资源部落也发现了Dtabs插件一个漏洞，就是不支持中文分类名。一般情况下，如果选择“category”作为“tab type”的话，假如你的分类中有一个mianfei的类别，那么生成的代码如下：

<li id=”mianfei_button” onmouseover=”showmenu(‘mianfei_menu’,‘mianfei_button’);” onmouseout=”hidemenu(‘mianfei_menu’);”><a href=”http://localhost/wordpress/?cat=8″ title=”mianfeikongjian” id=”mianfei_tab”>免费空间</a><div id=”mianfei_menu” onmouseover=”showmenu(‘mianfei_menu’,’mianfei_button’);” onmouseout=”hidemenu(‘mianfei_menu’);”>

注意‘mianfei_menu’就是你的分类名，由于这是英文的，Dtabs插件可以正常生成，将分类名改变中文的话，就会出现下面的情况：

<li id=”_____________button” onmouseover=”showmenu(‘_____________menu’,’_____________button’);” onmouseout=”hidemenu(‘_____________menu’);”><a href=”http://localhost/wordpress/?cat=3″ title=”" id=”_____________tab”>网络教程</a><div id=”_____________menu” onmouseover=”showmenu(‘_____________menu’,’_____________button’);” onmouseout=”hidemenu(‘_____________menu’);”>

你可以发现Dtabs其实是无法正常将中文分类名正常转化的，这里将中文转化成了一条横线来代替。这样就造成一个问题：当你的鼠标点击到导航栏中的分类栏目的时候，出现的下拉菜单也就可能不是你的鼠标指向的分类，而是导航栏第一个分类目录。

例如免费资源部落在使用的时候，就发现当我点击免费代理的时候，出现的下拉菜单还是网络教程的（注意看我的鼠标指向的地方是免费代理，出现的红色变化）：

10、针对Dtabs不支持中文分类名的解决办法：

1、把分类名改成英文或者拼音。

2、把你的分类中文名改成为汉字数目不相等的的名称，例如将免费代理改成免费的代理，这样Dtabs生成的横线是不一样的，当你的鼠标移动到免费的代理时，就不会像上面所说的出现网络教程的下拉菜单了。

当然，上面只是免费资源部落在安装和使用Dtabs插件时候遇到的问题，不一定具有普遍性，但是如果你也遇到了像上面的问题话，可以参考上面提到的解决问题的办法。

文章出自：免费资源部落 http://www.freehao123.com/dtabs/.

一位被部落所景仰的联盟战士-幻彩Nexus One 战斗力解析以及生成篇