En nuestro intento de personalizar nuestros temas de WordPress, por regla general, solemos acudir a las hojas de estilo. Sin embargo, existen elementos que no son tan personalizables en WordPress, uno de esos elementos son los versátiles widgets. En este artículo te mostramos cómo agregar clases CSS a los widgets de WordPress sin que suponga ningún esfuerzo.
Añadir clases CSS a los widgets de WordPress
Lo primero que tienes que hacer es instalar y activar el plugin Widget CSS Classes. Para ello, ve a la sección Plugins del backoffice de tu WordPress y selecciona la opción de Añadir Nuevo. En la página de Añadir Nuevo Plugin, busca el plugin que queremos instalar haciendo uso del campo de búsqueda que se sitúa en la parte superior derecha de la página.
Teclea el nombre del plugin (que como te hemos indicado es «Widget CSS Classes») y presiona ENTER para iniciar la búsqueda. Si has seguido los pasos al pie de la letra, este plugin te debería aparecer como el primer resultado de la búsqueda. Instálalo y actívalo para poder utilizarlo.
Una vez activado, ve a Ajustes > Clases CSS de Widget para configurarlo.
Ya dentro, verás una serie de campos nefastamente traducidos. No te preocupes, en este artículo te explicaremos en la medida de lo posible, cada uno de ellos.
El primer campo «Adicionar Clases de Número de Widget» nos sirve agregar clases numéricas. El siguiente campo «Adicionar Primeras/Últimas Clases» es para agregar automáticamente la clase «widget-first» en el caso del primer widget y «widget-last» en el caso del último. El campo «Adicionar Clases Pares/Impares» es para agregar automáticamente la clase «widget-odd» en los widgets impares y «widget-even» en las clases pares, basándonos en su orden.
El siguiente campo «Mostrar campo adicional para el ID» nos da la posibilidad de agregar, además de las clases CSS, el ID del elemento. Ya sabéis que en las hojas de estilo, los selectores se pueden personalizar tanto por clase, como por ID.
El campo «Tipo de Campo de la Clase» hace referencia a cómo vamos a introducir las clases CSS en los widgets. Podemos hacerlo mediante un campo de texto, podemos hacerlo mediante una lista de checkboxes en la opción «Predefinido», podemos introducir las clases CSS de «Ambas» maneras, o bien, deshabilitar la inserción.
Como os he dicho antes, podemos agregar clases CSS a nuestro widget mediante una lista de checkboxes, tal y como asociamos categorías en posts y páginas. Lógicamente, estas clases tendremos que darlas de alta previamente. Para eso mismo nos sirve el siguiente campo «Las clases predefinidas«, para ingresar las clases que solemos usar y poderlas asociar más tarde a nuestros widgets.
Por último, tenemos «Fix widget parameters» mediante el cual podemos meter el widget dentro de un <div> si los parámetros son inválidos, y también «Remove duplicate classes«, que nos da la oportunidad de eliminar aquellas clases CSS que repitamos al agregarlas al widget.
Cabe destacar, que el plugin cuenta con una función de Importar/Exportar. Así que, en el caso de querer migrar tu web sin perder nada de información, cuentas con esta función para asegurarte de que el traslado de datos es lo más limpio posible.
Recuerda pulsar en el botón «Guardar cambios» una vez hayas terminado con los cambios.
Asociar una clase CSS a un widget
Una vez todo configurado, si quieres agregar clases CSS a los widgets simplemente debes ir a Apariencia > Widgets. Una vez dentro, expande el que quieras editar y agrégale la clase CSS que desees. No olvides que puedes insertar más de una, separándolas con espacios.
Ojo, esta clase simplemente nos permite agregar el nombre de una clase CSS a un widget. Si lo que quieras es personalizar esa clase, tendrás que hacerlo mediante el archivo CSS del tema que estés utilizando actualmente. Si no, siempre puedes utilizar un plugin de WordPress para añadir CSS personalizado sin salir del backoffice.
Y hasta aquí nuestro artículo sobre cómo añadir clases CSS a los widgets de WordPress. Espero que te haya gustado y, si te ha resultado útil, no dudes en compartirlo en redes sociales. El icono de la imagen destacada es obra de Mohamed Mbarki. ¡Nos leemos!
