Aggiunta di un div per avvolgere il contenuto del widget dopo il titolo del widget


10

Sto cercando di aggiungere un div al contenuto di un widget nella mia barra laterale dinamica.

Ecco il codice di registro;

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

Ma questo codice causa in questo modo;

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

Ecco cosa sto cercando di fare;

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

Come si può fare?

Risposte:


18

Oltre alla risposta di Toscho, ecco quello che ti serve per una soluzione solida:

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

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

Quello che fa è:

  • controlla le impostazioni della barra laterale registrata per i widget che terminano con 2 <div>secondi di chiusura
  • controlla se non c'è titolo
  • in caso contrario, modifica l' before_widgetoutput per mostrare il div del contenuto del widget di apertura

È possibile utilizzare questo approccio per modificare gli argomenti della barra laterale in altri modi in base alle impostazioni dell'istanza del widget.


Ho un problema con questo: alcuni widget (come quelli predefiniti di WP, ad esempio) impostano un titolo predefinito se lo si lascia vuoto. Quindi la tua funzione aggiunge il div perché a quel punto non c'è un titolo nei parametri, ma il widget lo aggiunge in seguito e il codice è incasinato. Sai come controllare il titolo "all'interno" del widget? Grazie
Cmorales il

Non senza aggiungere un widget con il controllo del widget o un codice orribilmente complesso per renderlo silenziosamente, quindi analizzarlo per un titolo ... Avrà un pensiero
sanchothefat

Forse collegarsi a questo codex.wordpress.org/Function_Reference/the_widget sarebbe d'aiuto? Lo usano (per altri motivi) in questo articolo wp.smashingmagazine.com/2012/12/11/…
Cmorales,

1
the_widget()non viene utilizzato nella dynamic_sidebar()funzione, è un mezzo per chiamare qualsiasi widget con le opzioni specificate sul posto. È un altro posto per filtrare, quindi la mia soluzione non copre tale eventualità. Saluti
sanchothefat,

2

Aggiungi il secondo dival parametro del titolo:

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

Ciò fallisce se non c'è il titolo di un widget - si può fare comunque
sanchothefat il

Sì, fallisce quando non c'è titolo ..
MBraiN

Ho aggiunto una risposta con un po 'di codice per risolvere il problema dei titoli. Probabilmente dovrebbe essere unito a quello di Toscho, ma ha già un rappresentante epico :)
sanchothefat,

2

Mi è piaciuta l'idea di entrambe le risposte @tosco e @sanchothefat, tuttavia ho lottato con quella combinazione perché, sebbene empty( $settings[ 'title' ]possa effettivamente restituire vero, il widget stesso potrebbe generare un titolo predefinito se nessuno è impostato. Questo titolo è poi avvolto nelle before_titlee after_titlemarkup e di nuovo di pagina le pause. Questo è il caso di alcuni dei widget predefiniti comunque.

Più facile attenersi ai parametri standard di registrazione del widget;

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

e quindi aggiungere un'azione di filtro secondo la risposta di Marventus qui;

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
e funziona solo per "Widget di testo"
Silver Moon,

1

Ecco cosa fai per raggiungere questo obiettivo:

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

Quando non c'è nessun titolo otterrai:

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

Quando c'è un titolo otterrai:

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

Per assicurarti che il primo content-div vuoto non venga mostrato in quest'ultimo caso, aggiungi questo al tuo css:

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

0

Dopo aver esaminato le risposte precedenti, penso di aver risolto il problema identificato da Cmorales con la risposta di sanchothefat. Definisci il tuo widget come segue:

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

È importante rimuovere i valori predefiniti before_titlee after_title. Dopo alcuni tentativi ed errori ho notato che il primo filtro che mostrava un titolo predefinito era widget_title. Quindi utilizzare il widget_titlefiltro in questo modo:

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

Fondamentalmente, <div class="panel-heading"><h3 class="panel-title">è mio before_titleed </h3></div>è mio after_title. Infine, usa dynamic_sidebar_paramsper anteporre un div di chiusura alla nostra panoramica dei contenuti:

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

Non è carino, ma funziona.


Inizialmente ero molto entusiasta di questo approccio, ma ho riscontrato un problema con i widget che usano esc_html ($ title) (ovvero BuddyPress). In tal caso, l'HTML aggiunto viene visualizzato con escape e non visualizzato nel front-end.
Ryan,

0

Ho appena cambiato leggermente il codice in modo che non sia necessario toccare register_sidebar . Registra una barra laterale in modo regolare:

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

E di seguito è riportato il codice modificato dalla soluzione di 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

Come accennato nei commenti, alcuni widget principali aggiungono il proprio titolo che poi si avvolge due volte con il div del contenuto. Per rimuoverli, potresti semplicemente restituire una stringa vuota. L'unico inconveniente è che devi inserire tutti i titoli manualmente.

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

Correggimi se mi manca qualcosa qui, ma penso che sia abbastanza solido.

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.