June 14, 2007
本站小小更新: 添加TabPane并显示随机文章
本站今天文章更新只有一篇, 但却做了些网页设计上的调整, 最明显的就是在单篇文章下面添加了TabPane, 其中一个Tab显示"相关文章", 另一个Tab显示"随机文章", 目的只有一个, 为了增加您在这儿的逗留时间. (本站一直以来的PageViews/Visitor都小于2, 意味着您只看了我一篇文章不到两篇就走了, 希望我给您呈上的"相关文章"和"随机文章"能让您有更多机会发掘本站, 其实本站还是有好多好文章的哦, 只不过名气较小而被您忽略了. -__-|| )
好了, 我们进入主题, 看看是如何实现这个TabPane的(关于TabPane的文章最早是hhalloyy发表的, 详细教程可参考他的文章):
1. 首先需要下载TabPane的源代码, 然后将其中的CSS, JS, LOCAL目录和demo.html, memdemo.html, tabpane.html解压上传到你的WEB服务器上, 具体位置没有硬性要求, 毕竟TabPane不是款插件. 
2. 接下来把以下两行代码加入你目前使用的WordPress主题的header.php文件中, 最好添加在head标签之前:
<link type="text/css" rel="StyleSheet" href="css/tab.webfx.css" />
当然, 这里的"src"和"href"后面的地址都要换成你实际存放的位置.
3. 再打开你想添加TabPane的模板, 比方说想加在单篇文章之后, 就打开主题目录下的single.php文件, 并把以下的代码加在某个地方:
<script type="text/javascript">
var tabPane1 = new WebFXTabPane( document.getElementById( "tab-pane-1" ) );
</script>
<div class="tab-page" id="tab-page-1">
<h2 class="tab">General</h2>
<script type="text/javascript">
tabPane1.addTabPage( document.getElementById( "tab-page-1" ) );
</script>
This is text of tab 1. This is text of tab 1.
This is text of tab 1. This is text of tab 1.
</div>
<div class="tab-page" id="tab-page-2">
<h2 class="tab">Privacy</h2>
<script type="text/javascript">
tabPane1.addTabPage( document.getElementById( "tab-page-2" ) );
</script>
This is text of tab 2. This is text of tab 2.
This is text of tab 2. This is text of tab 2.
</div>
</div>
4. 这样就可以啦, 如果想进一步更改它的样式, 就修改相应的CSS好了. 
-----------------------------------------------------------------
到现在为止, TabPane是加好了, 那么随机文章和相关文章是如何实现的呢? 其实很简单, 全靠两个插件了, Random Posts和UTW.
使用方法: 上传插件并激活后, 分别在两个Tab中使用对应的函数
<!-- 随机文章, 默认显示5篇 -->
<!-- 相关文章, 默认显示全部 -->
具体的参数调用参考作者的说明文档啦.
厉害！orz