为我的WP添加——TabPane

何为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了，不懂的请自学哦~

主机格调
  1. aunsen
    十一月 9, 2008 10:29:10 #1

    又见这个主题！

    回复
  2. 森
    十一月 9, 2008 16:43:16 #2

    呵呵，还有其他人？除了卓尔

    回复

  3. 日志里面的代码在IE6下显示的很暴力啊
    呵呵

    回复

  4. 有意思的东西，有时间看看能不能放到我的博客里。

    回复
  5. Vincent
    十一月 10, 2008 19:31:19 #5

    请问站长，文章分页用的是什么插件啊，还有评论头像怎么变的像你这样大啊？

    回复
  6. Dianso
    十一月 10, 2008 22:40:22 #6

    还有文章浏览统计啊

    回复
  8. 卓尔
    十一月 11, 2008 08:41:8 #8

    支持一个！其实觉得这个JS 不错！但是不太喜欢鼠标接触就产生变化！觉得用鼠标点击变化更适合！

    回复
  11. HK
    十一月 12, 2008 13:37:13 #11

    不错的功能，支持一下

    回复
  12. 森
    十一月 12, 2008 14:18:14 #12

    多谢大家支持！

    回复
  13. daniel
    十一月 12, 2008 15:05:15 #13

    这个功能不错，收藏~

    回复
  14. 伊迭
    十一月 12, 2008 19:06:19 #14

    不错，收藏之
    待日后再用…

    回复
  16. deriek
    一月 13, 2009 13:43:13 #16

    請問這個支持wp2.7嗎

    回复
  17. deriek
    一月 13, 2009 14:33:14 #17

    為什麼其它的
    二、我的Single.php
    三、“相关文章”、“随机日志”和“最新留言”等功能的添加
    四、美化我的Tabpane
    這些我都看不到東西呢~~點擊後都跑到一、代码添加 這裡

    回复
  18. 小 木
    一月 15, 2009 23:08:23 #18

    @deriek 由于换了主题，所以说日志分页功能失效，现在行了~

    回复
  19. deriek
    一月 16, 2009 19:10:19 #19

    在請問一下哪裡有專門介紹有關tabpane的css相關教學呢
    或是麻煩木木大哥提供給小弟參考~~感激

    回复
  20. deriek
    一月 16, 2009 20:03:20 #20

    我真的好喜歡你的tabpane切換效果阿~~
    求你指點我

    回复
  21. 小 木
    一月 16, 2009 21:17:21 #21

    @deriek 你可以到这个网站看看http://smartr.cn/，我现在在用主题就是那载的，你也可以看下相关代码自己实现这个功能！还有就是可以看下这篇文章：http://www.wopus.org/about-tabs.html

    回复
  22. deriek
    一月 16, 2009 21:57:21 #22

    感謝你阿~~木木
    有問題在來請教你~~

    回复
  23. 小 木
    一月 16, 2009 23:13:23 #23

    @deriek 不用这么客气，我也是学点用点~呵 :lol:

    回复
  24. 问问看
    四月 10, 2009 22:45:22 #24

    今日热门,本周热门,本月热门,应该怎么弄

    回复

  25. 谢谢了……对于css和js我完全处于白痴阶段……

    回复

    • @江月何年 这已经是很早前写得文章了，不知道现在还行不？我觉得现在应该有更简单的实现方法~呵

      回复
  26. 包子
    一月 11, 2010 18:04:18 #26

    找个现成的插件

    回复

    • 这插件已经老矣！我现在用的jquery实现的~

      回复

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

*


您可以使用这些 HTML 标签和属性： <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">