幸运或不幸的是，我没有做太多的研究，为我的客户的网站制作了一个动态边栏小部件区域。
我的functions.php 代码为：
...
register_sidebar( array (
\'name\' => \'Left Widget Area\',
\'id\' => \'primary_widget_area\',
\'before_widget\' => \'<li id="%1$s" class="widget %2$s">\',
\'after_widget\' => \'</div></li><!-- .widget -->\',
\'before_title\' => \'<div class="widget-title">\',
\'after_title\' => \'</div><!-- .widget-title --><div class="widget-content">\',
) );
...
侧栏的调用方式为：
<ul>
<?php if ( is_sidebar_active(\'primary_widget_area\') ) : ?>
<?php dynamic_sidebar(\'primary_widget_area\'); ?>
<?php endif; ?>
</ul>
事情做得很好，但是。。。在两种情况下：
当小部件标题处于活动状态时。。。它加载。。。
<ul>
<li class="widget">
<div class="widget-title">widget title...</div>
<div class="widget-content">
widget contents here...
</div>
</li>
</ul>
小部件标题为空时。。。它加载。。。
<ul>
<li class="widget">
widget contents here...
</li>
</ul>
现在使用我的CSS，动态小部件的外观如下：
正如我所确定的，问题是：register_sidebar() 功能只有4个选项：
在这些条件下，只有两个条件：
小部件标题激活：加载1,2,3,4小部件标题不存在：仅加载1,2functions.php 代码<div class="widget-content"></div> 标题字段保持为空时完全丢失。因此，如果没有4边填充，小部件区域的内容看起来是有边框的，看起来很难看。
如果我把padding: 3%; 在里面.widget, 它改变了小部件标题的外观，并在其周围添加了填充，这看起来太糟糕了
但它解决了小部件无标题小部件的外观问题。
可能的解决方案
所以，我想了一个解决方案，如果我可以制作一个条件CSS，比如：
<?php
if( active_widget_title() ) : ?>
<style>
.widget{
my default css;
}
</style>
<?php else : ?>
<style>
.widget{
padding: 3% !important;
}
</style>
<?php endif; ?>
但是，唉！没有像这样的事情
active_widget_title()所以，如果没有这个，how can I solve this very minute problem of designing the dynamic widgets?
编辑：
最令人震惊的问题是：当标题不存在时
<div> 故障，因为发生在那里的结构看起来：
<ul>
<li class="widget">
widget contents here...
</div> <!-- .widget-content ended without starting -->
</li>
</ul>
结束div(
</div>) 没有启动程序。这对模板来说是一场大屠杀(
最合适的回答,由SO网友:gmazzap 整理而成
不是一个好的解决方案。。。但有一个解决方案：使用jquery。
register_sidebar( array (
\'name\' => \'Left Widget Area\',
\'id\' => \'primary_widget_area\',
\'before_widget\' => \'<li id="%1$s" class="widget %2$s"><div class="widget-title"></div><div class="widget-content">\',
\'after_widget\' => \'</div></li><!-- .widget -->\',
\'before_title\' => \'<span class="invisible-title" data-widget="%1$s" style="display:none;">\',
\'after_title\' => \'</span>\',
) );
还有JS
jQuery().ready(function($) {
$(\'.invisible-title\').each(function() {
var title = $(this).html();
var widgetid = $(this).data(\'widget\');
$( \'#\' + widgetid ).find(\'.widget-title\').html(title);
$(this).remove();
});
});
始终显示好看的红色条，如果没有标题，则为空。
如果您不想在没有标题的情况下使用红色条，并且在这种情况下还需要调整填充？没问题。将上述内容更改为：
jQuery().ready(function($) {
$(\'.widget\').each(function() {
var $title = $(this).find(\'.invisible-title\');
if ( ! $title.length ) {
$(this).css(\'padding\',\'3%\').find(\'.widget-title\').remove();
} else {
$(this).find(\'.widget-title\').html($title.html());
$title.remove();
}
});
});
如果您希望某些小部件始终具有标题栏，而另一些小部件只有在有标题时才具有标题栏？没问题了。当wordpress打印小部件时，它会添加类，以便您可以识别小部件是什么。E、 g.标准wordpress文本小部件将具有“widget\\u text”类。
jQuery().ready(function($) {
$(\'.widget\').each(function() {
var $title = $(this).find(\'.invisible-title\');
if ( ( ! $title.length ) && $(this).hasClass(\'widget_text\') ) {
$(this).css(\'padding\',\'3%\').find(\'.widget-title\').remove();
} else {
$(this).find(\'.widget-title\').html($title.html());
$title.remove();
}
});
});
更详细的小部件选择？提示：每个小部件都有一个唯一的id。。。
