Añadiendo breadcrumbs (navegación de migas de pan) a tu tema WordPress

¿No sabes lo que es un breadcrumb?, pues sería algo así como las migajas que dejaba Pulgarcito para no perderse cuando se internaba en tierras desconocidas. Esto, aplicado a un blog sería cualquier tipo de guía de navegación que oriente al lector para que sepa en todo momento donde se encuentra.

En algunos temas que ya llevan esta función integrada verás que es una línea que te indica la ruta de navegación que se recorre para llegar al post en cuestión donde te encuentras, por ejemplo: «Inicio -> Archivo -> Marzo -> Mi entrada»

Para conseguir integrar breadcrumb en tu plantilla echaremos mano, de nuevo, de las Tags Condicionales de WordPress, útiles para casi todo. Nos valdremos de ellas para saber si el visitante está en un artículo, en una página de categorías o archivo.

Para ello tenemos que utilizar las funciones adecuadas que nos muestren la jerarquía del blog. No te preocupes que no es nada complicado, y WordPress dispone de todas las funciones necesarias para enlazar a la página principal, los artículos y las entradas.

El siguiente ejemplo sería una función breadcrumb limpia, que solo tienes que copiarla en el fichero functions.php de tu plantilla (y si no tiene este archivo lo creas):

// Insertar Breadcrumb
function the_breadcrumb() {
if (!is_home()) {
echo '';
bloginfo('name');
echo " » ";
if (is_category() || is_single()) {
the_category('title_li=');
if (is_single()) {
echo " » ";
the_title();
}
} elseif (is_page()) {
echo the_title();
}
}
}
// fin breadcrumb

Una vez tenemos la función solo nos queda conseguir que aparezca el breadcrumb en nuestro blog. Para eso tenemos que incluir la etiqueta – la llamada – al breadcrumb en el tema. Buenas opciones para incluir el código serían los ficheros archive.php, single.php y page.php, pero no deja de ser una cuestión personal – incluso puedes incluirlo en index.php. Lo que tienes que incluir es este código:

<?php the_breadcrumb(); ?>

(Nota: te aconsejo ponerlo siempre antes de la llamada al post, o sea, antes de …

<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>

Y ya está, eso es todo. Acabas de crear un modo sencillo para que tus lectores naveguen por las secciones de tu blog.

¡Ah!, se me olvidaba. Puedes mejorar este código, por ejemplo, limitando las categorías que se mostrarán, o solo mostrando una categoría. Solo tienes que practicar con las tags condicionales. Y si, a pesar de lo sencillo que es, y de lo que te aporta como aprendizaje, prefieres usar un método más automático, siempre puedes instalar el plugin Breadcrumb NavXT, que crea la función por ti y luego solo tienes que añadir el código en el tema.

VALORA Y COMPARTE ESTE ARTÍCULO PARA MEJORAR LA CALIDAD DEL BLOG…
(10 votos, promedio: 4.7)

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

AVISO: Esta publicación es de hace 3 años o más. Si es un código o un plugin podría no funcionar en las últimas versiones de WordPress, y si es una noticia podría estar ya obsoleta. Luego no digas que no te hemos avisado.

24 comentarios en “Añadiendo breadcrumbs (navegación de migas de pan) a tu tema WordPress”

  1. me has leido el pensamiento 😉 estaba a punto de implementar breadcrumbs con un plugin.

    En mi opinión el mayor problema de los breadcrumbs es la estética porque suelen quedar fatal a la vista.

    Si pones un breadcrumb tal que asi;

    «Inicio -> Categoria -> Mi post

    mi post

    repites dos veces el titulo en poco espacio. Si pones el breadcrumb muy pequeño pasa desapercibido y no vale para nada.

    ¿Hay alguna galeria de breadcrumbs para inspirar el diseño?

  2. Carlos, lo he probado en varios blogs antes de publicarlo y no me dió errores en ninguno.

    Seguramente debiste poner o quitar algo de mas, sino no te saldrían errores al quitarlo, o al ponerlo. ¿que plantilla usas? en donde lo pusiste?

  3. Kalvin Manson

    Esta vacanisimo voy a montarlo en mi blog, muy util, en themes de wordpress deberian definir si los themes incluyen esto. xD

  4. Pingback: Añadiendo Breadcrumb a tu plantilla | Ayuda WordPress

  5. Pingback: Añadir navegación breadcrumb de manera sencilla | Ayuda WordPress

  6. A mi me funciona, però tengo pàginas con subpàginas (menú desplegable superior), i las subpáginas no llevan la información de nivel superior, sinó directamente el home

  7. {

    echo ' • '; echo bloginfo('name'); echo " » ";

    if(is_category() || is_single()) { the_category(' » ', 'single'); echo ' » '; }

    if(is_single()|| is_page()) { echo ' '; the_title(); echo " ›"; }

    }

  8. function the_breadcrumb() {
    if (!is_home()) {
    echo ‘‘;
    bloginfo(‘name’);
    echo «
    » «;
    if (is_category() || is_single()) {
    the_category(‘title_li=’);
    if (is_single()) {
    echo » » «;
    the_title();
    }
    } elseif (is_page()) {
    echo the_title();
    }
    }
    }
    con este código no me dió ese problema 🙂 saludos

  9. 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

  10. copie y pegue.. y no me funciono… puede ser un clonflicto con las versiones de WP, cuando hiciste el post en que version estaba??
    saludos

Deja un comentario

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

 

Ir arriba Ir al contenido