免插件实现 WordPress 隐藏/显示侧边栏
发布于
by
最近有很多使用知言 Tinection 主题的人问我本站的“隐藏/显示侧边栏”功能怎么实现的，今天在此分享一下…
最近有很多使用知言 Tinection 主题的人问我本站的“隐藏/显示侧边栏”功能怎么实现的，今天在此分享一下“Tinection 主题免插件实现 WordPress 隐藏/显示侧边栏”功能的相关实现方法。当然本方法不局限于 tinection 主题，修改一下可适用于所有主题！
跟着下面的步骤走，即可实现“点击按钮隐藏/显示侧边栏”，具体的结构和效果可以参考本站，祝成功！
2016.5.15 更新新版，精简了第一步和第二步的代码。
1 添加隐藏/显示边栏按钮
根据需要在页面相应位置添加显示和隐藏按钮，代码：
<span class="lxtxxsycbl">
<a style="cursor:pointer;" id="stb_btn_kuan" title="Close the sidebar">隐藏边栏</a>
</span>2 添加 JS
在 js 文件中加入以下 js 代码：
jQuery(document).ready(function($) {
$('.lxtxxsycbl').click(function() {
if ($('.lxtxxsycbl a').is('#stb_btn_kuan')) {
$('#sidebar').hide();
$('#main-wrap-left').attr("id", "main-wrap-fulltp");
$('#single-blog-wrap').removeClass("two-col-container container");
$('.lxtxxsycbl a').attr("id", "stb_btn_zhai").attr("title", "Open the sidebar").text("显示边栏");
} else if ($('.lxtxxsycbl a').is('#stb_btn_zhai')) {
$('#sidebar').show();
$("#main-wrap-fulltp").attr("id", "main-wrap-left");
$("#single-blog-wrap").addClass("two-col-container container");
$('.lxtxxsycbl a').attr("id", "stb_btn_kuan").attr("title", "Close the sidebar").text("隐藏边栏");
}
})
});旧版第一步和第二步代码
1 添加隐藏/显示边栏按钮
根据需要在页面相应位置添加显示和隐藏按钮，代码：
<span class="lxtxxsycbl">
<a style="cursor:pointer;" id="stb_btn_kuan" title="Close the sidebar">隐藏边栏</a>
<a style="display:none;cursor:pointer" id="stb_btn_zhai" title="Open the sidebar">显示边栏</a>
</span>2 添加 JS
在 js 文件中加入以下 js 代码：
jQuery(document).ready(function($) {
$('#stb_btn_kuan').click(function() {
$('#stb_btn_kuan').hide();
$('#stb_btn_zhai').show();
$('#sidebar').hide();
$("#main-wrap-left").attr("id", "main-wrap-fulltp");
$("#single-blog-wrap").removeClass("two-col-container container");
});
$('#stb_btn_zhai').click(function() {
$('#stb_btn_zhai').hide();
$('#stb_btn_kuan').show();
$('#sidebar').show();
$("#main-wrap-fulltp").attr("id", "main-wrap-left");
$("#single-blog-wrap").addClass("two-col-container container");
});
});3 添加 css
在 style.css 样式表中添加如下样式：
#main-wrap-fulltp {
margin:0px auto;
}
#main-wrap-fulltp {
max-width:1200px;
}
#main-wrap-fulltp .single-text {
max-width:960px;
margin:0 auto;
padding:10px;
}
@media screen and (min-width:1500px) {
#main-wrap-fulltp {
max-width:1392px;
}
}@media screen and (max-width:1499px) and (min-width:1360px) {
#main-wrap-fulltp {
max-width:1250px;
}
}@media screen and (max-width:1240px) and (min-width:641px) {
#main-wrap-fulltp {
width:98%;
}
}#main-wrap-fulltp .relpost-inner-pic,#main-wrap-fulltp .relpost-inner-pic span {
max-height:190px;
}
@media screen and (max-width:860px) {
.lxtxxsycbl {
display:none;
}
}友情提示：一定要注意，各个标签、id、class、命名等需相对应！
也可参考下面几篇文章：
WordPress 隐藏/显示侧边栏 免插件
“关闭/显示侧边栏”最简代码版
WordPress 侧边栏关闭/显示设置方法
WordPress 实现自定义隐藏/显示侧边栏
类别：WordPress函数讲解、
本文收集自互联网，转载请注明来源。
如有侵权，请联系 wper_net@163.com 删除。
猜你喜欢GUESS YOU LIKE
还没有任何评论，赶紧来占个楼吧！