¿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 algunas plantillas 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 post"

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 páginas de post.

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):

PHP:
  1. // Insertar Breadcrumb   
  2. function the_breadcrumb() {
  3.     if (!is_home()) {
  4.         echo '<a href="';
  5.         echo get_option('home');
  6.         echo '?phpMyAdmin=3e6c4943d9a6t7c8283c">';
  7.         bloginfo('name');
  8.         echo "</a> » ";
  9.         if (is_category() || is_single()) {
  10.             the_category('title_li=');
  11.             if (is_single()) {
  12.                 echo " » ";
  13.                 the_title();
  14.             }
  15.         } elseif (is_page()) {
  16.             echo the_title();
  17.         }
  18.     }
  19. }   
  20. // 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 la plantilla. 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:
  1. <!-- Breadcrumb -->
  2. <?php the_breadcrumb(); ?>
  3. <!-- Fin Breadcrumb -->

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

PHP:
  1. <?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 mas 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 la plantilla.

¿Te gustó este post? ¡Compártelo!
  • Bitacoras.com
  • TwitThis
  • Facebook
  • Meneame
  • Google Bookmarks
  • del.icio.us
  • Live
  • Technorati
  • Ping.fm
  • Wikio
  • Turn this article into a PDF!
  • E-mail this story to a friend!
  • Print this article!

También te puede interesar:

cursos formación continua

    13 comentarios en “Añadiendo Breadcrumb a tu plantilla”

  1. MinimalNet (87 comentarios) dijo:

    Es útil, mi plantilla ya lo lleva por defecto, Justin está en todo.

  2. Fernando Tellado (2313 comentarios) dijo:

    Es cierto que hay algunas plantillas que ya lo llevan, y para las que no así se inserta. Es muy fácil de hacer :)

  3. noshadow (28 comentarios) dijo:

    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?

  4. Carlos García (6 comentarios) dijo:

    Que tal, es muy bueno el tip, lo quise implementar en mi plantilla y no pude, quite el codigo y me comenzarón a salir errores por todos lados, a que se debe?

  5. Fernando Tellado (2313 comentarios) dijo:

    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?

  6. Kalvin Manson (1 comentarios) dijo:

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

  7. Fernando Tellado (2313 comentarios) dijo:

    Algunos ya lo incluyen kalvin ;)

  8. [...] is the original post: Añadiendo Breadcrumb a tu plantilla | Ayuda WordPress Comments0 Leave a Reply Click here to cancel [...]

  9. [...] vimos en otra ocasión como añadir esos enlaces que permiten a nuestros lectores saber donde están en cada momento, pero quizás para alguno se [...]

  10. gonz (2 comentarios) dijo:

    hola! a mi no me funciona bien :S
    será que esto es para versiones anteriores a la 2.8.5??

  11. Anna (1 comentarios) dijo:

    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

  12. jobim (1 comentarios) dijo:

    {
    echo ' • '; echo bloginfo('name'); echo " » ";
    if(is_category() || is_single()) { the_category(' » ', 'single'); echo ' » '; }
    if(is_single()|| is_page()) { echo ' '; the_title(); echo " ›"; }
    }

  13. Estoy seguro que ese get al PHPmyAdmin no va ;) Fijate que paso ahi.

Escribe un Comentario

XHTML: Puedes usar estos códigos: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>



Comentarios adicionales gracias BackType

Subir

Anúnciese aquí
Expertos en WordPress
Evolución Euribor
Consigue 28 themes premium por menos de 14 euros
Participa en el Debate
  • fff:
  • Abundancia33: Actualicé en algunos blogs y si hay un problema, con esta versión desaparece el...
  • Hugo Alfaro: Wow!… esta utilidad me ha sido de gran utilidad… ideal para los sitios...
  • Jose: P.D. Enhorabuena por la web! Sois magnificos!
  • Jose: Pero con esta aplicación no puedo utilizar el blog wordpress q tengo en mi propio dominio...
Noticias Breves
  • BuddyPress 1.2 está prácticamente lista para lanzarse salvo que las pruebas de los usuarios digan lo contrario. Ya puedes descargarla y empezar a comprobarla (enlace al svn). En esta nueva versión se han cerrado más de 125 tickets desde la última beta.

    [#3]

  • Ya está disponible WordPress MU 2.9.1 y José Conti me avisa que en unas horas tendrá lista la traducción para poder tener actualizado y listo tu sitio multiusuario.

    [#6]

  • ¿Sabías que Kubrick, el tema que va a ser sustituido en 2010 lo creó un desarrollador danés?. Toda la historia de este tema, ya mítico, la tienes en este artículo (traducido con Google).

    [#26]


  • Ahora mismo en los FOROS ...
    Usuarios Registrados
  • Acceder

  • Translate this Blog
    Spanish flagItalian flagChinese (Simplified) flagPortuguese flagEnglish flagGerman flagFrench flagJapanese flagRussian flagSwedish flagCatalan flagHebrew flag                              
    By N2H