纯代码实现为WordPress站点侧边栏添加Tabs功能

投稿  龙砚庭博客 2016-10-19 阅读 178 次 评论 24 条

一直都觉得博客的侧边栏有个Tabs挺方便的,既不会占用多大的空间,又美观有特色。所以前两天借鉴dux主题的Tabs风格,马马虎虎捣鼓出来了,效果如下:

纯代码实现为WordPress站点侧边栏添加Tabs功能

其实,网上有很多类似的插件(如WordPress侧边栏TAB选项卡插件WP Tab Widget)跟教程,只不过我比较喜欢DIY化的折腾。所以,下面分享一下我捣鼓的过程,以下教程算是“Tabs切换通用版”的教程,共三步骤。至于具体内容跟样式,则需要自己去DIY:

一、php部分

打开主题目录下的侧边栏文件,一般是sidebar.php,然后在合适的地方(想要显示的位置)插入以下代码:

  1. <div class="widgettab widget-Tabs">
  2.   <ul class="widget-nav">
  3.     <li class="active" >标题1</li>
  4.     <li>标题2</li>
  5.     <li>标题3</li>
  6.     <li>标题4</li>
  7.  </ul>
  8.   <ul class="widget-navcontent">
  9.       <li class="item item-01 active">
  10.       内容1
  11.       </li>
  12.       <li class="item item-02">
  13.       内容2
  14.       <li class="item item-03">
  15.       内容3
  16.       </li>
  17.       <li class="item item-04">
  18.       内容4
  19.       </li>
  20.  </ul>
  21. </div>

PS:请自行DIY代码里面的:标题与内容。

二、CSS部分

打开主题目录下的样式文件,一般是style.css,然后在最后面添加以下代码:

  1. .widgettab {clearboth;positionrelative;margin-bottom15px;background-color:#fff;border-radius:4px;border:1px solid #eaeaea;overflow:hidden;}
  2. .widget-Tabs{height:200px;}
  3. .widget-nav{background-color#fbfbfb;line-height36px;height36px;border-bottom1px solid #eaeaea;}
  4. .widget-nav li{floatleft;width: 25%;text-aligncenter;color#999;border-right1px solid #eaeaea;cursorpointer;list-style:none;}
  5. .widget-nav li.active{background-color#fff;color#666;font-weightbold;cursordefault;}
  6. .widget-navcontent{clearboth;positionrelative;}
  7. .widget-navcontent .item{padding15px;width: 100%;positionabsolute;left: 100%;opacity: 0}
  8. .widget-navcontent .item.active{left: 0;opacity: 1}
  9. .widget-navcontent .item-01 li{/*用户自定义css样式*/}
  10. .widget-navcontent .item-02 li{/*用户自定义css样式*/}
  11. .widget-navcontent .item-03 li{/*用户自定义css样式*/}
  12. .widget-navcontent .item-04 li{/*用户自定义css样式*/}

PS:请自行DIY内容展示的样式。

三、JS部分

在主题目录下的JS文件夹,打开最常用的js文件(或者直接在footer.php文件引入js代码),js代码:

  1. if( $('.widget-nav').length ){
  2.     $('.widget-nav li').each(function(e){
  3.         $(this).hover(function(){
  4.             $(this).addClass('active').siblings().removeClass('active')
  5.             $('.widget-navcontent .item:eq('+e+')').addClass('active').siblings().removeClass('active')
  6.         })
  7.     })
  8. }

四、总结

这个教程最大的作用就是将整个Tabs框架都弄出来了,然后里面的内容跟样式可供使用者自由折腾。借助上面的Tabs框架,完全可以折腾出本文开头所展示图片的效果。也可以借助它弄出一个“分类目录+最新文章+最热文章+评论+标签云……”等个性组合(4栏显示最优)的Tabs切换。

当然,它并不仅限适用于侧边栏,喜欢折腾的话,完全可以将它放到首页、文章内页、页面等。

本文地址:http://boke112.com/3589.html
关注我们:请关注一下我们的微信公众号:扫描二维码,公众号:aiboke112
温馨提示:文章内容仅代表作者个人观点,不代表boke112导航赞同其观点和对其真实性负责!
版权声明:本文为投稿文章,感谢 龙砚庭博客 的投稿,版权归原作者所有,欢迎分享本文,转载请保留出处!
WordPress免费响应式主题:Nana
CPA教学与引流技巧

发表评论

呲牙憨笑坏笑偷笑色微笑抓狂睡觉酷流汗鼓掌大哭可怜疑问晕惊讶得意尴尬发怒奋斗衰骷髅啤酒吃饭礼物强弱握手OKNO勾引拳头差劲爱你

表情

  1. 蔚蓝博客
    蔚蓝博客 【农民】 @回复

    这个挺不错的,可以试一下

  2. 电脑天空
    电脑天空 【农民】 @回复

    有时间研究一下

  3. 玉满斋
    玉满斋 【市长】 @回复

    不错,正在研究中!

  4. 玉满斋
    玉满斋 【市长】 @回复

    不错,我就像放微信、QQ群的二维码!这个很方便!

  5. 金榜台博客
    金榜台博客 【县长】 @回复

    来看看,随便学习一下

  6. 孕妇护肤品
    孕妇护肤品 【农民】 @回复

    不错,节省地方,看起来也美光。

  7. 泛宝汇博客
    泛宝汇博客 【市长】 @回复

    又是高手过招的技术文章,容我学好基本功再来抄 [呲牙]

  8. 放大爱育儿
    放大爱育儿 【村长】 @回复

    这个好,收藏了,不客气哦

  9. 明月登楼
    明月登楼 【总理】 @回复

    学习了!不错呀!

  10. 闲鱼
    闲鱼 【村长】 @回复

    蛮不错的,可以随意折腾点东西

  11. 我爱动感单车网
    我爱动感单车网 【省长】 @回复

    早些时候我试着弄了下,但限于技术小白只好无功而返,今后不怎么想折腾自己的博客了,太花时间与精力!

  12. 憧憬Licoy
    憧憬Licoy 【队长】 @回复

    可以的,有空给博客也装上

  13. 小萝博客
    小萝博客 【市长】 @回复

    来个插件咋样

  14. 97游民网
    97游民网 【农民】 @回复

    不错不错!

  15. 雅兮网
    雅兮网 【省长】 @回复

    最好写成小工具,使用起来比较灵活

    • 橘子书
      橘子书 【县长】 @回复

      @雅兮网 要小工具更简单了,只要主题文本小工具能运行php,直接将上面的代码稍微处理下,扔到进去就能用了。
      Ps:目前我就是这个方法,没去动文件。

  16. 唯历史
    唯历史 【总理】 @回复

    挺美观的

  17. 夏日博客
    夏日博客 【县长】 @回复

    倒是可以提高用户的体验。

  18. 龙笑天
    龙笑天 【县长】 @回复

    “它并不仅限适用于侧边栏,喜欢折腾的话,完全可以将它放到首页、文章内页、页面等。”
    大写的 [强]

  19. Koolight
    Koolight 【省长】 @回复

    纯代码多了就可以写主题了!

  20. 捌零男人
    捌零男人 【镇长】 @回复

    去看了一下,右侧栏头像好像都挂掉

  21. 爱时尚
    爱时尚 【市长】 @回复

    居然不是沙发

  22. 橘子书
    橘子书 【县长】 @回复

    今天抢了一次一楼! [偷笑]