最近有很多使用知言 Tinection 主题的人问我本站的“隐藏/显示侧边栏”功能怎么实现的,今天在此分享一下『Tinection 主题免插件实现 WordPress 隐藏/显示侧边栏』功能的相关实现方法。当然本方法不局限于 Tinection 主题,修改一下可适用于所有主题!
免插件实现 WordPress 隐藏/显示侧边栏步骤
请大家跟着下面的步骤走,即可实现“点击按钮隐藏/显示侧边栏”,具体的结构和效果可以参考本站(龙笑天下),祝成功!
第一步:添加隐藏/显示边栏按钮
根据需要在页面相应位置添加显示和隐藏按钮,代码:
- <span class=“lxtxxsycbl”>
- <a style=“cursor:pointer;” id=“stb_btn_kuan” title=“Close the sidebar”>隐藏边栏</a>
- </span>
第二部:添加 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(“隐藏边栏”);
- }
- })
- });
第三部:添加 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、命名等需相对应!