Reemplazando los Widgets de WordPress

Publicado el Martes, 17 de diciembre de 2024

El diseño actual del blog cuenta con varios "widgets" nativos de WordPress. Estoy usando los widgets "clásicos", de antes que agregaran toda la infraestrtuctura basada en bloques. Dos de estos se veían bastante mal con el diseño por defecto, Archivos y Categorías. Éstos publican un elemento HTML select con los respectivos contenidos esperados:

Archivos - una lista de selección con los meses desde que existe el blog como para entrar a ese archivo
Categorías - una lista jerárquica de las categorías del contenido del blog

Mi objetivo entonces era encontrar una forma de editar el HTML y/o CSS como para que se vieran mejor.

El tema actual del blog usa Bulma como framework CSS, que se encarga de darle un estilo general y todo el tema de grilla y diseño responsivo para distintos formatos. En Bulma los elementos de un formulario como los select se pueden estilizar creándolos dentro de un elemento div con la clase select: <div class="select">

Imaginé que habría una forma de personalizar los widgets, pero no encontré nada en la documentación de WordPress ni en foros y demás. Me pareció raro, parece ser una opción bastante útil, pero de repente no encontré la documentación adecuada (algo que me pasa seguido con la API de WordPress). Conociendo WordPress, también imaginé que no sería demasiado complicado agregar un widget personalizado al tema de mi blog, editando el archivo de funciones. Me pareció una buena oportunidad para aprender algo nuevo. Si bien desarrollé un Widget antes con mi plugin List Category Posts, fue hace mucho años y no me acuerdo...

Así que entré a mirar el código fuente de WordPress y encontré que los widgets están definidos en wp-includes/widgets. Ahí encontré class-wp-widget-archives.php y class-wp-widget-categories.php. Estos son los dos archivos que definen las clases de los widgets, y son un buen lugar para aprender cómo escribir widgets nuevos también. Se podría editar directamente éstos archivos, pero serían reemplazados cada vez que se actualiza WordPress. Así que los copié al directorio de mi tema en wp-content/themes/mi-tema-actual y les cambié el nombre agregando "picando" al nombre de archivo.

Los edité para cambiarles el nombre a las clases, cosa de no tener conflictos con las clases nativas de WordPress. Encontré dónde se estaba definiendo el elemento select y le agregué el div con la clase que necesitaba y cualquier otro código de Bulma.

Para incluirlos en mi tema, edité el archivo functions.php y agregué las siguientes líneas:

include get_template_directory() . '/class-wp-widget-picando-archives.php';
include get_template_directory() . '/class-wp-widget-picando-categories.php';
function load_widgets_picando() {
register_widget( 'WP_Widget_Picando_Archives' );
register_widget( 'WP_Widget_Picando_Categories' );
}
add_action( 'widgets_init', 'load_widget_picando' );

El resultado final quedó bastante más prolijo que el HTML por defecto del navegador:

Picando Código: Widgets archivos y categorías

Estoy seguro que debe haber una forma más directa de cambair esto, pero al no haberla encontrado, de última me sirvió la experiencia para aprender algo. Visto que crear widgets de WordPress, por lo menos en el estilo "clásico", no es tan complicado, se me ocurren ideas para widgets en el futuro. Comparto por acá por si a alguien más le sirve el conocimiento.