Cum să adaug clase CSS widget-urilor folosind functions.php?

Question

Cum să adaug clase CSS widget-urilor folosind functions.php?

19 dec. 2014, 19:52:42

Vizualizări: 18.7K

Voturi: 2

Am nevoie să adaug o clasă la widget-ul de căutare din WordPress. Cum aș putea face acest lucru? Îl apelez din partea de administrare, adică prin tragerea și plasarea lui în bara laterală din pagina de widget-uri a secțiunii de administrare. Nu îl apelez folosind get_search_form. Doresc să fac acest lucru prin fișierul functions.php, nu cu jQuery sau prin adăugarea de proprietăți CSS.

yaserso

397

widgeturi css

Comentarii

Ai văzut Adaugă clasă la before_widget pentru toate widget-urile cu un dropdown și un contor?

fuxia

19 dec. 2014 19:54:21

De fapt, asta ajută. Cred că face mai mult decât am nevoie, totuși. O să încerc să înțeleg. Mulțumesc!

yaserso

19 dec. 2014 20:01:09

Toate răspunsurile la întrebare

Comentarii

Aceasta este o abordare genială!

KalenGi

1 aug. 2018 21:17:03

Hei, poți adăuga o clasă în before_widget cam așa:

if ( function_exists('register_sidebar') )
    register_sidebar(array(
       'name' => 'Numele Widget-ului tău',
       'description' => 'Descrierea widget-ului tău',
       'before_widget' => '<div class="container-top">',
       'after_widget' => '</div>',
       'before_title' => '<h3 class="widget-title">',
       'after_title' => '</h3>',
    ));

cred că te va ajuta

Amit Mishra

503

19 dec. 2014 19:59:42

Comentarii

Nu o adaug prin funcția register sidebar. Vreau să adaug o clasă la widget-ul de căutare. Folosesc secțiunea de widget-uri din panoul de administrare cu sistemul de drag and drop.

yaserso

19 dec. 2014 20:02:55

Acest cod adaugă un câmp pentru clase în fiecare widget:

function kc_widget_form_extend( $instance, $widget ) {
  if ( !isset($instance['classes']) )
        $instance['classes'] = null;   
        $row .= "Clasă:\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' );

Sursă

dragoweb

249

11 iun. 2019 23:58:58

Există un plugin cu care poți adăuga mai multe clase CSS și ID-uri unui widget. Se numește Widget CSS Classes. Destul de util, aruncă o privire: https://wordpress.org/plugins/widget-css-classes/

propz

116

19 dec. 2014 20:10:40

Comentarii

Aș dori să evit utilizarea unui plugin, dacă este posibil.

yaserso

19 dec. 2014 20:14:08

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

Bine, am reușit să rezolv problema mulțumită lui @toscho care mi-a oferit acest link: Adăugarea unei clase la before_widget pentru toate widget-urile cu un dropdown și un counter

Am reușit să înțeleg cum funcționează.

Tot ce voiam să fac era să adaug o singură clasă "col-sm-4" din Bootstrap la widget-ul de căutare.

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

/**
 * Adaugă clase pentru widget-uri.
 *
 * @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;

}

Permiteți-mi să explic ce face acest cod.

În primul rând, pentru a înțelege mai bine codul, am făcut un print_r($params) pentru a vedea ce conține, iar acesta a fost rezultatul:

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
)

Pentru a înțelege mai bine rezultatul, am vizitat și pagina WordPress Code Reference pentru acel hook și am văzut ce conține de fapt array-ul. Apoi, tot ce a trebuit să fac a fost să folosesc numerele și cheile în avantajul meu.

În primul rând, am știut că majoritatea valorilor vor fi stocate în primul array $params[0], deoarece al doilea include doar numărul instanței, așa că ar trebui să folosesc acel array.
Doar pentru a mă asigura că codul nu rulează întotdeauna inutil, am pus o simplă condiție if pentru a verifica dacă este widget-ul pe care îl doresc.
Apoi, a trebuit să înlocuiesc valoarea din array, așa că am folosit array_replace().
În final, știind una dintre valorile pe care le voi găsi în valoarea before_widget, am folosit un str_replace pentru a schimba valoarea și a adăuga numele clasei pe care o doresc.

Dacă există o metodă mai bună de a face acest lucru, vă rog să mă anunțați sau să mă actualizați în viitor. Sper că acest lucru vă ajută.