wordpress侧边栏tab调用最新文章最新评论等
由于文章评论较少加上侧栏组件较多导致博客版面左右不协调,一直以来都想使用tab切换以压缩博客右边栏,今天在网上找到一组免费效果代码。
Tabs切换功能,在一些大型的门户网站上很常见,其好处很多,最为明显的就是可以充分利用有限的空间提供更多的内容。今天我也把博客的sidebar加上了Tabs切换功能,将最新文章、最新评论、热门文章、历史最佳利用 DOMtabs 整合到一起。
DOMtabs 是一个免费的script ,下文为你提供使用向导,方便快速安装.
你可以在 Mencase 博客右边栏查看 DOMtabs 使用效果,其是一个非常好的节约页面空间和减少侧栏组件的方法。
5步安装domtabs
- 从官方网站上下载script文件,然后在本地电脑上解压。
- 上传 domtab.js 文件到你的WordPress当前主题文件夹下。
- 下载 pbd_domtab.css (鼠标右击, “目标另存为”), 上传到wordpress当前主题文件夹下
- 在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" /> - 在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 文件自定义颜页和样式
使用中有什么问题,请在下面留言!
Dom Cobb(莱昂纳多·迪卡普里奥 饰)是一名精于潜盗的神偷,专门趁目标人物于睡梦状态中思维最软弱的时候,潜入他们的意识中盗取机密资料。Dom的天赋技能使他成为商界间谍活动梦寐以求的的合作伙伴,但同时亦令他变成失去所爱的国际逃犯。 阅读全文 | 5 评论
不错,用上了,谢谢诶