手动修改实现wordpress博客导航栏子分类下拉菜单显示
现在很多人从网上下载了一些不错的wordpress主题,安装后却发现了不少的问题。这倒不是说主题不好,而是不同人的不同需要,有的时候一个再优秀的wordpress主题是无法满足所有人的需要的。
比如你准备做一个很大型的网站 ,你的文章分类就会有很多了,每个分类下面还有五六个子分类,在导航栏就会无法全部放下,当然也完全也没有这个必要。
解决这个问题比较的方法就是wordpress博客实现子分类用下拉菜单显示,当你的鼠标移到导航栏的时候,就会出现下来菜单,显示的是该分类的子分类。今天免费资源部落就为大家介绍一个手动修改wordpress博客代码来实现导航栏下拉菜单显示的方法。
首先声明这个方法比较地“土”,使用这个方法你不需要去懂得wordpress复杂的函数调用,只需要要懂得基本的html知识就可以使用了,适合新手来使用。
1、Wordpress 输出分类导航链接的函数是:<?php wp_list_categories('orderby=id&hide_empty=0&title_li='); ?>,输入的页面形式就会如下演示这样了:
<li><a href="/category/freekongjian/">免费空间</a></li>
<li><a href="/category/itteaching/">免费教程</a></li>
<li><a href="/category/freedomain/">免费域名</a></li>
<li><a href="/category/freemail/">免费d</a></li>
2、而我们要实现的页面显示样式如下:
<li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)">
<a href="/category/freekongjian/">免费空间</a>
<ul>
<li><a href="/tag/mianfeiphpkongjian/">免费php空间</a></li>
<li><a href="/tag/mianfeiaspkongjian/">免费asp空间</a></li>
<li><a href="/tag/mianfeijingtai/">免费静态空间</a></li>
</ul>
</li>
3、所以我们采用的方法就是在wordpress调用header()函数时候,先调用实现下拉菜单的javascript代码,然后直接输出导航栏的分类栏目。
首先你需要在你的header()文件中插入以下javascript代码:
<script type="text/javascript">
sfHover = function()
{ var sfEls = document.getElementById("nav").getElementsByTagName("LI"); for (var i=0; i<sfEls.length; i++)
{ sfEls[i].onmouseover=function() { this.className+=" sfhover"; } sfEls[i].onmouseout=function()
{ this.className=this.className.replace(new RegExp(" sfhover\\b"), ""); } } }
if (window.attachEvent) window.attachEvent("onload", sfHover); </script>
这段代码的功能就是实现鼠标移动到导航栏中的分类目录时立即弹出下拉菜单选项。
4、修改输出分类导航链接的函数。例如:你可以改成下面的演示:
<?php wp_list_categories('orderby=id&depth=2&hide_empty=0&title_li='); ?>
请注意这里“depth=2”参数的作用就是用于控制输出导航栏的下拉菜单,2代表着输出你分类中一层子分类,如果你把它改成3,则表示输出你的两层子分类,大家可以依次来推。
5、将head()函数修改完毕后,剩下的工作就是修改css样式了。下面的css代码是用来控制子菜单的隐藏和显示的,这个你是一定要加上去的,否则就显示不出来效果了。
#nav li:hover ul ul, #nav li.sfhover ul ul { left: -999em; } #nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul { left: auto;
其他的css样式你可以参考你的wordpress主题来进行相应的颜色、间距等改变。
您或许对下面这些文章有兴趣: 本月吐槽辛苦排行榜
-
很不错的教程,正好解决了我的wordpress导航栏下拉菜单问题,学习了
[回复] -
好文章,理解起来比较简单!已转帖:https://www.wpcode.org/topic/34
[回复] -
好文章,赞一个。
[回复] -
@支持, 很详细的教程
[回复] -
学习了 找的就是这个
[回复] -
很好的方法,正好用得上。
[回复] -
代码添加要根据每一个人的主题不同而不同,有的主题将导航栏放在index.php当中,有的主题将导航栏放在header.php当中。所以你要查看一下你的导航栏代码原来放在哪一个文件,然后进行替换。
如果还有问题,欢迎加我的QQ:798558110.还有QQ群:140917087[回复] -
网站不错! 求连接交互
[回复] -
这个方法不知道可行不,晚上求证,希望可以。
[回复] -
网站做的不错,今天正好用到,辛苦了
[回复]