在小部件标题后添加div以包装小部件内容


10

我正在尝试在动态边栏中将div添加到小部件的内容中。

这是注册码;

register_sidebar(array(
        'name' => "Sidebar1",
        'id' => 'home-sidebar-1',
        'before_widget' => '<div class="sidebar-box">',
        'after_widget' => '</div>',
        'before_title' => '<div class="title">',
        'after_title' => '</div>',
    ));

但是这段代码是这样的;

<div class="sidebar-box">
    <div class="title">{WIDGET TITLE}</div>
     {WIDGET CONTENT}
</div>

这是我正在尝试做的事情;

<div class="sidebar-box">
    <div class="title">{WIDGET TITLE}</div>
    <div class="content">
           {WIDGET CONTENT}
    </div> 
</div>

怎么做?

Answers:


18

除了Toscho的答案之外,这还需要一个可靠的解决方案:

// if no title then add widget content wrapper to before widget
add_filter( 'dynamic_sidebar_params', 'check_sidebar_params' );
function check_sidebar_params( $params ) {
    global $wp_registered_widgets;

    $settings_getter = $wp_registered_widgets[ $params[0]['widget_id'] ]['callback'][0];
    $settings = $settings_getter->get_settings();
    $settings = $settings[ $params[1]['number'] ];

    if ( $params[0][ 'after_widget' ] == '</div></div>' && isset( $settings[ 'title' ] ) && empty( $settings[ 'title' ] ) )
        $params[0][ 'before_widget' ] .= '<div class="content">';

    return $params;
}

从Toscho的答案:

register_sidebar(array(
    'name' => "Sidebar1",
    'id' => 'home-sidebar-1',
    'before_widget' => '<div class="sidebar-box">',
    'after_widget' => '</div></div>',
    'before_title' => '<div class="title">',
    'after_title' => '</div><div class="content">',
));

这是什么:

  • 检查以2个结尾<div>s 结尾的小部件的注册侧边栏设置
  • 检查是否没有标题
  • 如果不是,它将修改before_widget输出以显示打开的窗口小部件内容div

您可以使用此方法以其他方式将侧边栏参数更改为基于小部件实例的设置。


我对此有一个疑问:如果您将该空白保留为空白,则某些小部件(例如WP默认部件)会设置默认标题。因此,您的函数添加了div,因为此时参数中没有标题,但是小部件随后添加了它,并且代码混乱了。您知道如何从窗口小部件中检查标题吗?谢谢
Cmorales 2013年

并非没有通过检查小部件或添加一些极其复杂的代码以静默方式呈现小部件,然后解析其标题的方式添加小部件...会想一想
sanchothefat

也许连接到此codex.wordpress.org/Function_Reference/the_widget会有所帮助吗?他们在本文中使用了(出于其他原因)wp.​​smashingmagazine.com/2012/12/11/…– Cmorales 2013
53

1
the_widget()dynamic_sidebar()函数中未使用,这是一种调用带有您指定的选项的小部件的方法。不过,这是另一个要过滤的地方,因此我的解决方案不涵盖这种可能性。干杯
sanchothefat

2

将第二个添加div到title参数:

register_sidebar(array(
        'name' => "Sidebar1",
        'id' => 'home-sidebar-1',
        'before_widget' => '<div class="sidebar-box">',
        'after_widget' => '</div></div>',
        'before_title' => '<div class="title">',
        'after_title' => '</div><div class="content">',
    ));

如果没有小部件标题,该操作将失败-尽管可以完成
sanchothefat 2012年

是时,有没有冠军。失败
MBraiN

我添加了一些代码来解决标题问题的答案。或许应该与Toscho的合并,但他已经拥有史诗般的代表了:)
sanchothefat 2012年

2

我喜欢@tosco和@sanchothefat答案的想法-但是我一直在尝试这种组合,因为虽然empty( $settings[ 'title' ]可能确实返回true,但如果未设置,则窗口小部件本身可能会输出默认标题。然后将此标题包装在before_titleafter_title标记中,然后再次分页。无论如何,某些默认小部件就是这种情况。

仅需遵循标准的小部件注册参数即可;

register_sidebar(array(
    'id' => 'sidebar1',
    'name' => __( 'Sidebar 1', 'bonestheme' ),
    'description' => __( 'The first (primary) sidebar.', 'bonestheme' ),
    'before_widget' => '<div class="block">',
    'after_widget' => '</div>',
    'before_title' => '<div class="block-title">',
    'after_title' => '</div>',
));

然后根据Marventus的答案在此处添加过滤器操作;

http://wordpress.org/support/topic/add-html-wrapper-around-widget-content

function widget_content_wrap($content) {
    $content = '<div class="block-content">'.$content.'</div>';
    return $content;
}
add_filter('widget_text', 'widget_content_wrap');

3
并且仅适用于“文本小部件”
Silver Moon

1

为此,您需要执行以下操作:

register_sidebar(array(
        'name' => "Sidebar1",
        'id' => 'home-sidebar-1',
        'before_widget' => '<div class="sidebar-box"><div class="content">',
        'after_widget' => '</div></div>',
        'before_title' => '</div><div class="title">',
        'after_title' => '</div><div class="content">',
    ))

如果没有标题,您将获得:

<div class="sidebar-box"><div class="content">
{CONTENT}
</div></div>

有标题时,您将获得:

<div class="sidebar-box"><div class="content">
</div><div class="title">
{TITLE}
<div class="content">
{CONTENT}
</div></div>

为了确保在后一种情况下不会显示第一个空的content-div,请将其添加到CSS中:

.sidebar-box .content:empty {display:none !important;}

0

看完先前的答案后,我认为我已解决了桑德拉菲特的答案所标识的Cmorales问题。定义小部件,如下所示:

register_sidebar( array(
    'name' => 'Sidebar',
    'id' => 'sidebar',
    'before_widget' => '<div class="panel panel-default %2$s" id="%1$s">',
    'after_widget' => '</div>',
    'before_title' => '',
    'after_title' => ''
) );

删除before_titleafter_title默认值很重要。经过反复试验,我注意到显示默认标题的第一个过滤器是widget_title。然后widget_title像这样使用过滤器:

function widget_title( $title ) {
    if ( $title )
        $title = '<div class="panel-heading"><h3 class="panel-title">' . $title . '</h3></div>';
    $title .= '<div class="panel-body">';
    return $title;
}

基本上<div class="panel-heading"><h3 class="panel-title">是我的before_title</h3></div>也是我的after_title。最后,使用dynamic_sidebar_paramsdiv作为结束内容包装的前缀:

function dynamic_sidebar_params( $params ) {
    $params[0]['after_widget'] = '</div>' . $params[0]['after_widget'];
    return $params;
}

它不漂亮,但是可以用。


最初对这种方法感到非常兴奋,但是我遇到了使用esc_html($ title)的小部件(即BuddyPress)的问题。在这种情况下,添加的HTML会以转义的方式显示,而不是在前端呈现。
瑞安

0

我只是稍微更改了代码,所以不需要触摸register_sidebar。以常规方式注册边栏:

register_sidebar(array(
    'name' => "Sidebar1",
    'id' => 'home-sidebar-1',
    'before_widget' => '<div class="sidebar-box">',
    'after_widget' => '</div>',
    'before_title' => '<div class="title">',
    'after_title' => '</div>',
));

下面是Sanchothefat解决方案的修改代码:

/**
 * If no title given then add widget-content wrapper to before_widget
 * If title given then add content wrapper to before_widget
*/
add_filter('dynamic_sidebar_params', 'check_widget_template');
function check_widget_template($params){
    global $wp_registered_widgets;

    $settings_obj = $wp_registered_widgets[$params[0]['widget_id']]['callback'][0];
    $the_settings = $settings_obj->get_settings();
    $the_settings = $the_settings[$params[1]['number']];

    if (isset($params[0]['id']) && $params[0]['id'] == 'home-sidebar-1') {
        if (!isset($the_settings['title']) && empty($the_settings['title'])) {
            $params[0]['before_widget'] .= '<div class="widget-inner">';
            $params[0]['after_widget']  .= '</div>';
        } else {
            $params[0]['after_widget']  .= '</div>';
            $params[0]['after_title']   .= '<div class="widget-inner">';
        }
    }

    return $params;
}

0

如评论中所述,一些核心小部件添加了自己的标题,然后将其与内容div包裹了两次。要删除它们,您可以简单地返回一个空字符串。唯一的缺点是您必须手动输入所有标题。

function remove_default_widget_title( $title, $instance = [], $id = '' ) {
    if ( isset($instance['title']) && trim($instance['title']) == '' ) {
        return '';
    }
    return $title;
};
add_filter( 'widget_title', 'remove_default_widget_title', 10, 3 );

如果我在这里缺少任何内容,请纠正我,但是我认为这很可靠。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.