给wordpress侧栏手动添加一个选项卡(非插件)

林继 WordPress 5,225 共写了558个字 (2010-12-27 1:12:21) 2条评论 打印 扫描二维码 百度未收录

原文地址:http://blog.crazyfrom.com/wordpress-tabpane.html”安装此选项卡必须上传文件,详细步骤如下:
1.下载附件#tabpane.rar(把它上传到空间里,我把它解压放到themes下。)
2把下面的代码复制放到主题模板header.php中的<head>与</head>之间,(注意:X代表你文件的网络地址,如我的为:X=http://www.hzoo.info/wp-content/themes)

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

3,然后再把一下代码复制到你的侧栏合适的位置“侧栏文件为:sidebar.php”(注意:如果标题>=2 就是要添加多个Tab,就要把 “tab-page-1″改成”tab-page-x” (x=2,3,4…..)注意按次序改写)

  1. <div class="tab-pane" id="tab-pane-1">
  2. <script type="text/javascript">var tabPane1 = new WebFXTabPane( document.getElementById( "tab-pane-1" ) );</script>
  3. <div class="tab-page" id="tab-page-1">
  4. <h2 class="tab">标题1</h2>
  5. <script type="text/javascript">tabPane1.addTabPage( document.getElementById( "tab-page-1" ) );</script>
  6. 调用函数1
  7. </div>
  8. <div class="tab-page" id="tab-page-2">
  9. <h2 class="tab">标题2</h2>
  10. <script type="text/javascript">tabPane1.addTabPage( document.getElementById( "tab-page-2" ) ); </script>
  11. 调用函数2
  12. </div>
  13. </div>

我网站的调用文件是:

  1. <div id=”tab-pane-1″>
  2. <script type=”text/javascript”>var tabPane1 = new WebFXTabPane( document.getElementById( “tab-pane-1″ ) );</script>
  3. <div id=”tab-page-1″>
  4. <h2>最新文章</h2>
  5. <script type=”text/javascript”>tabPane1.addTabPage( document.getElementById( “tab-page-1″ ) ); </script>         <div>
  6.   <ul>
  7.  <?php wp_get_archives(‘type=postbypost&limit=10); ?>
  8.   </ul>
  9. </div></div>
  10. <div id=”tab-page-2″>
  11. <h2>热门文章</h2>
  12. <script type=”text/javascript”>tabPane1.addTabPage( document.getElementById( “tab-page-2″ ) ); </script>   <div>
  13.   <ul>
  14. <?php if (function_exists(‘get_most_viewed’)): ?>
  15.    <?php get_most_viewed(‘post’, 10); ?>
  16. <?php endif; ?>
  17. </div></div>
  18. <div id=”tab-page-3″>
  19. <h2>标签云集</h2>
  20. <script type=”text/javascript”>tabPane1.addTabPage( document.getElementById( “tab-page-3″ ) ); </script>   <div>
  21.   <ul>
  22.   <?php wp_tag_cloud(‘smallest=10&largest=25&); ?>
  23.   </ul>
  24. </div></div>

友情提醒,需要修改CSS请看第2步header.php调用的哪一个CSS,然后再修改,因为在附件里面有3个CSS样式,本站调用的CSS文件名为“tab.webfx.css”如果直接直接用本站的样式你就自己根据你的博客色调调下CSS颜色。tabpane

历史上的今天

12月
27

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

2条评论
  • IT自习室

    2012年6月8日 10:10:45

    博主,你好,请问你这个主题侧边栏的两个TAB选项卡分别是怎么实现的呢?求分享

    1. 林继

      2012年6月8日 18:42:38

      您好!请到模板官方下载一份它的代码分析一下。官方网址:http://www.dafi.cn/

发表评论

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

< >