Seleccionar página

Seguro que más de una vez has querido tener más funcionalidades para tus Sidebars, y has pasado horas buscando entre cientos de plugins que no cumplen totalmente con lo que quieres. Bien, pues hoy vamos a aprender a hacer un Widget básico. Cuando entiendas su estructura y funcionamiento, el resto de la funcionalidad que quieras añadir queda en tus manos.

¿Cómo funciona un Widget por dentro?

Un Widget no es más que una clase extendida de WP_Widget, con cuatro funciones dentro:

  • La función constructora: donde establecemos la id del widget, el nombre y una descripción.
  • La función “widget“: se encarga de representar el widget. Por así decirlo, si nuestro Widget es un “Hola Mundo”, aquí es donde imprimimos el código HTML.
  • La función “form“: donde jugamos con el formulario de opciones que tiene un Widget cuando lo metemos en una Sidebar.
  • La función “update“: que ejecuta la acción del botón ‘Guardar’ del formulario.

Y ya está. Un Widget no tiene más. Estas son las cuatro funciones básicas y obligatorias de un Widget (y las dos últimas no son obligatorias si el Widget no tiene opciones que guardar).

Empezando

Lo primero que tenemos que hacer es organizarnos un poco. Como ya sabeis, esto lo vamos a hacer en el archivo “functions.php” de nuestro Theme, o también en un plugin externo que creemos. Yo aconsejo lo segundo, porque si un dia cambiáis de Theme, o no es vuestro y lo actualizais a la última versión, adios Widget. Así que lo mejor es crear un plugin básico, aunque solo os sirva para esto.

Dentro de vuestro plugin (o Theme), creamos una carpeta “widgets” para añadir ahí el widget. ¿Es obligatorio? No, pero si vamos a crear muchos widgets, conviene tenerlos todos juntitos. Dentro de la carpeta, creamos un archivo que podemos llamar realmente como queramos, pero que para este ejemplo, yo llamaré “widget.php“.

Ahora abrimos el archivo principal de nuestro plugin, o el archivo functions.php de nuestro Theme, y escribimos lo siguiente:

Dos cositas a tener muy en cuenta:

  • En la linea del include_once lo que hacemos es incluir el archivo del Widget. Si estamos en un Theme, usaremos la función ‘get_template_directory().”/widgets/widget.php”‘ para obtener la ruta hasta el Widget. Si estamos en un plugin, usaremos ‘plugins_url(“widgets/widget.php”,__FILE__)‘ para acceder al archivo del Widget.
  • En la siguiente línea registramos el nombre de la clase que va a tener el widget. Para seguir con los ejemplos, yo la he llamado ‘mi_widget‘.

Añadimos la función como acción asociada a widgets_init, y cerramos nuestro archivo.

Creando la clase del Widget

Ahora viene la parte más importante de la creación del Widget: la clase.

Como ya hemos dicho antes, el nombre de la clase debe coincidir con el nombre que registramos antes. Así que las primeras líneas del archivo serán algo como esto:

Simple. Ahora vamos con las funciones.

Función constructora

La más simple y repetitiva de todas las funciones. Para todos los widgets que hagas, esta clase se repite, y solo hay que cambiar un par de cosas clave.

Lo que hay que cambiar salta a la vista: allá donde ponga “mi_widget” ponemos el nombre de la clase del widget, y luego, Nombre del Widget y Descripción del Widget las sustituiremos por lo que tengamos que poner. Hecho.

Función “widget”

Como ya hemos adelantado, esta es la función que representa en pantalla el Widget. Podríamos hacer un Hola Mundo, pero mejor vamos a meter algún parámetro extra, para que luego veamos cómo van. Así pues, vamos a hacer un Hola <nombre>.

Vale, sí, es un ejemplo muy simple, pero aquí entra vuestra imaginación: lo que queráis hacer es cosa vuestra, yo solo os enseño a hacer el Widget.

Lo importante es que veamos de dónde salen los parámetros guardados. Vemos que la función tiene dos parámetros, $args y $instance. El segundo es el que contiene las opciones guardadas del Widget, que veremos en la siguiente función. Para recuperar un dato, entonces, basta con conocer qué clave le hemos dado a dicho dato (en este caso, ‘nombre’) y recuperarlo con $instance[‘clave’].

Función “form”

La función “form” también es en gran parte HTML, puesto que representa el formulario de opciones que veremos cuando añadamos el Widget a una sidebar.

En este caso tenemos que controlar el campo “Nombre”. Así que deberíamos hacer algo así:

Una vez más tenemos el parámetro $instance con nuestros valores previamente guardados. Es interesante tener en cuenta que los atributos id y name del campo de texto no los establecemos nosotros. Los establecemos automáticamente a través de $this->get_field_id y $this->get_field_name. Esto es para que luego WordPress internamente se entienda a la hora de representar y guardar datos.

Función “update”

La última función nos sirve para guardar los campos cuando pulsamos el botón “Guardar”. Aquí controlamos también un poco lo que entra como parámetro, haciendo uso de la función strip_tags para eliminar html que el usuario final pueda introducir en el campo de texto. Nos quedamos con algo así:

Comenzamos copiando en una nueva variable los datos antiguos (si los hubiera), y sustituimos los datos antiguos de $instance con los nuevos de $new_instance, pasando las medidas de seguridad que queramos pasar (en este caso, strip_tags). Aquí podemos modificar los datos como necesitemos, claro. Finalmente, devolvemos $instance.

Hemos acabado nuestro Widget básico. Cualquier funcionalidad que queráis añadir, ahora es cosa vuestra.

Usando el Widget

Ahora, si hemos activado el plugin en el que tenemos el Widget, en la pantalla “Apariencia” > “Widgets” podremos ver que hay un nuevo Widget, que podemos asignar a la Sidebar que queramos. También puede ser llamado desde código usando la función “the_widget“.

El resto está en vuestra imaginación. Si tenéis alguna duda, podéis dejarla en el cuadro de comentarios de aquí abajo, a ver qué podemos hacer.

“Hoy en día la mayoría del software existe no para resolver un problema,
sino para actuar de interfaz con otro software”

.- I. O. Angell