居中 Wordpress 侧边栏小部件

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 class (.my-footer) 和函数参数。除了 33%、50% 和 100%，您还可以使用 Bootstrap classes，例如 col-md-12、col-md-6 和 col-md-4。

居中 Wordpress 侧边栏小部件

Centering Wordpress Sidebar Widgets

css

php

wordpress