Crear Widget en WordPress (Sin Plugins)

por
Qué debemos saber para crear un Widget en WordPress

Hay ocasiones en las que podemos necesitar un widget personalizado para el footer o sidebar. Si este es el caso, has llegado al lugar indicado.

Como ya sabemos, el conocimiento avanzado de WordPress nos da una capacidad de creación sin límite, por no mencionar los sorprendentes niveles de optimización a los que podemos llegar.

Hoy os traigo un «cachito» de conocimiento para aquellos que quieren aprender WordPress de verdad.

Qué es un Widget en WordPress

Para empezar os quiero hacer un resumen rápido sobre lo que es un Widget en WordPress.

Un Widget es una pequeña porción de código que nos permitirá extender alguna funcionalidad de nuestra web. Como mínimo se podrán aplicar en el header y el sidebar, pero también podemos implementarlos en otros lugares si el tema que usemos nos lo permite, como en el header.

También hay que tener en cuenta que muchos Widgets son los mismos elementos usados como bloques en Gutenberg. Esto quiere decir que también podremos aplicarlos dentro de nuestras páginas y posts.

Cómo hacer Widgets en WordPress

Para realizar un Widget podremos hacer uso de la clase que nos proporciona WordPress de forma nativa, WP_Widget. A continuación os explico qué es y cómo trabajar con ella.

Qué es la clase WP_Widget

Una clase es un elemento esencial de la Programación Orientada a Objetos (POO). Un elemento que se puede, para que nos entendamos, “clonar”. Esta clonación, o más correctamente extensión de la clase, es la que nos permitirá crear un nuevo objeto, en este caso un Widget.

Podríamos decir que esta clase es la API que nos permite crear un Widget personalizado en WordPress. Para ello tendremos que extender esta clase y utilizar, al menos, 4 de los métodos que incluye. Más adelante explico esto al detalle.

Métodos de la clase WP_Widget

Para crear nuestro Widget a medida tendremos que usar los 4 primeros métodos de este listado. El resto los coloco por si queréis profundizar algo más en la clase.

  • __construct: Método constructor de la clase, donde podremos declarar el identificador, el nombre y la descripción de nuestro Widget
  • widget: Donde se coloca el código que se verá en el front end de nuestra web
  • form: Formulario que aparecerá en el panel de control de nuestra web
  • update: Este método es el que permite actualizar variables desde el input visible en el panel de control
  • Otros métodos incluídos en la clase WP_Widget:
    • _get_display_callback
    • _get_form_callback
    • _get_updatecallback 
    • _register
    • _register_one
    • _set
    • display_callback
    • form_callback
    • get_field_id
    • get_field_name
    • get_settings
    • is_preview
    • save_settings
    • update_callback

Antes de crear nuestro Widget

Ahora que ya tenemos estas nociones básicas podemos lanzarnos a lo interesante. Para este tutorial me he decidido por un Widget para contar visitas en nuestra web. La funcionalidad será muy sencilla, se almacenará un valor en nuestra base de datos options y se incrementará en 1 cada vez que cargue una página.

Crear en código un Widget con contador de visitas

Cómo crear en código nuestro Widget contador de visitas para WordPress

Pues vamos a lo que hemos venido. Os explico cada uno de los pasos para crear nuestro Widget contador de visitas a través de una clase y sus funciones, o más correctamente «sus métodos»:

1. Lo primero es crear la clase que contendrá los detalles de nuestro Widget

Para esto tendremos que extender la clase WP_Widget como hacemos con la estructura siguiente:

<?php

class widget_webheroe extends WP_Widget {
	// Función constructora de la clase WP_Widget donde declaramos el identificador, el nombre y la descripción.
	function __construct() {
		parent::__construct(
			
		);
	}

	public function widget( $args, $instance ) {
              // Aquí se aplica el código interesante de tu Widget.
	}

	public function form( $instance ) {
		// Aquí se coloca el código del formulario visible en el back end.
	}

	public function update( $new_instance, $old_instance ) {
		// Aquí se registran las variables que se facilitan en el back end.
	}
}

2. Creamos el método Constructor

Este método es el que nos permitirá añadir el identificador del Widget, el nombre que aparecerá en el listado de Widgets y la descripción del mismo.

Debemos estar atentos de usar parent::__construct, ya que otras declaraciones están obsoletas. Como parent::WP_Widget(), $this->WP_Widget() o WP_Widget::WP_Widget()

<?php

// Función constructora de la clase WP_Widget donde declaramos el identificador, el nombre y la descripción.
	function __construct() {

		parent::__construct(
			//Identificador
			'widget_webheroe',
			//Nombre
			'Contador Webheroe',
			//Descripción
			array( 'description' => 'Contador de Webheroe' )
		);

	}

3. Creamos la función Widget

Aquí es donde tenemos el alma del Widget. Nuestro mecanismo estará incluido en este método. Los argumentos $args[] sirven para incluir algún código antes o después del widget. Además, también contamos con el filtro widget_title que nos permitirá manipularlo sin necesidad de entrar en la página de Widgets o en el código del mismo.

Como podéis ver he intentado comentar todo el código de una forma clara para que se entienda fácilmente. He incluido un condicional para decidir si incrementar el valor del contador o no dependiendo de si es una página o un post.

Puede parecer que sería más lógico usar !is_admin en su lugar, pero debido al funcionamiento de esta clase seguiría incrementándose en varias unidades cada vez que carguemos el panel de control de WordPress. También he usado un bucle while para asegurar el incremento de valor cuando sea necesario.

<?php
         
public function widget( $args, $instance ) {
		
		$title = apply_filters( 'widget_title', $instance['title'] );
		
		echo $args['before_widget'];
		
		// Si el título existe.
		if ( ! empty( $title ) ) {
			echo $args['before_title'] . $title . $args['after_title'];
		}
		
		// El código de tu Widget empieza aquí.
		
		$option = get_option($this->option_name); // Obtenemos el array con las opciones de este Widget.
		
		$counter = $option[$this->number]['counter']; // Obtenemos el valor que nos interesa.
		
		// Verificamos si es una página o un post.
		if ( is_page() || is_single() ) {
			$sum_counter = intval( $counter ) + 1; // Sumamos uno al valor.
			
			$option[ $this->number ]['counter'] = $sum_counter; // Sobreescribimos el valor de la variable.
			
			// Creamos un bucle que se repita hasta que verifique que el valor se ha actualizado.
			$updated = false;
			while ( false ===$updated ) {
				$updated = update_option( $this->option_name, $option );
			}
		} else {
			// Si no es una página ni un post, el valor no se incrementará.
			$sum_counter = $counter;
		}
		
		// Mostramos el Widget en el front end.
		?>
	<p style="color:#fff">Ha recibido <span style="font-size:50px;font-weight:800;color:#ada"><?php echo esc_html( $sum_counter ); ?></span> visitas</p>
		<?php
		
		// Aquí termina el código de tu Widget.
		
		echo $args['after_widget'];
		
	}

Como podemos ver el CSS adicional se ha añadido incrustado para evitar gestionarlo de forma externa.

4. Creamos el método Form

Aquí debemos presentar el código que será mostrado en el Back End. Es decir, en la página de edición de Widgets

<?php
 
public function form( $instance ) {
		// Comprobar si hemos colocado un título al Widget. Si no, se colocará el título por defecto.
		if ( isset( $instance[ 'title' ] ) ) {
			$title = $instance[ 'title' ];
		} else {
			$title = 'Widget Contador de WebHeroe';
		}
		
		// Aquí se crea el formulario que aparecerá para poder cambiar el título.
		?>
		<p>
			<label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( 'Title:' ); ?></label>
			<input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>" />
		</p>
		<?php
	}

5. Rematamos con el método Update

En este método nos limitaremos a crear el título y colocar el contador a 0.

<?php

public function update( $new_instance, $old_instance ) {

		$instance = array();
		$instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';
		$instance['counter'] = '0';
		return $instance;
	}
Localización de nuestro WIdget personalizado en el panel de control

6. Registrar nuestro Widget

Ahora tendremos que hacer uso del hook register_widget. Como su nombre indica, es el gancho que nos permitirá registrar la clase anterior y hacer que funcione y aparezca en el listado de Widgets.

Debemos tener cuidado de no usar este hook hasta haber terminado con la creación de nuestra clase, ya que podría dar un error fatal:

<?php
add_action( 'widgets_init', function(){
	//Registro de la clase que hace funcionar el Widget
	register_widget( 'widget_webheroe' );
});

Ahora ya podremos visitar nuestra sección de Widgets en el panel de control Apariencia/Widgets. Y lo localizaremos dentro del grupo «Widgets».

Conclusiones

Este Widget ha sido creado a modo de ejemplo para entender el funcionamiento de la clase WP_Widget y así crear nuestros propios Widgets en WordPress. Si de veras quisiéramos contabilizar las visitas sería más apropiado añadir algo más de código para, a través de cookies, reconocer cuántos usuarios han visitado nuestra web, y cuántas páginas ha recorrido cada uno. Esto daría para otro artículo, así que si os interesa solo tenéis que decirlo en los comentarios.

Y, si necesitas contratar desarrollo WordPress, estaremos encantados de ayudarte.

Deja un comentario

    Explícanos tu proyecto, nos pondremos en contacto contigo brevemente


    contacto@webheroe.com