仅将 div 设置为小部件的内容 | WordPress

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.php中调用小部件的方式：

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 标题的情况下为小部件的内容设置填充。由于只有_widget和_title之前/之后，我怎样才能只为内容设置一个类？

Answer 1

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

我建议的一个选项如下：

1. 像你做的那样为你的父小部件 div 添加填充，例如

   .sidebar-widget{ 填充：0 10px； }

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

   .widget-title-background{ 左边距：-10px； 右边距：-10px； }

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