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

Crea 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 barras a los lados de su sitio web o áreas preparadas para widgets.

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 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 ingresar ningún código.

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

Video tutorial

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

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

También puede pegar el código en el archivo functions.php de su tema. Sin embargo, solo está disponible cuando ese tema específico 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 da la bienvenida a los visitantes. El objetivo aquí es familiarizarse con la clase de widget de WordPress.

Empecemos.

Crea un widget básico de WordPress

WordPress viene con una clase de widget de WordPress incrustado. Cada nuevo widget de WordPress expande 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, para los fines de este tutorial, nos centraremos en los siguientes métodos.

  • __construct (): 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 del widget en la base de datos.
  • Estudiaremos el código a continuación, donde usamos estos cuatro métodos en la clase WP_Widget.

    // Creando el widget
    La clase wpb_widget extiende WP_Widget {

    // La parte de construcción
    __construct () function {

    }

    // Crear widget de front-end
    widget de función pública ($ args, $ instancia) {

    }

    // Crear widget de backend
    formulario de servicio civil ($ instancia) {

    }

    // Actualizando el widget reemplazando instancias antiguas por otras nuevas
    actualización del servicio civil ($ new_instance, $ old_instance) {

    }

    // La clase wpb_widget termina aquí
    }

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

    Función wpb_load_widget () {
    register_widget (‘wpb_widget’);
    }
    add_action (‘widgets_init’, ‘wpb_load_widget’);

    Ahora, juntemos todo 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.

    // Creando el widget
    La clase wpb_widget extiende WP_Widget {

    __construct () function {
    parent :: __ construct (

    // ID base de tu widget
    ‘wpb_widget’,

    // El nombre del widget aparecerá en la interfaz de usuario
    __ (‘WPBeginner widget’, ‘wpb_widget_domain’),

    // Descripción del widget
    array (‘description’ => __ (‘Ejemplo de widget basado en WPBeginner Tutorial’, ‘wpb_widget_domain’),)
    );
    }

    // Crear widget de front-end

    widget de función pública ($ args, $ instancia) {
    $ title = apply_filters (‘widget_title’, $ instance (‘title’));

    // los argumentos del widget antes y después están definidos por temas
    echo $ args (‘before_widget’);
    if (! empty ($ title))
    echo $ args (‘before_title’). $ title. $ args (‘after_title’);

    // Aquí es donde ejecuta el código y muestra la salida
    echo __ (‘¡Hola mundo!’, ‘wpb_widget_domain’);
    echo $ args (‘after_widget’);
    }

    // widget de backend
    formulario de servicio civil ($ instancia) {
    if (isset ($ instance (‘title’))) {
    $ título = $ instancia (‘título’);
    }
    otro {
    $ title = __ (‘Nuevo título’, ‘wpb_widget_domain’);
    }
    // widget de formulario de administrador
    ?>

    Después de agregar el código, debe ir a Apariencia »Widgets página. Verá el nuevo widget WPBeginner en la lista de widgets disponibles. 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 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.

    Obtenga una vista previa de su widget personalizado

    Ahora estudiemos el código nuevamente.

    Primero registramos “wpb_widget” y cargamos nuestro widget personalizado. Después de eso, definimos qué hace este widget y cómo mostrar el backend del widget.

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

    Ahora, hay algunas cosas que puede 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 una cadena disponible para la traducción. Vea cómo puede encontrar temas de WordPress listos para traducir.

    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 web.

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

    Publicaciones relacionadas

    Botón volver arriba