SummArg | Cursos y recursos para webmasters

08/10/2009

Breadcrumbs o “migajas de pan” para WordPress

En muchos CMSs la función de breadcrumbs ya viene incorporada, no es el caso de WordPress. Breadcrumb significa, literalmente, “migajas de pan” y se refiere al camino que se va dejando al andar (tal como el cuento de Pulgarcito, en el que dejaba marcado un camino con migas de pan). Es la ruta que el usuario recorre a medida que se adentra en una web.

Si una web tiene muchas categorías y subcategorías, el breadcrumb es la función que hace más amena la navegación a la hora de listar la sección padre. También enriquece los links internos de un sitio haciendolo más atractivo para los buscadores.

En WordPress se puede optar por insertar una breadcrumb a través de plugins o escribiendo unas líneas de código en el 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ás en: <?php bloginfo('home'); ?> » <?php the_category(); ?> » <?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 donde deseamos 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 class="breadcrumb"><?php if (class_exists('breadcrumb_navigation_xt')) {

// Display a prefix

echo 'Navigation: ';

// new breadcrumb

object $mybreadcrumb = new breadcrumb_navigation_xt;

// Display the breadcrumb

$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 class="breadcrumbs"><?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['post_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.

Dejar un comentario

  1. Información Bitacoras.com…

    Valora en Bitacoras.com: 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 …..

  2. José

    Hola a todos!! Tengo una duda tengo dos categorías en el portfolio y no me las coge wordpress. ¿Sabéis alguna forma? y otra pregunta ¿Cómo se quita las migas de pan en Portada?

    Gracias

    (perdón antes me he dejado la H)

  3. Nekko

    Hay que ver que theme usas y como está hecho para poder modificarlo. Si querés posteá en el foro mas información al respecto y vemos como te podemos ayudar.

Dejar un comentario