为wordpress添加TabPane On [10 11th, 2009] 分类: wordpress 小见识

今天下午出去玩回来，首先看看网站有什么留言。看到自己的“网站导航”、“热议文章”、“最新评论”在边栏里零乱的躺着，延伸得太长了，看着很不爽。于是想到了用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完工，吃饭去！

转载本站文章请注明，转载自：我心疯狂[http://blog.crazyfrom.com]
本文链接: http://blog.crazyfrom.com/wordpress-tabpane.html

喜欢我吗？那就订阅我吧： E-mail邮箱QQ邮箱

该文章分类:wordpress 小见识
  1. 万艾可 Says：

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

    [回复]

    SoSo0_0 回复:
    二月 23rd, 2010 at 00:06

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

    [回复]

    On 22:25 [02 22nd, 2010]
  2. Zenoven自由人 Says：

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

    [回复]

    SoSo0_0 回复:
    十月 12th, 2009 at 21:54

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

    [回复]

    On 21:51 [10 12th, 2009]
  3. sungjira Says：

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

    [回复]

    SoSo0_0 回复:
    十月 12th, 2009 at 20:50

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

    [回复]

    On 17:59 [10 12th, 2009]
  4. Louis Han Says：

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

    [回复]

    SoSo0_0 回复:
    十月 12th, 2009 at 14:54

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

    [回复]

    On 14:01 [10 12th, 2009]
  5. 90后的贼 Says：

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

    [回复]

    SoSo0_0 回复:
    十月 12th, 2009 at 14:54

    @90后的贼,
    呵呵….

    [回复]

    On 13:55 [10 12th, 2009]
  6. 超人 Says：

    这样也比较麻烦呀。。

    [回复]

    On 13:37 [10 12th, 2009]
  7. mypcfix Says：

    虚心学习下

    [回复]

    SoSo0_0 回复:
    十月 12th, 2009 at 12:58

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

    [回复]

    On 12:45 [10 12th, 2009]
  8. 365hope Says：

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

    [回复]

    SoSo0_0 回复:
    十月 12th, 2009 at 12:33

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

    [回复]

    On 12:22 [10 12th, 2009]
  9. aify Says：

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

    [回复]

    SoSo0_0 回复:
    十月 12th, 2009 at 11:22

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

    [回复]

    On 08:02 [10 12th, 2009]
  10. hellobby Says：

    不错的哟，我来试一下

    [回复]

    On 07:57 [10 12th, 2009]
  11. 菠萝 Says：

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

    [回复]

    On 07:41 [10 12th, 2009]
  12. 万戈 Says：

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

    [回复]

    SoSo0_0 回复:
    十月 11th, 2009 at 23:42

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

    [回复]

    On 23:24 [10 11th, 2009]

发表评论

你最近干嘛来？