¿Quieres crear tus propios widgets personalizados en WordPress? Los widgets le permiten agregar elementos sin contenido en una barra lateral o en cualquier área lista para widgets en 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.
Notar: Este tutorial es para usuarios de WordPress que están aprendiendo a desarrollar y codificar WordPress.
¿Qué es un widget de WordPress?
Contents
Los widgets de WordPress contienen fragmentos de código que puede agregar a las barras laterales o áreas listas para widgets de su sitio web. Piense en ellos como módulos que puede usar para agregar diferentes elementos usando una interfaz simple de arrastrar y soltar. De forma predeterminada, WordPress viene con un conjunto estándar de widgets que puede usar con cualquier tema de WordPress. Consulte 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 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, echemos un vistazo a cómo crear fácilmente sus propios widgets personalizados en WordPress.
Video tutorial
Suscríbase a MundoCMS Si prefiere instrucciones escritas, siga leyendo.
Crea un widget personalizado en WordPress
Si está aprendiendo a programar en 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 el código de su widget en él. También puede pegar el código en el archivo functions.php de su 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 solo saluda a los visitantes. El objetivo aquí es familiarizarse con la clase de widgets de WordPress. Empecemos.
Crea un widget básico de WordPress
WordPress viene con una clase de widget de WordPress incorporada. Cada nuevo widget de WordPress amplía la clase de widget de WordPress. Hay 18 métodos mencionados en la Guía para desarrolladores de WordPress que se pueden usar con la clase WP Widget. Sin embargo, para los propósitos de este tutorial, nos centraremos en los siguientes métodos.
- __construct (): esta es la parte donde creamos la identificación, título y descripción del widget.
- widget: aquí es donde definimos la salida generada 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 del widget en la base de datos.
Echemos un vistazo al siguiente código donde usamos estos cuatro métodos en la clase WP_Widget. // Crear la clase de widget wpb_widget amplía WP_Widget {// Construir la función de parte __construct () {} // Crear widget de widget de servicio público front-end ($ args, $ instancia) {} // Crear widget de formulario backend de función pública ($ instancia) {} // Actualiza el widget reemplazando instancias antiguas con una nueva actualización de servicio público ($ new_instance, $ old_instance) {} // La clase wpb_widget termina aquí} La última parte del código es donde guardaremos el widget y lo cargaremos dentro WordPress. función wpb_load_widget () {register_widget (‘wpb_widget’); } add_action (‘widgets_init’, ‘wpb_load_widget’); Ahora, juntemos todo eso 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 de su tema. // La creación de la clase de widget wpb_widget extiende WP_Widget {function __construct () {parent :: __ construct (// ID base de su widget ‘wpb_widget’, // El nombre del widget aparecerá en la interfaz de usuario __ (‘MundoCMS Widget ‘,’ wpb_widget_domain ‘), // Tabla de descripción del widget (‘ description ‘=> __ (‘ Ejemplo de widget basado en el tutorial de MundoCMS ‘,’ wpb_widget_domain ‘),)); } // Cree un widget de widget de servicio público de front-end ($ args, $ instancia) {$ title = apply_filters (‘widget_title’, $ instancia[‘title’] ); // los argumentos antes y después del widget están definidos por los temas echo $ args[‘before_widget’]; if (! empty ($ title)) echo $ args[‘before_title’] . $ título. $ args[‘after_title’]; // Aquí es donde ejecuta el código y ve la salida echo __ (‘¡Hola, mundo!’, ‘Wpb_widget_domain’); echo $ args[‘after_widget’]; } // Formulario de función pública de Widget Backend ($ instancia) {if (isset ($ instancia[ ‘title’ ] )) {$ título = $ instancia[ ‘title’ ]; } else {$ title = __ (‘Nuevo título’, ‘wpb_widget_domain’); } // ¿Formulario de administración de widgets?>
Originally posted 2021-02-25 12:01:43.
