Crear widget en WordPress

Crear widget en WordPress

20 de abril 2020

Un widget en WordPress es un componente que nos permite añadir una funcionalidad determinada dentro de un sidebar. Puede que el ejemplo más clásico de esto sea probablemente la caja de últimos artículos en del lateral de un blog o quizá el listado de categorías del mismo.

Para su desarrollo, tenemos la posibilidad de decidir si queremos crearlo como parte de un tema o si lo vamos a implementar como un plugin. En este artículo veremos cómo hacerlo directamente en el tema utilizando el archivo del funciones, pero es aplicable también a incorporarlo del otro modo, para ello tendrás que tener en cuenta los pasos adecuados en la creación de un plugin.

Tenemos que tener claro que la limitación sobre lo que podemos crear como widget está en nosotros. La flexibilidad de WordPress nos da margen para integrar cualquier cosa que requiera nuestro proyecto web. Si estamos haciendo el desarrollo de un tema, de nosotros dependerá elegir si esa funcionalidad que necesitamos la ofreceremos en forma de widget o no.

Como comentaba al principio, para poder ubicar nuestro widget tendremos que hacerlo dentro de un sidebar. En caso de que el tema donde vayamos a crearlo no tenga y no sabes cómo añadir un sidebar a un tema de WordPress, puedes consultar la esta entrada donde detallo los pasos.

Lo primero que haremos será registrar el nuevo widget, para lo que usaremos la función register_widget y después lo lanzaremos usando el hook widgets_init.

function registrar_widgets() {
    register_widget( 'nombre_widget_ejemplo' );
}
add_action( 'widgets_init', 'nombre_widget_ejemplo' );

Una vez registrado con el nombre que nosotros queramos, es cuando podemos pasar a crear el widget en sí. Nosotros vamos a ver cómo lo haríamos si quisiéramos hacer uno que nos permitiera meter un texto corto, por ejemplo para usarlo en el pie de la página.

<?php
// usamos una nueva clase para extender WP_Widget
class nombre_widget_ejemplo extends WP_Widget {
 
	function __construct() {
		parent::__construct(
		 
		// widget ID
		'nombre_widget_ejemplo', 
		 
		// widget backend name
		__('Texto breve', 'dominio_traduccion'), 
		 
		// widget backend description
		array( 'description' => __( 'Widget para añadir un breve texto.', 'dominio_traduccion' ), ) 
		);
	}
 
	// front-end del widget
	public function widget( $args, $instance ) {
		$title = apply_filters( 'widget_title', $instance['title'] );
		 
		// los argumentos before y after los definimos en el sidebar
		echo $args['before_widget'];
		if ( ! empty( $title ) )
			echo $args['before_title'] . $title . $args['after_title'];
			echo $args['after_widget'];
	}
         
	// back-end del widget
	public function form( $instance ) {
		if ( isset( $instance[ 'title' ] ) ) {
			$title = $instance[ 'title' ];
		}
		else {
			$title = __( 'Aquí tu texto', 'dominio_traduccion' );
		}
		// input en el back-end
		?>
		<p><label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( 'Texto:' ); ?></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 
	}
     
	// actualizamos las instancias
	public function update( $new_instance, $old_instance ) {
		$instance = array();
		$instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';
		return $instance;
	}

}

Publicado por Jesús Tovar

Categorías: PHP, Programación, WordPress

Etiquetas: , ,

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio web utiliza cookies, si continúas navegando estás dando tu consentimiento. Consulta nuestra política de cookies y de privacidad.

ACEPTAR
Aviso de cookies