Implementar breadcrumbs en WordPress
Hoy voy a comentar una forma muy cómoda de como implementar breadcrumbs en WordPress empleando el plugin WordPress SEO de Yoast. Como es lógico necesitaremos tener este plugin instalado en nuestro WordPress ya que además es el que recomiendo para hacer el SEO On-Page de nuestro blog.
En un artículo anterior ya comentamos qué son los breadcrumbs y cuando usarlos. Gracias a este artículo tenemos una idea visual de los breadcrumbs y cómo afectan a la forma en la que se muestran los resultados de búsqueda de nuestra página web en Google.
Los breadcrumbs a nivel de código no son más que un tipo de microdato del schema.org. Estos microdatos fueron diseñados para ayudar a los motores de búsqueda a entender nuestra página web y consisten en un etiquetado semántico.
Para evitarnos precisamente tener que programar una función o un plugin que nos permita agregar este tipo de microdatos a WordPress emplearemos el plugin WordPress SEO de Yoast que nos permite agregar los breadcrumbs en menos de cinco minutos. Hay que tener en cuenta que después hay que agregar el código CSS adecuado para que los breadcrumbs se adapten a nuestro tema y sean visualmente correctos.
Como implementar breadcrumbs en WordPress con WordPress SEO de Yoast
Una vez tenemos el plugin instalado nos vamos al menú del plugin a la opción “Internal Links” (links internos) y lo primero que haremos será activarlos marcando la opción “Enable Breadcrumbs” (activar breadcrumbs).
Personalmente yo sólo agrego los breadcrumbs a los artículos y a las categorías, tags y archivos. Dicho de otra manera sólo agrego el código para activar los bredcrumbs en los archivos single.php , page.php y archive.php ya que en las búsquedas y en los errores 404 de página no encontrada no le veo sentido usarlos.
Des pues de activar los breadcrumbs tenemos que editar los archivos single.php , page.php y archive.php y agregar el código:
<?php if ( function_exists('yoast_breadcrumb') ) {
yoast_breadcrumb('<p id="breadcrumbs">','</p>');
} ?>
Este código lo debemos pegar donde queremos que se muestre el breadcrumb, por lo general los breacrumbs aparecen encima de la cabecera de contenidos del artículo tal y como vemos en la siguiente imagen de ejemplo:
Una vez hemos agregado el código en el menú de los breadcrumbs del plugin de Yoast configuramos la opción del separador “Separator between breadcrumbs” que no será más que el caracter que queremos introducir entre los elementos del breadcrumb y se puede usar el que más nos guste por ejemplo: / , > , ▸
Esta opción del separador también puede llevar código HTML, lo que es muy útil para para modificar el estilo CSS del separador y empleamos en esta opción algo como:
<span>▸</span>
Por último configuramos la opción “Anchor text for the Homepage” que no es más que el texto de ancla del primer elemento del breadcrumb que será siempre la página de inicio por ello yo le pongo como texto de ancla “Inicio” o “Home” si está en inglés el blog.
Ya sólo quedaría dar el estilo adecuado al breadcrumb con código CSS pero esa parte ya no es objeto de este tutorial sino que se supone que el usuario tiene unos conocimientos básicos de CSS y HTML.
Espero que is haya sido de ayuda esta guiá paso a paso de como agregar breadcrumbs en WordPress y si tenéis dudas o quereis dejar un comentario sois bienvenidos.