张力-实战网络营销导师
专注于网络营销策划+Wordpress建站,只做有思想的高价值网站,只提供有担当的营销服务!
文章476浏览1339628本站已运行606

免插件实现WordPress 隐藏/显示侧边栏

默认显示侧边栏,点击导航最右的“关闭侧边栏”,右侧侧边栏消失,左侧文章主体部分完全显示,并且导航内的文字变为“显示侧边栏”,点击则过程相反。

整体效果明显,如下图所示:

hide-show-sidebar-600x304

首先分别查看自己主题的主体样式是不是id=“primary”,侧边栏又是不是id=“sidebar”,不是则修改之;另外宽度width值也根据页面宽度相应修改!

添加CSS样式

在style.css样式表中添加如下样式:

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

添加JS控制

在网站相应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. }  

添加隐藏/显示边栏按钮

添加按钮

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

  1. <ul>  
  2.     <li class="r-hide"><a>隐藏边栏</a></li>  
  3. </ul>  

按钮样式

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

  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. }  

以上就是免插件实现WordPress 隐藏/显示侧边栏的方法,有需要的朋友可以试试,我博客文章页就使用了,大家可以看看文章页侧边的隐藏边栏试试!

您还未添加分享代码,请到主题选项中,添加百度分享代码!

张力

广告
发表我的评论
取消评论
表情 签到
流汗坏笑撇嘴大兵流泪发呆抠鼻吓到偷笑得意呲牙亲亲疑问调皮可爱白眼难过愤怒惊讶鼓掌

Hi,您需要填写昵称和邮箱!

(4)个小伙伴在吐槽
  1. 香港云主机
    香港云主机   Google Chrome 44.0.2403.157   Windows 7
    2016-04-23 11:59

    一般好像大家都用的插件来实现,相对来说应该要简单些吧

    • 张力
      张力   Google Chrome 48.0.2564.82   Windows 7
      2016-04-23 22:51

      @香港云主机 我最不习惯的就是用插件了,o(∩_∩)o 哈哈

  2. harries
    harries   Google Chrome 48.0.2547.0   Windows 7
    2016-04-23 08:59

    很多的教程

    • 张力
      张力   Google Chrome 48.0.2564.82   Windows 7
      2016-04-23 10:24

      @harries 嗯,这些教程都是记录我学习Wordpress的过程!

隐藏边栏