WordPress免插件添加隐藏/显示侧边栏功能

一般文章都是默认显示侧边栏,为了提高阅读体验,很多博客都会添加一个”隐藏/显示侧边栏 “功能,点击“关闭侧边栏”,右侧侧边栏消失,左侧文章主体部分完全显示,并且导航内的文字变为“显示侧边栏”,再次点击则过程相反。当然,闲鱼是自带这个功能的,只是将样式改了一下,代码样式是在timle看到的。

动图演示

WordPress免插件添加隐藏/显示侧边栏功能
PS:首先分别查看自己主题的主体样式是不是id=“primary”,侧边栏又是不是id=“sidebar”,不是则修改之;另外宽度width值也根据页面宽度相应修改!

CSS样式

  1. /**隐藏显示侧边栏**/
  2. #primary.primary {width: 100%;}
  3. .sidebar {displaynone;}
  4. /*

PS:
以下非必要修改:WordPress主题模板相应文件中:

  1. <div id=“primary”> 修改为: <div id=“primary” class=“content-area”>
  2. <div id=“sidebar”> 修改为: <div id=“sidebar” class=“widget-area”>

非必要修改,可改可不改,不影响实际效果。

JS函数

  1. // 隐藏侧边
  2. function pr() {
  3. var R=document.getElementById(“sidebar”);
  4. var L=document.getElementById(“primary”);
  5. if (R.className==“sidebar”)
  6.     {
  7.         R.className=“widget-area”;
  8.         L.className=“content-area”;
  9.     }
  10. else
  11.     {
  12.         R.className=“sidebar”;
  13.         L.className=“primary”;
  14.     }
  15. }
  16. /*

调用按钮

①、添加按钮

根据需要在页面相应位置添加显示和隐藏按钮,代码

  1. <li class=“r-hide”>
  2. <a href=“javascript:pr()” onclick=“javascript:this.innerHTML=(this.innerHTML==’隐藏边栏’?’显示边栏’:’隐藏边栏’);”>隐藏边栏</a>
  3. </li>

PS:知更鸟自带前台样式
WordPress免插件添加隐藏/显示侧边栏功能

  1. <li class=“r-hide”>
  2. <li class=“r-hide”><a href=“javascript:pr()” title=“侧边栏”><i class=“fa fa-caret-left”></i> <i class=“fa fa-caret-right”></i></a></li>

②、按钮样式

以下给出一个美化按钮的参考样式,可以根据需要自行调整:

  1. .r-hide li a {
  2.     color#999;
  3.     line-height26px;
  4.     margin: 0 5px 0 0;
  5.     padding: 0 10px;
  6.     displayblock;
  7.     border1px solid #ddd;
  8.     border-radius: 2px;
  9.     box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
  10. }
  11. .r-hide a:hover {
  12.     background#568abc;
  13.     color#fff;
  14.     border1px solid #568abc;
  15. }
  16. /*
微信公众号:rizhuti
关注我们,获取更多的全网素材资源,有趣有料!
12000人已关注
分享到:
赞(0) 打赏

评论抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏