【问题标题】:Different class if different sidebars are active on WordPress如果不同的侧边栏在 WordPress 上处于活动状态,则不同的类
【发布时间】:2014-01-18 20:20:39
【问题描述】:

我很难弄清楚该怎么做。

我为wordpress构建主题,主题基于bootstrap。如果不同的侧边栏处于活动状态,我需要有不同的fow类。

例如,我在页脚上有 4 个侧边栏。

footer1-sidebar
footer2-sidebar
footer3-sidebar
footer4-sidebar

所以如果这 4 个侧边栏只有 1 个处于活动状态,那么无论我应该拥有哪一个

<div class="row col-lg-12">
    footer1-sidebar
</div>

但如果 2 个侧边栏处于活动状态,我需要以某种方式将其分开

<div class="row col-lg-6">
    footer2-sidebar
</div>
<div class="row col-lg-6">
    footer4-sidebar
</div>

等等……

所以无论哪个激活 1 和 3,或 2 和 4 或 1,2 和 4,或所有 4 都激活。我需要以某种方式计算它们并将行划分为侧边栏的数量。

编辑

这是我目前在我的主题上使用的 footer-sidebar.php 的代码。

<?php if ( is_active_sidebar( 'footer1-sidebar' ) || is_active_sidebar( 'footer2-sidebar' ) || is_active_sidebar( 'footer3-sidebar' ) || is_active_sidebar( 'footer4-sidebar' ) ) : ?>
<div class="footer-top">
    <div class="container">
        <div class="row">
            <div class="col-lg-3 col-md-3 col-sm-3">
                <?php if ( is_active_sidebar('footer1-sidebar') ) : ?>
                        <?php dynamic_sidebar('footer1-sidebar'); ?>
                <?php endif; ?>
            </div>
            <div class="col-lg-3 col-md-3 col-sm-3">
                <?php if ( is_active_sidebar('footer2-sidebar') ) : ?>
                        <?php dynamic_sidebar('footer2-sidebar'); ?>
                <?php endif; ?>
            </div>
            <div class="col-lg-3 col-md-3 col-sm-3">
                <?php if ( is_active_sidebar('footer3-sidebar') ) : ?>
                        <?php dynamic_sidebar('footer3-sidebar'); ?>
                <?php endif; ?>
            </div>
            <div class="col-lg-3 col-md-3 col-sm-3">
                <?php if ( is_active_sidebar('footer4-sidebar') ) : ?>
                        <?php dynamic_sidebar('footer4-sidebar'); ?>
                <?php endif; ?>
            </div>
        </div>
    </div><!-- /.container -->
</div>

现在的问题是,如果一个或两个侧边栏不活动(没有小部件),它会在该列上留下空白空间。

【问题讨论】:

  • 您如何确定它们是否处于活动状态?而且,大概,您想在服务器上(使用php)而不是在客户端(使用javascript)上执行此操作?
  • 嗯,wordpress is_active_sidebar 上有一个选项可以检查侧边栏是否有小部件,当然我想在服务器上执行此操作。我目前正在寻找一些选项,如果我可以让它计算footer.php页面中所有活动的侧边栏并且样式需要之前呈现。不使用 javascript。
  • 您有 4 个侧边栏或 4 个小部件吗?以及如何确定页面上哪个侧边栏/小部件处于打开和关闭状态?
  • 我有 4 个边栏,我用页脚页面上的代码更新了问题。

标签: php html css wordpress twitter-bootstrap


【解决方案1】:

我最终得到了一种计数器,它在每个活动侧边栏上添加 +1,最后将 12 行划分为已计数的侧边栏数

<?php if ( is_active_sidebar( 'footer1-sidebar' ) || is_active_sidebar( 'footer2- sidebar' ) || is_active_sidebar( 'footer3-sidebar' ) || is_active_sidebar( 'footer4-sidebar' ) ) : ?>
<?php $count = 0;
if ( is_active_sidebar('footer1-sidebar') ) : $count++; endif; 
if ( is_active_sidebar('footer2-sidebar') ) : $count++; endif; 
if ( is_active_sidebar('footer3-sidebar') ) : $count++; endif; 
if ( is_active_sidebar('footer4-sidebar') ) : $count++; endif;
$row = 'col-lg-'. 12/$count .' col-md-'. 12/$count .' col-sm-'. 12/$count;
?>
<div class="footer-top">
    <div class="container">
        <div class="row">
            <?php if ( is_active_sidebar('footer1-sidebar') ) : ?>
                <div class="<?php echo $row ?>">
                    <?php dynamic_sidebar('footer1-sidebar'); ?>
                </div>
            <?php endif; ?>
            <?php if ( is_active_sidebar('footer2-sidebar') ) : ?>
                <div class="<?php echo $row ?>">
                    <?php dynamic_sidebar('footer2-sidebar'); ?>
                </div>
            <?php endif; ?>
            <?php if ( is_active_sidebar('footer3-sidebar') ) : ?>
                <div class="<?php echo $row ?>">
                    <?php dynamic_sidebar('footer3-sidebar'); ?>
                </div>
            <?php endif; ?>
            <?php if ( is_active_sidebar('footer4-sidebar') ) : ?>
                <div class="<?php echo $row ?>">
                    <?php dynamic_sidebar('footer4-sidebar'); ?>
                </div>
            <?php endif; ?>

        </div>
    </div><!-- /.container -->
</div>

【讨论】:

    猜你喜欢
    • 2014-03-31
    • 1970-01-01
    • 2020-03-06
    • 2015-10-03
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多