Other/其他
纯代码实现WordPress站点侧边栏添加Tabs功能
PetitQ
一直都觉得博客的侧边栏有个 Tabs 挺方便的，既不会占用多大的空间，又美观有特色。所以前两天借鉴 dux 主题的 Tabs 风格，马马虎虎捣鼓出来了，效果如下：
其实，网上有很多类似的插件（WP Tab Widget），只不过我比较喜欢 DIY 化的折腾。所以，下面分享一下我捣鼓的过程，以下教程算是“Tabs 切换通用版”的教程，共三步骤。至于具体内容跟样式，则需要自己去 DIY：
PHP 部分
打开主题目录下的侧边栏文件，一般是 sidebar.php，然后在合适的地方（想要显示的位置）插入以下代码：
也想出现在这里？联系我们吧
<div class="widgettab widget-Tabs">
<ul class="widget-nav">
<li class="active">标题1</li>
<li>标题2</li>
<li>标题3</li>
<li>标题4</li>
</ul>
<ul class="widget-navcontent">
<li class="item item-01 active"> 内容1 </li>
<li class="item item-02"> 内容2 </li>
<li class="item item-03"> 内容3 </li>
<li class="item item-04"> 内容4 </li>
</ul>
</div>
PS：请自行 DIY 代码里面的：标题与内容。
CSS 样式
打开主题目录下的样式文件，一般是 style.css，然后在最后面添加以下代码：
.widgettab {clear: both;position: relative;margin-bottom: 15px;background-color:#fff;border-radius:4px;border:1px solid #eaeaea;overflow:hidden;}
.widget-Tabs{height:200px;}
.widget-nav{background-color: #fbfbfb;line-height: 36px;height: 36px;border-bottom: 1px solid #eaeaea;}
.widget-nav li{float: left;width: 25%;text-align: center;color: #999;border-right: 1px solid #eaeaea;cursor: pointer;list-style:none;}
.widget-nav li.active{background-color: #fff;color: #666;font-weight: bold;cursor: default;}
.widget-navcontent{clear: both;position: relative;}
.widget-navcontent .item{padding: 15px;width: 100%;position: absolute;left: 100%;opacity: 0}
.widget-navcontent .item.active{left: 0;opacity: 1}
.widget-navcontent .item-01 li{/*用户自定义css样式*/}
.widget-navcontent .item-02 li{/*用户自定义css样式*/}
.widget-navcontent .item-03 li{/*用户自定义css样式*/}
.widget-navcontent .item-04 li{/*用户自定义css样式*/}
PS：请自行 DIY 内容展示的样式。
JS 部分
在主题目录下的 JS 文件夹，打开最常用的 js 文件（或者直接在 footer.php 文件引入 js 代码），js 代码：
if( $('.widget-nav').length ){
$('.widget-nav li').each(function(e){
$(this).hover(function(){
$(this).addClass('active').siblings().removeClass('active')
$('.widget-navcontent .item:eq('+e+')').addClass('active').siblings().removeClass('active')
})
})
}
总结
这个教程最大的作用就是将整个 Tabs 框架都弄出来了，然后里面的内容跟样式可供使用者自由折腾。借助上面的 Tabs 框架，完全可以折腾出本文开头所展示图片的效果。也可以借助它弄出一个“分类目录+最新文章+最热文章+评论+标签云……”等个性组合（4 栏显示最优）的 Tabs 切换。
当然，它并不仅限适用于侧边栏，喜欢折腾的话，完全可以将它放到首页、文章内页、页面等。
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
