Cómo crear un widget de WordPress personalizado

¬ŅQuieres crear tus propios widgets personalizados en WordPress? Los widgets le permiten agregar elementos que no son de contenido en una barra lateral o en cualquier √°rea lista para widgets de su sitio web.

Puede usar widgets para agregar pancartas, anuncios, formularios de suscripción a boletines y otros elementos a su sitio web.

En este artículo, le mostraremos cómo crear un widget de WordPress personalizado, paso a paso.

Crear un widget de WordPress personalizado

Nota: Este tutorial es para usuarios de WordPress DIY que están aprendiendo el desarrollo y la codificación de WordPress.

¬ŅQu√© es un widget de WordPress?

Los widgets de WordPress contienen fragmentos de código que puede agregar a las barras laterales de su sitio web o áreas listas para widgets.

Piense en ellos como módulos que puede usar para agregar diferentes elementos mediante el uso de una interfaz simple de arrastrar y soltar.

Por defecto, WordPress viene con un conjunto estándar de widgets que puedes usar con cualquier tema de WordPress. Consulte nuestra guía para principiantes sobre cómo agregar y usar widgets en WordPress.

Agregar widgets en WordPress

WordPress también permite a los desarrolladores crear sus propios widgets personalizados.

Muchos temas y complementos premium de WordPress vienen con sus propios widgets personalizados que puede agregar a sus barras laterales.

Por ejemplo, puede agregar un formulario de contacto, un formulario de inicio de sesi√≥n personalizado o una galer√≠a de fotos a una barra lateral sin escribir ning√ļn c√≥digo.

Dicho esto, veamos cómo crear fácilmente sus propios widgets personalizados en WordPress.

Video Tutorial

Suscríbase a WPBeginner

Si prefiere instrucciones escritas, contin√ļe leyendo.

Crear un widget personalizado en WordPress

Si está aprendiendo la codificación de WordPress, necesitará un entorno de desarrollo local. Puede instalar WordPress en su computadora (Mac o Windows).

Hay varias formas de agregar su código de widget personalizado en WordPress.

Idealmente, puede crear un complemento específico del sitio y pegar su código de widget allí.

También puedes pegar el código en el archivo functions.php de tu tema. Sin embargo, solo estará disponible cuando ese tema en particular esté activo.

Otra herramienta que puede usar es el complemento Code Snippets que le permite agregar fácilmente código personalizado a su sitio web de WordPress.

En este tutorial, crearemos un widget simple que simplemente reciba a los visitantes. El objetivo aquí es familiarizarse con la clase de widget de WordPress.

Empecemos.

Crear un widget b√°sico de WordPress

WordPress viene con una clase incorporada de WordPress Widget. Cada nuevo widget de WordPress amplía la clase de widget de WordPress.

Hay 18 métodos mencionados en el manual del desarrollador de WordPress que se pueden usar con la clase WP Widget.

Sin embargo, por el bien de este tutorial, nos centraremos en los siguientes métodos.

  • __construct (): esta es la parte donde creamos la identificaci√≥n del widget, el t√≠tulo y la descripci√≥n.
  • widget: aqu√≠ es donde definimos el resultado generado por el widget.
  • formulario: Esta parte del c√≥digo es donde creamos el formulario con opciones de widget para el backend.
  • actualizaci√≥n: esta es la parte donde guardamos las opciones de widgets en la base de datos.

Estudiemos el siguiente código donde hemos usado estos cuatro métodos dentro de la clase WP_Widget.

// Creating the widget 
class wpb_widget extends WP_Widget {

// The construct part  
function __construct() {

}
 
// Creating widget front-end
public function widget( $args, $instance ) {

}
         
// Creating widget Backend 
public function form( $instance ) {

}
     
// Updating widget replacing old instances with new
public function update( $new_instance, $old_instance ) {

}

// Class wpb_widget ends here
} 

La parte final del código es donde realmente registraremos el widget y lo cargaremos dentro de WordPress.

function wpb_load_widget() {
    register_widget( 'wpb_widget' );
}
add_action( 'widgets_init', 'wpb_load_widget' );

Ahora, juntemos todo esto para crear un widget b√°sico de WordPress.

Puede copiar y pegar el siguiente código en su complemento personalizado o en el archivo functions.php del tema.

// Creating the widget 
class wpb_widget extends WP_Widget {
 
function __construct() {
parent::__construct(
 
// Base ID of your widget
'wpb_widget', 
 
// Widget name will appear in UI
__('WPBeginner Widget', 'wpb_widget_domain'), 
 
// Widget description
array( 'description' => __( 'Sample widget based on WPBeginner Tutorial', 'wpb_widget_domain' ), ) 
);
}
 
// Creating widget front-end
 
public function widget( $args, $instance ) {
$title = apply_filters( 'widget_title', $instance('title') );
 
// before and after widget arguments are defined by themes
echo $args('before_widget');
if ( ! empty( $title ) )
echo $args('before_title') . $title . $args('after_title');
 
// This is where you run the code and display the output
echo __( 'Hello, World!', 'wpb_widget_domain' );
echo $args('after_widget');
}
         
// Widget Backend 
public function form( $instance ) {
if ( isset( $instance( 'title' ) ) ) {
$title = $instance( 'title' );
}
else {
$title = __( 'New title', 'wpb_widget_domain' );
}
// Widget admin form
?>

Despu√©s de agregar el c√≥digo, debe dirigirse a Apariencia ¬ĽWidgets p√°gina. Notar√° el nuevo WPBeginner Widget en la lista de widgets disponibles. Debe arrastrar y soltar este widget en una barra lateral.

Widget de demostración

Este widget tiene solo un campo de formulario para completar, puede agregar su texto y hacer clic en el botón Guardar para almacenar sus cambios.

Ahora puede visitar su sitio web para verlo en acción.

Vista previa de su widget personalizado

Ahora estudiemos el código nuevamente.

Primero registramos el "wpb_widget" y cargamos nuestro widget personalizado. Después de eso, definimos qué hace ese widget y cómo mostrar el back-end del widget.

Por √ļltimo, definimos c√≥mo manejar los cambios realizados en el widget.

Ahora hay algunas cosas que es posible que desee preguntar. Por ejemplo, ¬Ņpara qu√© sirve wpb_text_domain?

WordPress usa gettext para manejar la traducción y localización. Este wpb_text_domain y __e le dice a gettext que haga que una cadena esté disponible para traducción. Vea cómo puede encontrar temas de WordPress listos para la traducción.

Si est√° creando un widget personalizado para su tema, puede reemplazar wpb_text_domain con el dominio de texto de su tema.

Esperamos que este art√≠culo te haya ayudado a aprender c√≥mo crear f√°cilmente un widget personalizado de WordPress. Tambi√©n puede ver nuestra lista de los widgets de WordPress m√°s √ļtiles para su sitio.

Si te gustó este artículo, suscríbete a nuestro canal de YouTube para ver videos tutoriales de WordPress. También puedes encontrarnos en Twitter y Facebook.