修复杂志布局和杂志页面当模块与侧边栏高度不一致时留有空白的bug

  • A+
所属分类:建博笔记

一、bug来源

使用这个主题的童鞋都知道,在主题选项--杂志布局选项卡中有非常多的模块。通过对这些模块的设置,可以在前台输出不同的展示效果,非常灵活。

但也正是由于它的灵活性,导致前台杂志布局和杂志页面中左侧模块整体高度与右侧侧边栏整体高度不能得到很好的匹配。不是左侧空了一块,就是右侧空了一块,显得有些别扭。

具体表现请看下面两张图(为了说明问题,特意留了很大空白):

修复杂志布局和杂志页面当模块与侧边栏高度不一致时留有空白的bug

左侧模块整体高度小于右侧侧边栏整体高度时,左侧留有空白

修复杂志布局和杂志页面当模块与侧边栏高度不一致时留有空白的bug

右侧侧边栏整体高度小于左侧模块整体高度时,右侧留有空白

而“模块/侧边栏跟随滚动”功能就可以很好的解决这个问题。当启用这个功能后,如果左侧模块整体高度大于右侧侧边栏整体高度,则左侧模块跟随滚动;如果右侧侧边栏整体高度大于左侧模块整体高度,则右侧侧边栏跟随滚动。这样一来,空白区域自然也就没有了。

 

二、主题选项添加设置项

打开inc/options/begin-options.php文件,大约1109行的位置,找到代码

  1. $options[] = array(
  2.     'name' => '',
  3.     'desc' => '显示杂志侧边栏',
  4.     'id' => 'cms_no_s',
  5.     'std' => '1',
  6.     'type' => 'checkbox'
  7. );

在其下面添加

  1. $options[] = array(
  2.     'name' => '',
  3.     'desc' => '杂志模块/侧边栏跟随滚动',
  4.     'id' => 'cms_slider_sticky',
  5.     'std' => '0',
  6.     'type' => 'checkbox'
  7. );

添加后就可在主题选项--杂志布局中找到该功能。

修复杂志布局和杂志页面当模块与侧边栏高度不一致时留有空白的bug

 

三、修改杂志布局文件

打开template/cms.php文件,大约12行的位置,找到代码

  1. if (zm_get_option('cms_no_s')) {
  2.     echo '<div id="primary" class="content-area">';
  3. }else {
  4.     echo '<div id="cms-primary" class="content-area">';
  5.  }

在其上面添加

  1. if (zm_get_option('cms_slider_sticky')) {
  2.     echo '<div id="primary-cms">';
  3. }

同时,在同文件大约38行的位置,找到代码

  1. if (zm_get_option('cms_no_s')) {
  2.     echo get_sidebar('cms');
  3. }else {
  4.     echo '<div class="clear"></div>';
  5. }

将其替换

  1. if (zm_get_option('cms_no_s')) {
  2.     echo get_sidebar('cms');
  3.     if (zm_get_option('cms_slider_sticky')) {
  4.         echo '</div>';
  5.     }
  6. else {
  7.     echo '<div class="clear"></div>';
  8. }

 

四、修改杂志页面文件

打开pages/template-cms.php文件,大约第8行的位置,找到代码

  1. <?php
  2.     if (!zm_get_option('slider_l') || (zm_get_option("slider_l") == 'slider_w')) {
  3.         require get_template_directory() . '/template/slider.php';
  4.     }
  5. ?>
  6. <div id="primary" class="content-area">

将其替换

  1. <?php
  2.     if (!zm_get_option('slider_l') || (zm_get_option("slider_l") == 'slider_w')) {
  3.         require get_template_directory() . '/template/slider.php';
  4.     }
  5.     if (zm_get_option('cms_slider_sticky')) {
  6.     echo '<div id="primary-cms">';
  7.     }
  8.     if (zm_get_option('cms_no_s')) {
  9.         echo '<div id="primary" class="content-area">';
  10.     }else {
  11.         echo '<div id="cms-primary" class="content-area">';
  12.      }
  13. ?>

同时,在同文件大约49行的位置,找到代码

  1. <!-- 侧边小工具 -->
  2. <?php get_sidebar('cms'); ?>

将其替换

  1. <?php
  2.     if (zm_get_option('cms_no_s')) {
  3.         echo get_sidebar('cms');
  4.         if (zm_get_option('cms_slider_sticky')) {
  5.             echo '</div>';
  6.         }
  7.     }else {
  8.         echo '<div class="clear"></div>';
  9.     }
  10. ?>

 

五、添加模块/侧边栏跟随滚动脚本

打开js/sticky.js文件,在文件的最后添加

  1. if ($('#primary').height()>$('.cms-sidebar').height()) {
  2.     $(document).ready(function() {
  3.         $('#primary-cms .cms-sidebar').theiaStickySidebar({
  4.             additionalMarginTop: 12,
  5.             additionalMarginBottom:0
  6.         });
  7.     });
  8. else {
  9.     $(document).ready(function() {
  10.         $('#primary-cms #primary').theiaStickySidebar({
  11.             additionalMarginTop: 12,
  12.             additionalMarginBottom:0
  13.         });
  14.     });
  15. }

 

六、其他说明

  • 完成以上操作后,就可以在主题选项--杂志布局选项卡中启用该功能了
  • 该主题(2018.10更新版)仅修复了“当左侧模块整体高度大于右侧侧边栏整体高度时,右侧留有空白”的bug,但没有修复“当右侧侧边栏整体高度大于左侧模块整体高度时,左侧留有空白”的bug。本文方法同时修复了这两个bug,即:无论左侧模块整体高度大于右侧侧边栏整体高度,还是右侧侧边栏整体高度大于左侧模块整体高度,都不会留有空白
  • 建议启用该功能

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: