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

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

最近有很多使用知言 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

发表评论

表情 格式 贴图 链接 私密 签到
Dragon主题购买阿里云特价云服务器1核2G低至86元,N4共享型服务器3年仅需799元腾讯云特价云服务器1核2G 88元/年 2核4G3M688元/3年,更有千元代金券礼包免费领!
评论
正在努力加载中...
扫一扫二维码分享
×
We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “Accept”, you consent to the use of ALL the cookies. Learn more