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

Question

我正在 Wordpress 上创建一个自定义侧边栏来显示独立的 block ，每个 block 中都有一个小部件。为此，我在 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 绕过 Angular 落，取消填充对主 div 的影响。