Agregar clase div a un solo widget

4

Quiero agregar más clases en la etiqueta div de mi widget de búsqueda. Mi búsqueda se encuentra en la barra lateral junto con otros widgets.

Mi código:

function NT_widgets_init() {
register_sidebar( array(
    'name'          => __( 'Sidebar', 'side' ),
    'id'            => 'sidebar',
    'description'   => __( 'Rechte Spalte', 'rechts' ),
    'before_widget' => '<div id="%1$s" class="widget %2$s">',
    'after_widget'  => '</div>',
    'before_title'  => '<span class="none">',
    'after_title'   => '</span>',
) );

}
add_action( 'widgets_init', 'NT_widgets_init' );

Entonces cada widget obtiene un id y un class . ¿Cómo puedo agregar más clases a solo UN widget, no al resto?

    
pregunta Peronia 28.02.2017 - 15:07

2 respuestas

2

Tienes dos soluciones posibles.

1. El gancho de filtro widget_display_callback

Los parámetros de este gancho de filtro te permiten dirigir fácilmente la instancia del widget y anular sus argumentos.

Un posible enfoque sería: Dentro de la devolución de llamada del filtro, modifique los argumentos para esa instancia, visualícelo y luego return false para evitar que WordPress vuelva a mostrarlo de la forma habitual. Vea este código en wp-includes / class-wp- widget.php .

2. Registre un nuevo widget que amplíe el widget de búsqueda

Puede ampliar el widget de búsqueda, definido en wp-includes / widgets / class-wp-widget-search.php y reemplaza el método widget() para agregar la clase que deseas, algo como esto (el código debe agregarse en algún lugar visto por WordPress, como un complemento personalizado o en su tema functions.php file) :

/**
 * Custom widget search
 *
 * Extends the default search widget and adds a class to classes in 'before_title'
 *
 * @author  Nabil Kadimi
 * @link    http://wordpress.stackexchange.com/a/258292/17187
 */
class WP_Widget_Search_Custom extends WP_Widget_Search {

    public function __construct() {
        $widget_ops = array(
            'classname' => 'widget_search widget_search_custom',
            'description' => __( 'A Custom search form for your site.' ),
            'customize_selective_refresh' => true,
        );
        WP_Widget::__construct( 'search_custom', _x( 'Custom Search', 'Custom Search widget' ), $widget_ops );
    }

    public function widget( $args, $instance ) {

        $custom_class = 'wpse-258279';
        $args['before_widget'] = str_replace('class="', "class=\"$custom_class", $args['before_widget']);

        /** This filter is documented in wp-includes/widgets/class-wp-widget-pages.php */
        $title = apply_filters( 'widget_title', empty( $instance['title'] ) ? '' : $instance['title'], $instance, $this->id_base );
        echo $args['before_widget'];
        if ( $title ) {
            echo $args['before_title'] . $title . $args['after_title'];
        }
        // Use current theme search form if it exists
        get_search_form();
        echo $args['after_widget'];
    }
}

/**
 * Register the custom search widget
 */
add_action( 'widgets_init', function() {
    register_widget( 'WP_Widget_Search_Custom' );
} );
    
respondido por el Nabil Kadimi 28.02.2017 - 16:55
3

Opción 1: utilizando la clase CSS ya proporcionada:

Cada widget ya proporciona id y class únicos para usar en las reglas CSS. Por lo tanto, para la mayoría de las necesidades de estilo, es mejor usarlas para generar una regla CSS específica que solo funcione para ese widget (por ejemplo, Buscar). Por ejemplo, el widget de búsqueda predeterminado tendrá la clase CSS widget_search . Puede usarlo para personalizar el widget de búsqueda de otros widgets. Me gusta:

.widget {
    background-color: wheat;
}
.widget.widget_search {
    background-color: gold;
}

Opción 2: uso de dynamic_sidebar_params filter:

Como está registrando los widgets con la función register_sidebar() , lo más probable es que lo haya usado con la función dynamic_sidebar() en las plantillas. En ese caso, puede usar el gancho de filtro dynamic_sidebar_params para insertar clases CSS adicionales solo en un widget específico .

Use el siguiente CÓDIGO en el archivo functions.php de su tema (las instrucciones adicionales se encuentran en el CÓDIGO):

add_filter( 'dynamic_sidebar_params', 'wpse258279_filter_widget' );
function wpse258279_filter_widget( $params ) {
    // avoiding admin panel
    if( ! is_admin() ) {
        if ( is_array( $params ) && is_array( $params[0] ) && $params[0]['widget_name'] === 'Search' ) {
            // Insert your custom CSS class (one or more) in the following array
            $classes = array( 'custom-css-class-for-search' );

            // The following three lines will add $classes
            // (along with the existing CSS classes) using regular expression
            // don't touch it if you don't know RegEx
            $pattern = '/class\s*=\s*(["\'])(?:\s*((?!).*?)\s*)?/i';
            $replace = 'class=$1$2 ' . implode( ' ', $classes ) . '$1';
            $params[0]['before_widget'] = preg_replace( $pattern, $replace, $params[0]['before_widget'], 1 );
        }
    }
    return $params;
}

Con el CÓDIGO anterior, puede agregar una o más clases de CSS en esta línea: $classes = array( 'custom-css-class-for-search' ); . Entonces, si desea agregar dos clases de CSS para el widget de búsqueda, será como:

$classes = array( 'custom-css-class-for-search', 'another-class' );

Opción-3: Widget personalizado:

Si necesita más control del que pueden manejar los métodos anteriores, entonces puede implementar un widget personalizado para la búsqueda como se muestra en esta respuesta .

Sin embargo, puede ser difícil mantener widgets personalizados si desea el mismo comportamiento para múltiples widgets. ¡Porque entonces también tendrás que implementar ese widget (solo para la clase CSS adicional)! Si eso no es un problema para ti, entonces puedes seguir esa ruta, como sucede con un Widget personalizado, tendrás un mejor control sobre las marcas y la funcionalidad.

    
respondido por el Fayaz 28.02.2017 - 21:04

Lea otras preguntas en las etiquetas