• Ir a navegación principal
  • Ir al contenido principal
  • Ir a la barra lateral primaria

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
Inicio / Tutoriales / Core / Personalizar nube de etiquetas en WordPress
Anuncio banner webservi

Personalizar nube de etiquetas en WordPress

nube de etiquetas en WordPress

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

css mejoras

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

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:

Nube de etiquetas antes y después de las modificaciones

 

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.

Widget nube de etiquetas opciones por defecto

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

 

¿Aún con dudas?, en el siguiente video se explica cada uno de los puntos tratados anteriormente

 

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Artículos Relacionados

  • Leer datos desde otra base de datos en WordPressLeer datos desde otra base de datos en WordPress
  • Crear un sitio One Page en WordPressCrear un sitio One Page en WordPress
  • Mostrar lista de autores en WordPressMostrar lista de autores en WordPress
  • Añadir código de Google Tag Manager sin plugins en WordPressAñadir código de Google Tag Manager sin plugins en WordPress
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (3 votos, promedio: 4,67 de 5)
Cargando...

Interacciones con los lectores

Comentarios

  1. Luis Mendez Alejo

    24 noviembre, 2017

    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.

  2. ana

    29 enero, 2018

    como puedo colocar etiquetas en la cabecera de wordpress, quiero uno como en xvideos, please.

    • Jhon Marreros Guzmán

      29 enero, 2018

      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/

  3. Juanjo

    13 junio, 2020

    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

    • Jhon Marreros Guzmán

      14 junio, 2020

      Hola, si, puedes probar con el código indicado colocándolo en el functions.php de tu theme activo.

  4. Rodolfo

    2 septiembre, 2020

    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 😉

    • Jhon Marreros Guzmán

      3 septiembre, 2020

      Hola, es posible que te muestre siempre las 10 primeras posiciones que tienen más referencias, por eso aparecen las mismas.

Para escribir código envolver con: <pre class="language-xxx"><code> </code></pre> ,reemplaza las xxx (php, css, html)

*

* Gravatar habilitado

Barra lateral primaria

Presentación

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
Los 5 posibles errores que estas cometiendo cuando trabajas con código en WordPress

Niveles

Básico Intermedio Avanzado

Etiquetas

accesibilidad css dashboard editor error funcionalidad herramientas imagen js librería mejoras optimización seguridad social

Populares

Agregar CSS en WordPress de manera correcta

Cambiar el logo en la versión móvil de tu sitio Web

Configura el theme Twenty Twenty de WordPress

Añadir redes sociales sin plugins en WordPress

Recientes

  • Leer datos desde otra base de datos en WordPress
  • Crear un sitio One Page en WordPress
  • Mostrar lista de autores en WordPress
  • Añadir código de Google Tag Manager sin plugins en WordPress
alojamiento wordpress

© logo decode pie Copyright 2021 | Todos los derechos reservados | Política de Privacidad