Cómo crear widgets personalizados en WordPress 

Widgets de WordPressEsto puede hacerse en áreas designadas del sitio web (por ejemplouna barra lateral (en software)) Añada módulos de función, comoTexto, enlaces de páginas,botón socialy otros elementos. Por ejemplo, se podría colocar un formulario de suscripción a las noticias en la barra lateral.

Estos widgets mejoran la funcionalidad del sitio sin cambiar el contenido principal, ofreciendo la flexibilidad de añadir módulos como banners publicitarios, herramientas de navegación y mucho más.

WordPress viene con una serie de widgets por defecto, como Archivos, Calendario, Categorías, Nube de etiquetas, Páginas, Metainformación, etc. Además, los widgets pueden personalizarse para incluir contenido personalizado, como incrustar actualizaciones de redes sociales, entradas recientes o etiquetas HTML.

En este artículo, mostraremos Tres enfoques Crea widgets personalizados para WordPress y explica cómo añadir o eliminar widgets de entradas o páginas específicas.

¿Qué son los widgets de WordPress?

Los widgets de WordPress son módulos de contenido que pueden añadirse a zonas específicas de un sitio web, como la barra lateral o el pie de página. Estos widgets son esencialmente objetos PHP que emiten HTML y pueden realizar diversas funciones, como mostrar las últimas entradas, incrustar actualizaciones de redes sociales, mostrar categorías o añadir menús personalizados.

Los widgets pueden reutilizarse dentro de la misma área de widgets, lo que proporciona flexibilidad en el diseño del sitio web. Dependiendo del tema, el número de áreas de widgets variará.

Además, los widgets de WordPress guardan los ajustes de configuración en una base de datos, lo que facilita la gestión de su comportamiento y apariencia.

Usos de los widgets de WordPress y dónde añadirlos

Los widgets pueden mejorar la funcionalidad de su sitio web de muchas maneras. Por ejemplo:

• Añada un cuadro de búsqueda para facilitar a los usuarios la búsqueda de contenidos.
• Añada un formulario de suscripción por correo electrónico para recoger la información de registro del usuario.
• Muestre los últimos artículos o contenidos populares para atraer la atención de los visitantes.
• Añada botones de seguimiento en las redes sociales o un flujo de contenido en directo que muestre los últimos acontecimientos.
• Muestra biografías de autores para conectar con los lectores.
• Enumere las categorías del sitio web para simplificar la experiencia de navegación.
• Si el sitio realiza eventos, puede utilizar el widget de calendario para mostrar las próximas fechas.
• Para los sitios de comercio electrónico, los widgets pueden permitir el filtrado de productos y otras funciones.

Dónde añadir widgets

Los widgets pueden colocarse en cualquier "área de widgets" del sitio. Las áreas de widgets más comunes en la mayoría de los temas sonuna barra lateral (en software)responder cantandopies de página, pero algunos temas pueden ofrecer espacio adicional. Todas estas áreas pueden gestionarse a través de la interfaz de widgets de WordPress, lo que proporciona opciones de personalización fáciles de usar para el diseño del sitio.

¿Por qué añadir un widget a una página o entrada de WordPress?

Añadir widgets a una página o entrada de WordPress mejora la funcionalidad de su sitio web con contenido relevante. Ejemplo:

• Promueva ofertas especiales para atraer la atención de los usuarios.
• Añada un formulario de suscripción por correo electrónico para ampliar la base de suscriptores.
• Añada menús adicionales o cuadros de búsqueda para optimizar la experiencia de navegación por el sitio.

Además.Los widgets también pueden utilizarse para colocar anuncioso destacar nuevos contenidos sin interferir en la navegación normal del usuario.

Cómo funcionan los widgets personalizados en WordPress

Los widgets personalizados en WordPress funcionan mediante la clase WP Widget, que los desarrolladores pueden utilizar para mostrar contenido dinámico en sus sitios web. Cada widget determina su salida y configuración mediante la definición de funciones específicas.

Para crear un gadget funcional, suelen ser necesarias las cuatro funciones clave siguientes:

1. __construct() función (matem.)
Inicialice el gadget y defina sus parámetros.

2. widget() función (matem.)
Determina lo que el widget muestra al usuario.

3. formulario() función (matem.)
Cree una pantalla de ajustes en el backend de administración de WordPress para configurar las opciones del widget.

4. actualizar() función (matem.)
Guarda los cambios realizados por el usuario en la configuración y garantiza que el gadget muestre la información más actualizada.

Hay unas 20 funciones disponibles en la clase WP Widget, pero si se centra en las cuatro funciones principales obtendrá un widget personalizado funcional. Para una funcionalidad avanzada, puedeConsulte la documentación para desarrolladores de WordPresspara más funciones.

¿Cómo crear un widget personalizado de WordPress?

En algunos temas, la opción de añadir widgets puede no estar disponible por defecto. Si necesita esta función, puede conseguirla añadiendo código personalizado manualmente. Esto puede hacerse utilizando la función SSH o SFTP, lo que prefiera. A continuaciónTemas predeterminados de WordPressCaptura de pantalla de las opciones de gadget que faltan (se puede insertar una captura de pantalla).

Paso 1: Activar la compatibilidad con widgets

1. Abra la carpeta del tema
Conéctese al servidor mediante SSH o SFTP y vaya a la ruta de la carpeta donde se encuentra el tema:
wp-content/themes/carpeta your-themes/

2. Edite el archivo functions.php
Busque y abra el tema en el funciones.php Documentación.

3. Añadir código para soportar widgets
existe funciones.php añada el siguiente código para habilitar la compatibilidad con gadgets:

function theme_widgets_init() {
    register_sidebar(array(
        
        'id' => 'sidebar-1',
        
        'before_widget' => '<div class="widget">',
        'after_widget' => '</div>',
        'before_title' => '<h2 class="widget-title">',
        'after_title' => '</h2>',
    ));
}
add_action('widgets_init', 'theme_widgets_init');
function theme_widgets_init() {
    register_sidebar(array(
        
        'id' => 'sidebar-1',
        
        'before_widget' => '<div class="widget">',
        'after_widget' => '</div>',
        'before_title' => '<h2 class="widget-title">',
        'after_title' => '</h2>',
    ));
}
add_action('widgets_init', 'theme_widgets_init');
function theme_widgets_init() {
    register_sidebar(array(
        
        'id' =&gt; 'sidebar-1',
        
        'before_widget' =&gt; '<div class="widget">',
        'after_widget' =&gt; '</div>',
        'before_title' =&gt; '<h2 class="widget-title">',
        'after_title' =&gt; '</h2>',
    ));
}
add_action('widgets_init', 'theme_widgets_init');

4. Guardar y cargar archivos
Guarde el archivo modificado y súbalo al servidor a través de SSH o SFTP.

Paso 2: Crear widget personalizado

A continuación, vamos a crear un widget personalizado que pueda mostrarse en la nueva barra lateral. Después de registrar el código en la barra lateral, añada el siguiente código a la etiquetaen el archivo functions.php.

class Mi_Widget_personalizado extends WP_Widget {
    function __construct() {
        padre::__construct(
            'mi_widget_personalizado', // ID base
            __('Mi widget personalizado', 'text_domain'), // Nombre
            array('description' => __('Un widget personalizado para la página de inicio', 'text_domain')) // Args
        );
    }
    public function widget($args, $instance) {
        echo $args['before_widget'];
        $title = apply_filters('widget_title', $instance['title']);
        if (!empty($title)) {
            echo $args['before_title'] . $ítulo . $args['after_title'];
        }
        echo '<p>Hola, ¡este es mi widget personalizado!</p>'; // Personalizar este contenido
        echo $args['after_widget']; }
    }
    public function form($instance) {
        $title = !empty($instance['title']) ? $instance['title'] : __('Nuevo título', 'text_domain'); ?
        ? >
        <p>
            <label for="<?php echo esc_attr($this->get_field_id('title')); ?>"><?php _e('Title:'); ?></label>
            <input class="widefat" id="<?php echo esc_attr($this->get_field_id('title')); ?>" name="<?php echo esc_attr($this->get_field_name('title')); ?>" type="text" value="<?php echo esc_attr($title); ?>">
        </p>
        <?php
    }
    public function update($new_instance, $old_instance) {
        $instance = array();
        $instance['title'] = (!empty($new_instance['title'])) ? sanitize_text_field($new_instance['title']) : '';
        return $instance;
    }
}
function register_my_custom_widget() {
    register_widget('My_Custom_Widget');
}
add_action('widgets_init', 'register_my_custom_widget');
class Mi_Widget_personalizado extends WP_Widget {
    function __construct() {
        padre::__construct(
            'mi_widget_personalizado', // ID base
            __('Mi widget personalizado', 'text_domain'), // Nombre
            array('description' => __('Un widget personalizado para la página de inicio', 'text_domain')) // Args
        );
    }

    public function widget($args, $instance) {
        echo $args['before_widget'];
        $title = apply_filters('widget_title', $instance['title']);
        if (!empty($title)) {
            echo $args['before_title'] . $ítulo . $args['after_title'];
        }
        echo '<p>Hola, ¡este es mi widget personalizado!</p>'; // Personalizar este contenido
        echo $args['after_widget']; }
    }

    public function form($instance) {
        $title = !empty($instance['title']) ? $instance['title'] : __('Nuevo título', 'text_domain'); ?
        ? >
        <p>
            <label for="<?php echo esc_attr($this->get_field_id('title')); ?>"><?php _e('Title:'); ?></label>
            <input class="widefat" id="<?php echo esc_attr($this->get_field_id('title')); ?>" name="<?php echo esc_attr($this->get_field_name('title')); ?>" type="text" value="<?php echo esc_attr($title); ?>">
        </p>
        <?php
    }

    public function update($new_instance, $old_instance) {
        $instance = array();
        $instance['title'] = (!empty($new_instance['title'])) ? sanitize_text_field($new_instance['title']) : '';
        return $instance;
    }
}

function register_my_custom_widget() {
    register_widget('My_Custom_Widget');
}
add_action('widgets_init', 'register_my_custom_widget');
class Mi_Widget_personalizado extends WP_Widget {
    function __construct() {
        padre::__construct(
            'mi_widget_personalizado', // ID base
            __('Mi widget personalizado', 'text_domain'), // Nombre
            array('description' =&gt; __('Un widget personalizado para la página de inicio', 'text_domain')) // Args
        );
    }

    public function widget($args, $instance) {
        echo $args['before_widget'];
        $title = apply_filters('widget_title', $instance['title']);
        if (!empty($title)) {
            echo $args['before_title'] . $ítulo . $args['after_title'];
        }
        echo '<p>Hola, ¡este es mi widget personalizado!</p>'; // Personalizar este contenido
        echo $args['after_widget']; }
    }

    public function form($instance) {
        $title = !empty($instance['title']) ? $instance['title'] : __('Nuevo título', 'text_domain'); ?
        ? &gt;
        <p>
            <label for="<?php echo esc_attr($this->get_field_id('title')); ?>"><?php _e('Title:'); ?></label>
            <input class="widefat" id="<?php echo esc_attr($this->get_field_id('title')); ?>" name="<?php echo esc_attr($this->get_field_name('title')); ?>" type="text" value="<?php echo esc_attr($title); ?>">
        </p>
        <?php
    }

    public function update($new_instance, $old_instance) {
        $instance = array();
        $instance['title'] = (!empty($new_instance['title'])) ? sanitize_text_field($new_instance['title']) : '';
        return $instance;
    }
}

function register_my_custom_widget() {
    register_widget('My_Custom_Widget');
}
add_action('widgets_init', 'register_my_custom_widget');

instrucciones: Este código define una nueva clase de widgetMi_Widget_personalizadoentre otros:

• widget(): Lo que se mostrará en la barra lateral. Personalice esta sección para mostrar lo que desee.
• formulario(): Un formulario que permite a los usuarios establecer títulos para los widgets.
• actualizar(): Guarda los datos del formulario al actualizarlo.

función (matem.)register_my_custom_widget()El registro de este widget lo hace disponible en elestado exterior>widgetsDisponible en.

Paso 3: Añadir la barra lateral a la plantilla del tema

Ahora, tenemos que modificar el archivo de plantilla (por ejemploindex.htmltal vezinicio.html) para mostrar la nueva barra lateral. Estos archivos suelen encontrarse en la carpeta principal del tema.

1. Abra index.html o home.html en la carpeta del tema.

2. Sustituya el contenido del archivo por el siguiente código para asegurarse de que los marcadores de posición dinámicos de la barra lateral se añaden donde desea que aparezcan:

<!-- wp:template-part {"slug":"header","area":"header","tagName":"header"} /-->
<!-- wp:group {"tagName":"main","align":"full","layout":{"type":"constrained"}} -->
<main class="wp-block-group alignfull">
    <!-- wp:heading {"level":1,"align":"wide","style":{"spacing":{"padding":{"top":"var:preset|spacing|50"}}}} -->
    <h1 class="wp-block-heading alignwide" style="padding-top:var(--wp--preset--spacing--50)">Puestos</h1>
    <!-- /wp:heading -->
    
    <!-- wp:pattern {"slug":"twentytwentyfour/posts-3-col"} /-->
    <!-- Dynamic Sidebar -->
    <!-- wp:dynamic-sidebar {"id":"custom-sidebar"} /-->
</main>
<!-- /wp:group -->
<!-- wp:template-part {"slug":"footer","area":"footer","tagName":"footer"} /-->
<!-- wp:template-part {"slug":"header","area":"header","tagName":"header"} /-->

<!-- wp:group {"tagName":"main","align":"full","layout":{"type":"constrained"}} -->
<main class="wp-block-group alignfull">
    <!-- wp:heading {"level":1,"align":"wide","style":{"spacing":{"padding":{"top":"var:preset|spacing|50"}}}} -->
    <h1 class="wp-block-heading alignwide" style="padding-top:var(--wp--preset--spacing--50)">Puestos</h1>
    <!-- /wp:heading -->
    
    <!-- wp:pattern {"slug":"twentytwentyfour/posts-3-col"} /-->

    <!-- Dynamic Sidebar -->
    <!-- wp:dynamic-sidebar {"id":"custom-sidebar"} /-->
</main>
<!-- /wp:group -->

<!-- wp:template-part {"slug":"footer","area":"footer","tagName":"footer"} /-->
<!-- wp:template-part {"slug":"header","area":"header","tagName":"header"} /-->

<!-- wp:group {"tagName":"main","align":"full","layout":{"type":"constrained"}} -->
<main class="wp-block-group alignfull">
    <!-- wp:heading {"level":1,"align":"wide","style":{"spacing":{"padding":{"top":"var:preset|spacing|50"}}}} -->
    <h1 class="wp-block-heading alignwide" style="padding-top:var(--wp--preset--spacing--50)">Puestos</h1>
    <!-- /wp:heading -->
    
    <!-- wp:pattern {"slug":"twentytwentyfour/posts-3-col"} /-->

    <!-- Dynamic Sidebar -->
    <!-- wp:dynamic-sidebar {"id":"custom-sidebar"} /-->
</main>
<!-- /wp:group -->

<!-- wp:template-part {"slug":"footer","area":"footer","tagName":"footer"} /-->

instruccionesEste código añade una cabecera, un área de contenido principal y un pie de página. El contenido clave añadido aquí es la barra lateral dinámica
¡()Muestra las barras laterales registradas y los widgets personalizados.

Paso 4: Verificar los cambios en wp-admin

Una vez completados los pasos anteriores:

1. Vaya al área de administración de WordPress delApariencia > Widgets.

2. Debería verPersonalización de la barra lateral.entre otros"Mis widgets personalizados"está disponible.

3. Añada el widget a la barra lateral personalizada, personalice el título y guarde el widget.

Después de guardarlo, vaya al front-end del sitio y actualícelo para comprobar que el widget se muestra como se espera.

¿Cómo insertar widgets en WordPress?

Para añadir widgets en WordPress, puede seguir los siguientes pasos:

1. Acceso a la interfaz del widget
Desde el Centro de Información de WordPress, vaya aApariencia → Widgets. Se abrirá la pantalla del Administrador de widgets.

2. Selección de la ubicación del widget
Una vez en la pantalla de widgets, verá diferentes áreas donde puede añadir widgets. Estas áreas dependen de su tema de WordPress. Haga clic en la flecha situada junto al área que desea editar para ampliarla.

3. Añadir contenido mediante bloques
Tras seleccionar el área del widget, puede utilizar la zona familiareditor de bloquesAñada contenido. Simplemente haga clic enicono del signo másInserte instantáneamente el bloque, eligiendo entre los bloques incorporados en WordPress o cualquier bloque personalizado en el plugin. Una vez añadido, puede ajustar la configuración del bloque, como el número de entradas que se mostrarán o las opciones de imagen destacada.

4. Guardar los cambios
Una vez que esté satisfecho con la apariencia de todo el contenido, pulse el botón"Renovación"para guardar los cambios. A continuación, el widget surtirá efecto en el sitio web de forma inmediata.

Si no veWidgets, es posible que esté utilizando un tema de bloque de WordPress, al que se puede acceder a través del menúEditor del sitioDiseño de procesamiento.

¿Cómo elimino los widgets de WordPress?

Para este ejemplo, podemos eliminar el widget añadido anteriormente. Seleccione el widget de bloque, haga clic en el menú de tres puntos de la barra de herramientas y elija "eliminando" será suficiente.

¿Cómo gestionar los widgets con el personalizador de WordPress?

Los widgets también pueden gestionarse a través del Personalizador de WordPress para que los cambios puedan previsualizarse en tiempo real en el sitio. La forma de hacerlo es la siguiente:

• Navegar al panel de control de WordPressestado exterior→personalización.

• En la barra lateral del personalizador, seleccione"Widgets".

• Seleccione la ubicación del widget de la lista de opciones disponibles (sólo verá la ubicación visible en la página actual que está previsualizando).

• Añada o edite widgets utilizando la interfaz proporcionada.

• Puede hacer clic en la vista previa en directo en laLos iconos de lápiz personalizan directamente widgets específicos.

¿Cómo mostrar los widgets de WordPress en una entrada o página específica?

Por defecto, cualquier widget que se añada al sitio se mostrará en todas las zonas en las que haya espacio disponible para el widget. Por ejemplo, si se coloca un widget en la barra lateral principal, aparecerá en todas las páginas que tengan barra lateral.

Sin embargo, si sólo desea mostrar widgets en contenidos específicos, como entradas concretas, páginas o incluso categorías o etiquetas.

Si se utilizan widgets de bloque, se pueden utilizar plugins que añadan condiciones de visibilidad (por ejemplo."Bloquear la visibilidad" ) controlan dónde aparecen.

Después de instalar y activar el plugin, navegue hasta la pantalla de widgets y busque el widget que desea personalizar.

Al editar este widget, aparece uno nuevo en la configuración de la barra lateralSección de visibilidad.

• En esta área, puede establecer reglas sobre cuándo mostrar u ocultar el widget, como mostrarlo sólo en publicaciones específicas.

alcanzar un veredicto

La creación de widgets de WordPress personalizados puede añadir funcionalidades específicas a un sitio web, como la visualización personalizada de contenidos, una navegación mejorada o herramientas personalizadas como la dinámica de las redes sociales o una barra de búsqueda.