很多WordPress主题需要在侧边栏高亮加粗显示当前分类,比如WordPress企业主题做的企业网站.
下面来示范下:
<div id="fltop" style="display:none;"> <?php the_category(', ') ?> </div>
(方法见:WordPress主题开发教程:分类页面侧边栏调用当前栏目子分类目录)
<ul id="sidebar"> …… </ul>
注意是id
原理: 使用JS获取所属分类的A标签URL和列表所有A标签的URL,并且进行对比判断,如果包含就给A标签添加一个class类:current-category;
<script> //代码来源:WordPress主题开发教程 https://www.wpyi.com/ //获取分类A标签和列表所有的a标签(返回节点对象) var myNav = document.getElementById("sidebar").getElementsByTagName("a"); var myURL = document.getElementById("fltop").getElementsByTagName("a"); //循环div下面所有的链接, for(var i=0;i<myNav.length;i++){ //获取每一个a标签的herf属性 var links = myNav[i].getAttribute("href"); var myURL2 = myURL[0].getAttribute("href"); //查看div下的链接是否包含当前窗口,如果存在,则给其添加样式 if(myURL2.indexOf(links) != -1){ myNav[i].className="current-category"; } } </script>
在WordPress主题的style.css给.current-category设置样式.
完成了.