breadcrumbs en WordPress-11

Cómo añadir breadcrumbs en WordPress

Los breadcrumbs en sitios WordPress, o «migajas de pan», son elementos de navegación que ayudan a los usuarios a rastrear su ubicación dentro de un sitio web. Además de mejorar la experiencia del usuario, también pueden beneficiar el SEO del sitio al ofrecer una estructura más clara a los motores de búsqueda. A continuación, te explicaré cómo añadir breadcrumbs en WordPress de manera sencilla.

breadcrumbs en WordPress-1
Cómo añadir breadcrumbs en WordPress

¿Qué son los breadcrumbs en sitios WordPress y por qué son importantes?

Los breadcrumbs en WordPress son una serie de enlaces jerárquicos que muestran la ruta que ha seguido un usuario dentro de un sitio web. Normalmente, se encuentran en la parte superior de la página, justo debajo del menú principal. Estas son algunas de las razones por las que deberías considerar añadir breadcrumbs en WordPress a tu sitio web:

  • Mejoran la navegación: Facilitan al usuario entender la estructura de tu sitio y regresar fácilmente a páginas anteriores.
  • Benefician el SEO: Los motores de búsqueda, como Google, utilizan los breadcrumbs en WordPress para entender mejor la jerarquía de tu contenido, lo que puede mejorar tu posicionamiento.
  • Reducen la tasa de rebote: Al ofrecer una forma fácil de volver a secciones anteriores, los breadcrumbs en WordPress pueden reducir la probabilidad de que un usuario abandone tu sitio.
breadcrumbs en WordPress-2
Cómo añadir breadcrumbs en WordPress

Métodos para añadir breadcrumbs en sitios WordPress

Existen varias formas de añadir breadcrumbs en WordPress, desde el uso de plugins hasta la incorporación de código manualmente. Aquí exploraremos ambos métodos.

1) Añadir breadcrumbs en sitios WordPress con un plugin

La manera más sencilla de añadir breadcrumbs en WordPress es utilizando un plugin de WordPress. A continuación, te mostramos cómo hacerlo con dos de los plugins más populares: Yoast SEO y Breadcrumb NavXT.

Opción 1: Yoast SEO

breadcrumbs en WordPress 10
Cómo añadir breadcrumbs en WordPress

Yoast SEO es uno de los plugins de SEO más utilizados en WordPress y, además, incluye una funcionalidad integrada para añadir breadcrumbs en sitios WordPress.

Instalación y activación: Si no tienes instalado Yoast SEO, ve al menú «Plugins» en tu panel de WordPress, busca «Yoast SEO», instala y activa el plugin.

breadcrumbs en WordPress-9
Cómo añadir breadcrumbs en WordPress

Configuración de los breadcrumbs:

  • Ve a «SEO» > «Apariencia en el buscador».
  • Haz clic en la pestaña «Breadcrumbs».
  • Activa la opción «Habilitar breadcrumbs».
  • Personaliza los breadcrumbs en sitios WordPress según tus preferencias. Puedes definir el separador entre los enlaces, si deseas mostrar la página de inicio en la ruta, y más.
  • Guarda los cambios.

Añadir el código al tema:

  • Para que los breadcrumbs en WordPress aparezcan en tu sitio, necesitas añadir un pequeño fragmento de código al archivo de tu tema donde quieras que aparezcan (por ejemplo, en single.php, page.php, o header.php).
  • Usa el siguiente código PHP:
   if (function_exists('yoast_breadcrumb')) {
       yoast_breadcrumb('<p id="breadcrumbs">', '</p>');
   }
breadcrumbs en WordPress-4
Cómo añadir breadcrumbs en WordPress

Personalización adicional: Yoast SEO permite un alto grado de personalización de los breadcrumbs en WordPress, desde cambiar el texto de inicio hasta la posibilidad de excluir ciertas páginas de la ruta.

Opción 2: Breadcrumb NavXT

Breadcrumb NavXT es otro plugin popular que se especializa únicamente en breadcrumbs en WordPress.

breadcrumbs en WordPress 5
Cómo añadir breadcrumbs en WordPress

Instalación y activación: Al igual que con Yoast, ve a «Plugins» > «Añadir nuevo», busca «Breadcrumb NavXT», instala y activa el plugin.

Configuración de los breadcrumbs:

  • Una vez activado, dirígete a «Ajustes» > «Breadcrumb NavXT».
  • Configura el estilo y la estructura de los breadcrumbs en WordPress. Puedes personalizar el separador, las etiquetas HTML, y más.
  • Guarda los cambios.
breadcrumbs en WordPress-6
Cómo añadir breadcrumbs en WordPress

Añadir el código al tema:

  • Al igual que con Yoast SEO, deberás añadir un fragmento de código al archivo del tema donde quieras que aparezcan los breadcrumbs en WordPress:
   if (function_exists('bcn_display')) {
       bcn_display();
   }
breadcrumbs en WordPress-7
Cómo añadir breadcrumbs en WordPress

2) Añadir breadcrumbs en WordPress manualmente con código

Si prefieres no depender de un plugin, puedes añadir breadcrumbs en WordPress manualmente utilizando código personalizado. Esta opción es más avanzada y requiere conocimientos básicos de PHP y de la estructura de WordPress.

Añadir el código al archivo functions.php:

  • Ve a «Apariencia» > «Editor de temas» y abre el archivo functions.php.
  • Añade el siguiente código para generar los breadcrumbs en WordPress:
   function custom_breadcrumbs() {
       // Configuración básica
       $separator = ' > ';
       $home = 'Inicio';
       $before = '<span class="current">';
       $after = '</span>';

       // Inicio del breadcrumb
       echo '<nav class="breadcrumb">';

       // Enlace a la página de inicio
       echo '<a href="' . home_url() . '">' . $home . '</a>' . $separator;

       // Añadir breadcrumbs para categorías, etiquetas y autor
       if (is_category() || is_single()) {
           the_category(', ');
           if (is_single()) {
               echo $separator . $before . get_the_title() . $after;
           }
       } elseif (is_page()) {
           echo $before . get_the_title() . $after;
       }

       // Fin del breadcrumb
       echo '</nav>';
   }
breadcrumbs en WordPress-8
Cómo añadir breadcrumbs en WordPress

Añadir la función al tema:

  • Inserta la función custom_breadcrumbs() en los archivos de tu tema donde quieras que aparezcan los breadcrumbs en WordPress (por ejemplo, en header.php o page.php).

Personalización adicional: Puedes personalizar los estilos CSS de los breadcrumbs en WordPress para que coincidan con el diseño de tu sitio. Añade las reglas CSS correspondientes en tu archivo style.css.

Resumen

Añadir breadcrumbs en WordPress a tu sitio web es una excelente manera de mejorar la navegación y el SEO. Ya sea que optes por un plugin o por un enfoque manual, la incorporación de estas rutas de navegación ayudará a tus usuarios a orientarse mejor dentro de tu sitio. Con esta guía, estás listo para implementar breadcrumbs en WordPress de manera efectiva en tu sitio web.

Si estás profundizando tus conocimientos en el mundo WordPress y necesitas un servicio de hosting que se adapte a tus necesidades, te invitamos a conocer los planes de WordPress Hosting que DonWeb tiene para ofrecerte.

Santiago Molina
Santiago Molina

Ingeniero Industrial / Especialista en marketing / Programador web