A pesar del nombre mundano, las migajas de pan son herramientas muy útiles para mejorar la Experiencia de Usuario (UX) y la Optimización para Motores de Búsqueda (SEO) de su sitio. Habilitarlos es simple con la ayuda de un plugin o de un pequeño código personalizado.

En este post, le presentaremos las breadcrumbs de WordPress y le explicaremos cómo funcionan. Luego, le mostraremos cómo agregarlos a su sitio, cambiar su estilo y eliminarlos. Hay mucho que cubrir, así que vamos a empezar!

¿Qué Son las WordPress Breadcrumbs?

Breadcrumbs, en la medida en que se relacionan con WordPress (o cualquier sitio web), son enlaces de navegación que aparecen en la parte superior de una entrada o página. Muestran a los usuarios las categorías de nivel superior que les llevaron al contenido que están viendo actualmente y también permiten una navegación fácil de vuelta a las páginas vistas anteriormente.

Por ejemplo, considere el siguiente ejemplo:

breadcrumbs en el blog de Kinsta

breadcrumbs en el blog de Kinsta

En el lado izquierdo, justo debajo del encabezado, puede ver las palabras Home > Resource Center > Kinsta Blog. Cada uno es un enlace a su página correspondiente desde la entrada actual. Esto permite a los lectores de nuestro blog navegar a cualquiera de estas áreas de contenido clave con un solo clic, en lugar de tener que usar el botón Atrás, el menú o la función de búsqueda.

De ahí el nombre de las breadcrumbs: crean un rastro que lleva a los usuarios de vuelta a»casa». Son particularmente útiles para sitios como blogs y tiendas en línea, donde los visitantes pueden querer moverse entre publicaciones individuales, páginas de productos y archivos de categorías donde pueden encontrar contenido similar.

¿Cómo Funcionan las WordPress Breadcrumbs?

Hay tres tipos diferentes de breadcrumbs de WordPress. Todos incorporan enlaces de navegación como se describió anteriormente, pero de maneras ligeramente diferentes:

Cada variedad de breadcrumbs es útil para diferentes propósitos. Sin embargo, todos pueden mejorar la navegación y por extensión el UX.

También son beneficiosos para propósitos de SEO. Las breadcrumbs muestran claramente las relaciones entre las diferentes piezas de contenido de su sitio. De esta manera, facilitan a los rastreadores de los motores de búsqueda o’bots’ la comprensión de la estructura de su sitio.

Esto permite que esos robots indexen las páginas de su sitio con mayor precisión. Los motores de búsqueda también pueden mostrar sus breadcrumbs en los listados de resultados, para que los usuarios puedan ver contenido adicional en su sitio relacionado con la información que están buscando.

¿Cómo Agregar WordPress Breadcrumbs a Su Sitio? (4 métodos)

Tanto si es un genio de la codificación como si es un principiante de WordPress, puede añadir rápida y fácilmente breadcrumbs a su sitio en sólo unos pocos pasos. Aquí hay cuatro maneras diferentes en las que puede llevar a cabo esta tarea.

1. Habilitar Breadcrumbs en Yoast SEO

Yoast SEO es un plugin popular que ayuda a los usuarios de WordPress a aproximarse a su posicionamiento en los motores de búsqueda y optimizar su contenido en consecuencia. También incluye algunas otras características para aumentar la visibilidad de su sitio, incluyendo breadcrumbs.

Si aún no lo ha hecho, instala y activa el plugin en su tablero de WordPress:

Instalando el plugin Yoast SEO

Instalando el plugin Yoast SEO

A continuación, deberá agregar este fragmento de código al tema:


<?php
if ( function_exists('yoast_breadcrumb') ) {
  yoast_breadcrumb( '<p id="breadcrumbs">','</p>' );
}
?>

 

Específicamente donde usted lo agrega depende de usted. Si quiere usar breadcrumbs en sus entradas de blog, puede añadirlas a su archivo de plantilla single.php.

Alternativamente, si lo pega al final de su archivo header.php, añadirá breadcrumbs a todo su sitio:

Añadir el código de activación de breadcrumbs Yoast

Añadir el código de activación de breadcrumbs Yoast

Tenga en cuenta que las futuras actualizaciones de temas pueden anular este código personalizado. Tendrá que ponerse en contacto con el desarrollador del tema para obtener información sobre cómo evitar este problema o simplemente utilizar un tema infantil. Una vez que el fragmento esté en su lugar, navegue hasta SEO > Buscar apariencia > Breadcrumbs su tablero:

La configuración de Yoast SEO breadcrumbs

La configuración de Yoast SEO breadcrumbs

Cambie el interruptor de configuración de Breadcrumbs a activado. Luego, previsualice su sitio:

Breadcrumbs vivo añadido con Yoast SEO

Breadcrumbs vivo añadido con Yoast SEO

Ahora debería ver las migajas de pan en las partes relevantes de su sitio, basándose en dónde agregó el fragmento de código.

2. Habilitar Breadcrumbs con un Plugin de WordPress Breadcrumbs

Agregar breadcrumbs con Yoast es especialmente conveniente si ya está usando ese plugin para fines de SEO. Sin embargo, si prefiere un plugin diferente para optimizar su contenido, el enfoque anterior es menos útil. Afortunadamente, hay varios otros plugins disponibles que están específicamente diseñados para añadir breadcrumbs a WordPress.

Breadcrumb NavXT

El plugin más popular para añadir breadcrumbs a WordPress aparte de Yoast es Breadcrumb NavXT:

El plugin Breadcrumb NavXT

El plugin Breadcrumb NavXT

Este plugin proporciona un widget de breadcrumbs que puedes añadir a cualquier área de widgets que su tema proporcione, como una barra lateral o un pie de página. Es altamente personalizable, lo que le permite elegir qué páginas y categorías mostrar en la ruta. Breadcrumbs NavXT también incluye esquemas de marcado para mejorar el SEO.

Para añadir breadcrumbs usando este plugin, navegue a Apariencia > Widgets. Verá un nuevo widget NavXT Breadcrumb, que querrá arrastrar al área del widget donde le gustaría que apareciera:

Añadir el widget Breadcrumb NavXT al pie de página

Añadir el widget Breadcrumb NavXT al pie de página

Haga clic en la flecha desplegable para abrir la configuración del widget y, a continuación, rellene los campos necesarios:

Las opciones del widget Breadcrumb NavXT

Las opciones del widget Breadcrumb NavXT

Asegúrese de seleccionar las casillas de verificación según sea necesario para añadir enlaces a sus breadcrumbs, determinar su orden, ocultarlas en la página principal e ignorar el almacenamiento en caché. Cuando haya terminado, haga clic en el botón Guardar y, a continuación, compruebe la parte delantera de su sitio:

Breadcrumbs creado con el widget Breadcrumb NavXT

Breadcrumbs creado con el widget Breadcrumb NavXT

Sus breadcrumbs deben ser ahora visibles en cualquier área de widgets que elijas para ellas.

Flexy Breadcrumb

Como alternativa, Flexy Breadcrumb es el plugin más valorado para añadir breadcrumbs a WordPress:

El plugin Flexy Breadcrumb

El plugin Flexy Breadcrumb

Cuando este plugin está instalado y activado, puede añadir breadcrumbs a su sitio utilizando el código abreviado[flexy_breadcrumb]. Esto le da un poco más de flexibilidad en cuanto a dónde aparecerán sus huellas. También tendrá más control sobre los componentes de estilo, como el tamaño de la fuente, el color y los iconos.

Después de instalar Flexy Breadcrumbs, verá un nuevo elemento en la barra lateral de su panel de control:

El enlace Flexy Breadcrumb en la barra lateral del panel de control de WordPress

El enlace Flexy Breadcrumb en la barra lateral del panel de control de WordPress

A continuación, tendrá que configurar algunas opciones. En la ficha General, puede modificar el texto y el icono de su página principal, fijar el límite de caracteres y determinar la jerarquía:

La configuración general de Flexy Breadcrumb

La configuración general de Flexy Breadcrumb

En la ficha Tipografía, también puede ajustar el color y el tamaño de la fuente para sus breadcrumbs:

Los ajustes de la tipografía de Flexy Breadcrumb

Los ajustes de la tipografía de Flexy Breadcrumb

Una vez que haya personalizado su rastro, deberá agregar el código abreviado[flexy_breadcrumb] donde quiera que aparezcan sus breadcrumbs. Aunque es posible hacer esto en cada entrada individual que publique en su sitio, es más eficiente añadir el código abreviado a un widget de WordPress:

Un rastro de Flexy Breadcrumb en la parte delantera

Un rastro de Flexy Breadcrumb en la parte delantera

Si comprueba la parte delantera de su sitio, debería poder ver sus breadcrumbs mostradas dondequiera que haya añadido el código abreviado.

WooCommerce Breadcrumb

Para los minoristas en línea, WooCommerce Breadcrumbs es una manera fácil de añadir enlaces de navegación a las páginas de sus productos:

El plugin de WooCommerce Breadcrumbs

El plugin de WooCommerce Breadcrumbs

Si está ejecutando su tienda online con el popular plugin WooCommerce, esta puede ser la mejor opción para usted. Le permite activar las breadcrumbs para las páginas de sus productos, con el fin de mejorar la navegación de los clientes en su sitio.

Después de la instalación y activación, puede navegar a Ajustes > WC Breadcrumbs para personalizar sus senderos de breadcrumbs:

La página de configuración de WooCommerce Breadcrumbs

La página de configuración de WooCommerce Breadcrumbs

La configuración más importante a tener en cuenta es la casilla de verificación Habilitar breadcrumbs. Tiene que asegurarse de que está seleccionado para poder mostrar sus breadcrumbs. Luego, revise una de las páginas de su producto:

Página de producto WooCommerce con breadcrumbs habilitado

Página de producto WooCommerce con breadcrumbs habilitado

Su rastro de breadcrumbs debe ser visible en la parte superior de la página.

Breadcrumb

Por último, Breadcrumb es un plugin ligero que le permite añadir breadcrumbs en cualquier lugar de su sitio web utilizando atajos:

El plugin Breadcrumb

El plugin Breadcrumb

Este plugin tiene la configuración más extensa de todos los listados en este post. Puede acceder a ellos haciendo clic en Breadcrumb en la barra lateral de su panel de control de WordPress:

El enlace Breadcrumb en la barra lateral del panel de control de WordPress

El enlace Breadcrumb en la barra lateral del panel de control de WordPress

La primera pestaña se llama Opciones, e incluye algunos ajustes generales como texto personalizado, separadores y límites de caracteres:

La página de configuración del plugin Breadcrumb

La página de configuración del plugin Breadcrumb

También hay toda una pestaña dedicada a las opciones de estilo. Hay varios botones de flecha entre los que puede elegir, así como tamaños de fuente y colores:

Las opciones de diseño del plugin Breadcrumb

Las opciones de diseño del plugin Breadcrumb

Si tiene algunas habilidades de codificación y quiere tener más control sobre su estilo, también puede usar la pestaña CSS Personalizada:

El plugin Breadcrumb Campo CSS personalizado

El plugin Breadcrumb Campo CSS personalizado

Por último, es importante visitar la pestaña Código abreviado para añadir sus breadcrumbs a su sitio:

El código abreviado y las opciones de fragmentos del complemento Breadcrumb

El código abreviado y las opciones de fragmentos del complemento Breadcrumb

Puede utilizar el código abreviado en cualquier parte de su sitio, al igual que con los otros plugins que hemos cubierto. Sin embargo, Breadcrumb también proporciona un fragmento de código que puede agregar a uno de sus archivos de plantilla para incorporar sus rutas en su encabezado, pie de página u otro lugar.

3. Use un Tema que Incluya Breadcrumbs

Mientras que generalmente se piensa en ellos en el contexto del control de la apariencia de su sitio, los temas de WordPress también pueden influir en la funcionalidad de su sitio web. Una manera de hacerlo es añadiendo breadcrumbs a sus páginas.

El inconveniente de usar un tema de WordPress para añadir breadcrumbs a un sitio existente de WordPress es que también implica cambiar la apariencia de su sitio web. Si usted tiene una marca establecida y una identidad de sitio, esta no es realmente una solución práctica, y probablemente estará mejor con un plugin.

Sin embargo, si usted está comenzando un nuevo sitio de WordPress o está ejecutando un rediseño del sitio web, elegir un tema que incorpore breadcrumbs es un método de bajo esfuerzo para agregarlas a su sitio. Además, hay varias opciones disponibles gratuitamente en el Directorio Temático de WordPress.

OceanWP

OceanWP es uno de los temas multiusos más populares de WordPress:

El tema del OceanWP

El tema del OceanWP

Incluye un código abreviado que puede utilizar para aplicar fácilmente breadcrumbs a sus páginas. También hay varias demostraciones disponibles para su uso con OceanWP que incorporan breadcrumb. Para usar el código abreviado, simplemente añada[oceanwp_breadcrumb] a un mensaje, página o widget de texto:

Añadiendo el breadcrumbs de OceanWP a un widget de texto

Añadiendo el breadcrumbs de OceanWP a un widget de texto

Puede personalizar sus breadcrumbs utilizando los siguientes parámetros:

Simplemente agregue alguno o todos estos parámetros directamente en los corchetes del código abreviado:

¿Problemas con el tiempo de inactividad y problemas con WordPress? Kinsta es la solución de hosting diseñada teniendo en cuenta el rendimiento y la seguridad! Consulta nuestros planes

Personalización de breadcrumb OceanWP con parámetros de atajo

Personalización de breadcrumb OceanWP con parámetros de atajo

Ahora debería ver sus breadcrumbs en las páginas correspondientes.

Astra

De la misma manera, Astra también facilita la adición de breadcrumb a su sitio web:

El tema del Astra

El tema del Astra

La forma más sencilla de hacer breadcrumbs con Astra es a través del Personalizador. Con el tema instalado y activado, vaya a Apariencia > Personalizar:

Acceso al Personalizador desde el panel de control de WordPress

Acceso al Personalizador desde el panel de control de WordPress

A continuación, seleccione la ficha Breadcrumb:

La ficha breadcrumbs Astra en el Personalizador

La ficha breadcrumbs Astra en el Personalizador

Aquí, verá un menú desplegable que le permite elegir dónde quieres mostrar sus breadcrumbs en la página:

Selección de la posición de la breadcrumb para el tema del Astra

Selección de la posición de la breadcrumb para el tema del Astra

Una vez que haya hecho su selección, también aparecerán algunas opciones de estilo:

Las opciones de estilo de breadcrumb Astra en el Personalizador

Las opciones de estilo de breadcrumb Astra en el Personalizador

Asegúrese de hacer clic en el botón Publicar del Personalizador para guardar los cambios.

4. Agregar Breadcrumbs Manualmente

Los plugins y temas son parte de lo que hace de WordPress una plataforma tan fácil de usar y accesible. Sin embargo, para algunos usuarios y desarrolladores más avanzados, pueden sentirse limitados. El código puede ser un medio muy creativo, y tener la habilidad de escribir libremente sus propias breadcrumbs puede ser de su agrado.

Para mostrar las breadcrumbs manualmente, tendrá que hacer dos cosas. Primero, tiene que añadir una función a su archivo functions.php para habilitarlos. He aquí un ejemplo del código que puede usar:


function get_breadcrumb() {
	echo 'Home';
	if (is_category() || is_single()){
		echo "  "  ";
		the_category (' • ');
			if (is_single()) {
				echo "  "  ";
				the_title();
			}
} elseif (is_page()) {
		echo "  "  ";
		echo the_title();
	} elseif (is_search()) {
		echo "  "  ";Search Results for…
		echo '"';
		echo the_search_query();
		echo '"';
	}
}

Una vez añadida la función, tendrá que llamarla en los archivos de plantilla donde desea que aparezcan sus breadcrumbs. Llamar a la función en single.php hará que aparezcan breadcrumbs en sus mensajes, llamar a header.php las muestra en cualquier lugar donde aparezca su encabezado, y así sucesivamente.

El código que usará debe ser algo así:


<div class="breadcrumb"><?php get_breadcrumb(); ?></div>

La modificación de estos archivos mostrará breadcrumbs en su sitio, pero no le permite cambiar su estilo para que coincidan con su diseño. Para ello, tendrás que ensuciarte las manos con algo de CSS también.

¿Cómo Estilizar su WordPress Breadcrumbs?

Es necesario estilizar las breadcrumbs si las codifica usted mismo. Sin embargo, también puede ser útil si está utilizando un plugin o un tema para añadirlos. Es posible que el estilo predeterminado que ofrecen estas herramientas no se adapte bien a su sitio, en cuyo caso es posible que desee modificarlas para mantener la coherencia.

Puede agregar CSS personalizado para dar estilo a sus breadcrumbs en la hoja de estilo de su tema (style.css) o en el área CSS adicional del Personalizador:

Incorporación de CSS adicionales para dar estilo a las breadcrumbs mediante el Personalizador

Incorporación de CSS adicionales para dar estilo a las breadcrumbs mediante el Personalizador

Hay muchas maneras de adaptar sus breadcrumbs para que coincidan con el diseño de su sitio, por ejemplo, ajustando su fuente, tamaño y color. También puede considerar elementos como márgenes, relleno, borde e iconos.

He aquí un ejemplo de algunos CSS que se pueden usar para darle estilo a sus breadcrumbs:


.breadcrumb {
	padding: 8px 15px;
	margin-bottom: 20px;
	list-style: none;
	background-color: #f5f5f5;
	border-radius: 4px;
}
.breadcrumb a {
	color: #428bca;
	text-decoration: none;
}

Hay muchas posibilidades cuando se trata de CSS. Por lo tanto, puede ser necesario experimentar un poco para obtener sus breadcrumbs con el aspecto exacto que usted desea.

¿Cómo Quitar WordPress Breadcrumbs de Su Sitio?

Aunque hay muchos beneficios al agregar breadcrumbs en su sitio, eso no significa que sean para todos. Algunas personas pueden encontrarlos confusos o sentir que hacen que las páginas del sitio estén demasiado abarrotadas.

Si desea eliminar breadcrumbs de su sitio de WordPress, puede hacerlo utilizando cualquier método que tenga sentido basado en cómo las agregó originalmente. Por ejemplo, si codificó sus breadcrumbs de forma personalizada, puede simplemente eliminar el código que ha añadido de los archivos de su tema.

Desactivar las breadcrumbs añadidas con un plugin suele ser tan simple como desactivar el plugin. En el caso de Yoast SEO, puede navegar a la pestaña Breadcrumbs en la configuración de la apariencia de la búsqueda, y cambiar el interruptor correspondiente a Desactivar.

Lo mismo puede decirse de los temas que permiten breadcrumbs a través de una configuración o atajos de WordPress. Sin embargo, hay algunos temas que añaden breadcrumbs por defecto. Eliminarlos puede ser un poco más difícil, especialmente si no tienes mucha experiencia con el código.

Si esta es su situación, tendrá que navegar hasta el archivo header.php de su sitio. Allí, ejecute un comando de búsqueda de «breadcrumb». Esto debería resaltar el código que llama a la función que añade breadcrumbs a su sitio (si existe aquí):

Encontrar el código de las breadcrumbs en el archivo de plantilla de encabezado del tema

Encontrar el código de las breadcrumbs en el archivo de plantilla de encabezado del tema

Borre esta línea de código para eliminar las breadcrumbs de su sitio. Si no encontró el código correcto, puede intentar este proceso de nuevo en sus archivos single.php y page.php, para ver si la función se llama en una de esas plantillas en su lugar.

Si todo lo demás falla, póngase en contacto con el desarrollador de su tema para obtener asistencia. Tenga en cuenta que la actualización del tema de WordPress puede anular cualquier cambio que haya realizado en sus archivos. Es por eso que las mejores prácticas sugieren usar un tema hijo por esta razón, con el fin de preservar sus personalizaciones indefinidamente.

Las breadcrumbs son elementos diminutos con un enorme impacto en su UX y SEO. Aprenda a añadirlos a su sitio #WordPress con esta guía! 🍞👣Click to Tweet

Resumen

Fuerte UX y SEO son la clave para un sitio web de éxito. Habilitar las breadcrumbs de WordPress puede hacer que sea más fácil para los visitantes navegar a través de su sitio, al mismo tiempo que ayuda a los motores de búsqueda a entender su estructura e indexar sus páginas con precisión.

En este post, hemos cubierto cuatro métodos para añadir breadcrumbs a su sitio de WordPress:

  1. Poner en marcha el breadcrumbs en Yoast SEO.
  2. Instale y configure un plugin de WordPress breadcrumbs.
  3. Use un tema que incluya breadcrumbs.
  4. Agregue el breadcrumbs manualmente usando el código.

¿Tiene alguna pregunta sobre las breadcrumbs de WordPress o cómo utilizarlas? Háganoslo saber en la sección de comentarios a continuación!


Si le ha gustado este artículo, entonces le encantará la plataforma de Kinsta WordPress hosting. Acelere su sitio y reciba soporte 24/7 de nuestro equipo de WordPress veterano. Nuestra infraestructura potenciada por Google Cloud se centra en escalamiento automático, rendimiento y seguridad. ¡Déjenos mostrarle la diferencia con Kinsta! Conozca nuestros planes