7 Marzo

Con la versión de Wordpress 2.8 se incorpora una API que facilita la tarea de crear un widget.

Con la intención de mostrar una imagen aleatoria en la barra lateral me dije voy a descargarme un widget que lo haga pero los que probé tenian alguna que otra pega y para no andar modificandolos dije: “Hagamos uno” y eso haremos.

Lo que mostrare aquí como la intención básica es crear el widget en sí más que lo que muestre hagamos un simple Hola Mundo Widget.

No llevará mas de un archivo php y se podría crear un simple plugin formado por un solo archivo pero por si acaso en un futuro se añadiesen mas ficheros lo mejor sería crear un directorio con el nombre del plugin y dentro el fichero.

En nuestro caso llamamos al directorio y fichero adi-hola-mundo-widget (el nombre es lo de menos pongo adi delante para evitar que ningún otro plugin se llame así)

Y dentro del empezamos a escribir:

Primero añadimos la información de nuestro widget que sera la que se mostrara en el listado de widget de nuestro wordpress

<?php
/*
 * Plugin Name: Hola Mundo Widget
 * Version: 1.0
 * Plugin URI: http://www.aprendizdeilusiones.com/2010/03/07/otros/como-crear-un-widget-en-wordpress-con-widget-api/
 * Description: Widget de ejemplo con la nueva API Widget
 * Author: Aprendiz de Ilusiones
 * Author URI: http://www.aprendizdeilusiones.com
 */
?>

Ahora crearemos nuestro widget. Con la esta API podemos crear una clase que extienda de WP_Widget con tres funciones (constructor (que sera igual que el nombre de la clase), widget, update y form)

<?php
class AdiHolaMundoWidget extends WP_Widget {
	//Constructor
	function AdiHolaMundoWidget () {
 
	}
	//Como se mostrara el widget en la web
	function widget($args, $instance) {
	}
	//Función para guardar la configuración del widget en el panel de control
	function update($new_instance, $old_instance) {
 
	}
	//Muestra el formulario del widget en el panel de control
	function form($instance) {
 
	}
}
?>

Ahora veamos las funciones paso por paso.

<?php
	function AdiHolaMundoWidget() {
		//Clase CSS que usara el widghet y la descripción que se mostrará en la selección de widget en el Panel de Control
		$widget_ops = array( 'classname' => 'adiHolaMundo', 'description' => __('Widget de ejemplo') );
 
		//Configuración del widget en el panel de control.
		$control_ops = array( 'width' => 200, 'height' => 350);
 
		// Creamos el widget. El idbase que se usa en el formulario de configuración, Titulo del Widget en el panel de control,
		// y las opciones del widget y en control
		$this->WP_Widget( 'idAdiHolaMundoWidget', __('Adi Hola Mundo Widget'), $widget_ops, $control_ops );
	}
?>

El detalle a tener en cuenta como ya he dicho antes es que el constructor tenga el mismo nombre de la clase (como en casi cualquier lenguaje de programación), lo demás tampoco hay que darle mucha mas vuelta…. Copiar, Pegar y Editar con lo que se quiera :D 

<?php
	/**
	 * Como se mostrara el widget en la web
	 */
	function widget( $args, $instance ) {
		extract( $args );
 
		$title = apply_filters('widget_title', $instance['title'] );
		$nombre= $instance['nombre'];
 
		echo $before_widget;
 
		/* Nuestro widget */
		if ( $title )
			echo $before_title . $title . $after_title;
 
		echo "Hola Mundo soy ".$nombre;
 
		echo $after_widget;
	}
?>

Con esta función configuramos el widget como aparecerá en la barra de widget de la página web.  Las opciones $before_widget,$after_widget,$before_title y $after_title son valores que se configuran el theme cuando registras las sidebar. (Siempre las he visto en el fichero functions.php)

<?php
	 /**
	 * Funcion para guardar la configuración del widget en el panel de control
	 */
	function update( $new_instance, $old_instance ) {
		$instance = $old_instance;
 
		//Usar strip_tags y stripslases para controlar el texto insertado en los campos de texto
		$instance['title'] = strip_tags( stripslashes($new_instance['title'] ));
		$instance['nombre'] = strip_tags( stripslashes($new_instance['nombre'] ));
 
		return $instance;
	}
?>

Una función muy sencillita que lo unico que tenemos que hacer es actualizar los nuevos valores de la configuración. Aquí es donde tenemos que comprobar que los datos introducidos sean los correctos. Si pide un valor que el usuario no introduzca un texto… esos fallos que nunca se comprobaban en programación y la profesora te echaba bronca y tu decías.

“Pero profe no creo que el usuario sea tan estúpido, si pone introduce un número y pulsa una letra… ajo y agua.” Pero no, no colaba :D 

<?php
	/**
	 * Muestra el formulario del widget en el panel de control
	 */
	function form( $instance ) {
 
		//Establecemos algunos datos por defecto
		$defaults = array( 'title' => __('Ejemplo del Hola Mundo'), 'nombre' => __('Aprendiz'));
		$instance = wp_parse_args( (array) $instance, $defaults );
?>
 
		<p>
			<label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e('Titulo:'); ?></label>
			<input id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" value="<?php echo $instance['title']; ?>" style="width:100%;" />
		</p>
		<p>
			<label for="<?php echo $this->get_field_id( 'nombre' ); ?>"><?php _e('nombre:'); ?></label>
			<input id="<?php echo $this->get_field_id( 'nombre' ); ?>" name="<?php echo $this->get_field_name( 'nombre' ); ?>" value="<?php echo $instance['nombre']; ?>" style="width:100%;" />
		</p>
	<?php
	}
?>

Y el método que faltaba, que sirve para mostrar la configuración del widget en el panel de control.

Primero creamos los valores por defecto y los inicializamos en la instancia y luego el formulario con las etiquetas y campos que queramos sin preocuparnos por los botones de guardar ni borrar. Para las id y nombres del campo mejor usar las nuevas funciones get_field_id() y get_field_name().

Finalmente debemos decirle a Wordpress que registre nuestro widget cuando inicialice los widget.

<?php
add_action( 'widgets_init', 'adiHolaMundoWidget_load' );
 
function adiHolaMundoWidget_load() {
	register_widget( 'AdiHolaMundoWidget' );
}
?>

Cuando wordpress inicialice los widgets con widgets_ini llamara a nuestra función y con register_widget registrará el nuestro

El código completo:

  1. <?php
  2. /*
  3.  * Plugin Name: Adi Hola Mundo Widget
  4.  * Version: 1.0
  5.  * Plugin URI: http://www.aprendizdeilusiones.com/2010/03/07/otros/como-crear-un-widget-en-wordpress-con-widget-api/
  6.  * Description: Widget de ejemplo con la nueva API Widget
  7.  * Author: Aprendiz de Ilusiones
  8.  * Author URI: http://www.aprendizdeilusiones.com
  9.  */
  10. ?>
  11. <?php
  12. class AdiHolaMundoWidget extends WP_Widget {
  13.  
  14. 	function AdiHolaMundoWidget() {
  15. 		//Clase CSS que usara el widghet y la descripción que se mostrará en la selección de widget en el Panel de Control
  16. 		$widget_ops = array( 'classname' => 'adiHolaMundo', 'description' => __('Widget de ejemplo') );
  17.  
  18. 		//Configuración del widget en el panel de control.
  19. 		$control_ops = array( 'width' => 200, 'height' => 350);
  20.  
  21. 		// Creamos el widget. El idbase que se usa en el formulario de configuración, Titulo del Widget en el panel de control,
  22. 		// y las opciones del widget y en control
  23. 		$this->WP_Widget( 'idAdiHolaMundoWidget', __('Adi Hola Mundo Widget'), $widget_ops, $control_ops );
  24. 	}
  25.  
  26. 	/**
  27. 	 * Como se mostrara el widget en la web
  28. 	 */
  29. 	function widget( $args, $instance ) {
  30. 		extract( $args );
  31.  
  32. 		$title = apply_filters('widget_title', $instance['title'] );
  33. 		$nombre= $instance['nombre'];
  34.  
  35. 		echo $before_widget;
  36.  
  37. 		/* Nuestro widget */
  38. 		if ( $title )
  39. 			echo $before_title . $title . $after_title;
  40.  
  41. 		echo "Hola Mundo soy ".$nombre;
  42.  
  43. 		echo $after_widget;
  44. 	}
  45.  
  46. 	 /**
  47. 	 * Funcion para guardar la configuración del widget en el panel de control
  48. 	 */
  49. 	function update( $new_instance, $old_instance ) {
  50. 		$instance = $old_instance;
  51.  
  52. 		//Usar strip_tags y stripslases para controlar el texto insertado en los campos de texto
  53. 		$instance['title'] = strip_tags( stripslashes($new_instance['title'] ));
  54. 		$instance['nombre'] = strip_tags( stripslashes($new_instance['nombre'] ));
  55.  
  56. 		return $instance;
  57. 	}
  58.  
  59. 	/**
  60. 	 * Muestra el formulario del widget en el panel de control
  61. 	 */
  62. 	function form( $instance ) {
  63.  
  64. 		//Establecemos algunos datos por defecto
  65. 		$defaults = array( 'title' => __('Ejemplo del Hola Mundo'), 'nombre' => __('Aprendiz'));
  66. 		$instance = wp_parse_args( (array) $instance, $defaults );
  67. ?>
  68.  
  69. 		<p>
  70. 			<label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e('Titulo:'); ?></label>
  71. 			<input id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" value="<?php echo $instance['title']; ?>" style="width:100%;" />
  72. 		</p>
  73. 		<p>
  74. 			<label for="<?php echo $this->get_field_id( 'nombre' ); ?>"><?php _e('Nombre:'); ?></label>
  75. 			<input id="<?php echo $this->get_field_id( 'nombre' ); ?>" name="<?php echo $this->get_field_name( 'nombre' ); ?>" value="<?php echo $instance['nombre']; ?>" style="width:100%;" />
  76. 		</p>
  77. 	<?php
  78. 	}
  79. }
  80. add_action( 'widgets_init', 'adiHolaMundoWidget_load' );
  81.  
  82. function adiHolaMundoWidget_load() {
  83. 	register_widget( 'AdiHolaMundoWidget' );
  84. }
  85. ?>