1. /*SidebarTabsAd*/  
2. #cwpad_box{width:100%;text-align:center}   
3. #cwpad_box ul, #cwpad_box dd, #cwpad_box tt{   
4.     margin:0px;   
5.     padding:0px;   
6.     float:left;   
7.     list-style: none;   
8. }   
9. #cwpad_box{   
10.     width:313px;/*250px+(n-1)*21px*/  
11.     height:250px;   
12.     border-left: 1px solid #740a20;   
13. }   
14. #cwpad_box dd{   
15.     width:21px;   
16.     height:250px;   
17.     overflow:hidden;   
18.     position:relative;   
19. }   
20. #cwpad_box dd.hove{   
21.     width:250px;   
22.     text-align:rightright;   
23. }   
24. #cwpad_box dd tt{   
25.     width:20px;   
26.     height:250px;   
27.     top:0px;   
28.     left:0px;   
29.     color:#fff;   
30.     cursor:pointer;   
31.     text-align:center;   
32.     padding:20px 0 0 0;   
33.     background:#b9000d;   
34.     position:absolute;   
35.     border-right:1px solid #740a20;   
36. }   
37. #cwpad_box dd tt.hove{   
38.     background:#620317;   
39. }  

1. <script type="text/javascript">   
2. function myAddEvent(obj, sEvent, fn){   
3.     return obj.attachEvent ? obj.attachEvent('on' + sEvent, fn) : obj.addEventListener(sEvent, fn, false);   
4. }   
5. function Class(oParent, sClass){   
6.     var aElem = oParent.getElementsByTagName('*');   
7.     var aClass = [];   
8.     var i = 0;   
9.     for(i=0;i<aElem.length;i++)if(aElem[i].className == sClass)aClass.push(aElem[i]);   
10.     return aClass;   
11. };   
12. function css(obj, attr, value){   
13.     if(arguments.length == 2){   
14.         var style = obj.style,   
15.             currentStyle = obj.currentStyle;   
16.         if(typeof attr === 'string')return currentStyle ? currentStyle[attr] : getComputedStyle(obj, false)[attr];   
17.         for(var propName in attr)propName == 'opacity' ? (style.filter = "alpha(opacity=" + attr[propName] + ")", style.opacity = attr[propName] / 100) : style[propName] = attr[propName];    
18.     }else if(arguments.length == 3){   
19.         switch(attr){   
20.             case "width":   
21.             case "height":   
22.             case "paddingTop":   
23.             case "paddingRight":   
24.             case "paddingBottom":   
25.             case "paddingLeft":   
26.             case "top":   
27.             case "right":   
28.             case "bottom":   
29.             case "left":   
30.             case "marginTop":   
31.             case "marginRigth":   
32.             case "marginBottom":   
33.             case "marginLeft":   
34.                 obj.style[attr] = value + "px";   
35.                 break;   
36.             case "opacity":   
37.                 obj.style.filter = "alpha(opacity=" + value + ")";   
38.                 obj.style.opacity = value / 100;   
39.                 break;   
40.             default:   
41.                 obj.style[attr] = value   
42.         }   
43.     }   
44. };   
45. function extend(destination, source){   
46.     for (var propName in source) destination[propName] = source[propName];   
47.     return destination   
48. };   
49. function doMove(obj, json, fnEnd){   
50.     clearInterval(obj.timer);   
51.     obj.iSpeed = 0;   
52.     fnEnd = extend({   
53.         type: "buffer",   
54.         callback: function() {}   
55.     }, fnEnd);   
56.     obj.timer = setInterval(function(){   
57.         var iCur = 0,   
58.             iStop = true;   
59.         for(var propName in json){   
60.             iCur = parseFloat(css(obj, propName));   
61.             propName == 'opacity' && (iCur = Math.round(iCur * 100));   
62.             switch(fnEnd.type){   
63.                 case 'buffer':   
64.                     obj.iSpeed = (json[propName] - iCur) / 5;   
65.                     obj.iSpeed = obj.iSpeed > 0 ? Math.ceil(obj.iSpeed) : Math.floor(obj.iSpeed);   
66.                     json[propName] == iCur || (iStop = false, css(obj, propName, iCur + obj.iSpeed));   
67.                     break;   
68.                 case 'elasticity':   
69.                     obj.iSpeed += (json[propName] - iCur) / 5;   
70.                     obj.iSpeed *= 0.75;   
71.                     Math.abs(json[propName] - iCur) <= 1 &&  Math.abs(obj.iSpeed) <= 1 ? css(obj, propName, json[propName]) : css(obj, propName, json[propName]) || (iStop = false, css(obj, propName, iCur + obj.iSpeed));   
72.                     break;   
73.                 case 'accelerate':   
74.                     obj.iSpeed = obj.iSpeed + 5;   
75.                     iCur >= json[propName] ? css(obj, propName, json[propName]) : css(obj, propName, json[propName]) || (iStop = false, css(obj, propName, iCur + obj.iSpeed));   
76.                 break;   
77.             }   
78.         }   
79.         if(iStop){   
80.             clearInterval(obj.timer);   
81.             obj.timer = null;   
82.             obj.iSpeed = 0;   
83.             fnEnd.callback();   
84.         }   
85.     },30);   
86. };   
87.   
88. window.onload = function(){   
89.     var oBox = document.getElementById('cwpad_box')   
90.     var aSpan = document.getElementsByTagName('tt');   
91.     var aLi = document.getElementsByTagName('dd');   
92.     var playtime = null;   
93.     var iNow = 0;   
94.     for(i=0;i<aSpan.length;i++){   
95.         aSpan[i].index = i;   
96.         aSpan[i].onclick = function(){   
97.             for(var len=aLi.length,i=0;i<len;i++)doMove(aLi[i], {width:21});   
98.             for(var len=aSpan.length,i=0;i<len;i++)aSpan[i].className = '';   
99.             this.className = 'hove';   
100.             doMove(this.parentNode, {width:250});   
101.             iNow = this.index;   
102.         };   
103.     }   
104.     playtime = setInterval(tab,3500);   
105.     oBox.onmouseover = function(){   
106.         clearInterval(playtime);   
107.     }   
108.     oBox.onmouseout = function(){   
109.         playtime = setInterval(tab,3500);   
110.     }   
111.     function tab(){   
112.         iNow == aLi.length-1 ? iNow = 0 : iNow++;   
113.         aSpan[iNow].onclick();   
114.     }   
115. };   
116.  </script>    

1. <div id="cwpad_box">  
2.     <ul>  
3.         <dd  class="hove">  
4.         <tt class="hove">网站设计及培训</tt>  
5.         <a href="http://suoling.net/" target=_blank title="网站设计及培训"><img src="http://fakeimg.pl/250x250/?text=Hello,A!"></a>  
6.         </dd>  
7.         <dd>  
8.         <tt>网站优化及培训</tt>  
9.         <a href="http://suoling.net/" target=_blank title="网站优化及培训"><img src="http://fakeimg.pl/250x250/?text=Hello,B!"></a>  
10.         </dd>  
11.         <dd>  
12.         <tt>网站诊断</tt>  
13.         <a href="http://suoling.net/" target=_blank title="网站诊断"><img src="http://fakeimg.pl/250x250/?text=Hello,C!"></a>  
14.         </dd>  
15.         <dd>  
16.         <tt>电子商务培训</tt>  
17.         <a href="http://suoling.net/" target=_blank title="电子商务培训"><img src="http://fakeimg.pl/250x250/?text=Hello,D!"></a>  
18.         </dd>  
19.     </ul>  
20. </div>  

1.样式表

在上面的样式表中，假设放置的是四个250px*250px的图片广告，所以250+（4-1）*21=313px。

2.javascript代码

3.示例的HTML代码

使用的是索凌网络前面介绍过的"假图"生成网站fakeimg.pl生成的"假图"。

这组代码的一个显著缺点是：不适合移动设备显示。

一、查询Wordpress某篇文章作者的全部文章或部分最新文章

1.获取当前文章作者的ID

这才是获取Wordpress当前文章作者ID的正确方式，网上到处乱传的那篇名叫“WordPress 通过文章ID获取文章标题、内容等信息”的文章里的说法是错误的，虽然是错误的，但是却被广泛的Ctrl+C然后Ctrl+V，以讹传讹，不可思议啊。

另外get_post($id)->可以获取与文章有关的许多信息，转述如下：

2.Wordpress查询文章作者的全部文章/部分文章的主要函数及输出

只在无序列表ul里输出一个列表，格式是截断的标题加上链接，查询了仅仅5篇，多了的话，没什么用，这里仅仅是测试。

二、Wordpress用户角色与权限

WordPress用户角色或者Wordpress用户权限说是从Wordpress2.0开始，逐渐的完善起来的，默认分以下几种的：

当新用户在你的Wordpress站点上注册了的时候（假设已经开启注册），他的默认角色可以在Wordpress后台-->设置-->常规页面设置。

下面的用户角色以及对应的权限能力等级对照表翻译自Wordpress官方网站，所在页面：

http://codex.wordpress.org/Roles_and_Capabilities#Capabilities

1.查询Wordpress文章作者的角色

在本文的开头，我们已经知道如何获取Wordpress某一篇文章的作者ID了，现在就来获取其角色：

管理员和编辑都能publish_posts，但是这里的判断有先后顺序，所以不用担心这个问题，这个判断是不错的！

WordPress某篇文章的作者是否有某权限的推荐函数：

这个相对简单一些，可以直接去判断，所以我再某个项目中最终使用了这个函数。参数中的$post可以是文章自身，也可以是文章ID，使用起来很方便！

2.Wordpress当前登录者的权限/权限等级

这个函数是经常被使用的，使用的是权限等级，Wordpress官方已经声明：从Wordpress3.0，已经废弃了对这个权限等级制度的支持，所以，网上到处乱飞的复制文章，谨慎对待吧！

首先设置.htaccess文件，将动态调用的参数转换为静态的HTML的URL地址，例如将在post目录下的文件，转发到根目录的wp- post.php文件中，加入的语句类似：RewriteRule ^post/([a-z0-9\-]+\.html)$ wp-post.php?$1$2

然后修改wp-post.php文件，在文件的开头加入以下PHP代码：

以下为引用的内容：

ob_start();

$qstring = isset($_SERVER["QUERY_STRING"]) ? $_SERVER["QUERY_STRING"] : "";

define("HTML_FILE", $_SERVER['DOCUMENT_ROOT']."/post/".$qstring);

if (file_exists(HTML_FILE))

{

$lcft = filemtime(HTML_FILE);

if (($lcft + 3600) > time()) //判断上次生成HTML文件是否超过1小时，若没有才直接输出文件内容

{

echo(file_get_contents(HTML_FILE));

exit(0);

}

}

之后是现有的PHP的代码，然后在当前代码的最后面加上如下的PHP代码：

以下为引用的内容：

define("HTMLMETA","");

$buffer = ob_get_flush();

$fp = fopen(HTML_FILE, "w");

if ($fp)

{

fwrite($fp, $buffer.HTMLMETA);

fclose($fp);

}

好了，然后查看你的静态HTML页面，如果页面尾部出现了注释行，说明已经成功的创建了静态HTML文件。

这个方法的一个应用就是我先前写的那个“WordPress年度博客统计插件”，这个统计插件由于查询十多次数据库，很多人访问的时候会有很大性能问题，使用我介绍的这种动态生成HTML技术后，一天就查询一次，生成一次统计排行，完美解决了查询数据库的性能问题。