Cómo añadir un widget en WordPress

Durante años, los “Widgets” eran bloques simples: “Buscar”, “Entradas recientes”, “Categorías”. Los arrastrabas a la barra lateral y listo. Con la llegada de la era de Full Site Editing (FSE) y los temas de bloques, el concepto de widget ha cambiado completamente.

Descubre más sobre los servicios de desarrollo WordPress en WPPoland.

Si quieres la respuesta práctica primero, los temas clásicos todavía usan áreas de widgets, mientras que los temas de bloques generalmente trasladan ese trabajo al Editor del Sitio y a la estructura de plantillas.

#1. Cómo añadir widgets en un tema clásico

Si estás usando un tipo de tema más antiguo (como Astra, GeneratePress o el clásico Twenty Twenty-One), todavía tienes acceso al menú Apariencia > Widgets.

Sin embargo, incluso allí, desde WP 5.8, se usa el Editor de Bloques por defecto. En lugar de campos simples, tienes la interfaz completa de Gutenberg dentro de la barra lateral. Puedes añadir cualquier cosa ahí: Párrafo, Imagen, incluso un Shortcode.

Consejo: Si echas de menos la vista antigua, instala el plugin oficial Classic Widgets. Restaura la pantalla más simple de arrastrar y soltar para las áreas de widgets clásicos.

#2. Dónde están los widgets en un tema de bloques

En los temas modernos (como Twenty Twenty-Four o Twenty Twenty-Five) no hay menú de Widgets. Ha desaparecido.

En su lugar, ve a Apariencia > Editor. Todo tu sitio es editable.

• ¿Quieres añadir algo al pie de página? Abre la parte de plantilla correspondiente en el Editor del Sitio.
• ¿Quieres una barra lateral? Constrúyela con bloques de diseño como Columnas o Grupo, dependiendo de la estructura del tema.

#¿Qué elegir, widgets clásicos o widgets de bloques?

Para principiantes, la experiencia de widgets basada en bloques suele ser más flexible porque puedes añadir contenido más rico sin HTML personalizado. Si estás manteniendo un flujo de trabajo más antiguo, el plugin Classic Widgets sigue siendo la opción más fácil.

#Por qué los widgets pasaron a ser bloques en WordPress 5.8

La transición de los widgets clásicos al editor de bloques representa uno de los cambios más significativos en la historia de la interfaz de WordPress. Cuando WordPress 5.8 se lanzó en julio de 2021, introdujo el editor de bloques en las áreas de widgets por primera vez. Este cambio significó que los usuarios que estaban acostumbrados a la simple interfaz de arrastrar y soltar de repente se encontraron con la interfaz completa de Gutenberg.

#Por qué WordPress hizo el cambio

El equipo del núcleo de WordPress tenía varias razones para esta transición. En primer lugar, los bloques ofrecen capacidades mucho más ricas que los widgets tradicionales. Donde antes estabas limitado a opciones predefinidas como “Entradas recientes” o “Categorías”, ahora puedes usar cualquier bloque de Gutenberg, incluyendo columnas, galerías, tablas, código personalizado y más. Esto significa que tus barras laterales y pies de página pueden ser tan ricos y personalizados como tu contenido principal.

En segundo lugar, mantener dos sistemas de interfaz separados era una carga técnica para el equipo de desarrollo de WordPress. Al unificar todo bajo el paradigma de bloques, el equipo puede concentrar sus esfuerzos en mejorar una única interfaz en lugar de mantener dos.

Tercero, la dirección de WordPress hacia Full Site Editing (FSE) requería que todo el sitio fuera editable a través de bloques. Los widgets eran uno de los últimos vestigios de la interfaz antigua que necesitaba ser integrado en el nuevo sistema.

#¿Siguen funcionando los widgets creados con WP_Widget?

Para los desarrolladores de plugins que habían creado widgets personalizados, el cambio requirió adaptación. Los widgets creados con la clase WP_Widget de WordPress siguen funcionando, ya que WordPress los envuelve automáticamente en un bloque “Widget heredado”. Sin embargo, para la mejor experiencia de usuario, los desarrolladores son alentados a crear bloques nativos de Gutenberg en lugar de widgets clásicos.

Esto significa que si estás desarrollando nuevas funcionalidades para WordPress, deberías crear bloques en lugar de widgets. Los bloques ofrecen una experiencia de edición más rica, mejor integración con el editor de bloques y compatibilidad futura con la dirección de Full Site Editing de WordPress.

#Guía paso a paso para añadir widgets en WordPress 2026

#Paso 1: Identifica tu tipo de tema

Lo primero que necesitas hacer es determinar si estás usando un tema clásico o un tema de bloques. Esto determina completamente cómo gestionarás los widgets y las áreas de contenido de tu sitio.

Cómo verificar tu tipo de tema:

• Ve a Apariencia en tu panel de WordPress
• Si ves “Widgets” en el menú, tienes un tema clásico
• Si ves “Editor” pero no “Widgets”, tienes un tema de bloques
• Alternativamente, revisa el archivo theme.json en la carpeta de tu tema: si existe, es probable que sea un tema de bloques

#Paso 2: Configurar widgets en temas clásicos

Si estás trabajando con un tema clásico, el proceso sigue siendo relativamente familiar, aunque ahora usa la interfaz de bloques:

1. Navega a Apariencia > Widgets
2. Verás tus áreas de widgets definidas (Barra lateral, Pie de página, etc.)
3. Haz clic en el botón + (Insertar bloque) en cualquier área de widgets
4. Busca y selecciona el bloque que deseas añadir
5. Configura el bloque según tus necesidades
6. Haz clic en Actualizar para guardar los cambios

Los bloques más comúnmente usados como widgets incluyen:

• Bloque de Párrafo: Para texto simple, enlaces o anuncios
• Bloque de Imagen: Para banners, logotipos o imágenes promocionales
• Bloque de Lista: Para listas de navegación personalizadas
• Bloque de HTML personalizado: Para insertar código personalizado, scripts de terceros o widgets embebidos
• Bloque de Shortcode: Para ejecutar shortcodes de plugins
• Bloque de Iconos Sociales: Para mostrar enlaces a redes sociales
• Bloque de Navegación: Para menús de navegación personalizados en la barra lateral

#Paso 3: Crear áreas tipo widget en temas de bloques

En los temas de bloques, no existen áreas de widgets como tal. En cambio, trabajas directamente con las plantillas y las partes de plantilla de tu sitio:

1. Ve a Apariencia > Editor
2. Selecciona la plantilla que deseas editar (por ejemplo, “Entrada individual”, “Página”, “Archivo”)
3. Para añadir una “barra lateral”, inserta un bloque de Columnas y configúralo con una proporción como 70/30 o 66/33
4. Coloca tu contenido principal en la columna más ancha
5. Usa la columna más estrecha como tu “barra lateral”, añadiendo los bloques que necesites
6. Para el pie de página, edita la parte de plantilla “Pie de página”

#Paso 4: Optimizar el rendimiento de los widgets

Independientemente de si usas temas clásicos o de bloques, es importante considerar el rendimiento:

• Minimiza los scripts externos: Cada widget que carga JavaScript o CSS externos puede ralentizar tu sitio
• Usa carga diferida: Para widgets con contenido pesado, considera implementar carga diferida
• Audita regularmente: Revisa periódicamente qué widgets realmente necesitas y elimina los que no aportan valor
• Cacheo: Asegúrate de que tu solución de cacheo incluya las áreas de widgets

#Mejores plugins para gestionar widgets en WordPress

#Classic Widgets

El plugin Classic Widgets es la opción oficial para restaurar la interfaz de widgets antigua. Desarrollado y mantenido por el equipo del núcleo de WordPress, este plugin es la forma más segura de volver a la experiencia clásica.

Características principales:

• Restaura completamente la interfaz de arrastrar y soltar
• No requiere configuración, simplemente instalar y activar
• Compatible con todos los widgets clásicos existentes
• Mantenido oficialmente por el equipo de WordPress
• Sin impacto en el rendimiento del frontend

#Widget Options

Este plugin te permite controlar la visibilidad de los widgets basándose en diferentes condiciones como tipo de página, rol del usuario, dispositivo y más. Es especialmente útil para sitios que necesitan mostrar diferentes contenidos en diferentes secciones.

#Custom Sidebars

Si necesitas diferentes conjuntos de widgets para diferentes páginas o categorías, Custom Sidebars te permite crear múltiples áreas de widgets y asignarlas selectivamente.

#Por qué no se ven los widgets en mi sitio WordPress

#Los widgets no aparecen en la página

Causas y soluciones:

1. El tema no admite widgets

   • Comprueba si el tema tiene áreas de widgets registradas.
   • Si no las tiene, valora cambiar de tema o consultar a su autor.

2. Error en el código del widget

   • Revisa la consola del navegador (F12 > Console) en busca de errores de JavaScript.
   • Desactiva los plugins uno a uno para encontrar el conflicto.
   • Revisa los registros de errores de PHP.

3. Caché

   • Vacía la caché de los plugins de caché (WP Rocket, W3 Total Cache, LiteSpeed).
   • Vacía la caché del navegador (Ctrl+Shift+R).
   • Comprueba la caché del lado del servidor o de la CDN (por ejemplo, Cloudflare).

4. Permisos del usuario

   • Gestionar widgets requiere la capacidad edit_theme_options, que por defecto tiene el rol de Administrador.
   • Comprueba que ningún plugin restrinja el acceso a los widgets.

#El widget se ve distinto en el editor y en la página

• Revisa los estilos CSS del tema: pueden sobrescribir los estilos de los bloques.
• Usa clases CSS adicionales en la pestaña Avanzado de los ajustes del bloque.
• Comprueba que no haya conflictos entre plugins.

#Los widgets desaparecen al cambiar de tema

Cada tema registra sus propias áreas de widgets. Tras cambiar de tema, WordPress intenta asignar los widgets a las áreas del nuevo tema; los que no encuentran sitio pasan a la sección “Widgets inactivos”. Desde ahí debes moverlos a mano a las nuevas áreas, y algunos widgets pueden no ser compatibles con el nuevo tema.

#Cómo registrar un área de widgets en PHP con register_sidebar

Para quienes desarrollan temas clásicos o híbridos, WordPress ofrece funciones PHP que se ejecutan en la acción widgets_init. La función register_sidebar() recibe un array de parámetros que controlan el HTML que rodea a cada widget y a su título:

function wppoland_register_custom_widget_areas() {
    register_sidebar( array(
        'name'          => 'Barra lateral del blog',
        'id'            => 'blog-sidebar',
        'description'   => 'Widgets que se muestran en la barra lateral del blog',
        'before_widget' => '<section id="%1$s" class="widget %2$s">',
        'after_widget'  => '</section>',
        'before_title'  => '<h3 class="widget-title">',
        'after_title'   => '</h3>',
    ) );
}
add_action( 'widgets_init', 'wppoland_register_custom_widget_areas' );

Argumentos clave:

• id: identificador único que no debería cambiar durante la vida del tema, para no perder las asignaciones guardadas en la base de datos.
• before_widget y after_widget: etiquetas que envuelven cada widget. WordPress sustituye %1$s por el ID HTML del widget y %2$s por su clase CSS.
• before_title y after_title: etiquetas alrededor del título del widget. Usar <h3> o <h4> mantiene una jerarquía de encabezados correcta en la página.

En el archivo de plantilla del tema (por ejemplo, sidebar.php) el área se muestra con dynamic_sidebar(), precedida de una comprobación de que contiene algún widget:

<?php if ( is_active_sidebar( 'blog-sidebar' ) ) : ?>
    <aside id="secondary" class="widget-area">
        <?php dynamic_sidebar( 'blog-sidebar' ); ?>
    </aside>
<?php endif; ?>

Así el contenedor HTML vacío no genera márgenes ni etiquetas innecesarias cuando la barra lateral no tiene widgets asignados. Los widgets propios creados con la clase WP_Widget se registran de forma análoga, con register_widget() dentro de la misma acción widgets_init.

#Cómo desactivar el editor de bloques de widgets sin plugin

En sitios grandes, el editor de bloques en Apariencia > Widgets puede ralentizar la interfaz o entrar en conflicto con plugins antiguos que manipulan los formularios de widgets con jQuery. Además del plugin Classic Widgets, la guía oficial del Block Editor Handbook describe dos vías en código.

Un tema puede desactivarlo con remove_theme_support( 'widgets-block-editor' ) en la acción after_setup_theme. Un administrador puede hacerlo desde un mu-plugin con el filtro use_widgets_block_editor:

/**
 * Desactiva el editor de bloques solo en la pantalla Apariencia > Widgets.
 * El editor de entradas y páginas sigue usando Gutenberg.
 */
add_filter( 'use_widgets_block_editor', '__return_false' );

El filtro recibe un valor booleano. Cuando devuelve false, la pantalla widgets.php y la sección de widgets del Personalizador vuelven a la interfaz clásica. También admite lógica condicional, por ejemplo según el rol del usuario o una variable de entorno.

#Cómo hacer widgets accesibles, seguros y responsive

#Diseño responsive

Una gran parte de las visitas llega desde el móvil, así que tus widgets deben verse bien en todas las pantallas. Los temas de bloques manejan esto de forma nativa a través del sistema de diseño responsive de WordPress, pero en los temas clásicos, necesitas asegurarte de que tus widgets se apilen correctamente en pantallas pequeñas.

#Accesibilidad

Los widgets deben ser accesibles para todos los usuarios, incluyendo aquellos que usan lectores de pantalla o navegación por teclado. Los bloques nativos de Gutenberg cumplen con los estándares de accesibilidad WCAG 2.1, pero los widgets personalizados o de terceros pueden necesitar verificación adicional.

#¿Afectan los widgets al SEO?

Los motores de búsqueda leen el contenido de los widgets como parte de tu página. Esto significa que:

• El contenido de los widgets debe ser relevante para el contenido de la página
• Los enlaces en los widgets son rastreados e indexados
• El contenido duplicado en widgets (que aparece en todas las páginas) tiene menos peso SEO
• Los widgets con demásiados enlaces pueden diluir el “link juice” de tu página

#Seguridad

Siempre instala widgets y plugins de fuentes confiables. Los widgets de terceros desconocidos pueden introducir vulnerabilidades de seguridad en tu sitio. Mantén todos los plugins de widgets actualizados y revisa regularmente los permisos que requieren.

#¿Desaparecerán los widgets en WordPress?

Con la evolución continúa de Full Site Editing, es probable que el concepto tradicional de “widget” desaparezca gradualmente. En su lugar, todo se convertirá en bloques que pueden ser colocados en cualquier parte del sitio. En los temas de bloques esto ya ocurre: no hay pantalla de Widgets y cualquier bloque puede ir en cualquier parte de plantilla.

Para los desarrolladores y administradores de sitios, esto significa que es aconsejable comenzar a pensar en términos de bloques en lugar de widgets. Invertir tiempo en aprender el sistema de bloques de Gutenberg hoy te preparará mejor para el futuro de WordPress.

#Conclusión

La era de los widgets tal como los conocíamos está evolucionando. Ya sea que trabajes con temas clásicos y la interfaz de widgets actualizada, o con temas de bloques y el Editor del Sitio, WordPress ofrece herramientas poderosas para personalizar tu sitio. La clave es entender qué enfoque funciona mejor para tu situación específica y aprovechar al máximo las herramientas disponibles.

Para sitios existentes con temas clásicos, no hay urgencia de migrar inmediatamente. El plugin Classic Widgets proporciona una transición suave mientras te familiarizas con el nuevo sistema. Para nuevos proyectos, los temas de bloques ofrecen la mayor flexibilidad y están alineados con la dirección futura de WordPress.

Descubre más sobre optimización de velocidad WordPress y mantenimiento WordPress en WPPoland.