Añadir breadcrumb simple en WordPress

¿Qué es un breadcrumb?

Un breadcrumb (miga de pan) es una herramienta de navegación que ayuda a los usuarios a entender su ubicación dentro de la estructura de un sitio web.

Se muestra generalmente en la parte superior, mostrando un recorrido jerárquico desde la página principal hasta la actual.

Ver recuadro «¿Dónde estoy?» sobre estas líneas.

Además de mejorar la experiencia del usuario al facilitar la navegación, también contribuye a mejorar el posicionamiento SEO, ya que permite que los motores de búsqueda comprendan mejor la estructura del sitio.

Implementar un breadcrumb en tu página puede mejorar tanto la usabilidad como la visibilidad de tu sitio en los resultados de búsqueda.

Para mostrar un breadcrumb simple y personalizable, en todas las entradas de tu blog WordPress, puedes insertar el siguiente pequeño fragmento de código, usando el plugin Code Snippets:

function simple_breadcrumb() {
    // Mostrar breadcrumb sólo en las entradas
    if (is_single()) {
        echo '<nav class="breadcrumb">';
        
        // Añadir "¿Dónde estoy?" al principio del breadcrumb
        echo '<span class="breadcrumb-text">¿Dónde estoy?</span>&nbsp;';

        // Añadir icono HOME e "Inicio" con enlace
        echo '&nbsp;<span class="breadcrumb-icon"><i class="fa fa-home"></i></span>&nbsp;<a href="' . home_url() . '" title="Diseño Web SEO">Andy21</a>&nbsp;';
                
        // Añadir icono RSS y "Blog" con enlace
        echo '&raquo;&nbsp;<span class="breadcrumb-icon"><i class="fa fa-rss"></i></span>&nbsp;<a href="' . home_url('/blog/') . '" title="Blog de Andy">Blog</a>&nbsp;';

        // Añadir icono FOLDER y categoría principal de la entrada con enlace
        $category = get_the_category();
        if ($category) {
            echo '&raquo;&nbsp;<span class="breadcrumb-icon"><i class="fa fa-folder"></i></span>&nbsp;<a href="' . get_category_link($category[0]->term_id) . '">' . $category[0]->name . '</a>&nbsp;';
        }

        // Mostrar título de la entrada sin enlace
        echo '&raquo;&nbsp;' . get_the_title();
        echo '</nav>';
    }
}

// Insertar el breadcrumb al principio del contenido
add_filter('the_content', 'prepend_breadcrumb_to_content');

function prepend_breadcrumb_to_content($content) {
    if (is_single()) {
        // Agregar el breadcrumb antes del contenido
        ob_start();
        simple_breadcrumb();
        $breadcrumb = ob_get_clean();
        return $breadcrumb . $content;
    }
    return $content;
}

El código anterior es muy simple y efectivo, así como fácilmente personalizable, debido a su simpleza y comentarios añadidos, por lo que te resultará ideal en tu proyecto de diseño web con WordPress que incluya un blog con entradas, como por ejemplo el Blog de Andy21 que puedes ver aquí mismo, pulsando el enlace anterior.

Ver en formato PDFFormato para IMPRIMIR