何为TabPane，又有什么作用？请别急，我们先来看一看应用后效果，即文章下的“相关文章”“随机日志”和“最新留言”显示特效！

喜欢这个特效的朋友，跟着我的步骤来看看吧：

一、代码添加
二、我的Single.php
三、“相关文章”、“随机日志”和“最新留言”等功能的添加
四、美化我的Tabpane

一、代码添加 【参考：为自己的网页制做Tab Pane | 珂亦精品收藏）】

请先下载原代码：TabPane  (Demo)，解压上传到自己服务器，推荐放到WP安装目录“wp-contentthemes”内。

然后把此两行代码复制到模板文件的header.php内，</head>之前：
(其中js/tabpane.js和css/tab.webfx.css部分改成自己的网络链接地址)

<script type="text/javascript" src="js/tabpane.js"></script>
<link type="text/css" rel="StyleSheet" href="css/tab.webfx.css"/>

若想在日志页面添加TabPane效果，只需在Single.php的适当位置插入以下代码:
（添加更多Tab只需依照增加代码即可，注意按次序改写）

<div class="tab-pane" id="tab-pane-1">
<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">标题1</h2>
<script type="text/javascript">tabPane1.addTabPage( document.getElementById( "tab-page-1" ) );</script>
内容1
</div>
<div class="tab-page" id="tab-page-2">
<h2 class="tab">标题2</h2>
<script type="text/javascript">tabPane1.addTabPage( document.getElementById( "tab-page-2" ) ); </script>
内容2
</div>
</div>

好了，把这段代码添加到单篇日志代码后，我们就可以在每篇日志的相关位置要看到Tabpane显示效果了。

接下来，我把“相关文章”“随机日志”和“最新留言”这些内容添加到Tabpane里。

二、我的Single.php

以下是我添加在单篇日志页（Single.php）中的Tabpane代码：

<div class="tab-pane" id="tab-pane-1" >
<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">相关文章</h2>
<script type="text/javascript">tabPane1.addTabPage( document.getElementById( "tab-page-1" ) );</script>
< ?php wp_related_posts(); ?>
</div>
<div class="tab-page" id="tab-page-2" >
<h2 class="tab">随机文章</h2>
<script type="text/javascript">tabPane1.addTabPage( document.getElementById( "tab-page-2" ) );</script>
< ?php random_posts(); ?>
</div>
<div class="tab-page" id="tab-page-3">
<h2 class="tab">最新回复</h2>
<script type="text/javascript">tabPane1.addTabPage( document.getElementById( "tab-page-3" ) );</script>
   < ?php
    global $wpdb;
    $sql = "SELECT DISTINCT ID, post_title, post_password, comment_ID,
    comment_post_ID, comment_author, comment_date_gmt, comment_approved,
    comment_type,comment_author_url,
    SUBSTRING(comment_content,1,16) AS com_excerpt
    FROM $wpdb->comments
    LEFT OUTER JOIN $wpdb->posts ON ($wpdb->comments.comment_post_ID =
    $wpdb->posts.ID)
    WHERE comment_approved = '1' AND comment_type = '' AND
    post_password = ''
    ORDER BY comment_date_gmt DESC
    LIMIT 5";
    $comments = $wpdb->get_results($sql);
    $output = $pre_HTML;
    $output .= "n";
    foreach ($comments as $comment) {
    $output .= "n<li>".strip_tags($comment->comment_author)
    .":" . "<a href="" . get_permalink($comment->ID) .
    "#comment-" . $comment->comment_ID . "" title="on " .
    $comment->post_title . "">" . strip_tags($comment->com_excerpt)
    ."</a></li>";}
    $output .= "n";
    $output .= $post_HTML;
    echo $output;?>
</div>
</div>

看着那么长的代码晕了吧？哈哈，可以先把这些代码复制下来，且听我慢慢说来：

三、“相关文章”、“随机日志”和“最新留言”等功能的添加

相关文章：通过插件WordPress Related Posts实现，关于该插件的具体使用请到：我爱水煮鱼

6

< ?php wp_related_posts(); ?>    */这句是调用相关文章的PHP函数

随机文章：通过插件Random Posts实现，关于该插件的具体使用请到：桑林志|WordPress随机文章插件

11

< ?php random_posts(); ?>    */不用我说了吧，对，这句就是调用随机文章的PHP函数

最新回复：直接通过代码添加实现。

21
22

    SUBSTRING(comment_content,1,16) AS com_excerpt
*/数值16，代表显示留言的前16个字
28

    LIMIT 5";    */数值5，代表显示留言的条数

（四）暂时无，个人认为如果还有的话，也没必要写上来了吧…

到次为止，我们已经实现了Tabpane！若出现问题，请回过头再仔细看看步骤吧~

接下来，最后一大点：

四、美化我的Tabpane

这个就涉及到CSS了，不懂的请自学哦~