Question

我正在构建一个wordpress主题，我在页脚上创建了3个侧边栏。我需要拥有这3个侧边栏的动态宽度，具体取决于它们中有多少是活动的。

因此，例如，如果我只有footer1侧边栏处于活动状态，则宽度应为100％

如果我有footer1和footer2，footer1和footer3，或footer2和footer3有效，则应为50％，

如果我让所有3个活跃33％。

最后，小部件保存在一个侧边栏中，而不是分开。

我不确定如何创建条件语句，因为3个小部件位于一个侧边栏中。

functions.php文件

register_sidebar( array(
    'name' => __( 'First Footer', 'captiva' ),
    'id' => 'first-footer',
    'before_widget' => '<div id="%1$s" class="col-lg-4 col-md-4 col-sm-6 %2$s">',
    'after_widget' => '</div>',
    'before_title' => '<h4 class="widget-title">',
    'after_title' => '</h4>',
) );

footer.php文件

<footer class="footercontainer" role="contentinfo"> 
    <?php if ( $cap_footer_top_active == 'yes' ) { ?>
        <?php if ( is_active_sidebar( 'first-footer' ) ) : ?>
            <div class="lightwrapper">
                <div class="container">
                    <div class="row">
                        <?php dynamic_sidebar( 'first-footer' ); ?>
                    </div><!-- /.row -->
                </div><!-- /.container -->
            </div><!-- /.lightwrapper -->
        <?php endif; ?>
    <?php } ?>

Answer 1

这应该有用......

.row div {
	float: left;
	box-sizing: border-box;
}
/* one item */
.row div:first-child:nth-last-child(1) {
width: 100%;
}
/* two items */
.row div:first-child:nth-last-child(2),
.row div:first-child:nth-last-child(2) ~ div {
width: 50%;
padding: 0 3.7%;
}
/* three items */
.row div:first-child:nth-last-child(3),
.row div:first-child:nth-last-child(3) ~ div {
width: 33.3%;
padding: 0 2.7%;
}
/* four items */
.row div:first-child:nth-last-child(4),
.row div:first-child:nth-last-child(4) ~ div,
/* Every item after the fourth will also use this width */
.row div:nth-last-child(n+5) {
width: 25%;
padding: 0 1.7%;
}

<h2>Sidebar with 4 widgets</h2>
<div class="lightwrapper">
	<div class="container">
		<div class="row">
	<div> 
              <h4>WIDGET #1</h4>
              <P>You know, your bobby dangler, giggle stick...</P>
          </div>
	<div> 
              <h4>WIDGET #2</h4>
              <P>You know, your bobby dangler, giggle stick...</P>
          </div>
	<div> 
              <h4>WIDGET #3</h4>
              <P>You know, your bobby dangler, giggle stick...</P>
          </div>
	<div> 
              <h4>WIDGET #4</h4>
              <P>You know, your bobby dangler, giggle stick...</P>
          </div>
		</div><!-- /.row -->
	</div><!-- /.container -->
</div><!-- /.lightwrapper -->
          
          
<br style="clear: both">  
    
<h2>Sidebar with 2 widgets</h2>
<div class="lightwrapper">
	<div class="container">
		<div class="row">
	<div> 
              <h4>WIDGET #1</h4>
              <P>You know, your bobby dangler, giggle stick...</P>
          </div>
	<div> 
              <h4>WIDGET #2</h4>
              <P>You know, your bobby dangler, giggle stick...</P>
          </div>
		</div><!-- /.row -->
	</div><!-- /.container -->
</div><!-- /.lightwrapper -->

Answer 2

这将为您提供动态宽度：

    <?php
    function display_dynamic_sidebar($sidebar = array()) {
        if (function_exists('dynamic_sidebar')) {

            // Store all activated sidebars here
            $activated_sidebars = array();  

            // Loop through each sidebar
            foreach($sidebar as $value) {   
                if (is_active_sidebar($value)) {
                    // Push all activated sidebars to our array 
                    array_push($activated_sidebars, $value);                    
                }
            }

            // Define the width 
            switch (count($activated_sidebars)) {
                case 2:
                    $defined_width = '50%';
                    break;
                case 3:
                    $defined_width = '33%';
                    break;
                default:
                    $defined_width = '100%';


}

         // Finally tell jQuery to set a dynamic width
        echo '<script>$(".my-footer").css( "width", "'. $defined_width .'" );</script>';
    }
}

display_dynamic_sidebar(array('sidebar-1', 'sidebar-2', 'sidebar-3', 'sidebar-4'));

只需重命名css类（.my-footer）和函数参数。而不是33％，50％和100％，你也可以使用像col-md-12，col-md-6和col-md-4这样的Bootstrap类。

中心Wordpress边栏小部件

2 个答案: