Utilizamos jQuery para modificar "wp_tag_cloud"

Añadir el total de entradas a la nube de etiquetas de WordPress con jQuery

Algo frecuente al utilizar la nube de etiquetas de WordPress, tanto si es a través de un widget como si añadimos el código a mano, es querer mostrar el número de entradas guardadas dentro de cada etiqueta.

Se trata de algo que ya viene configurado por defecto, sin embargo es una información que, al menos hasta la versión actual (WordPress 3.4.2), queda relegada al atributo “title” de cada enlace, con lo cual el total no está accesible a simple vista, únicamente aparece al dejar el cursor unos segundos encima de cada etiqueta. En esta imagen se puede ver claramente el problema y lo que queremos conseguir:

Nube de etiquetas de WordPress

Esto puede ser un inconveniente, por ejemplo, al visitar la web desde una tableta o dispositivo móvil, desde donde es más difícil acceder a elementos ocultos o que se activan con el estado “hover” del enlace.

Está claro que, dependiendo del tema de la web o del blog, este cambio puede no ser algo esencial, pero hay casos en los que podría ser una información importante para el usuario. Por ejemplo, una web o un directorio en el que las etiquetas se utilicen para clasificar las especialidades entre un listado de profesionales: psicólogos, psiquiatras, médicos, pediatras…

En este caso vamos a utilizar jQuery para conseguir lo que queremos, por varios motivos: porque WordPress ya incluye una versión de jQuery (o sea que seguramente no hace falta cargar nada que no se haya cargado ya) y porque podemos solucionarlo con muy pocas líneas de código.

La nube de etiquetas

La función “nube de etiquetas” (wp_tag_cloud) de WordPress nos permite presentar todas nuestras entradas publicadas clasificadas según sus etiquetas.

Podemos crear esta función simplemente activando el widget “Nube de etiquetas” o bien añadiendo la función directamente en nuestra plantilla:

<?php wp_tag_cloud(array(
	'smallest' => 12,
	'largest' => 12,
	'unit' => 'px',
	'number' => 0, // 0 = Mostrar todas
	'topic_count_text_callback' => 'prefix_tag_text_callback',
	'format' => 'list' // 'flat' (separadas por un espacio) o 'list' (en forma de lista)
	)); ?>

A través de una serie de parámetros que esta función incluye, podemos personalizar este listado casi como queramos: especificar el tamaño de letra más pequeño (para las etiquetas poco utilizadas) y el más grande (para las más populares), la cantidad máxima de etiquetas, el formato, el símbolo de separación, etc. Puedes ver todas las posibilidades en el Codex.

Modificamos la salida con jQuery

Como ninguna de estas opciones nos permite cambiar la salida del total de entradas guardadas, vamos a tener que hacer algo más para modificarlo.

Una vez que tenemos la función “wp_tag_cloud()” correctamente configurada, solo tenemos que acceder a los elementos creados y hacer algunos reajustes. Y para eso, nada mejor que jQuery:

<script>
// Añadimos contador de temas a la nube de etiquetas de WordPress (wp_tag_cloud)
$(document).ready(function() { 
   var etiquetas = $('#sidelist .wp-tag-cloud a'); // Cambiar los selectores CSS según el caso
   etiquetas.each(function() {
	   var title = $(this).attr('title');
	   var total = parseInt(title);
	   $(this).after('<span class="total"> (' + total + ')</span>');
   });
});
</script>

Explicación del código

Es muy importante saber lo que estamos haciendo. No basta con copiar y pegar, especialmente cuando estamos cambiando, aunque sea ligeramente, una función nativa del sistema (técnicamente en este caso no estamos cambiando la función, sólo la salida final, después de que se haya cargado todo el contenido).

  • Linea 3: Empezamos a trabajar una vez cargado el documento. En este caso es muy importante porque según en qué momento lleguemos, el número total de etiquetas podrían no haberse cargado aun.
  • Linea 4: Especificamos los selectores CSS que nos interesan, en este caso, los elementos “a” (enlaces) que están dentro del bloque con la clase “wp-tag-cloud” que hay en la columna lateral (sidebar). En muchos casos funcionará tal como está, pero conviene asegurarse. Guardamos estos links en una variable, para ganar rapidez y hacer el código más legible
  • Linea 5: Cada vez que se encuentre una etiqueta…
  • Linea 6: Guardamos el contenido del atributo “title” en una variable (por ejemplo: “12 temas”)
  • Linea 7: Como sólo nos interesa el total (en este caso no queremos la palabra “temas”), eliminamos el resto con “parseInt” y lo guardamos en una variable (ahora nos queda “12”)
  • Linea 8: Finalmente adjuntamos el número total justo después del enlace, entre etiquetas “span”, para poder darles estilo con CSS más tarde.

Cómo cambiar la palabra “temas” en la nube de etiquetas

Para personalizar aun más nuestro trabajo, además de cambiar la salida del total de etiquetas podemos fácilmente sustituir el texto. En el ejemplo anterior lo hemos eliminado con jQuery, pero si lo queremos mantener, podemos cambiarlo por otra palabra.

Por defecto en las versión oficial de WordPress en castellano la palabra “items” de la nube de etiquetas se traduce por “temas”. Según el objetivo de nuestra web, puede ser interesante cambiarlo por algo como “Ciudades”, “Profesionales”, “Grupos”, o cualquier otra cosa.

Para ello, primero tendremos que añadir esta función en el archivo functions.php. Aquí es donde cambiamos la palabra “tema” (en singular y en plural) por lo que queramos:

<?php // Funcion para sustituir 'temas' por 'ciudades' en wp_tag_cloud
      function miprefijo_tag_text_callback($count) {
         return sprintf(_n('%s ciudad', '%s ciudades', $count), number_format_i18n($count)); 
      } ?>

Después, en la plantilla donde se encuentra la llamada a “wp_tag_cloud()”, añadimos el nombre de la función que acabamos de crear:

<?php // Adjuntamos la función para cambiar la palabra "temas"
      wp_tag_cloud(array(
      'topic_count_text_callback' => 'miprefijo_tag_text_callback'
      )); ?>

Y tú qué opinas?

Las URLs se convertirán en enlaces automáticamente. Tu dirección de email no se publicará ni se utilizará para enviar ningún tipo de información. Los mensajes que no aporten nada al tema que se trata en esta entrada se borrarán. Las imágenes que aparecen al lado de cada autor utilizan el servicio de Gravatar. Recuerda que puedes usar etiquetas HTML como <a href>, <code>, <em> o <strong> en los comentarios.

(necesario)

(opcional)