将 div 设置为仅小部件的内容 |文字新闻

Question

我正在Wordpress上创建一个自定义边栏来显示独立的块，每个块中都有一个小部件。为此，我在functions.php中注册了小部件区域，然后将这些小部件区域添加到我的边栏中。

侧边栏设置如下：

<aside class="sidebar-right" role="complementary">
<div class="sidebar-widget">
    <?php if(!function_exists('dynamic_sidebar') || !dynamic_sidebar('widget-area-1')) ?>
</div>
<div class="sidebar-widget">
    <?php if(!function_exists('dynamic_sidebar') || !dynamic_sidebar('widget-area-2')) ?>
</div>
<div class="sidebar-widget">
    <?php if(!function_exists('dynamic_sidebar') || !dynamic_sidebar('widget-area-3')) ?>
</div>
<div class="sidebar-widget">
    <?php if(!function_exists('dynamic_sidebar') || !dynamic_sidebar('widget-area-4')) ?>
</div>
</aside>

我大致希望我的侧边栏看起来像这样：https://jsfiddle.net/b7xtksts/

这就是在functions.hp:中调用小部件的方式

register_sidebar(array(
    'name' => __('Widget Area 1'),
    'description' => __('Description'),
    'id' => 'widget-area-1',
    'before_widget' => '<div id="%1$s" class="%2$s">',
    'after_widget' => '</div>',
    'before_title' => '<div class="widget-title-background"><h3>',
    'after_title' => '</h3></div>'
));

一切都很好，但我想在每个小部件的内容中添加填充，而不必编辑原始小部件，这样，由于padding，将来添加的每个小部件都将适合使用。

但是，如果我将padding设置为，比方说，<div id="%1$s" class="%2$s" style="padding:10px;">，那么填充将添加到整个小部件，以及背景标题（不再填充100%的框）。我想知道如何在不影响上面的div标题的情况下为小部件的内容设置填充。既然只有before/after _widget和_title，我如何才能将类仅设置为内容？

Answer 1

似乎我们无法将任何特定的类添加到小部件的内容主体中。

我建议的一个选项是：

1. 像您所做的那样向父窗口小部件div添加填充，例如

   .侧边栏小部件{填充：0 10px；}

2. 为了消除标题背景div两边10px填充的影响，我们用两边的负边距来取消它，即

   .widget标题背景{左边距：-10px；右侧边距：-10px；}

这将使标题的深色div绕过角落，取消主div上的填充效果。