Cómo crear un complemento de widget para WordPress

Cómo crear un complemento de widget para WordPress

WordPress es un sistema de administración de contenido increíble con muchas características como widgets. En este tutorial, te explicaré cómo crear tus propios widgets en un pequeño complemento. Este artículo cubrirá algunos puntos más que debe comprender antes de crear el widget. ¡Aquí estamos!

Paso 1: crea tu complemento de widget

Recientemente creé un complemento llamado “Freelancer Widgets Bundle”, y algunas personas me han preguntado cómo crear dicho complemento, así que decidí escribir esta publicación. El primer paso es la creación del complemento. Y como verá, esta no es la parte más difícil. Un complemento es un código adicional que se agrega a WordPress después de activarlo. WordPress crea un bucle en una carpeta para recuperar todos los complementos disponibles y listarlos en el back office. Para crear su complemento, necesitará un editor como Coda (Mac) o Dreamweaver (PC y Mac). Le recomiendo que cree su complemento en una instalación local de WordPress, hacerlo en un servidor en vivo puede causar problemas si comete un error. Por lo tanto, espere a probar nuestro complemento antes de colocar su alojamiento allí.

Ahora abra la carpeta wp-content / plugins. Aquí es donde agregará su complemento. Cree un nuevo directorio y asígnele el nombre “widget-plugin” (de hecho, este nombre puede ser el que desee). Aunque nuestro complemento solo tendrá un archivo, siempre es mejor usar una carpeta para cada complemento. En su directorio, cree un nuevo archivo llamado “widget-plugin.php” (este nombre también se puede cambiar) y ábralo. Ahora estamos a punto de agregar nuestras primeras líneas de código. La definición de un complemento en WordPress sigue algunas reglas que puede leer aquí en el códice. Así es como WordPress define un complemento:

<?php
/*
Plugin Name: Name Of The Plugin
Plugin URI: http://URI_Of_Page_Describing_Plugin_and_Updates
Description: A brief description of the Plugin.
Version: The Plugin's Version Number, e.g.: 1.0
Author: Name Of The Plugin Author
Author URI: http://URI_Of_The_Plugin_Author
License: A "Slug" license name e.g. GPL2
*/

Entonces, necesitamos modificar este código para satisfacer nuestras necesidades:

<?php
/*
Plugin Name: My Widget Plugin
Plugin URI: http://www.wpexplorer.com/create-widget-plugin-wordpress/
Description: This plugin adds a custom widget.
Version: 1.0
Author: AJ Clarke
Author URI: http://www.wpexplorer.com/create-widget-plugin-wordpress/
License: GPL2
*/

Guarde su archivo. Solo agregando código a nuestro archivo widget-plugin.php, ¡hemos creado un complemento! Bueno, por ahora, el complemento no hace nada, pero WordPress lo reconoce. Para asegurarse de que este sea el caso, vaya a su administración y vaya al menú “Complementos”. Si su complemento aparece en la lista de complementos, está bien; de lo contrario, asegúrese de haber seguido mis instrucciones y vuelva a intentarlo. Ahora puede activar el complemento.

Paso 2: crea el widget

Ahora crearemos el widget en sí. Este widget será una clase PHP que ampliará la clase principal de WordPress. WP_Widget. Básicamente, nuestro widget se definirá de esta manera:

// The widget class
class My_Custom_Widget extends WP_Widget {

	// Main constructor
	public function __construct() {
		/* ... */
	}

	// The widget form (for the backend )
	public function form( $instance ) {	
		/* ... */
	}

	// Update widget settings
	public function update( $new_instance, $old_instance ) {
		/* ... */
	}

	// Display the widget
	public function widget( $args, $instance ) {
		/* ... */
	}

}

// Register the widget
function my_register_custom_widget() {
	register_widget( 'My_Custom_Widget' );
}
add_action( 'widgets_init', 'my_register_custom_widget' );

Este código le da a WordPress toda la información que el sistema necesita para poder usar el widget:

  1. la constructor, para iniciar el widget
  2. la función form () para crear el formulario de widget en la administración
  3. la función de actualización (), para guardar los datos del widget al editar
  4. Y el función widget () para mostrar el contenido del widget en la interfaz

1 – El constructor

El constructor es la parte del código que define el nombre del widget y los argumentos principales, a continuación se muestra un ejemplo de cómo podría verse.

// Main constructor
public function __construct() {
	parent::__construct(
		'my_custom_widget',
		__( 'My Custom Widget', 'text_domain' ),
		array(
			'customize_selective_refresh' => true,
		)
	);
}

No utilice __ () alrededor del nombre del widget, WordPress utiliza esta función para la traducción. Realmente te recomiendo que uses siempre estas funciones, para que su tema sea completamente traducible. Y el uso del parámetro ‘personalize_selective_refresh’ actualiza el widget en Apariencia> Personalizar al editar el widget, en lugar de actualizar toda la página, solo el widget se actualiza con los cambios.

2 – La función form ()

Esta función es la que crea la configuración del formulario del widget en el área de administración de WordPress (ya sea en Apariencia> Widgets o Apariencia> Personalizar> Widgets). Aquí es donde ingresará sus datos para mostrarlos en el sitio web. Así que voy a explicarle cómo puede agregar campos de texto, cuadros de texto, cuadros de selección y casillas de verificación a la configuración del formulario de su widget.

// The widget form (for the backend )
public function form( $instance ) {

	// Set widget defaults
	$defaults = array(
		'title'    => '',
		'text'     => '',
		'textarea' => '',
		'checkbox' => '',
		'select'   => '',
	);
	
	// Parse current settings with defaults
	extract( wp_parse_args( ( array ) $instance, $defaults ) ); ?>

	<?php // Widget Title ?>
	<p>
		<label for="<?php echo esc_attr( $this->get_field_id( 'title' ) ); ?>"><?php _e( 'Widget Title', 'text_domain' ); ?></label>
		<input class="widefat" id="<?php echo esc_attr( $this->get_field_id( 'title' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'title' ) ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>" />
	</p>

	<?php // Text Field ?>
	<p>
		<label for="<?php echo esc_attr( $this->get_field_id( 'text' ) ); ?>"><?php _e( 'Text:', 'text_domain' ); ?></label>
		<input class="widefat" id="<?php echo esc_attr( $this->get_field_id( 'text' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'text' ) ); ?>" type="text" value="<?php echo esc_attr( $text ); ?>" />
	</p>

	<?php // Textarea Field ?>
	<p>
		<label for="<?php echo esc_attr( $this->get_field_id( 'textarea' ) ); ?>"><?php _e( 'Textarea:', 'text_domain' ); ?></label>
		<textarea class="widefat" id="<?php echo esc_attr( $this->get_field_id( 'textarea' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'textarea' ) ); ?>"><?php echo wp_kses_post( $textarea ); ?></textarea>
	</p>

	<?php // Checkbox ?>
	<p>
		<input id="<?php echo esc_attr( $this->get_field_id( 'checkbox' ) ); ?>" name="<?php echo esc_attr( $this->get_field_name( 'checkbox' ) ); ?>" type="checkbox" value="1" <?php checked( '1', $checkbox ); ?> />
		<label for="<?php echo esc_attr( $this->get_field_id( 'checkbox' ) ); ?>"><?php _e( 'Checkbox', 'text_domain' ); ?></label>
	</p>

	<?php // Dropdown ?>
	<p>
		<label for="<?php echo $this->get_field_id( 'select' ); ?>"><?php _e( 'Select', 'text_domain' ); ?></label>
		<select name="<?php echo $this->get_field_name( 'select' ); ?>" id="<?php echo $this->get_field_id( 'select' ); ?>" class="widefat">
		<?php
		// Your options array
		$options = array(
			''        => __( 'Select', 'text_domain' ),
			'option_1' => __( 'Option 1', 'text_domain' ),
			'option_2' => __( 'Option 2', 'text_domain' ),
			'option_3' => __( 'Option 3', 'text_domain' ),
		);

		// Loop through options and add each one to the select dropdown
		foreach ( $options as $key => $name ) {
			echo '<option value="' . esc_attr( $key ) . '" id="' . esc_attr( $key ) . '" '. selected( $select, $key, false ) . '>'. $name . '</option>';

		} ?>
		</select>
	</p>

<?php }

Este código simplemente agrega 5 campos al widget (Título, texto, cuadro de texto, selección y casilla de verificación). Entonces, primero establece los valores predeterminados para su widget, luego la siguiente función analiza la configuración actual establecida / guardada para su widget con los valores predeterminados (por lo que cualquier configuración que no exista volvería al valor predeterminado, como cuando agregue su barra lateral). Y el último es el html de cada campo. Tenga en cuenta el uso de esc_attr () al agregar campos de formulario, esto se hace por razones de seguridad. Siempre que haga eco de una variable definida por el usuario en su sitio, primero debe asegurarse de que se limpie.

3 – La función update ()

La función update () es realmente simple. Como los principales desarrolladores de WordPress han agregado una API de widget muy poderosa, simplemente agregue este código para actualizar cada campo:

// Update widget settings
public function update( $new_instance, $old_instance ) {
	$instance = $old_instance;
	$instance['title']    = isset( $new_instance['title'] ) ? wp_strip_all_tags( $new_instance['title'] ) : '';
	$instance['text']     = isset( $new_instance['text'] ) ? wp_strip_all_tags( $new_instance['text'] ) : '';
	$instance['textarea'] = isset( $new_instance['textarea'] ) ? wp_kses_post( $new_instance['textarea'] ) : '';
	$instance['checkbox'] = isset( $new_instance['checkbox'] ) ? 1 : false;
	$instance['select']   = isset( $new_instance['select'] ) ? wp_strip_all_tags( $new_instance['select'] ) : '';
	return $instance;
}

Como puede ver, todo lo que tenemos que hacer es verificar cada parámetro y si no está vacío guardarlo en la base de datos. Tenga en cuenta el uso de las funciones wp_strip_all_tags () y wp_kses_post (), se utilizan para limpiar los datos antes de que se agreguen a la base de datos. Siempre que inserte contenido enviado por el usuario en una base de datos, debe asegurarse de que no contenga ningún código malicioso. La primera función wp_strip_all_tags elimina todo excepto el texto base para que pueda usarlo para todos los campos donde el valor final es una cadena y la segunda función wp_kses_post () es la misma función que se usa para el contenido del artículo y elimina todas las etiquetas además del HTML básico como enlaces, intervalos, divs, imágenes, etc.

4 – La función widget ()

La función widget () es la que mostrará el contenido del sitio web. Esto es lo que verán sus visitantes. Esta función se puede personalizar para incluir clases y etiquetas CSS específicas para que coincida perfectamente con la visualización de su tema. Aquí está el código (tenga en cuenta que este código se puede cambiar fácilmente para satisfacer sus necesidades):

// Display the widget
public function widget( $args, $instance ) {

	extract( $args );

	// Check the widget options
	$title    = isset( $instance['title'] ) ? apply_filters( 'widget_title', $instance['title'] ) : '';
	$text     = isset( $instance['text'] ) ? $instance['text'] : '';
	$textarea = isset( $instance['textarea'] ) ?$instance['textarea'] : '';
	$select   = isset( $instance['select'] ) ? $instance['select'] : '';
	$checkbox = ! empty( $instance['checkbox'] ) ? $instance['checkbox'] : false;

	// WordPress core before_widget hook (always include )
	echo $before_widget;

   // Display the widget
   echo '<div class="widget-text wp_widget_plugin_box">';

		// Display widget title if defined
		if ( $title ) {
			echo $before_title . $title . $after_title;
		}

		// Display text field
		if ( $text ) {
			echo '<p>' . $text . '</p>';
		}

		// Display textarea field
		if ( $textarea ) {
			echo '<p>' . $textarea . '</p>';
		}

		// Display select field
		if ( $select ) {
			echo '<p>' . $select . '</p>';
		}

		// Display something if checkbox is true
		if ( $checkbox ) {
			echo '<p>Something awesome</p>';
		}

	echo '</div>';

	// WordPress core after_widget hook (always include )
	echo $after_widget;

}

Este código no es complejo, todo lo que necesita recordar es verificar si una variable está configurada, si no lo hace y desea imprimirlo, obtendrá un mensaje de error.

El código completo del complemento del widget.

Ahora, si lo ha seguido correctamente, su complemento ahora debería ser completamente funcional y puede personalizarlo para que se adapte a sus necesidades. Si no ha seguido la guía o desea verificar el código, puede visitar la página de Github para ver el código completo.

Ver el código completo en Github

Conclusión

Hemos visto que crear un widget dentro de un plugin es muy interesante, ahora debes saber cómo crear un plugin simple que contenga un widget con diferentes tipos de campos y has aprendido a ir un poco más allá usando técnicas avanzadas para personalizar el widget. ¡Felicitaciones, has hecho un trabajo increíble!

Deja un comentario

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

Ir arriba