X
Jhon Marreros Guzmán

Personalizar nube de etiquetas en WordPress

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.

La pantalla anterior ha sido tomada de la versión 4.9 de WordPress, es posible que en versiones futuras se agreguen nuevas opciones, sin embargo los conceptos tratados para configurar opciones adicionales por código deberían seguir siendo válidos.

 

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:

Antes de agregar este código a tu archivo functions.php verificar que no exista este filtro ya que algunos themes ya lo incluyen

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

 

Para mayor detalle de los valores pasados en el array puedes revisar los parámetros de la función que crea los links de etiquetas wp_generate_tag_cloud

 

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;
}

 

Artículos Relacionados

Categorías: Core
Etiquetas: cssmejoras

Ver comentarios (16)

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

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

  • hola--- me ayudarias a que en mi sitio pueda tener las etiquetas o categorias como las tienes en el "antes"? cada una del mismo tamaño y con un fondo color hover. gracias

Deja un comentario