• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar a la barra lateral principal

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
  • Acceder
    • Mis cursos
    • Mi Cuenta
    • Acceder
Inicio / Tutoriales / Core / Personalizar nube de etiquetas en WordPress

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

  • CRUD en WordPress sin pluginsCRUD en WordPress sin plugins
  • Cómo eliminar todos los productos de WooCommerceCómo eliminar todos los productos de WooCommerce
  • Agrupar los resultados de búsqueda en WordPressAgrupar los resultados de búsqueda en WordPress
  • tipos de complementos de WordPress5 tipos de complementos de 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.

    • Alejandro

      21 agosto, 2021

      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.

  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.

      • Rodolfo

        10 marzo, 2021

        Y cómo se puede solucionar esto… para que no muestre siempre las mismas etiquetas y que realmente sea un random…

        • Jhon Marreros Guzmán

          10 marzo, 2021

          Hola, implicaría posiblemente hacer un plugin diferente, evalúa usar algún plugin alterno, revisa: https://pe.wordpress.org/plugins/tags/tag-cloud/

  5. Sara

    8 febrero, 2021

    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

    • Jhon Marreros Guzmán

      8 febrero, 2021

      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.

  6. Ivan Arturo Jauregui

    27 junio, 2022

    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!

    • Jhon Marreros Guzmán

      28 junio, 2022

      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.

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

*

* Gravatar habilitado

Barra lateral principal

Presentación

Curso Decodifica WordPress

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
¿Quieres agregar código a WordPress? Revisa las diferentes opciones que tienes.Ver más

Jooble
Alojamiento Wordpress

Niveles

Básico Intermedio Avanzado

Etiquetas

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

Populares

Autenticación con JWT en la API de WordPress

Habilitar comentarios en el inicio de WordPress

Aprende a usar Taxonomías en WordPress

Agregar Tabs personalizados en WooCommerce sin plugins

© logo decode pie
Política de Privacidad | Política de devoluciones
Copyrigth 2023 Todos los derechos reservados