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

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

一、bug来源

使用这个主题的童鞋都知道,在【主题选项--杂志布局】选项卡中有非常多的模块。通过对这些模块的设置,可以在前台输出不同的展示效果,非常灵活。但也正是由于它的灵活性,导致前台杂志布局和杂志页面中左侧模块整体高度与右侧侧边栏整体高度不能得到很好的匹配。不是左侧空了一块,就是右侧空了一块,显得有些别扭。

具体表现请看下面两张图:

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

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

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

 

二、主题选项添加设置项

打开【inc/options/begin-options.php】文件,找到代码

$options[] = array(
    'name' => '',
    'desc' => '显示杂志侧边栏',
    'id' => 'cms_no_s',
    'std' => '1',
    'type' => 'checkbox'
);

在其下面添加

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

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

 

三、修改杂志布局文件

打开【template/cms.php】文件,找到代码

if (zm_get_option('cms_no_s')) {
    echo '<div id="primary" class="content-area">';
}else {
    echo '<div id="cms-primary" class="content-area">';
 }

在其上面添加

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

同时,在同文件中找到代码

if (zm_get_option('cms_no_s')) {
    echo get_sidebar('cms');
}else {
    echo '<div class="clear"></div>';
}

将其替换为

if (zm_get_option('cms_no_s')) {
    echo get_sidebar('cms');
    if (zm_get_option('cms_slider_sticky')) {
        echo '</div>';
    }
} else {
    echo '<div class="clear"></div>';
}

 

四、修改杂志页面文件

打开【pages/template-cms.php】文件,找到代码

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

将其替换为

<?php
    if (!zm_get_option('slider_l') || (zm_get_option("slider_l") == 'slider_w')) {
        require get_template_directory() . '/template/slider.php';
    }
    if (zm_get_option('cms_slider_sticky')) {
    echo '<div id="primary-cms">';
    }
    if (zm_get_option('cms_no_s')) {
        echo '<div id="primary" class="content-area">';
    }else {
        echo '<div id="cms-primary" class="content-area">';
     }
?>

同时,在同文件中找到代码

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

将其替换为

<?php
    if (zm_get_option('cms_no_s')) {
        echo get_sidebar('cms');
        if (zm_get_option('cms_slider_sticky')) {
            echo '</div>';
        }
    }else {
        echo '<div class="clear"></div>';
    }
?>

 

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

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

if ($('#primary').height()>$('.cms-sidebar').height()) {
    $(document).ready(function() {
        $('#primary-cms .cms-sidebar').theiaStickySidebar({
            additionalMarginTop: 12,
            additionalMarginBottom:0
        });
    });
} else {
    $(document).ready(function() {
        $('#primary-cms #primary').theiaStickySidebar({
            additionalMarginTop: 12,
            additionalMarginBottom:0
        });
    });
}

 

六、其他说明

  • 完成以上操作后,就可以在【主题选项--杂志布局】选项卡中启用该功能了
  • 该主题(截止2018.10)仅修复了“当左侧模块整体高度大于右侧侧边栏整体高度时,右侧留有空白”的bug,但没有修复“当右侧侧边栏整体高度大于左侧模块整体高度时,左侧留有空白”的bug。本文方法同时修复了这两个bug,即:无论左侧模块整体高度大于右侧侧边栏整体高度,还是右侧侧边栏整体高度大于左侧模块整体高度,都不会留有空白
  • 建议启用该功能
若文章图片、下载链接、网盘密码等信息出错,请留言反馈,博主将第一时间更新!如果喜欢,请打赏支持本站,谢谢大家!
isdola

发表评论

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