WordPress tiene por defecto un Widget de nube de etiquetas, sin embargo sólo cuenta con opciones básicas de configuración. En este artículo aprenderás cómo configurar opciones adicionales para esta Widget de manera simple a través de código.
Resultado Final
Al final lo que queremos lograr será algo similar a la siguiente imagen:
1- Generalidades
Si usas el Widget de Etiquetas que tiene WordPress por defecto, desde Apariencia > Widgets, veras que tienes sólo tres opciones para configurar.
Sin embargo, ¿cómo configurar la cantidad de enlaces a mostrar?, ¿cómo configurar el tamaño de la fuente por etiqueta?, etc.
En este artículo usaremos el theme Twenty Seventeen, sin embargo el código puede ser aplicable para cualquier otro theme.
2- Configuraciones adicionales a través de código
Puedes agregar opciones adicionales a través del filtro widget_tag_cloud_args, a través de este filtro puedes pasar un array asociativo de los argumentos y reemplazar los valores por defecto del Widget de nube de etiquetas, por ejemplo:
function dcms_widget_tag_cloud_args( $args ) {
$args['largest'] = 20;
$args['smallest'] = 10;
$args['unit'] = 'px';
$args['format'] = 'list';
$args['number'] = 10;
$args['orderby'] = 'count';
$args['order'] = 'RAND';
return $args;
}
add_filter( 'widget_tag_cloud_args', 'dcms_widget_tag_cloud_args' );
Puedes agregar este código en el archivo functions.php de tu theme o de tu child theme.
En el código anterior:
- Usamos el filtro widget_tag_cloud_args, el cual referencia a la función dcms_widget_tag_cloud_args
- La función dcms_widget_tag_cloud_arg acepta como parámetro la variable $args que es un array asociativo
- A través de $args modificamos los distintos valores de acuerdo a la documentación oficial del filtro widget_tag_cloud_args
3- Código CSS adicional
Finalmente, para nuestro theme Twenty Seventeen de ejemplo podemos agregar el siguiente código CSS:
.tagcloud ul li{
margin:0;
}
.widget .tagcloud a,
.widget.widget_tag_cloud a,
.wp_widget_tag_cloud a{
border:none;
}
.tagcloud{
background-color:#eee;
padding: 10px;
border-radius: 6px;
}
.tagcloud:after{
content: "";
display: block;
clear: both;
}
¿Aún con dudas?, en el siguiente video se explica cada uno de los puntos tratados anteriormente
Artículos Relacionados
(3 votos, promedio: 4,67 de 5)
Cargando...
Muy buen post, sencillo y eficiente para poder mejorar el widget de “nube de etiquetas” en WordPress y adaptarlo mejor a posiciones como el footer donde no es necesario 45 elementos que por defecto establece el core para widget_tag_cloud
Gracias por ayudarnos a conocer mejor los entresijos del núcleo de WordPress.
como puedo colocar etiquetas en la cabecera de wordpress, quiero uno como en xvideos, please.
Asumo que lo que quieres es tener una ubicación para el widget de nube de etiquetas en la cabecera, tu theme debería tener una posición, en caso no la tenga podrías crearla, revisa: https://decodecms.com/anadir-una-nueva-zona-de-widgets-a-un-theme-wordpress/
Hola, quisiera si por favor me pudieseis hechar una mano, he puesto el wigget de nube de etiquetas del tema Twenty Seventeen pero necesito muchas más que las 45 que me deja poner, modifique el parametro en el archivo “category-template” a 900, me funciono unos días pero curiosamente me lo a vuelto a poner a 45, es eso posible ? Ahora he visto tu entrada y quizás el único que tengo que modificar es el que mencionas en el post “functions.php”
Saludos y agradecido por tu sabiduria
Hola, si, puedes probar con el código indicado colocándolo en el functions.php de tu theme activo.
Hola Juanjo
Quizá lo que te sucede, es que tu tema se actualiza de forma automática y sobreescribe lo que tu personalizas.
Una buena solución a eso, usar un tema hijo.
El problema que estoy teniendo con esto es que aunque lo tenga en “RAND” muestra siempre las mismas etiquetas. Es decir, si lo tengo para que muestre 10 etiquetas, aunque las muestre en distinto orden, muestra siempre las mismas. Yo necesito que de todas las etiquetas vaya intercambiando y mostrando 10 de forma “Random”. Me explico…? Gracias mil por cualquier ayuda 😉
Hola, es posible que te muestre siempre las 10 primeras posiciones que tienen más referencias, por eso aparecen las mismas.
Y cómo se puede solucionar esto… para que no muestre siempre las mismas etiquetas y que realmente sea un random…
Hola, implicaría posiblemente hacer un plugin diferente, evalúa usar algún plugin alterno, revisa: https://pe.wordpress.org/plugins/tags/tag-cloud/
Hola Jhon, muchas gracias por el shortcode, lo he implementado y me funciona todo excepto los links. Es decir, al clicar en una etiqueta no me redirige a la página de esa etiqueta sino que se queda en la misma página. He probado de cambiar el valor link por ‘edit’ o ‘view’ y ninguno de. los dos me funciona. ¿Qué puede estar pasando?
Un salduo y gracais de antemano
Hola, si muestras las etiquetas en tus artículos los enlaces si te funcionan?, es muy raro ya que es como si tuvieras mal las urls.
Hola, Tengo una duda, en el caso del wiget “Nube de Etiquetas de Productos” que codigo tengo que agregar para poder realizarlo, ya que coloque el codigo pero no realizo ningun cambio. Muchas Gracias!
Hola, si estas usando algún plugin para la nube de etiquetas de productos tienes que identificar las clases CSS contenedoras para los elementos. Puedes usar el Inspector de código para esto y luego hacer cambios en el código CSS de este artículo.