wordpress侧边栏tab调用最新文章最新评论等

由于文章评论较少加上侧栏组件较多导致博客版面左右不协调，一直以来都想使用tab切换以压缩博客右边栏，今天在网上找到一组免费效果代码。

Tabs切换功能，在一些大型的门户网站上很常见，其好处很多，最为明显的就是可以充分利用有限的空间提供更多的内容。今天我也把博客的sidebar加上了Tabs切换功能，将最新文章、最新评论、热门文章、历史最佳利用  DOMtabs  整合到一起。

DOMtabs 是一个免费的script ，下文为你提供使用向导，方便快速安装.

你可以在 Mencase 博客右边栏查看 DOMtabs 使用效果，其是一个非常好的节约页面空间和减少侧栏组件的方法。

5步安装domtabs

1. 从官方网站上下载script文件，然后在本地电脑上解压。
2. 上传 domtab.js 文件到你的WordPress当前主题文件夹下。
3. 下载 pbd_domtab.css (鼠标右击, “目标另存为”), 上传到wordpress当前主题文件夹下
4. 在header.php文件中, 找到</head>，在其前面插入以下代码 :
   <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/domtab.js"></script> <link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/pbd_domtab.css" media="screen" />
5. 在sidebar.php文件中, 或在widget 中（如果你使用widget的话），你想展示DOMtabs的地方插入以下代码:

   <div class="domtab">
     <ul class="domtabs">
       <li><a href="#t1">Tab 1</a></li>
       <li><a href="#t2">Tab 2</a></li>
       <li><a href="#t3">Tab 3</a></li>
     </ul>
     <div>
       <a name="t1" id="t1"></a>
       <p>Insert contents of the first tab here,
   e.g. The code for a plugin.</p>
     </div>
     <div>
       <a name="t2" id="t2"></a>
       <p>Insert contents of the second tab here.</p>
     </div>
     <div>
       <a name="t3" id="t3"></a>
       <p>Insert contents of the third tab here.</p>
     </div>
   </div>

到这里就完成了. 如果你想添加另外一个tab, 只需要复制一小段代码即可。

你可以通过修改pbd_domtab.css 文件自定义颜页和样式

使用中有什么问题，请在下面留言！

标签：主题