Cómo crear un widget de WordPress personalizado

¿Quieres crear tus propios widgets personalizados de WordPress? Los widgets le permiten agregar elementos sin contenido en la barra lateral o en cualquier área del sitio web diseñada para mostrar widgets.

Usando widgets, puede 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 personalizado de WordPress paso a paso.

Crea un widget de WordPress personalizado

Atención: Este tutorial es para usuarios de WordPress DIY que están aprendiendo programación y codificación de WordPress.

¿Qué es el widget de WordPress?

Los widgets de WordPress contienen fragmentos de código que puede agregar páginas de barra o áreas del sitio preparadas para el widget.

Piense en ellos como módulos que puede usar para agregar diferentes elementos usando una simple interfaz 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 de WordPress.

Agregar widgets en WordPress

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

Muchos temas y complementos de WordPress de alta calidad tienen 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 la barra lateral sin ingresar el código.

Dicho esto, veamos qué fácil es crear sus propios widgets personalizados de WordPress.

Video instructivo

Regístrese en WPBeginner

Si prefiere instrucciones escritas, siga leyendo.

Crea 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 un código de widget personalizado de WordPress.

Es mejor crear un complemento específico para el sitio y pegar el código del widget allí.

También puede pegar el código en el archivo functions.php de la composición. Sin embargo, solo estará disponible si 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 de WordPress.

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

Vamos a empezar.

Crea un widget básico de WordPress

WordPress tiene una clase de widget de WordPress incrustado. Cada nuevo widget de WordPress expande la clase de widget de WordPress.

La guía para desarrolladores de WordPress enumera 18 métodos que se pueden usar con la clase WP Widget.

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

  • __construct (): en esta parte, creamos la ID del widget, el título y la descripción.
  • widget: aquí definimos el resultado generado por el widget.
  • formulario: en esta parte del código, creamos un formulario con opciones de widget para el backend.
  • Actualización: en esta parte, guardamos las opciones del widget en la base de datos.
  • Veamos el siguiente código, en el que usamos estos cuatro métodos en la clase WP_Widget.

    // Crear widget wpb_widget extiende WP_Widget {// Función de parte de construcción __construct () {} // Crear widget de función pública del widget de front-end ($ args, $ instancia) {} // Crear formulario de función pública widget Backend ($ instancia) {} // Actualización del widget que reemplaza las instancias antiguas con una nueva actualización de la función pública ($ new_instance, $ old_instance) {} //} La clase wpb_widget termina aquí}

    La última parte del código es donde realmente registraremos el widget y lo cargaremos a WordPress.

    función wpb_load_widget () {register_widget (“wpb_widget”); } Agregar actividades (“widgets_init”, “wpb_load_widget”);

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

    Puede copiar y pegar el siguiente código en un complemento personalizado o en un archivo .php.

    // La creación del widget wpb_widget extiende WP_Widget {function __construct () {parent :: __ construction (// El identificador básico del widget “wpb_widget”, // El nombre del widget aparecerá en la interfaz de usuario __ (“WPBeginner Widget”, “wpb_widget_domain”), // Descripción del widget de matriz (‘description’ => __ (‘Ejemplo de un widget basado en el tutorial WPBeginner’, ‘wpb_widget_domain domain’),)); } // Crear el widget de front-end para el widget de función pública ($ args, $ instance) {$ title = Apply_filters (‘widget_title’, $ instance (‘title’)); // antes y después de que los argumentos 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í ejecuta el código y muestra la salida echo __ (“¡Hola, mundo!”, “Wpb_widget_domain”); echo $ args (‘after_widget’); } // Formulario de función pública del widget de back-end ($ instancia) {if (isset ($ instancia (‘título’)))) {$ título = $ instancia (‘título’); } Más {$ title = __ (“Nuevo título”, “wpb_widget_domain”); } // widget de formulario de administrador?>

    Después de agregar el código, vaya a Apariencia »Widgets página. En la lista de widgets disponibles, verá el nuevo widget WPBeginner. Debe arrastrar y soltar este widget en la barra lateral.

    Widget de demostración

    Este widget tiene solo un campo de formulario para completar, puede agregar texto y hacer clic en Guardar para guardar los cambios.

    Ahora puede visitar su sitio web para ver cómo funciona.

    Ver el widget personalizado

    Ahora estudiemos el código nuevamente.

    Primero, registramos “wpb_widget” y cargamos nuestro widget personalizado. A continuación, determinamos qué hace este widget y cómo mostrar el backend del widget.

    Finalmente, determinamos cómo manejar los cambios realizados en el widget.

    Ahora puedes hacer algunas preguntas. Por ejemplo, ¿para qué sirve wpb_text_domain?

    WordPress usa gettext para manejar la traducción y localización. Este dominio wpb_text_domain y __e le dice a gettext que proporcione una cadena de conversión. Vea cómo encontrar temas de WordPress listos para traducir.

    Si está creando un widget personalizado para un tema, puede reemplazar wpb_text_domain con el dominio de texto del tema.

    Esperamos que este artículo te haya ayudado a aprender cómo crear fácilmente widgets personalizados de WordPress. También puede ver nuestra lista de los widgets de WordPress más útiles para su sitio web.

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

    Publicaciones relacionadas

    Botón volver arriba