Cómo crear un widget de WordPress personalizado

¿Le gustaría crear sus propios widgets personalizados en WordPress? Los widgets le permiten agregar elementos sin contenido a una barra lateral o en cualquier área preparada para su sitio web. Puede usar widgets para agregar pancartas, comerciales, formularios de registro al boletín y otros artículos en su sitio web. En este artículo, le mostraremos cómo crear un widget de widget personalizado y paso por paso.

Nota: Este tutorial está destinado a usuarios de DIY de WordPress que aprenden WordPress Development y COD. ¿Qué es un widget WordPress? Los widgets de WordPress contienen piezas de código que puede agregar a las barras laterales de su sitio o en áreas listas para widgets.
Piense en ellos como módulos que puede usar para agregar diferentes elementos utilizando una interfaz de deslizamiento y fijación simple. Por defecto, WordPress viene con un conjunto estándar de widgets que puede usar con cualquier tema de WordPress. Vea nuestra guía para principiantes sobre cómo agregar y usar widgets en WordPress.

WordPress también permite a los desarrolladores crear sus propios widgets personalizados. Muchos complementos y complementos premium de WordPress vienen con sus propios widgets personalizados que puede agregar a las barras laterales. Por ejemplo, puede agregar un formulario de contacto, un formulario de autenticación personalizado o una galería de fotos en una barra lateral sin escribir ningún código.
Dicho esto, para ver cómo crear fácilmente sus propios widgets personalizados en WordPress. Tutorial de video
Suscríbete a WPBeginner
Si prefiere las instrucciones escritas, continúe leyendo. Creando un widget personalizado en WordPress Si aprende WordPress COD, necesitará un entorno de desarrollo local. Puede instalar WordPress en su computadora (Mac o Windows). Hay varias formas de agregar código de widget personalizado a WordPress. Idealmente, puede crear un complemento específico para el sitio y puede pegar el código de widget allí. También puede pegar el código al archivo Functions.php del tema. Sin embargo, solo estará disponible cuando ese tema esté activo. Otra herramienta que puede usar son los fragmentos de código que le permiten agregar fácilmente código personalizado a su sitio de WordPress. En este tutorial, crearemos un widget simple que saluda a los visitantes. El objetivo aquí es familiarizarse con la clase WordPress Widget. Vamos a empezar. La creación de un widget básico de WordPress WordPress viene con una clase de widget de WordPres construida. Cada nuevo widget WordPress extiende la clase Widget WordPress. Hay 18 métodos mencionados en el Manual de desarrollador de WordPress que se pueden usar con la clase WP Widget. Sin embargo, en aras de este tutorial, nos centraremos en los siguientes métodos.
__Construct (): Esta es la parte donde creamos la ID del widget, el título y la descripción.
Widget: Aquí definimos la salida generada por widget.
Formulario: Esta parte del código es el lugar donde creamos el formulario de opción de widget para backend.
ACTUALIZACIÓN: Esta es la parte donde guardamos las opciones de widget en la base de datos.
Estudiemos el siguiente código en el que utilizamos estos cuatro métodos en wp_widget.// creando el widget
La clase wpb_widget extiende wp_widget {
// La parte de construcción
Función __construct () {}
// Creación de widget front-end
Widget de función pública ($ args, $ instancia) {
}
// Creación de backend de widgets
Formulario de función pública ($ instancia) {
}
// Actualización de widget reemplazando instancias antiguas con nuevas
Actualización de funciones públicas ($ new_instance, $ Old_Instance) {
}
// La clase wpb_widget termina aquí
}
La última pieza del código es el lugar donde realmente grabaremos el widget y lo cargaremos en WordPress.
Función wpb_load_widget () {
register_widget (‘wpb_widget’);

}
add_action (‘widgets_init’, ‘wpb_load_widget’);
Ahora colocemos todo esto para crear un widget básico de WordPress. Puede copiar e insertar el siguiente código en el archivo funcional.php del complemento o tema personalizado.
// Creando el widget
La clase wpb_widget extiende wp_widget {
Función __construct () {
Padre :: __ Construct (
// ID de base de su widget
‘wpb_widget’,
// El nombre del widget aparecerá en la interfaz de usuario
__ (‘wpbeginner widget’, ‘wpb_widget_domain’),
// Descripción del widget
Array (‘Descripción’ => __ (‘Base de widget de muestra en el tutorial WPBeginner’, ‘WPB_Widget_Domain’),),)
);
}
// Creación de widget front-end
Widget de función pública ($ args, $ instancia) {
$ Title = APLICE_FILTERS (‘widget_itle’, $ instancia [‘title’]);
// Antes y después de los argumentos del widgets se han definido por temas
echo $ args [‘antes_widget’];
If (! Vacía ($ title))
echo $ args [‘antes de_itle’]. $ Título. $ args [‘after_title’];
// Aquí es donde ejecuta el código y muestra la salida
Echo __ (‘¡Hola, mundo!’, ‘Wpb_widget_domain’);
echo $ args [‘after_widget’];
}
// backend de widgets
Formulario de función pública ($ instancia) {
if (isset ($ instancia [‘title’])) {
$ Title = $ instancia [‘title’];
}
más {
$ Title = __ (‘nuevo título’, ‘wpb_widget_domain’);
}
// formulario de administración de widget?>
<etiqueta for = " get_field_id (‘title’);?>”>
<input class = "wideFat" id = " get_field_id (‘title’);>” name = ” get_field_name (‘title’);?>” type = “Text” Value = “” />
<? Php
}
// Actualización de widget reemplazando instancias antiguas con nuevas
Actualización de funciones públicas ($ new_instance, $ Old_Instance) {
$ instancia = array ();
$ instancia ['title'] = (! vacía ($ new_instance ['title'))? strip_tags ($ new_instance ['title'): '';
devolver $ instancia;
}
// La clase wpb_widget termina aquí
}
// registrarse y cargar el widget
Función wpb_load_widget () {
register_widget ('wpb_widget');
}
add_action ('widgets_init', 'wpb_load_widget');
Después de agregar el código, debe acceder a la página de aspecto Widgets. Notará el nuevo widget wpbeginner en la lista de widgets disponibles. Debe deslizar y sujetar este widget en una barra lateral.
Este widget tiene una sola forma de completar el formulario, 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.
Ahora estudiemos el código nuevamente. Primero grabé "wpb_widget" y cargué el widget personalizado. Después de eso, definí qué está haciendo ese widget y cómo se muestra el back-end widget. Finalmente, definimos cómo administrar los cambios realizados en widget. Ahora hay algunas cosas que quizás desee preguntar. Por ejemplo, ¿cuál es el propósito de wpb_text_domain? WordPress usa GetText para administrar la traducción y la ubicación. Este wpb_text_domain y __e le dice a getText que haga una cadena disponible para la traducción. Vea cómo puede encontrar temas de WordPress preparados para la traducción. Si crea un widget personalizado para su tema, puede reemplazar wpb_text_domain con su tema. También es posible que desee ver nuestra lista con los widgets de WordPress más útiles para su sitio. Si le gusta este artículo, suscríbase a nuestro canal de YouTube para los tutoriales de video de WordPress. También puede encontrarnos en Twitter y Facebook.