Nubes de etiquetas: ese elemento de la barra lateral que muchos instalan y olvidan. Mecánicamente, «solo para tenerlo». Es un error: una nube bien diseñada recoge clics de navegación interna con la misma eficacia que un menú de navegación. Sobre todo en sitios con cientos de artículos, donde la navegación por categorías ya no da abasto.

El problema es que el widget estándar de «Nube de etiquetas» es apenas configurable. Tamaño de fuente, como mucho. Colores, ninguno. Forma, una lista plana de enlaces que da vergüenza mostrar. Si el tema no ha escrito estilos para ella, el resultado es deprimente.

Afortunadamente, WordPress ofrece dos caminos: llamar manualmente a wp_tag_cloud() directamente en los archivos del tema y el bloque nativo «Nube de etiquetas» en Gutenberg. El primero da control total sobre el marcado, el segundo funciona cuando necesita algo rápido y sin código. Cubriremos ambos a continuación con fragmentos de código en vivo, capturas de pantalla y video.

💡 Resumen rápido:

• Inserte wp_tag_cloud() en sidebar.php o footer.php para obtener una nube de etiquetas en cualquier lugar
• Estilice la salida mediante CSS: botones con fondos, esquinas redondeadas y efectos al pasar el cursor
• Use el bloque «Nube de etiquetas» en el editor Gutenberg (tres clics, cero código)
• Vea el video tutorial sobre la configuración directamente desde el panel de administración de WordPress

Salida manual mediante wp_tag_cloud()

WordPress incluye la función wp_tag_cloud() desde la versión 2.3. Recopila todas las etiquetas del sitio, cuenta la frecuencia de uso y genera una nube donde el tamaño de fuente de cada etiqueta es proporcional al número de artículos que la contienen. La llamada se inserta directamente en un archivo del tema, donde sea que deba aparecer la nube.

Fragmento básico para sidebar.php, footer.php o una plantilla personalizada:

1
<?php
2
wp_tag_cloud( array(
3
    'smallest' => 8,
4
    'largest'  => 22,
5
    'unit'     => 'pt',
6
    'number'   => 45,
7
    'orderby'  => 'name',
8
    'order'    => 'ASC',
9
    'taxonomy' => 'post_tag',
10
    'format'   => 'flat',
11
) );

Qué significan los parámetros (lista completa en la documentación de WordPress):

smallest y largest: tamaño de fuente mínimo y máximo. El valor predeterminado es 8 y 22 puntos. Si el rango resulta chocante, redúzcalo (por ejemplo, 10 y 18).

unit: unidad de medida. El valor predeterminado es pt, pero acepta cualquier unidad CSS: px, em y rem. Para pantallas, los píxeles son más comunes.

number: cuántas etiquetas mostrar. Cero significa «todas». En la práctica, 45-50 es más que suficiente; de lo contrario, la nube se convierte en un caos de cientos de enlaces de diferentes tamaños.

orderby: método de ordenación. name da orden alfabético, count muestra las más frecuentes primero. Combinar orderby => 'count' con order => 'DESC' coloca las etiquetas populares al principio.

taxonomy: la taxonomía. El valor predeterminado es post_tag, pero puede sustituirlo por category o una taxonomía personalizada de una tienda en línea para obtener una nube de categorías o etiquetas de producto.

format: formato de salida. flat (enlaces separados por espacios), list (lista con viñetas) o array (un array para procesamiento posterior en PHP).

La función puede colocarse de forma segura en cualquier parte del tema. Si necesita una plantilla de página separada con la nube, cree page-tagcloud.php, añada la llamada a wp_tag_cloud() entre get_header() y get_footer(), y luego asigne esta plantilla a una página en el panel de administración.

Estilizar etiquetas mediante CSS

La función genera HTML puro: etiquetas dentro de elementos <a>, envueltas en <div class="tagcloud">. Sin CSS, es un revoltijo de enlaces de diferentes tamaños. Los estilos a continuación los convierten en botones ordenados:

1
.tagcloud a {
2
    display: inline-block;
3
    padding: 4px 10px;
4
    margin-right: 7px;
5
    margin-bottom: 7px;
6
    background: #f0f0f0;
7
    color: #555;
8
    font-size: 11px;
9
    font-weight: bold;
10
    text-transform: lowercase;
11
    border-radius: 5px;
12
    border: 1px solid #ccc;
13
    text-decoration: none;
14
}
15
.tagcloud a:hover {
16
    background: #e0e0e0;
17
    color: #000;
18
    text-decoration: none;
19
}

El CSS es mínimo y específico: inline-block mantiene los botones en línea, margin-bottom compensa los saltos de línea y border-radius redondea las esquinas. El fondo gris y el texto apagado no chocan con ninguna paleta de marca. Al pasar el cursor, el botón se oscurece suavemente.

Añada este código al style.css de su tema hijo o en el campo «CSS adicional» del personalizador («Apariencia» → «Personalizar» → «CSS adicional»). La segunda opción es más segura: los estilos no desaparecerán tras la próxima actualización del tema.

Consejo: si la nube en la barra lateral y en una plantilla personalizada deben verse diferentes, envuelva la llamada en un <div class="custom-tagcloud"> adicional y establezca estilos con doble especificidad: .custom-tagcloud .tagcloud a { ... }.

Bloque integrado «Nube de etiquetas» en Gutenberg

Cuando no tiene ganas de editar archivos del tema, WordPress ofrece una solución integrada. A partir de la versión 5.8, el editor de bloques incluye un bloque «Nube de etiquetas» que puede insertarse en cualquier entrada o página sin una sola línea de código.

Añadirlo es lo habitual: en el editor, haga clic en «+», busque «Nube de etiquetas» y arrástrelo a la ubicación deseada. El bloque recoge automáticamente todas las etiquetas del sitio, las ordena alfabéticamente y escala el tamaño de fuente proporcionalmente a la frecuencia de uso. El panel lateral ofrece estos ajustes:

• número de etiquetas (predeterminado 45, máximo 100)
• activar un contador de entradas junto a cada etiqueta
• cambiar entre etiquetas y categorías mediante el desplegable de taxonomía

El bloque funciona en cualquier tema moderno, admite grupos y columnas, y se estiliza con las mismas reglas CSS de la primera sección. Esta es la forma más fácil de obtener una nube de etiquetas en una página: abra el editor, añada el bloque, publique. Sin plugins, sin functions.php.

📺 Video: configurar una nube de etiquetas en WordPress

Un breve tutorial sobre cómo añadir y configurar una nube de etiquetas directamente desde el panel de administración de WordPress:

⁉️🤔 Preguntas frecuentes

¿Puedo mostrar una nube de etiquetas sin editar archivos PHP?

Sí, de varias maneras. La más fácil es el bloque integrado «Nube de etiquetas» en el editor Gutenberg: añádalo en tres clics mediante «+», sin necesidad de plugins ni functions.php. Otra opción es el widget estándar «Nube de etiquetas» en «Apariencia» → «Widgets», que funciona en cualquier tema con área de barra lateral o pie de página. Ambos métodos usan la misma función wp_tag_cloud() por debajo.

¿Dónde debo colocar la llamada a wp_tag_cloud(): en functions.php o en un archivo de plantilla?

Directamente en un archivo de plantilla: sidebar.php, footer.php, page-tagcloud.php o cualquier otro archivo responsable del marcado. La función wp_tag_cloud() no se llama en functions.php, que es donde se define la lógica; la salida ocurre en las plantillas. Si necesita personalizar el comportamiento de la función, use el filtro wp_tag_cloud en functions.php.

¿Cuál es la diferencia entre etiquetas y categorías en una nube?

Las categorías son una taxonomía jerárquica, las etiquetas son planas. Visualmente la diferencia desaparece, pero técnicamente la llamada difiere: para etiquetas use taxonomy => 'post_tag', para categorías use taxonomy => 'category'. La función es la misma: wp_tag_cloud(), solo pase la clave apropiada.

¿Cómo limito el número de etiquetas mostradas?

Con el parámetro number en el array de wp_tag_cloud(). Un valor de 0 muestra todas las etiquetas; para la mayoría de los sitios, 30-50 es razonable (la nube se mantiene legible y no se convierte en un flujo interminable de enlaces).

¿Puedo añadir un contador de entradas junto a cada etiqueta?

Sí, el parámetro show_count => 1 (disponible desde WordPress 4.8) muestra el recuento de entradas entre paréntesis después del nombre de la etiqueta. Por ejemplo: «wordpress (42)». En el bloque Gutenberg, esta opción se activa mediante un interruptor en el panel lateral.

¿Qué hago si el widget estándar es demasiado aburrido?

Tiene dos opciones para aumentar el control. Primero, llamar manualmente a wp_tag_cloud() con parámetros personalizados y su propio estilizado CSS, como en la sección 1. Segundo, usar el bloque Gutenberg con las mismas reglas CSS si no quiere tocar los archivos del tema. Ambos enfoques dan total libertad: colores, espaciado, esquinas redondeadas, efectos al pasar el cursor (todo está en sus manos).

¿Método manual o bloque: cuál elegir para su tarea?

Si su sitio está ganando impulso y el número de etiquetas ha superado las tres docenas, una nube personalizada vale la pena. Mantiene a los visitantes interesados: alguien hace clic en una etiqueta, llega a una colección curada de artículos sobre ese tema y lee uno o dos artículos más. La profundidad de página crece sin costos adicionales.

El enfoque es simple. Si necesita una nube ahora mismo sin complicarse con código, abra el editor, inserte el bloque «Nube de etiquetas» y publique. Tres clics, y el resultado no depende del tema. Cuando quiera pulir cada detalle y obtener control total sobre el marcado, copie el fragmento PHP de la primera sección, estilícelo mediante CSS, y la nube se convierte en parte del diseño en lugar de un marcador de posición estándar. Ambos enfoques funcionan en cualquier tema moderno y no entran en conflicto entre sí.

Si esta entrada le ayudó a aclarar las cosas, guárdela en sus marcadores. Y en los comentarios, cuéntenos cómo muestra la nube de etiquetas en su sitio: ¿widget, bloque o llamada manual?