如何在Wordpress Sidebar中分割小部件？

问题描述：

我想让放在我的Wordpress边栏中的每个小部件都被额外的间距分开，就像在这个demo site中一样。这是我的电流sidebar。任何提示如何做到这一点？我尝试了所有在网上找到的CSS代码，但没有一个能帮助我。这是侧边栏的PHP。如何在Wordpress Sidebar中分割小部件？

<?php 
/* 
Template name: Page - Right sidebar 
*/ 
get_header(); ?> 

    <?php do_action('flatsome_before_page'); ?> 

    <div class="page-wrapper page-right-sidebar"> 
    <div class="row"> 

    <div id="content" class="large-9 left col col-divided" role="main"> 
    <div class="page-inner"> 
    <?php if(get_theme_mod('default_title', 0)){ ?> 
     <header class="entry-header"> 
      <h1 class="entry-title mb uppercase"><?php the_title(); ?></h1> 
     </header><!-- .entry-header --> 
    <?php } ?> 
    <?php while (have_posts()) : the_post(); ?> 

     <?php the_content(); ?> 

     <?php if (comments_open() || '0' != get_comments_number()){ 
        comments_template(); } ?> 

    <?php endwhile; // end of the loop. ?> 
    </div><!-- .page-inner --> 
</div><!-- .#content large-9 left --> 

<div class="large-3 col"> 
<?php get_sidebar(); ?> 
</div><!-- .sidebar --> 

</div><!-- .row --> 
</div><!-- .page-right-sidebar container --> 
<?php do_action('flatsome_after_page'); ?> 
<?php get_footer(); ?>

答

#sidebar li.widget-container{ 
    margin-bottom:20px; 
}

小部件的背景颜色：

#sidebar_container{ 
    background:transparent; 
}

哪里sidebar_container是您的侧边栏的容器。

实施例：

<aside id='sidebar_container' class='col-md-4 right'> 
    <ul id='sidebar' class='right'> 
     <?php 
      if (is_single() || is_page()){ 
       if (is_active_sidebar('Single Sidebar')){ 
        dynamic_sidebar(esc_html__('Single Sidebar','my-theme')); 
       } 
      }else{ 
       if (is_active_sidebar('First sidebar')){ 
        dynamic_sidebar(esc_html__('First sidebar','my-theme'));  
       } 
      } 
     ?> 
    </ul> 
</aside>

填充和余量的变化：

.col-border+.col,.col-divided+.col { 
    padding-left: 10px!important; 
    background: #fff; 
    margin-top:-15px; 
    /* margin-left:-100px; */ 
    display: inline-table; 
    /* padding-right: 60px; */ 
}

即只有小部件之间添加间隔。我要求与对方之间的背景颜色分开，就像在图像中所示。 TNX。 – DrMTR

它增加了余量不间距。看看编辑答案。在那里你可以为侧边栏设置背景或使用“透明”，然后侧边栏将有身体或父div的背景。 – Wordica

我把你的CSS放到自定义的CSS编辑器中，但没有看到小部件之间的蓝色背景颜色。当前在我的网站上有2个小工具放置在侧边栏中。还设置颜色到背景CSS，但没有任何反应。 – DrMTR

答

Footer.php 
<style> 
#footer-sidebar1 { 
border: 1px solid red; 
float: left; 
width: 32.5%; 
margin-left:5px; 
margin-right:5px; 
} 
#footer-sidebar2 { 
border: 1px solid red; 
float: left; 
width: 32.5%; 
margin-right:5px; 
} 
#footer-sidebar3 { 
border: 1px solid red; 
float: left; 
width: 32.5%; 
} . 
widget_bac{ background-image: url("http://localhost/wordpress/wpcontent/uploads/2017/07/footer.jpg");} 
h3.w_hed { 
color: white; 
} 
</style> 
<div class="container-fluid"> 
<div id="footer-sidebar" class="secondary widget_bac" style="border: 1px solid 
blue; height: 400px;"> 
<div id="footer-sidebar1"> 
<?php 
if(is_active_sidebar('footer-sidebar-1')){ 
dynamic_sidebar('footer-sidebar-1'); 
} 
?> 
</div> 
<div id="footer-sidebar2"> 
<?php 
if(is_active_sidebar('footer-sidebar-2')){ 
dynamic_sidebar('footer-sidebar-2'); 
} 
?> 
</div> 
<div id="footer-sidebar3"> 
<?php 
if(is_active_sidebar('footer-sidebar-3')){ 
dynamic_sidebar('footer-sidebar-3'); 
} 
?> 
</div> 
</div> 
Function.php 
/*******************************************************************************/ 
function tesseract_widgets_init() { 
register_sidebar(array(
'name' => 'Footer Sidebar 1', 
'id' => 'footer-sidebar-1','description' => 'Appears in the footer area', 
'before_widget' => '<aside id="%1$s" class="widget %2$s">', 
'after_widget' => '</aside>', 
'before_title' => '<h3 class="widget-title">', 
'after_title' => '</h3>', 
)); 
register_sidebar(array(
'name' => 'Footer Sidebar 2', 
'id' => 'footer-sidebar-2', 
'description' => 'Appears in the footer area', 
'before_widget' => '<aside id="%1$s" class="widget %2$s">', 
'after_widget' => '</aside>', 
'before_title' => '<h3 class="widget-title">', 
'after_title' => '</h3>', 
)); 
register_sidebar(array(
'name' => 'Footer Sidebar 3', 
'id' => 'footer-sidebar-3', 
'description' => 'Appears in the footer area', 
'before_widget' => '<aside id="%1$s" class="widget %2$s">', 
'after_widget' => '</aside>', 
'before_title' => '<h3 class="widget-title">', 
'after_title' => '</h3>', 
)); 
} 
add_action('widgets_init', 'tesseract_widgets_init'); 
/*******************************************************************************/

如何在Wordpress Sidebar中分割小部件？

相关推荐