Personalizar nube de etiquetas en WordPress

[ 22 noviembre 2017 ] [ Autor: Jhon Marreros Guzmán ][ Core - Intermedio] [ ]

css mejoras

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

Valora este artículo : (2 votos, promedio: 4,50 de 5)

Cargando…