Cómo crear un widget personalizado de WordPress

¿Quieres crear tus propios widgets personalizados en WordPress? Los widgets te permiten añadir elementos sin contenido en una barra lateral o en cualquier área de tu sitio web que esté preparada para los widgets.

Puedes usar widgets para añadir banners, anuncios, formularios de suscripción a boletines de noticias y otros elementos a tu sitio web.

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

Nota: Este tutorial es para los usuarios de WordPress 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 puedes añadir a las barras laterales de tu sitio web o a las áreas preparadas para los widgets.

Piensa en ellos como módulos que puedes usar para añadir diferentes elementos mediante una simple interfaz de arrastrar y soltar.

De forma predeterminada, WordPress viene con un conjunto estándar de widgets que puedes utilizar con cualquier tema de WordPress. Consulta nuestra guía para principiantes sobre cómo añadir y usar widgets en WordPress.

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

Muchos temas y plugins premium de WordPress vienen con sus propios widgets personalizados que puedes añadir a tus barras laterales.

Por ejemplo, puede añadir un formulario de contacto, un formulario de inicio de sesión personalizado o una galería de fotos en una barra lateral sin escribir ningún código.

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

Video Tutorial

Suscríbase a WPBeginner

Si prefiere instrucciones escritas, entonces por favor continúe leyendo.

Creación de un widget personalizado en WordPress

Si estás aprendiendo el código de WordPress, entonces necesitarás un entorno de desarrollo local. Puedes instalar WordPress en tu ordenador (Mac o Windows).

Hay varias formas de añadir tu código personalizado de widget en WordPress.

Lo ideal sería crear un plugin específico para el sitio y pegar el código del widget allí.

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

Otra herramienta que puedes usar es el plugin Code Snippets que te permite añadir fácilmente código personalizado a tu sitio web de WordPress.

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

Empecemos.

Creación de un widget básico de WordPress

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

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

Sin embargo, en este tutorial nos centraremos en los siguientes métodos.

• Esta es la parte en la que creamos el ID del widget, el título y la descripción.
• widget : Aquí es donde definimos la salida generada por el widget.
• forma : Esta parte del código es donde creamos el formulario con las opciones de los widgets para el backend.
• update: Esta es la parte en la que guardamos las opciones de los widgets en la base de datos.

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

12345678910111213141516171819202122232425/// La creación del widget classwpb_widget extiendeWP_Widget { // La función de la parte constructiva__construct() { }  // Creando widget front-endpublicfunctionwidget( $args, $instance) { }          // Creando el widget Backend publicfunctionform( $instance) { }      // Widget de actualización que sustituye las viejas instancias con newpublicfunctionupdate( $new_instance, $old_instance) { } // La clase wpb_widget termina aquí}

La última pieza del código es donde registraremos el widget y lo cargaremos en WordPress.

1234functionwpb_load_widget() { register_widget( $0027wpb_widget$0027);}add_action( $0027widgets_init$0027, $0027wpb_load_widget$0027);

Ahora juntemos todo esto para crear un widget básico de WordPress.

Puedes copiar y pegar el siguiente código en el archivo functions.php de tu plugin o tema personalizado.

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465// Crear el widget classwpb_widget extiendeWP_Widget { function__construct() {parent:: __construct( // ID base de su widget$0027wpb_widget$0027, // El nombre del widget aparecerá en UI__($0027WPBeginner Widget$0027, $0027wpb_widget_domain$0027), // Widget descriptionarray( $0027description$0027=> __( $0027Ejemplo de widget basado en el Tutorial WPBeginner$0027, $0027wpb_widget_domain$0027), ) );}  // Creación del widget front-end publicfunctionwidget( $args, $instance) {$title= apply_filters( $0027widget_title$0027, $instance[$0027title$0027] ); // los argumentos del widget antes y después son definidos por themesecho$args[$0027before_widget$0027];if( ! empty( $title) )echo$args[$0027before_title$0027] . $title. $args[$0027después_título$0027]; // Aquí es donde se ejecuta el código y se muestra el outputecho__( $0027Hello, World!$0027, $0027wpb_widget_domain$0027);echo$args[$0027después_widget$0027];}          // Widget Backend publicfunctionform( $instance) {if( isset( $instance[ $0027title$0027] ) ) {$title= $instance[ $0027title$0027];}else{$title= __( $0027Nuevo título$0027, $0027wpb_widget_domain$0027);}// Widget admin form?>for="get_field_id( $0027title$0027 ); ?>"> "name="get_field_name( $0027title$0027 ); ?>"type="text "value=""/><?php }      // Widget de actualización que sustituye las antiguas instancias por newpublicfunctionupdate( $new_instance, $old_instance) {$instance= array();$instance[$0027title$0027] = ( ! empty( $new_instance[$0027title$0027] ) ) ? strip_tags( $new_instance[$0027title$0027] ) : $0027$0027;return$instance;} // La clase wpb_widget termina aquí}   // Registrar y cargar el widgetfunctionwpb_load_widget() { register_widget( $0027wpb_widget$0027);}add_action( $0027widgets_init$0027, $0027wpb_load_widget$0027);

Después de añadir el código, tienes que ir a la página de Apariencia " Widgets . Notarás el nuevo Widget WPBeginner en la lista de widgets disponibles. Necesitas arrastrar y soltar este widget a una barra lateral.

Este widget sólo tiene un campo de formulario para rellenar, puedes añadir tu texto y hacer clic en el botón Guardar para almacenar tus cambios.

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

Ahora vamos a estudiar el código de nuevo.

Primero registramos el $0027wpb_widget$0027 y cargamos nuestro widget personalizado. Después de eso definimos lo que 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 quizás quieras preguntar. Por ejemplo, ¿cuál es el propósito del wpb_texto_dominio?

WordPress utiliza gettext para manejar la traducción y localización. Este dominio wpb_texto y __e le dice a gettext que haga una cadena disponible para la traducción. Mira cómo puedes encontrar temas de WordPress listos para ser traducidos.

Si estás creando un widget personalizado para tu tema, puedes sustituir wpb_text_domain por el dominio de texto de tu tema.

Esperamos que este artículo te haya ayudado a aprender a crear fácilmente un widget de WordPress personalizado. También puedes ver nuestra lista de los widgets de WordPress más útiles para tu sitio.

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