Dtabs – wordpress导航栏下拉菜单插件使用方法与教程-淘宝格子铺免费引流

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

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

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

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

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

1、首先下载Dtabs插件

• 1、下载：Dtabs插件下载地址

• 2、官网：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(); 
} 
?>

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

二、Dtabs插件相关设置

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

2、例如把部落添加到导航中，可以这样设置：

3、Tab name是设置你要显示的标题，如上面设置为，那么在导航栏就会显示栏目。

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

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

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

8、在下面的“css”栏中你需要将：Automatic CSS generation勾选，然后如果选择“Use default”是不会产生下拉菜单的样式。

9、择“Try layered menu css”则是可以显示下拉菜的，这个依据个人喜好设置。

10、另外Use class=tabbar instead of id=tabbar选项，如果你想在你的wordrpess博客中设置两个以上的导航栏的话，可以勾选它。

11、只是设置一个的话，就没有这个必要。这个选项的作用就是将两个以上的导航栏区别开来，从而分别为导航栏设置不同的css。

12、设置完成css后，点击“update css setting”按钮，保存。现在你可以打开你的wordpress博客，一个漂亮的拥有下拉式菜单的导航栏已经出现了。

13、，也可以自定义你的css样式，这样可以让Dtabs导航栏与你的主题相适宜。

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

1、部分情况下Dtabs是兼容所有的wordpress主题的，不过也发现了Dtabs插件一个漏洞，就是不支持中文分类名。

2、一般情况下，如果选择“category”作为“tab type”的话，假如你的分类中有一个mianfei的类别，那么生成的代码如下：

<li class=tab 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 class=dmenu id=mianfei_menu onmouseover=showmenu(mianfei_menu,mianfei_button); onmouseout=hidemenu(mianfei_menu);>

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

4、你可以发现Dtabs其实是无法正常将中文分类名正常转化的，这里将中文转化成了一条横线来代替。

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

5、样就造成一个问题：当你的鼠标点击到导航栏中的分类栏目的时候，出现的下拉菜单也就可能不是你的鼠标指向的分类，而是导航栏第一个分类目录。

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

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

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

2、把你的分类中文名改成为汉字数目不相等的的名称。

3、如将免费代理改成免费的代理，这样Dtabs生成的横线是不一样的。

4、你的鼠标移动到免费的代理时，就不会像上面所说的出现网络教程的下拉菜单了。

5、当然，上面只是在安装和使用Dtabs插件时候遇到的问题，不一定具有普遍性。

6、但是如果你也遇到了像上面的问题话，可以参考上面提到的解决问题的办法。