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

2016-05-12 01:53 1,709 9 条评论 龙笑天下
导语: 今天在此分享一下“Tinection 主题免插件实现 WordPress 隐藏/显示侧边栏”功能的相关实现方法,本方法修改一下可适用于所有主题!

最近有很多使用知言 Tinection 主题的人问我本站的“隐藏/显示侧边栏”功能怎么实现的,今天在此分享一下“Tinection 主题免插件实现 WordPress 隐藏/显示侧边栏”功能的相关实现方法。当然本方法不局限于 tinection 主题,修改一下可适用于所有主题!

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

跟着下面的步骤走,即可实现“点击按钮隐藏/显示侧边栏”,具体的结构和效果可以参考本站,祝成功!

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

友情提示:一定要注意,各个标签、id、class、命名等需相对应!

也可参考下面几篇文章:

WordPress 隐藏/显示侧边栏 免插件
“关闭/显示侧边栏”最简代码版
WordPress 侧边栏关闭/显示设置方法
WordPress 实现自定义隐藏/显示侧边栏

「点点赞赏,手留余香」

还没有人赞赏,快来当第一个赞赏的人吧!

本文为原创文章,版权归所有,欢迎分享本文,转载请保留出处!

2016-05-11

2016-05-15

发表评论

评论
正在努力加载中...
扫一扫二维码分享