腾讯云服务器优惠活动华纳云香港服务器

免插件纯代码实现WordPress站点隐藏/显示侧边栏

WordPress主题推荐

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

免插件纯代码实现WordPress站点隐藏/显示侧边栏-第1张-boke112百科(boke112.com)

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

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

第一步:添加隐藏/显示边栏按钮

根据需要在页面相应位置添加显示和隐藏按钮,代码:

  1. <span class=“lxtxxsycbl”>
  2.     <a style=“cursor:pointer;” id=“stb_btn_kuan” title=“Close the sidebar”>隐藏边栏</a>
  3. </span>

第二部:添加 JS 代码

在主题相应的 js 文件中加入以下 js 代码:

  1. jQuery(document).ready(function($) {
  2.     $(‘.lxtxxsycbl’).click(function() {
  3.         if ($(‘.lxtxxsycbl a’).is(‘#stb_btn_kuan’)) {
  4.             $(‘#sidebar’).hide();
  5.             $(‘#main-wrap-left’).attr(“id”“main-wrap-fulltp”);
  6.             $(‘#single-blog-wrap’).removeClass(“two-col-container container”);
  7.             $(‘.lxtxxsycbl a’).attr(“id”“stb_btn_zhai”).attr(“title”“Open the sidebar”).text(“显示边栏”);
  8.         } else if ($(‘.lxtxxsycbl a’).is(‘#stb_btn_zhai’)) {
  9.             $(‘#sidebar’).show();
  10.             $(“#main-wrap-fulltp”).attr(“id”“main-wrap-left”);
  11.             $(“#single-blog-wrap”).addClass(“two-col-container container”);
  12.             $(‘.lxtxxsycbl a’).attr(“id”“stb_btn_kuan”).attr(“title”“Close the sidebar”).text(“隐藏边栏”);
  13.         }
  14.     })
  15. });

第三部:添加 css 代码

在 style.css 样式表中添加如下样式:

  1. #main-wrap-fulltp {
  2.     margin:0px auto;
  3. }
  4. #main-wrap-fulltp {
  5.     max-width:1200px;
  6. }
  7. #main-wrap-fulltp .single-text {
  8.     max-width:960px;
  9.     margin:0 auto;
  10.     padding:10px;
  11. }
  12. @media screen and (min-width:1500px) {
  13.     #main-wrap-fulltp {
  14.     max-width:1392px;
  15. }
  16. }@media screen and (max-width:1499px) and (min-width:1360px) {
  17.     #main-wrap-fulltp {
  18.     max-width:1250px;
  19. }
  20. }@media screen and (max-width:1240px) and (min-width:641px) {
  21.     #main-wrap-fulltp {
  22.     width:98%;
  23. }
  24. }#main-wrap-fulltp .relpost-inner-pic,#main-wrap-fulltp .relpost-inner-pic span {
  25.     max-height:190px;
  26. }
  27. @media screen and (max-width:860px) {
  28.     .lxtxxsycbl {
  29.     display:none;
  30. }
  31. }

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

其他相关文章

赞 (0) 打赏
版权声明:本文为投稿文章,感谢 龙笑天下 的投稿,版权归原作者所有!发布此文是出于传递更多信息之目的,若有来源标注错误或侵犯了您的合法权益,请联系我们,确认后马上更正或删除,谢谢!
香港云主机55元/年
wu