WPINK CMS 主题是WPYOU最新发布的一款Wordpress CMS主题, 主题以红色为主色, 主题预留了多个符合Google AdSense尺寸的广告位, 方便嵌入广告. 但是这个主题的一个遗憾就是没有内置下拉分类导航模式, 这对于CMS主题来说是一个不大不小缺陷.

CMS网站可以容纳较多的内容和分类, 所以下拉导航菜单是不可缺少的.

WordPress可以通过参数调出多级菜单, 只要配合相应的CSS, WordPress也可以设计出媲美其他CMS程序的多级导航菜单.

既然Wordpress已经支持这种导航模式, 我们就可以为WPINK CMS主题打造和Ei2U.COM一样的下拉二级分类导航.

达到这种效果只需要三步,

首先, 打开header.php

找到

<?php echo preg_replace('@\<li([^>]*)>\<a([^>]*)>(.*?)\<\/a>@i', '<li$1><a$2><span>$3</span></a>', wp_list_categories('echo=0&orderby=id&title_li=&depth=1')); ?>

替换成

<?php echo preg_replace('@\<li([^>]*)>\<a([^>]*)>(.*?)\<\/a>@i', '<li$1><a$2><span>$3</span></a>', wp_list_categories('echo=0&orderby=id&title_li=&depth=2')); ?>

完成第一步, 现在打开style.css

找到/* Main Navigation */注释, 将注释下的所有样式替换为

/* Main Navigation */

.navigation{ padding:0px 15px; width:930px; height:40px;}

.navigation li{ position:relative;float:left;z-index:2; height:26px; margin:8px 0px 6px; font-size:14px; color:#DDD;}

.navigation li a:link, .navigation li a:visited{ float:left; margin:0px 2px; padding-left:10px; height:26px; line-height:25px; color:#DDD; text-decoration:none; cursor:pointer; display:block;}

.navigation li a span{ padding:1px 8px 6px 0px; display:inline-block;}

.navigation li ul {position:absolute;top:32px;left:0px;display:none;z-index:1000;width:150px;opacity:.90;filter:alpha(opacity=90);-moz-opacity:0.9;background:#4D4D4D;}

.navigation li:hover ul {display:block;}

.navigation li ul li {list-style:none;font-size:12px;float:left;clear:both;}

.navigation li ul li a {color:#ddd;width:125px;line-height:2.5em;text-decoration:none;display:block;border-bottom:1px solid #1A2736;text-indent:0;height:auto;padding-left:10px;padding-right:10px;}

最后一步, 这一步是为了让IE6或者IE5.5这些低版本的浏览器支持hover类, 如果不打算添加对低版本IE的支持, 可以省略这一步.

Ei2U推荐header上添加了对所有版本号小于IE7的IE浏览器会自动加载这段来达到我们的效果. 效率上会比用js技术更迅速及高效!

打开记事本, 将下面的代码

<public:attach event="ondocumentready" onevent="CSSHover()" />
<script>
/**
* Whatever:hover - V3.11
* http://www.xs4all.nl/~peterned/
* 
* Copyright (c) 2009 Peter Nederlof
* Licensed under the LGPL license
* http://creativecommons.org/licenses/LGPL/2.1
*/
window.CSSHover=(function(){var m=/(^|\s)((([^a]([^ ]+)?)|(a([^#.][^ ]+)+)):(hover|active|focus))/i;var n=/(.*?)\:(hover|active|focus)/i;var o=/[^:]+:([a-z\-]+).*/i;var p=/(\.([a-z0-9_\-]+):[a-z]+)|(:[a-z]+)/gi;var q=/\.([a-z0-9_\-]*on(hover|active|focus))/i;var s=/msie (5|6|7)/i;var t=/backcompat/i;var u={index:0,list:['text-kashida','text-kashida-space','text-justify'],get:function(){return this.list[(this.index++)%this.list.length]}};var v=function(c){return c.replace(/-(.)/mg,function(a,b){return b.toUpperCase()})};var w={elements:[],callbacks:{},init:function(){if(!s.test(navigator.userAgent)&&!t.test(window.document.compatMode)){return}var a=window.document.styleSheets,l=a.length;for(var i=0;i<l;i++){this.parseStylesheet(a[i])}},parseStylesheet:function(a){if(a.imports){try{var b=a.imports;var l=b.length;for(var i=0;i<l;i++){this.parseStylesheet(a.imports[i])}}catch(securityException){}}try{var c=a.rules;var r=c.length;for(var j=0;j<r;j++){this.parseCSSRule(c[j],a)}}catch(someException){}},parseCSSRule:function(a,b){var c=a.selectorText;if(m.test(c)){var d=a.style.cssText;var e=n.exec(c)[1];var f=c.replace(o,'on$1');var g=c.replace(p,'.$2'+f);var h=q.exec(g)[1];var i=e+h;if(!this.callbacks[i]){var j=u.get();var k=v(j);b.addRule(e,j+':expression(CSSHover(this, "'+f+'", "'+h+'", "'+k+'"))');this.callbacks[i]=true}b.addRule(g,d)}},patch:function(a,b,c,d){try{var f=a.parentNode.currentStyle[d];a.style[d]=f}catch(e){a.runtimeStyle[d]=''}if(!a.csshover){a.csshover=[]}if(!a.csshover[c]){a.csshover[c]=true;var g=new CSSHoverElement(a,b,c);this.elements.push(g)}return b},unload:function(){try{var l=this.elements.length;for(var i=0;i<l;i++){this.elements[i].unload()}this.elements=[];this.callbacks={}}catch(e){}}};var x={onhover:{activator:'onmouseenter',deactivator:'onmouseleave'},onactive:{activator:'onmousedown',deactivator:'onmouseup'},onfocus:{activator:'onfocus',deactivator:'onblur'}};function CSSHoverElement(a,b,c){this.node=a;this.type=b;var d=new RegExp('(^|\\s)'+c+'(\\s|$)','g');this.activator=function(){a.className+=' '+c};this.deactivator=function(){a.className=a.className.replace(d,' ')};a.attachEvent(x[b].activator,this.activator);a.attachEvent(x[b].deactivator,this.deactivator)}CSSHoverElement.prototype={unload:function(){this.node.detachEvent(x[this.type].activator,this.activator);this.node.detachEvent(x[this.type].deactivator,this.deactivator);this.activator=null;this.deactivator=null;this.node=null;this.type=null}};window.attachEvent('onbeforeunload',function(){w.unload()});return function(a,b,c,d){if(a){return w.patch(a,b,c,d)}else{w.init()}}})();
</script>

保存为"csshover.htc", 注意后缀名为htc. 上传到WPINK主题目录的js目录上, 然后在header.php上添加

<!--[if lt IE 7]>
<style type="text/css">
body   {behavior:url("<?php bloginfo('template_url');   ?>/js/csshover.htc");}
</style>
<![endif]-->

这样就完成了! 刷新一下主题看看效果吧! 有什么问题可以在Ei2U留言交流.