위젯 제목 다음에 위젯 컨텐츠를 랩핑하기 위해 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>

어떻게 할 수 있습니까?

답변:


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>
  • 제목이 없는지 확인
  • 그렇지 않은 경우 before_widget오프닝 위젯 컨텐츠 div를 표시하도록 출력을 수정합니다.

이 방법을 사용하면 위젯 인스턴스의 설정에 따라 다른 방법으로 사이드 바 인수를 변경할 수 있습니다.


문제가 있습니다 : 예를 들어 WP 기본 위젯과 같은 일부 위젯은 비워두면 기본 제목을 설정합니다. 따라서 해당 시점의 매개 변수에 제목이 없기 때문에 함수가 div를 추가하지만 나중에 위젯이 추가하고 코드가 엉망이됩니다. 위젯 "내부"에서 제목을 확인하는 방법을 알고 있습니까? 감사합니다
Cmorales

아니 위젯 수표 또는 자동으로 다음 위젯을 렌더링 제목을 구문 분석하는 일부 엄청나게 복잡한 코드 위젯을 추가하지 않고 ... A가 생각해야합니까
sanchothefat

codex.wordpress.org/Function_Reference/the_widget에 연결하면 도움 이 것입니까? 그들은이 기사 wp.smashingmagazine.com/2012/12/11/…
Cmorales

1
the_widget()dynamic_sidebar()함수 에서 사용되지 않고 지정한 옵션을 사용하여 위젯을 호출하는 수단입니다. 필터링 할 다른 장소이므로 내 솔루션은 그 결과를 다루지 않습니다. 건배
sanchothefat

2

div제목 매개 변수에 두 번째 를 추가하십시오 .

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

네, 제목이 없으면 실패합니다.
MBraiN

제목 문제를 해결하기 위해 몇 가지 코드로 답변을 추가했습니다. 아마 Toscho와 합병해야하지만 그는 이미 서사시 담당자를 가지고 있습니다 :)
sanchothefat

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가 sanchothefat의 답변으로 식별 된 문제를 수정했다고 생각합니다. 다음과 같이 위젯을 정의하십시오.

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_params컨텐츠 랩에 div를 추가하는 데 사용하십시오 .

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

예쁘지는 않지만 작동합니다.


처음에는이 접근 방식에 매우 흥분했지만 esc_html ($ title) (예 : BuddyPress)을 사용하는 위젯에 문제가 발생했습니다. 이 경우 추가 된 HTML이 이스케이프 처리되어 프런트 엔드에 렌더링되지 않습니다.
Ryan

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 );

여기에 뭔가 빠졌 으면 수정하십시오.하지만 꽤 견고합니다.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.