Come aggiungere classi CSS ai widget utilizzando functions.php?

Question

Come aggiungere classi CSS ai widget utilizzando functions.php?

19 dic 2014, 19:52:42

Visualizzazioni: 18.7K

Voti: 2

Ho bisogno di aggiungere una classe al widget di ricerca di WordPress. Come posso fare? Lo sto richiamando dalla parte amministrativa, cioè trascinandolo e rilasciandolo nella sidebar nella pagina dei widget della sezione admin. Non lo sto richiamando usando get_search_form. Voglio farlo utilizzando il file functions.php, non con jQuery o aggiungendo proprietà CSS.

yaserso

397

widget css

Commenti

Hai visto Aggiungi classe a before_widget per tutti i widget con un dropdown e un contatore?

fuxia

19 dic 2014 19:54:21

In realtà questo aiuta. Penso che faccia più di ciò di cui ho bisogno, però. Proverò a capirlo. Grazie!

yaserso

19 dic 2014 20:01:09

Tutte le risposte alla domanda

Commenti

Questo è un approccio brillante!

KalenGi

1 ago 2018 21:17:03

Ecco, puoi aggiungere una classe in before_widget in questo modo

if ( function_exists('register_sidebar') )
    register_sidebar(array(
       'name' => 'Nome del tuo widget',
       'description' => 'Descrizione del tuo widget',
       'before_widget' => '<div class="container-top">',
       'after_widget' => '</div>',
       'before_title' => '<h3 class="widget-title">',
       'after_title' => '</h3>',
    ));

Penso possa esserti utile

Amit Mishra

503

19 dic 2014 19:59:42

Commenti

Non lo sto aggiungendo tramite la funzione register sidebar. Voglio aggiungere una classe al widget di ricerca. Sto utilizzando la sezione widget nell'area di amministrazione con il sistema di drag and drop.

yaserso

19 dic 2014 20:02:55

Questo aggiunge un campo classe ad ogni widget:

function kc_widget_form_extend( $instance, $widget ) {
  if ( !isset($instance['classes']) )
        $instance['classes'] = null;   
        $row .= "Classe:\t<input type='text' name='widget-{$widget->id_base}[{$widget->number}][classes]' id='widget-{$widget->id_base}-{$widget->number}-classes' class='widefat' value='{$instance['classes']}'/>\n";
        $row .= "</p>\n";    
        echo $row;
    return $instance;
}
add_filter('widget_form_callback', 'kc_widget_form_extend', 10, 2);

function kc_widget_update( $instance, $new_instance ) {
    $instance['classes'] = $new_instance['classes'];
    return $instance;
}
add_filter( 'widget_update_callback', 'kc_widget_update', 10, 2 );

function kc_dynamic_sidebar_params( $params ) {
    global $wp_registered_widgets;
    $widget_id    = $params[0]['widget_id'];
    $widget_obj   = $wp_registered_widgets[$widget_id];
    $widget_opt   = get_option($widget_obj['callback'][0]->option_name);
    $widget_num   = $widget_obj['params'][0]['number'];    
    if ( isset($widget_opt[$widget_num]['classes']) && !empty($widget_opt[$widget_num]['classes']) )
        $params[0]['before_widget'] = preg_replace( '/class="/', "class=\"{$widget_opt[$widget_num]['classes']} ", $params[0]['before_widget'], 1 );
    return $params;
}
add_filter( 'dynamic_sidebar_params', 'kc_dynamic_sidebar_params' );

Fonte

dragoweb

249

11 giu 2019 23:58:58

Esiste un plugin che ti permette di aggiungere più classi CSS e ID a un widget. Si chiama Widget CSS Classes. Molto utile, dagli un'occhiata: https://wordpress.org/plugins/widget-css-classes/

propz

116

19 dic 2014 20:10:40

Commenti

Vorrei evitare di utilizzare un plugin, se possibile.

yaserso

19 dic 2014 20:14:08

yaserso 397 · Accepted Answer · 2014-12-19T21:36:39Z

Bene, sono riuscito a farcela grazie a @toscho che mi ha fornito questo link: Aggiungi classe a before_widget per tutti i widget con un dropdown e un counter

In un certo senso ci ho lavorato sopra.

Tutto quello che volevo fare era aggiungere una classe "col-sm-4" di Bootstrap al widget di ricerca.

is_admin() || add_filter( 'dynamic_sidebar_params', 'wpse172754_add_widget_classes' );

/**
 * Aggiunge classi ai widget.
 *
 * @param  array $params
 * @return array
 */
function wpse172754_add_widget_classes( $params ) {

if ($params[0]['widget_name'] == 'Search') {
  $params[0] = array_replace($params[0], array('before_widget' => str_replace("widget_search", "widget_search col-sm-4", $params[0]['before_widget'])));
}

  return $params;

}

Permettimi di spiegare cosa fa.

Prima, per capire meglio il codice io stesso, ho fatto un print_r($params) per vedere cosa contiene, e questo è stato l'output:

Array
(
    [0] => Array
    (
        [name] => Primary
        [id] => sidebar-primary
        [description] => 
        [class] => 
        [before_widget] => <section class="widget search-2 widget_search">
        [after_widget] => </section>
        [before_title] => <h3>
        [after_title] => </h3>
        [widget_id] => search-2
        [widget_name] => Search
    )

    [1] => Array
    (
        [number] => 2
    )
)

Array
(
    [0] => Array
    (
        [name] => Primary
        [id] => sidebar-primary
        [description] => 
        [class] => 
        [before_widget] => <section class="widget custom-social-media-widget-2 widget_custom-social-media-widget col-xs-offset-2 col-xs-6 col-sm-offset-4 col-sm-3 col-lg-offset-5 col-lg-2">
        [after_widget] => </section>
        [before_title] => <h3>
        [after_title] => </h3>
        [widget_id] => custom-social-media-widget-2
        [widget_name] => Custom Social Media Widget
    )

    [1] => Array
        (
            [number] => 2
)

Per capire meglio l'output, sono anche andato alla pagina WordPress Code Reference per quell'hook e ho visto cosa contiene effettivamente l'array. Successivamente, tutto quello che dovevo fare era usare i numeri e le chiavi a mio vantaggio.

Prima, sapevo che la maggior parte dei valori sarebbe stata memorizzata nel primo array $params[0], poiché il secondo includeva solo il numero dell'istanza, quindi avrei dovuto usare quell'array.
Solo per assicurarmi che il codice non esegua sempre operazioni non necessarie, ho inserito una semplice istruzione if per verificare se si tratta del widget che desidero.
Poi, dovevo sostituire il valore nell'array, quindi ho usato array_replace().
Infine, sapendo che uno dei valori che avrei trovato nel valore before_widget, ho usato un str_replace per cambiare il valore e aggiungere il nome della classe che voglio.

Se c'è un modo migliore per farlo, per favore fammelo sapere o aggiornami in futuro su questo. Spero che questo aiuti.