Menambahkan div untuk membungkus konten widget setelah judul widget


10

Saya mencoba menambahkan div ke konten widget di bilah sisi dinamis saya.

Ini adalah kode register;

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

Tetapi kode ini menyebabkan seperti ini;

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

Inilah yang saya coba lakukan;

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

Bagaimana itu bisa dilakukan?

Jawaban:


18

Selain jawaban Toscho, inilah yang Anda butuhkan untuk solusi yang kuat:

// 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;
}

Dari jawaban 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">',
));

Apa yang dilakukan adalah:

  • cek pengaturan untuk sidebar terdaftar untuk widget berakhir di 2 penutupan <div>s
  • memeriksa apakah tidak ada judul
  • jika tidak, itu memodifikasi before_widgetoutput untuk menampilkan div konten widget pembukaan

Anda bisa menggunakan pendekatan ini untuk mengubah argumen bilah sisi dengan cara lain untuk didasarkan pada pengaturan instance widget.


Saya punya masalah dengan itu: beberapa widget (seperti WP default, misalnya) menetapkan judul default jika Anda membiarkannya kosong. Jadi fungsi Anda menambahkan div karena tidak ada judul di params pada saat itu, tetapi widget menambahkannya setelah itu dan kode kacau. Apakah Anda tahu cara memeriksa judul dari "di dalam" widget? Terima kasih
Cmorales

Bukan tanpa menambahkan widget dengan cek widget atau kode rumit yang rumit untuk membuat widget secara diam-diam lalu menguraikannya untuk judul ... Akan memiliki think
sanchothefat

Mungkin menghubungkan ke codex.wordpress.org/Function_Reference/the_widget ini akan membantu? Mereka menggunakannya (untuk alasan lain) dalam artikel ini wp.smashingmagazine.com/2012/12/11/…
Cmorales

1
the_widget()tidak digunakan dalam dynamic_sidebar()fungsi, itu adalah sarana untuk memanggil widget apa pun dengan opsi yang Anda tentukan. Ini adalah tempat lain untuk memfilter sehingga solusi saya tidak mencakup kemungkinan itu. Cheers
sanchothefat

2

Tambahkan yang kedua divke parameter judul:

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">',
    ));

Itu gagal jika tidak ada judul widget - itu bisa dilakukan
sanchothefat

Ya itu gagal ketika tidak ada judul ..
MBraiN

Saya telah menambahkan jawaban dengan beberapa kode untuk memperbaiki masalah judul. Mungkin seharusnya digabung dengan Toscho benar-benar tetapi dia sudah memiliki perwakilan epik :)
sanchothefat

2

Saya menyukai ide jawaban kedua @tosco dan @sanchothefat - namun saya telah berjuang dengan kombinasi itu karena walaupun empty( $settings[ 'title' ]mungkin benar kembali widget itu sendiri mungkin menghasilkan judul default jika tidak ada yang ditetapkan. Judul ini kemudian dibungkus dalam before_titledan after_titlemarkup dan lagi halaman istirahat. Begitulah halnya dengan beberapa widget default.

Lebih mudah untuk tetap berpegang pada parameter pendaftaran widget standar;

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

dan kemudian menambahkan tindakan filter sesuai jawaban Marventus di sini;

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
dan itu hanya berfungsi untuk "Widget Teks"
Silver Moon

1

Inilah yang Anda lakukan untuk mencapai ini:

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">',
    ))

Ketika tidak ada judul, Anda akan mendapatkan:

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

Ketika ada judul Anda akan mendapatkan:

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

Untuk memastikan konten kosong pertama tidak muncul dalam kasus terakhir, Anda menambahkan ini ke css Anda:

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

0

Setelah melihat jawaban sebelumnya, saya pikir saya memperbaiki masalah Cmorales yang diidentifikasi dengan jawaban sanchothefat. Tentukan widget Anda sebagai berikut:

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

Sangat penting bahwa before_titledan after_titledefault dihapus. Setelah beberapa percobaan dan kesalahan saya perhatikan bahwa filter pertama yang menunjukkan judul default adalah widget_title. Kemudian gunakan widget_titlefilter seperti ini:

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

Pada dasarnya, <div class="panel-heading"><h3 class="panel-title">ini milik saya before_titledan milik </h3></div>saya after_title. Terakhir, gunakan dynamic_sidebar_paramsuntuk menambahkan div penutup untuk bungkus konten kami:

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

Itu tidak cantik, tetapi berhasil.


Awalnya sangat senang dengan pendekatan ini, tapi saya mengalami masalah dengan widget yang menggunakan esc_html ($ title) (yaitu BuddyPress). Ketika itu yang terjadi, HTML yang ditambahkan ditampilkan lolos dan tidak ditampilkan di ujung depan.
Ryan

0

Saya hanya sedikit mengubah kode sehingga tidak perlu menyentuh register_sidebar . Daftarkan bilah sisi dengan cara biasa:

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

Dan di bawah ini adalah kode yang dimodifikasi Dari Solusi 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

Seperti disebutkan dalam komentar, beberapa widget inti menambahkan judul mereka sendiri yang kemudian dibungkus dua kali dengan konten div. Untuk menghapusnya, Anda cukup mengembalikan string kosong. Satunya downside adalah bahwa Anda harus memasukkan semua judul secara manual.

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

Koreksi saya jika saya kehilangan sesuatu di sini, tetapi saya pikir itu cukup solid.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.