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.