Cómo añadir clases CSS a widgets usando functions.php

Question

Cómo añadir clases CSS a widgets usando functions.php

19 dic 2014, 19:52:42

Vistas: 18.7K

Votos: 2

Necesito añadir una clase al widget de búsqueda de WordPress. ¿Cómo puedo hacerlo? Lo estoy llamando desde el lado del administrador, es decir, arrastrándolo y soltándolo en la barra lateral en la página de widgets de la sección de administración. No lo estoy llamando usando get_search_form. Quiero hacerlo usando el archivo functions.php, no con jQuery o añadiendo propiedades CSS.

yaserso

397

widgets css

Comentarios

¿Has visto Agregar clase a before_widget para todos los widgets con un dropdown y un contador?

fuxia

19 dic 2014 19:54:21

De hecho, esto ayuda. Creo que hace más de lo que necesito, pero intentaré entenderlo. ¡Gracias!

yaserso

19 dic 2014 20:01:09

Todas las respuestas a la pregunta

Comentarios

¡Este es un enfoque brillante!

KalenGi

1 ago 2018 21:17:03

Puedes agregar una clase en before_widget algo así

if ( function_exists('register_sidebar') )
    register_sidebar(array(
       'name' => 'Nombre de tu Widget',
       'description' => 'Descripción de tu widget',
       'before_widget' => '<div class="container-top">',
       'after_widget' => '</div>',
       'before_title' => '<h3 class="widget-title">',
       'after_title' => '</h3>',
    ));

Creo que esto te ayudará

Amit Mishra

503

19 dic 2014 19:59:42

Comentarios

No lo estoy agregando a través de la función register sidebar. Quiero agregar una clase al widget de búsqueda. Estoy usando la sección de widgets en el área de administración con el sistema de arrastrar y soltar.

yaserso

19 dic 2014 20:02:55

Este código añade un campo de clase a cada widget:

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

Fuente

dragoweb

249

11 jun 2019 23:58:58

Existe un plugin con el que puedes agregar más clases CSS e ID's a un widget. Se llama Widget CSS Classes. Bastante útil, échale un vistazo: https://wordpress.org/plugins/widget-css-classes/

propz

116

19 dic 2014 20:10:40

Comentarios

Me gustaría evitar usar un plugin, si es posible.

yaserso

19 dic 2014 20:14:08

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

Bien, logré hacerlo gracias a @toscho quien me proporcionó este enlace: Agregar clase a before_widget para todos los widgets con un desplegable y un contador

De alguna manera logré resolverlo.

Todo lo que quería hacer era agregar una clase "col-sm-4" de Bootstrap al widget de búsqueda.

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

/**
 * Agregar clases para widgets.
 *
 * @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;

}

Permíteme explicar qué hace.

Primero, para entender mejor el código yo mismo, hice un print_r($params) para ver qué contiene, y este fue el resultado:

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
)

Para entender mejor la salida, también revisé la página de Referencia de Código de WordPress para ese hook y vi qué contiene realmente el array. Luego, todo lo que tenía que hacer era usar los números y claves a mi favor.

Primero, sabía que la mayoría de los valores estarían en el primer array $params[0], ya que el segundo solo incluía el número de instancia, así que debía usar ese array.
Solo para asegurarme de que el código no se ejecute innecesariamente, puse una simple declaración if para verificar si es el widget que quiero.
Luego, tuve que reemplazar el valor en el array, así que usé array_replace().
Finalmente, sabiendo uno de los valores que encontraría en el valor before_widget, usé un str_replace para cambiar el valor y agregar el nombre de clase que quiero.

Si hay una mejor manera de hacerlo, por favor avísame o actualízame en el futuro sobre esto. Espero que esto ayude.