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

2016-05-12 01:53 1,921 9 条评论龙笑天下 11

龙笑天 互助分享，互联网本该如此！

导语：今天在此分享一下“Tinection 主题免插件实现 WordPress 隐藏/显示侧边栏”功能的相关实现方法，本方法修改一下可适用于所有主题！

最近有很多使用知言 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("隐藏边栏");
        }
    })
});

旧版第一步和第二步代码

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