为wordpress添加TabPaneby SoSo0_0 | 2009-10-11 | 25 Comments

今天下午出去玩回来，首先看看网站有什么留言。看到自己的“网站导航”、“热议文章”、“最新评论”在边栏里零乱的躺着，延伸得太长了，看着很不爽。于是想到了用TabPane，相信很多人在用它！用它不但可以把零乱的Sidebar内容整合一起，动态地显示出各自内容，节省了空间，页面又变得整洁。
首先：下载代码文件
原地址：TabPane
把它上传到空间里，我把它解压放到themes下。
然后把代码

?View Code PHP
1
2

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

复制放到主题模板header.php中的<head>与</head>之间。
注意：X代表你文件的网络地址，如我的为：X=http://www.crazyfrom.com/wp-content/themes
然后再把代码

?View Code PHP
1
2
3
4
5
6
7
8
9
10
11
12
13

<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>

复制到sidebar或single或其它你想要这效果的地方，而我的是sidebar中
注意：如果标题>=2 就是要添加多个Tab，就要把 “tab-page-1″改成”tab-page-x” （x=2,3,4…..）注意按次序改写
如我的：

?View Code PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<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 blog_most_commented_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 include (TEMPLATEPATH . '/simple_recent_comments.php'); ?>
<?php if (function_exists('src_simple_recent_comments')) { src_simple_recent_comments(10, 50, '', ''); } ?>
</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 blog_list_categories('orderby=name&title_li='); ?>
</div>
</div>

调用php函数说明：
<?php blog_list_categories(‘orderby=name&title_li=’); ?>文章分类
<?php random_posts(); ?>随机文章
<?php blog_tag_cloud(‘smallest=8&largest=14&number=30′); ?> 热门标签
<?php blog_most_commented_posts(); ?> 热议文章（插件实现）
……

加什么都可以，只要wordpre跟插件能提供！
最后为了与我主题和谐，我自己把css修改了下！
ok完工，吃饭去！

Category: wordpress 小见识

25 Responses to “为wordpress添加TabPane”

  1. 万戈/2009-10-1111 Reply|1楼

    很不错哟，我的主题自带tab，所以我就不折腾这个功能了

  2. SoSo0_0对万戈说/2009-10-1111 Reply|2楼

    @万戈,
    我还没有编辑好文章，那么快来踩场啦！谢谢支持

  3. 菠萝/2009-10-1211 Reply|3楼

    这个功能不错!试用下!
    .-= 菠萝´s last blog ..百度又回来了 BS一下 =-.

  4. hellobby/2009-10-1211 Reply|4楼

    不错的哟，我来试一下

  5. aify/2009-10-1211 Reply|5楼

    似乎之前是没有音乐的，这几天忙，忘记来这儿玩小游戏了，呵呵，看来修改了不少了!

  6. SoSo0_0对aify说/2009-10-1211 Reply|6楼

    @aify,
    我没有加上音乐啊？游戏过完没有啊….

  7. 365hope/2009-10-1211 Reply|7楼

    恩，不错！
    兄弟开始玩 WordPress 的非常流畅啦！
    虚心学习中~~

  8. SoSo0_0对365hope说/2009-10-1211 Reply|8楼

    @365hope,
    互相交流学习….

  9. mypcfix/2009-10-1211 Reply|9楼

    虚心学习下

  10. SoSo0_0对mypcfix说/2009-10-1211 Reply|10楼

    @mypcfix,
    嘿嘿…弄到我不好意思了！

  11. 超人/2009-10-1211 Reply|11楼

    这样也比较麻烦呀。。

  12. 90后的贼/2009-10-1211 Reply|12楼

    模板太闪眼了，哎，竟然搞得弄么酷，我都不想说什么了，无语中……
    .-= 90后的贼´s last blog ..那滋味 =-.

  13. Louis Han/2009-10-1211 Reply|13楼

    看上去有些小复杂 有空试试
    .-= Louis Han´s last blog ..I Just Made Love：网友在地图上标注做爱做的事 =-.

  14. SoSo0_0对Louis Han说/2009-10-1211 Reply|14楼

    @Louis Han,
    看似复杂，其实很快的！

  15. SoSo0_0对90后的贼说/2009-10-1211 Reply|15楼

    @90后的贼,
    呵呵….

  16. sungjira/2009-10-1211 Reply|16楼

    博主可是高手啊，这个主题被你弄的太帅啦。

  17. SoSo0_0对sungjira说/2009-10-1211 Reply|17楼

    @sungjira,
    不敢当，还是菜鸟来的！

  18. Zenoven自由人/2009-10-1211 Reply|18楼

    这个插件不错 等哪天也去试试~~
    对了，麻烦把我的链接名称改成Zenoven自由人 谢谢！
    .-= Zenoven自由人´s last blog ..我心疯狂 关于 CSS布局设计：三列浮动中间列宽度自适应 的评论 =-.

  19. SoSo0_0对Zenoven自由人说/2009-10-1211 Reply|19楼

    @Zenoven自由人,
    改好了，请注意查收哦！

  20. 万艾可/2010-02-2211 Reply|20楼

    本来也想做一个，后来说又要改CSS，那就算了，还是自己传统的吧。
    .-= 万艾可´s last blog ..吸烟是勃起功能障碍的重要诱因 =-.

  21. SoSo0_0对万艾可说/2010-02-2311 Reply|21楼

    @万艾可,
    若要跟主题和谐，就要改CSS…..

  22. 流金漩涡/2011-03-1411 Reply|22楼

    看着有点儿复杂，不敢捣鼓

  23. SoSo0_0对流金漩涡说/2011-03-1511 Reply|23楼

    @流金漩涡, 不怕不怕，放心搞，爱搞才会赢！呵呵

  24. 高夫男士/2011-07-0611 Reply|24楼

    高夫男士， http://www.lfjqr.com ，欢迎博主回访。

  25. 给wordpress侧栏手动添加一个选项卡（非插件） - 浩子文/2011-09-1911 Reply|25楼

    [...] 24 个评论 给wordpress侧栏手动添加一个选项卡（非插件） 这个东西其实也是我在wordpress中文论坛找到的，只是我自己按照自己博客的色调修改了下css“这里是原文地址：http://blog.crazyfrom.com/wordpress-tabpane.html”安装此选项卡必须上传文件，原文的附件已经失效了，所以我传了一份在我的115网盘里面详细步骤如下： [...]

Leave a Reply