Cómo añadir Breadcrumbs en WordPress

Cómo añadir Breadcrumbs en WordPress

Los breadcrumbs o en castellano migas de pan, son los elementos encargados de marcar el rastro de seguimiento hasta una determinada página del sitio web donde nos encontramos.

Dichos elementos son creados con el objetivo de orientar al usuario, de modo que este tenga visible el lugar exacto del sitio web donde se encuentra, y las páginas que anteceden hasta llegar aquí. Además, se utiliza para facilitar la tarea de indexación en buscadores, ya que del mismo modo que el usuario, la araña del motor de búsqueda también sabrá interpretar el camino que hay hasta llegar a una determinada página, facilitando así el rastreo de determinadas páginas del site que se encuentran a varios niveles de profundidad en la arquitectura (estructura y urls. Mientras mayor nivel de profundidad tenga una determinada página, más complicado será llegar hasta ella, y más complicado tendrá ser valorada y rankeada en Google).

A continuación observamos un ejemplo de breadcrumb:

Niveles de profundidad:

  • Academia de inglés (home)
    • Cursos (página de listado de cursos)
      • Inglés para niños (un determinado curso, current page)
/* ejemplo de breadcrumb */
Academia inglés » Cursos de inglés » Cursos de inglés para niños

Formas de añadir Breadcrumbs en WordPress

Si nuestra plantilla WordPress no tiene implementado por defecto un sistema de breadcrumbs o por alguna determinada razón queremos utilizar otros tipos de migas de pan, las posibilidades para agregar breadcrumbs en wordpress son las siguientes:

  • 1. Breadcrumbs en WordPress con Yoast SEO plugin

    Si utilizamos el famoso plugin SEO by Yoast, y queremos añadir los breadcrumbs, debemos hacer lo siguiente:

    Dentro de las opciones avanzadas de Yoast marcamos la casilla “activar migas de pan” y configuramos el resto de parámetros a nuestro gusto.
    breadcrumbs yoast

    Ahora nos queda introducir el código php encargado de llamar a la función de breadcrumbs de yoast y pintarla en la zona deseada de nuestra plantilla de página, por ejemplo en el caso de mi ejemplo es en el page.php, y lo coloco justo en la sección que pinta bajo el header y encima del the_content (contenido del cuerpo de página o main).

    <?php get_header(); ?>
    <?php the_post(); ?>
    
    
    // aquí hago la llamada a la función 
    <?php
    if ( function_exists('yoast_breadcrumb') ) 
    {yoast_breadcrumb('<p id="breadcrumbs">','</p>');} 
    } 
    ?>
    // aquí termina el código que tengo que insertar 
    
    <?php the_content(); ?>
    <?php get_footer(); ?>

    Si se diera el caso de que no quisiera incluir el breadcrumb en ciertas páginas de mi sitio, como contacto, aviso legal u otras. Puedo excluirlas rodeando a esta función dentro de una condición if

    <?php get_header(); ?>
    <?php the_post(); ?>
    
    // si tienes alguno de estos ids de página ok, entra y pinta el breadcrumb, podemos usar todo tipo
    de condiciones, lo dejo a vuestro gusto
    
    <?php
    if (is_page('2272') || is_page('2271') || is_page('3328') || is_page('2359') || is_page('2885') || 
    is_page('2294') || is_page('2305') || is_page('2313') || is_page('2320') ) {
    
    if ( function_exists('yoast_breadcrumb') ) 
    {yoast_breadcrumb('<p id="breadcrumbs">','</p>');} 
    
    } 
    ?>
    
    
    
    <?php the_content(); ?>
    <?php get_footer(); ?>
  • 2. Breadcrumbs en WordPress con Plugins

    Si no queremos entrar en el código y añadir la función php con la llamada a yoast, puedes decantarte por la opción más rápida, que es instalar un plugin específico para crear y customizar el breadcrumb, para ello os aconsejo Smart Navigation Breadcrumb
    plugin breadcrumb

  • 3. PHP Breadcrumbs en WordPress

    Si lo queremos hacer sin Yoast y sin plugins, es decir, implementar de verdad el breadcrumb a nuestra plantilla WordPress a través de PHP, debemos agregar la siguiente función a nuestro fichero function.php del template:

    // PHP para agregar Breadcrumb a WordPress   
    function the_breadcrumb() {
    	if (!is_home()) {
    		echo '<span title="';
    		echo get_option('home');
    	        echo '">';
    		bloginfo('name');
    		echo "</span> » ";
    		if (is_category() || is_single()) {
    			the_category('title_li=');
    			if (is_single()) {
    				echo " » ";
    				the_title();
    			}
    		} elseif (is_page()) {
    			echo the_title();
    		}
    	}
    }    
    // fin del breadcrumb

    Ahora vamos al lugar de la plantilla donde queremos pintar el breadcrumb, yo en este caso utilizo el mismo sitio que elegi en el caso 1 con Yoast (entre el head y el the_content):

    <?php get_header(); ?>
    <?php the_post(); ?>
    
    //hacemos la llamada a la función que hemos creado anteriormente
    < ?php the_breadcrumb(); ?>
     
    ?>
    
    
    <?php the_content(); ?>
    <?php get_footer(); ?>
  • Si conoces algún otro método para agregar breadcrumbs en WordPress, o quieres dar tu opinión o punto de vista a este post, puedes comentar y participar.

    comenta

    Si te gustó este artículo o te sirvió de ayuda por favor compártelo
    Un saludo,
    Óscar / DevService
    Por Óscar Carrillo