首页 » 建站技术 » WordPress » 浏览内容

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


2010-12-27 01:12:21 4,662 2 发表评论 字体: 作者:C.K.
标签: WordPress

体验版 88 元,个人版 128 元,多用户版 288元个人版160元升级到多用户版。

原文地址: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)

<script type="text/javascript" src="X/js/tabpane.js"></script>
  • <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…..)注意按次序改写)

    <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>
  • 我网站的调用文件是:

    <div id=”tab-pane-1″>
  • <script type=”text/javascript”>var tabPane1 = new WebFXTabPane( document.getElementById( “tab-pane-1″ ) );</script>
  • <div id=”tab-page-1″>
  • <h2>最新文章</h2>
  • <script type=”text/javascript”>tabPane1.addTabPage( document.getElementById( “tab-page-1″ ) ); </script>         <div>
  •   <ul>
  •  <?php wp_get_archives(‘type=postbypost&limit=10); ?>
  •   </ul>
  • </div></div>
  • <div id=”tab-page-2″>
  • <h2>热门文章</h2>
  • <script type=”text/javascript”>tabPane1.addTabPage( document.getElementById( “tab-page-2″ ) ); </script>   <div>
  •   <ul>
  • <?php if (function_exists(‘get_most_viewed’)): ?>
  •    <?php get_most_viewed(‘post’, 10); ?>
  • <?php endif; ?>
  • </div></div>
  • <div id=”tab-page-3″>
  • <h2>标签云集</h2>
  • <script type=”text/javascript”>tabPane1.addTabPage( document.getElementById( “tab-page-3″ ) ); </script>   <div>
  •   <ul>
  •   <?php wp_tag_cloud(‘smallest=10&largest=25&); ?>
  •   </ul>
  • </div></div>
  • 友情提醒,需要修改CSS请看第2步header.php调用的哪一个CSS,然后再修改,因为在附件里面有3个CSS样式,本站调用的CSS文件名为“tab.webfx.css”如果直接直接用本站的样式你就自己根据你的博客色调调下CSS颜色。tabpane

      网站统计 Statistics

      • 创建时间: 2005年1月3日 距今4888 天
      • 日志总数: 2461
      • 评论总数: 630
      • 标签总数: 654
      • 链接总数: 273
      • 最后更新: 2017-7-1 18:16:33
      • 您是本站第 13543873 位访客

      广告区 Guǎng Gào