Breadcrumbs o “migajas de pan” para WordPress

En muchos CMS la función de Breadcrumb ya viene incorporada, no es el caso de WordPress. El Breadcrumb significa, literalmente, “migajas de pan” y se refiere al camino que se va dejando al andar (¿Te acordás de Pulgarcito que dejaba un camino con migas de pan para ser encontrado?). Es la ruta que recorrés a medida que te adentrás en una web, ¿capicce?

Si tu web tiene muchas categorías y subcategorías, los breadcrumbs son una función que hace más amena la navegación en busca de un artículo en particular. También enriquece los links internos de tu sitio haciendolo más atractivo para los buscadores.

Podés optar por insertar los breadcrumbs a través de plugins o escribiendo unas líneas de código en tu theme. Veamos las opciones más interesantes.

Edición de Plantilla (Sin plugin)

Desde Catswhocode.com nos muestran cómo insertar breadcrumbs sin plugin. Busquemos el archivo functions.php de nuestro theme. Si no existe, creemos uno y subamoslo a la carpeta de nuestro theme. Vayamos hacia el final de todo y peguemos:

function the_breadcrumb() {
	if (!is_home()) {
		echo '<a href="';
		echo get_option('home');
		echo '">';
		bloginfo('name');
		echo "</a> » ";
		if (is_category() || is_single()) {
			the_category('title_li=');
			if (is_single()) {
				echo " » ";
				the_title();
			}
		} elseif (is_page()) {
			echo the_title();
		}
	}
}

Con esto hecho, ahora elijamos los templates en donde queremos insertar la función. Generalmente se coloca en archives.php, category.php (en caso de que exista) y single.php, e insertamos el siguiente código en donde creamos conveniente:

<?php the_breadcrumb(); ?>

Un buen lugar para mostrar este camino a nuestros lectores es arriba del título de la entrada.

Edición de Plantilla 2

Una forma más sencilla todavía de hacer estos breadcrumbs editando la plantilla directamente es como nos muestra Fernando Tellado, de AyudaWordPress. Editemos las plantillas insertando algo como esto:

Est&aacute;s en: <?php bloginfo(‘home’); ?> &raquo; <?php the_category(); ?> &raquo; <?php the_title(); ?>

Y su resultado será este:

Yoast Breadcrumbs

Este plugin nos permite, con total facilidad, insertar un breadcrumb en nuestro theme. Para su uso, simplemente activamos el plugin e insertamos en nuestras plantilas:

<?php if ( function_exists('yoast_breadcrumb') ) {
	yoast_breadcrumb('<p id="breadcrumbs">','</p>');
} ?>

Luego añadimos el css a conveniencia en el caso de que deseemos darle estilo. El plugin admite un uso avanzado si insertamos:

<?php if ( function_exists('yoast_breadcrumb') ) {
	$breadcrumbs = yoast_breadcrumb("","",false);
} ?>

En donde en la primer variable indicamos el prefijo (texto inicial), la segunda el sufijo (texto al finalizar) y en la tercera colocando “false” cambiamos el modo en que se muestra nuestro breadcrumb.

Para descargarlo simplemente vayamos al sitio del autor.

Breadcrumb Navigation XT

Este plugin requiere una llamada en las plantillas en dónde querés que se muestre el breadcrumb, preferentemente en single.php, index.php, page.php o bien en header.php.

Simplemente hay que colocar el siguiente código:

<div>
<?php
if (class_exists('breadcrumb_navigation_xt')) {
echo 'Navigation: ';
$mybreadcrumb = new breadcrumb_navigation_xt;
$mybreadcrumb->display();
}
?>
</div> <!-- [breadcrumb] -->

La característica especial de este plugin es que tiene muchas opciones de parámetros para configurarlo, desde cambiar separadores hasta agregar sufijos dependiendo de la sección que se visita. Podemos ver el listado completo en el sitio oficial del plugin.

Breadcrumb NavXT

Una vez activado este plugin lo insertamos en nuestras plantillas single.php, category.php, page.php, etc, con el siguiente código:

<div>
<?php
if(function_exists('bcn_display'))
{
	bcn_display();
}
?>
</div>

Para darle estilo, podemos añadir lo siguiente al .css del theme:

.breadcrumb
{
	font-size: 1.1em;
	color: #fff;
	margin: 30px 0 0 10px;
	position: relative;
	float: left;
}

Hasta acá tenemos lo básico, insertar el breadcrumb y darle el tamaño de fuente, color y margen principalmente.  Lo interesante de este plugin en particular, es que nos permite decirle que no queremos que añada links a nuestro breadcrumb de la siguiente manera:

if(class_exists('bcn_breadcrumb_trail'))
{
	//Make new breadcrumb object
	$breadcrumb_trail = new bcn_breadcrumb_trail;
	//Setup options here if needed
	//Fill the breadcrumb trail
	$breadcrumb_trail->fill();
	//Display the trail, but don't link the breadcrumbs
	$breadcrumb_trail->display(false, false);
}

O bien indicarle que queremos links con atributos nofollow:

if(class_exists('bcn_breadcrumb_trail'))
{
	//Make new breadcrumb object
	$breadcrumb_trail = new bcn_breadcrumb_trail;
	//Setup our options
	//Customize our current item anchor with a rel="nofollow"
	$breadcrumb_trail->opt['current_item_anchor'] =
		'<a title="Refresh the current page." rel="nofollow" href="%link%">';
	//Customize the home anchor
	$breadcrumb_trail->opt['page_anchor'] =
		'<a title="Visit the %title% page." href="%link%">';
	//Fill the breadcrumb trail
	$breadcrumb_trail->fill();
	//Display the trail
	$breadcrumb_trail->display();
}

Y también nos permite un manejo más amplio del breadcrumb, mediante la inclusión de clases extra dentro de esta función. Todas estas opciones están bajo la sección de “avanzados”. El plugin lo pueden descargar desde el sitio oficial.