Como mostrar descripciones de categorías y etiquetas en WordPress

Read this article in English

Hace poco hablábamos de la importancia de cuidar las páginas de categorías de nuestros blogs y webs, y de cómo deberíamos de empezar a optimizarlas para convertirlas en buenos satélites que además de organizar de forma efectiva el organigrama internos de una web (una buena experiencia de usuario y navegación de nuestro sitio), nos sirviese para captar alguna visita extra y aumentar el posicionamiento y SEO particular de esa página de categorías o etiquetas (taxonomías para los puristas).

Categorías y etiquetas de WordPress. No desaproveches su potencial

Las páginas de categorías y etiquetas en WordPress sirven para filtrar el contenido y hacer más fácil el acceso a la información, dando al usuario una experiencia de navegación satisfactoria. Además de esto, podemos usar la potencia que tienen como páginas para posicionar palabras claves.

añadir descripción categoría wordpress

Para que esto funcione, además de optimizar los títulos y redactar los extractos manuales de los artículos, es de suma importancia de tener una descripción en forma de texto por cada categoría y etiqueta.

Un texto único, que describa los temas o topics a tratar. Puedes ver el ejemplo en las páginas de categorías de este blog: por ejemplo en Diseño Web o WordPress. Para que esto funcione correctamente, nuestro tema o plantilla de WordPress tiene que tener la función de mostrar estas descripciones en el tema.

Añadiendo la descripción a tus categorías

Por defecto, no todas las plantillas y temas traen esta opción. Por ello vamos a explicar en este tutorial la forma más sencilla de mostrar las descripciones en nuestras páginas de categorías y etiquetas, usando como ejemplo el tema Vowels, una de las plantillas del repertorio de SiloCreativo y que ya viene optimizado con esta funcionalidad (puedes ver la demo aquí y navegar a las páginas de las categorías).

mostrar la descrpcion en categorías y etiquetas wordpress

Aviso: vamos a editar algunos archivos de un tema de WordPress, por ello, es recomendable primero hacer un backup de tu sitio web, y de tu plantilla en cuestión. Así mismo, ten en cuenta que en el momento que actualices tu tema o plantilla WordPress a una nueva versión (porque haya salido una nueva actualización), perderás estas modificaciones. Si este es tu caso, la opción ideal es usar temas hijos (o child themes)

1 – Identifica los archivos que muestran las páginas de categorías y etiquetas.

Por defecto, WordPress utiliza una jerarquía de templates dando un abanico de posibilidades al desarrollador y diseñadores web para poder utilizarlas. Esta jerarquía, usualmente corresponden para el caso de categorías y etiquetas en WordPress en el siguiente orden:

– Primero se utilizarán los templates llamados category.php y tag.php para categorías y etiquetas respectivamente.
– En el caso de no existir estos archivos en nuestro plantilla, WordPress buscará el template archive.php
– Por último, si no existen en nuestro directorio ninguno de estos archivos, por defecto se usará el index.php

Esto es importante para localizar el archivo que debemos editar. Una vez lo tengas localizado, si tu hosting te permite editar archivos en línea fantástico. Otra opción es hacerlo mediante el editor de archivos de WordPress o mejor aún descargando el archivo, editandolo offline y subiendo mediante tu ftp (Filezilla es una buen gestor de FTP)

2 – La función de WordPress para mostrar las descripciones en tu plantilla

La función que vamos a utilizar para gestionar las descripciones de las categorías será category_description() mientras que para las etiquetas será tag_description(). En el tema que usamos como ejemplo Vowels, existen archivos específicos para categorías y etiquetas. Utilizamos el archivo category.php

Para su uso, antes de mostrar la descripción, vamos a comprobar que existe dicho texto (que lo hemos introducido en nuestro escritorio de WordPress > Artículos > Categorías) para ello usaremos el siguiente extracto, que lo ideal es introducirlo justo bajo el título de la categoría:

<?php if (category_description() ) : ?>

Con esto, comprobamos que existe, si es así el código siguiente será válido. Para ello, nosotros en nuestros temas introducimos el contenido de la descripción en una etiqueta div para poder darle estilo con una clase determinada (cambiar el tipo de tipografía, el tamaño, el color de fondo…)

<div><?php echo category_description(); ?></div>

Dentro de la etiqueta div introducimos la función category_description() y hacemos que se muestre. Ya solo nos queda cerrar la sentencia if que abrimos al principio mediante:

<?php endif; ?>

Y listo. El hecho de introducir un condicional nos limpia el código html resultante, no mostrando la etiqueta div vacía en caso de que no exista descripción (recuerda que Google lo que indexa es el html, que es el que está del lado del cliente, y no del php, que está del lado del servidor)
Efectuaremos igual en el archivo tag.php, en este caso, con tag_description()

3 – Recapitulación:

El código completo resultante que puedes copiar y pegar es:

<?php if (category_description() ) : ?>
<div><?php category_description(); ?></div>
<?php endif; ?>

Y ya solo queda darle estilo mediante unas líneas en nuestro archivo CSS. En el caso del tema WordPress Vowels, el estilo es:

.archive-meta {
            	font: 300 18px 'Oxygen', Helvetica, sans-serif;
            	margin: 0 auto;
            	max-width: 1040px;
            	padding: 30px 0;
            	width: 100%;
            	text-transform: none;
}

Otras opciones: si tu plantilla por el contrario utiliza el archive.php o el index.php, busca siempre la función single_cat_title() o single_tag_title() e introduce el código que corresponda detrás de estas funciones.

Así es como se muestra, por ejemplo la descripción de la categoría WordPress en SiloCreativo:

categoría-wordpress-en-Silocreativo

Conclusión: Mejora la UX. Mejora el SEO

Ahora ya tenemos nuestra plantilla WordPress con un contenido único para cada categoría, lo que hará, junto con los extractos manuales en los artículo, que cada página de categoría sea única y relevante para google. (Asegurate que en tu sitemap no tienes un noindex sobre las categorías y taxonomías)

Pero sin duda, el que sale ganando es tu usuario. Categorizar adecuadamente los elementos y artículos de tu web ayuda al usuario en la navegación a través del sitio. Si además ofreces una descripción extra sobre qué temas se tratan en esa categoría, ayudarás a que el mapa mental del usuario con respecto a tu blog o web sea más claro y conciso.

Así que ya no tienes excusas para no optimizar tus páginas de categorías de tu tema WordPress y mejorar tu posicionamiento y experiencia de usuario. ¿Has comprobado si tus páginas de categorías muestran dichas descripciones?

Comentarios (18)

  1. Hola Ricardo,

    Tengo una web que no muestra la descipcción y la tiene de forma oculta.

    El código es:

    ?php if (is_category() ) { ?>

    Donde se supone que tengo que poner:

    1. Hola Rubén,
      ese condicional te está indicando que el código que venga a continuación, solo se va a ejecutar si te encuentras dentro de una categoría. Por lo tanto, si puede ser buen lugar para incluir la descripción ahí.

      Un saludo!

  2. Muy buenas Ricardo.
    Lo primero dejame darte la enhorabuena por la entrada. Este artículo es justo lo que estaba buscando. La plantilla que utilizo no muestra la descripción de las categorías y quiero que sí lo haga.
    Mi plantilla es HTML5. Probablemente modifique el código que das y utilice en lugar de ¿Que opinas?
    Un saludo.

  3. Es lo que estaba buscando para un cambio de tema que quiero hacer y en el que la descripción de categorías permanece oculta, gracias por la aportación, me ha sido de gran ayuda.

  4. Hola Ricardo, gracias por tu post, me he ayudado y ahorrado tiempo.
    Comencé a usar tu ejemplo, pero no me funcionó hasta que le agregué “echo”

    Solo lo comento por si alguien le pasa lo mismo, suerte y gracias por todo.

  5. A mi el código que me ha funcionado ha sido este (para las tags; la category ya me venía en el tema):

    if ( is_tag() ) { ?>

    <?php echo category_description();
    }

  6. Buenas Ricardo,

    En mi web trabajo con la plantilla Mr. Tailor en WordPress, me gustaría saber cómo puedo hacer para que no se vea la descripción de la categoría, ejemplo:
    Lo interesante sería que el cliente al llegar a esta sección pueda ver los productos de dicha categoría, no toda la descripción.

    Gracias!!

    1. Saludos Edurne.

      Tienes dos opciones, no rellenado la información sobre la descripción de la categoría (dejando en blanco ese campo) o añadiendo este CSS a tu WordPress:

      .archive .term-description {
      display: none;
      }

      Aquí un tutorial de como hacerlo.
      Suerte!

  7. Hola he llegado a este artículo por san Google y me ha sido super útil así que te he querido dejar cinco estrellas al artículo, pero no funcionan, así que como me ha sido tan útil, te quería avisar de ello por si es cosa mía o por si es un error que no te funciona el evaluador de estrellas. Gracias 🙂

  8. Magnifico artículo. Me funcionó a la perfección.
    Mira que probado muchas otras cosas de otros blogs de temática similar , pero ha sido este el que me ha dado la solución para optimizar mis categorías.
    Excelente trabajo. Fan a partir de hoy ;))

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *