Cómo crear un complemento de widget para WordPress

WordPress es un increíble sistema de gestión de contenido con muchas funciones excelentes, como widgets. En este tutorial, te explicaré cómo crear tus propios widgets dentro de un pequeño complemento. Esta publicación cubrirá algunos puntos adicionales que debe comprender antes de crear el widget. ¡Aquí vamos!

Paso 1: crea tu complemento de widget

Recientemente creé un complemento llamado “Paquete de widgets para autónomos”, y algunas personas me preguntaron cómo crear dicho complemento, así que decidí escribir esta publicación. El primer paso es la creación del complemento. Y como verá, no es la parte más difícil. Un complemento es un código adicional que se agrega a WordPress una vez que lo activa. WordPress crea un bucle a través de una carpeta para recuperar todos los complementos disponibles y enumerarlos 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 algunos problemas si comete un error. Así que, por favor, espere a probar nuestro complemento antes de colocar su hosting.

Abra ahora la carpeta wp-content / plugins. Aquí es donde vas a agregar tu complemento. Cree un nuevo directorio y llámelo “widget-plugin” (en realidad, este nombre puede ser el que desee). Incluso si nuestro complemento solo tendrá un solo 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:


Entonces, tenemos que modificar este código para que se ajuste a nuestras necesidades:


Guarde su archivo. ¡Con solo agregar 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 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 seguir mis instrucciones y vuelva a intentarlo. Ahora puede activar el complemento.

Paso 2: crea el widget

Ahora vamos a crear 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. los constructor, para iniciar el widget
  2. los función form () para crear el formulario de widget en la administración
  3. los función de actualización (), para guardar los datos del widget durante la edición
  4. Y el función widget () para mostrar el contenido del widget en el front-end

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 puede verse.

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

Por favor, no use __ () alrededor del nombre del widget, esta función es utilizada por WordPress para la traducción. Realmente te recomiendo que uses siempre estas funciones para que tu tema sea completamente traducible. Y el uso del parámetro 'custom_selective_refresh' permite que el widget se actualice en Apariencia> Personalizar al editar el widget, de modo que en lugar de actualizar toda la página, solo el widget se actualiza al realizar 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 que se muestren en el sitio web. Entonces, explicaré cómo puede agregar campos de texto, áreas de texto, casillas 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 ) ); ?>

	
	

/>

Este código simplemente agrega 5 campos al widget (Título, texto, área de texto, selección y casilla de verificación). Entonces, primero define los valores predeterminados para su widget, luego la siguiente función analiza la configuración actual definida / guardada para su widget con los valores predeterminados (por lo que cualquier configuración que no exista volvería a la predeterminada, como cuando agrega por primera vez un widget a su barra lateral). Y por último está el html para cada campo. Observe el uso de esc_attr () al agregar los campos del formulario, esto se hace por razones de seguridad. Siempre que haga eco de una variable definida por el usuario en su sitio, debe asegurarse de que primero esté desinfectada.

3 - La función update ()

La función update () es realmente simple. Como los desarrolladores centrales de WordPress agregaron una API de widgets realmente poderosa, solo necesitamos agregar 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 configuración y, si no está vacía, guardarla en la base de datos. Observe el uso de las funciones wp_strip_all_tags () y wp_kses_post (), que se utilizan para desinfectar los datos antes de agregarlos a la base de datos. Siempre que inserte CUALQUIER contenido enviado por un usuario en una base de datos, debe asegurarse de que no tenga ningún código malicioso. La primera función wp_strip_all_tags elimina todo excepto el texto básico para que pueda usarlo para cualquier campo donde el valor final sea una cadena y la segunda función wp_kses_post () es la misma función que se usa para el contenido de la publicación y elimina todas las etiquetas además de los enlaces html básicos , intervalos, divs, imágenes, etc.

4 - La función widget ()

La función widget () es la que generará el contenido en el sitio web. Es lo que verán tus visitantes. Esta función se puede personalizar para incluir clases CSS y etiquetas específicas para que coincidan perfectamente con la visualización de su tema. Aquí está el código (tenga en cuenta que este código se puede modificar fácilmente para adaptarse a 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 '
'; // Display widget title if defined if ( $title ) { echo $before_title . $title . $after_title; } // Display text field if ( $text ) { echo '

' . $text . '

'; } // Display textarea field if ( $textarea ) { echo '

' . $textarea . '

'; } // Display select field if ( $select ) { echo '

' . $select . '

'; } // Display something if checkbox is true if ( $checkbox ) { echo '

Something awesome

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

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

El código completo del complemento de widgets

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

Ver código completo en Github

Conclusión

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