Cómo agregar migas de pan a WordPress

Cuando navegamos por un sitio web, a veces nos sentimos como Hansel y Gretel en el bosque: completamente perdidos.

Llegamos a una página desde un motor de búsqueda o una red social y es imposible entender dónde estamos en el sitio.

Afortunadamente, al igual que las migas de pan en la historia, hay una manera para que el usuario de Internet encuentre el camino de regreso: el rastro de migas de pan .

En esta publicación, explicaremos en detalle cómo agregar migas de pan en WordPress , usando diferentes métodos.

¡Tus mejores proyectos de WordPress necesitan el mejor anfitrión!

WPMarmite recomienda Bluehost: gran rendimiento, gran soporte. Todo lo que necesitas para un gran comienzo.

Prueba Bluehost

¿Qué son las migas de pan en WordPress?

Las migas de pan son una representación visual de la estructura de árbol de un sitio web .

En la mayoría de los casos, toma la forma de una lista de enlaces que se muestran horizontalmente. Suele encontrarse cerca del título de la página y/o del menú (su ubicación exacta varía de un sitio a otro).

Cada rastro de migas de pan muestra enlaces a las páginas "principales" de la página visitada por el usuario de Internet, de modo que vuelve a trazar el camino que el usuario de Internet puede seguir para volver a la página de inicio:

Algunos ejemplos:

Como muestran estos ejemplos, un rastro de migas de pan puede ser más o menos largo y complejo.

Su tamaño depende de lo que se denomina nivel de profundidad . Este término se refiere al número de “pasos” antes de volver a la página de inicio.

Tenga en cuenta que no todos los sitios necesitan un rastro de migas de pan. Si solo hay un nivel de profundidad, no es necesario porque la ruta a la página de inicio es directa.

¿Cuál es el propósito de un rastro de migas de pan?

En un sitio web, el rastro de migas de pan sirve para varios propósitos:

• Para dar al usuario un punto de referencia en la estructura de árbol del sitio
• Para proporcionar una opción de navegación rápida
• Mejora la presentación de tu sitio en los motores de búsqueda
• Fortalecer el enlace interno , que es útil para la optimización de motores de búsqueda (SEO)

Su principal utilidad es permitir que el usuario encuentre su camino en su sitio web .

Como se puede hacer clic en cada enlace, también le permite subir rápidamente por la estructura de árbol, hasta la página de inicio.

Sin embargo, los rastros de migas de pan no solo son utilizados por los usuarios de Internet. También son utilizados por los motores de búsqueda por las mismas razones: para comprender cómo está estructurado el sitio y poder ir de página en página hasta la página de inicio.

Pero eso no es todo. Algunos motores de búsqueda (como Google, Qwant o DuckDuckGo) lo utilizan para personalizar la visualización de los resultados:

Así, directamente desde el motor de búsqueda, el usuario de Internet obtiene una representación de la ubicación de la página en el sitio.

¿Por qué WordPress no ofrece migas de pan por defecto?

Con WordPress, crear un rastro de migas de pan requiere algunos pasos, que describiremos a continuación.

Como este es un elemento de navegación presente en muchos sitios web, es razonable preguntarse por qué esta opción está ausente de forma predeterminada.

Esta pregunta ha sido objeto de varias discusiones entre los colaboradores del proyecto.

De estas discusiones, parece que la creación de migas de pan se considera una característica que se espera de un complemento o tema , no del núcleo de WordPress.

Además, como vimos anteriormente, no todos los sitios lo necesitan. Por lo tanto, es más fácil para el usuario instalar un complemento adaptado a sus necesidades.

Creación y adición de migas de pan

Hay dos opciones para agregar migas de pan a WordPress:

1. Sabes cómo desarrollar: puedes codificar directamente en el tema.
2. De lo contrario, necesitará un complemento o tema que tenga esta función.

Cubriremos la segunda opción en este artículo.

¿Dónde se agregan migas de pan en WordPress?

Antes de entrar en los detalles de la creación, es importante entender dónde colocar este elemento de navegación.

De hecho, los complementos no lo agregarán automáticamente en su tema . Le proporcionarán un fragmento de código para pegar donde desee que aparezca.

Como hemos visto con los ejemplos presentados anteriormente, generalmente se encuentra cerca del menú o del título de la publicación.

En la mayoría de los casos, tendrá que modificar uno de estos tres archivos:

• header.php (en el 99% de los casos)
• single.php
• page.php

Si aún no lo ha hecho, le sugerimos que cree un tema secundario antes de realizar estos cambios. Esto evitará que se sobrescriba cuando actualice su tema.

Finalmente, con el desarrollo del editor del sitio, si tu tema es compatible, no tendrás que modificar los archivos. Solo tendrá que usar el bloque que ofrece el complemento, si existe.

Si no, siempre puedes pegar el shortcode.

sin complemento

Puede que te decepcione, pero no hay una solución mágica.

Realmente depende del tema que haya elegido . En caso de duda, la forma más sencilla es consultar la documentación o ponerse en contacto con el equipo de desarrollo, si puede.

Sin embargo, aquí está el procedimiento a seguir para los principales temas de WordPress:

• Astra: ve a Apariencia > Personalizar > Miga de pan . A continuación, puede personalizar la pantalla.
• Blocksy: ve a Apariencia > Personalizar > General > Breadcrumb para ajustar las opciones de visualización a tus necesidades.

Tanto para Astra como para Blocksy, la ubicación está definida por el tema. Si el valor predeterminado no le conviene, estos dos temas ofrecen un código corto que le permite mostrar su rastro de migas de pan donde quiera:

• [astra_breadcrumb] para Astra.
• [blocksy_breadcrumbs] para Blocksy.

con un complemento

Hemos seleccionado seis complementos para usted que ofrecen la creación de un rastro de migas de pan. Detallaremos las opciones para agregar cada uno de ellos al tema.

Crea un rastro de migas de pan con Yoast SEO

Este es el complemento de referencia de SEO. Ofrece una gran cantidad de opciones, incluida la creación de un rastro de migas de pan.

Para aprovechar al máximo todas las opciones que ofrece el complemento, descubra cómo configurar Yoast SEO.

Una vez que el complemento esté instalado y activado, haga clic en "Configuración", luego en Avanzado> Migas de pan.

La pantalla te ofrece diferentes opciones de personalización para adaptarla a tus necesidades.

Si tienes dudas, ¡no dudes en probarlo!

Una vez configuradas las migas de pan, solo tienes que añadirlas a tu tema.

Advertencia: si marcó "Deshabilitado" en la opción "Habilitar ruta de migas de pan para su tema", no aparecerá en su tema. ¡Lo cual tiene sentido!

Para añadirlo a tu tema, tienes varias opciones:

1. Usando el bloque "Yoast Breadcrumbs" y el editor del sitio

Esta es la opción más fácil, pero requiere que su tema sea compatible con el editor del sitio (anteriormente Edición completa del sitio o FSE). Si su tema es reciente o se actualizó recientemente, probablemente lo sea.

Para averiguarlo, pase el cursor sobre el menú "Apariencia". Si aparece un enlace de "Editor", su tema es compatible.

Luego puede elegir las diferentes plantillas de página en las que desea que aparezca el rastro de migas de pan.

En la mayoría de los casos, serán las siguientes plantillas:

• Soltero
• Archivo
• Página

Según el tema y el tipo de sitio, es posible que deba agregar migas de pan a otras plantillas. Esta lista no es exhaustiva.

El siguiente video muestra cómo agregar el bloque "Yoast Breadcrumbs" sobre el título:

2. Insertando manualmente el bloque en cada una de tus publicaciones

Este método es similar al anterior y es útil para las personas que no quieren o no pueden usar el editor del sitio.

Aquí, el bloque se añade manualmente a cada una de tus publicaciones (páginas, posts, productos…).

Esta técnica te permite agregar migas de pan fácilmente, pero requiere que edites cada una de tus publicaciones una por una . Esto puede ser tedioso si ya ha publicado mucho contenido.

Además, está limitado en términos de opciones de posicionamiento.

3. En el archivo correcto

Este método está reservado para los usuarios más avanzados, ya que requiere manipular código.

Antes de cualquier manipulación, le recomendamos encarecidamente que haga una copia de seguridad de su tema.

Solo tienes que pegar el siguiente código donde quieras que aparezca el rastro de migas de pan:

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

Mostrar migas de pan con SEOPress

SEOPress es un complemento de fabricación francesa dedicado al SEO.

Una vez que el complemento esté instalado y activado, haga clic en la pestaña "PRO", luego en "Breadcrumbs".

A continuación, tiene acceso a diferentes opciones de personalización, adaptadas a sus necesidades.

Una vez que se configura el rastro de migas de pan, puede agregarlo a su tema.

Tienes tres métodos:

1. Usando el bloque "Breadcrumbs" y el editor del sitio

El procedimiento es similar al descrito anteriormente:

1. En el menú "Apariencia" de WordPress, haga clic en "Editor".
2. Agregue el bloque "Breadcrumbs" en la ubicación deseada en las diversas plantillas de página correspondientes.

2. Insertando manualmente el bloque en cada una de tus publicaciones

Aquí, el bloque se añade manualmente a cada una de tus publicaciones (páginas, posts, productos…):

3. Modificando el archivo apropiado

SEOPress le ofrece un fragmento de código para pegar en los archivos PHP apropiados:

 <?php
 if(function_exists("seopress_display_breadcrumbs")) {
 seopress_display_breadcrumbs();
 }
 ?>

Cree un rastro de migas de pan con Rank Math SEO

Rank Math es la "navaja suiza de su WordPress SEO" que está invadiendo el territorio de Yoast SEO.

El complemento ofrece muchas funciones para mejorar su SEO, incluidas las migas de pan (de lo contrario, no se lo contaremos aquí).

Para crear un rastro de migas de pan con Rank Math, debe seguir estos pasos:

1. Instalar y activar el complemento.
2. En la interfaz de administración de WordPress, haga clic en "Panel" (el enlace justo debajo de Rank Math).
3. En la parte superior derecha de su pantalla, haga clic en "Modo avanzado".
4. Luego haga clic en "Configuración general".
5. Finalmente, haga clic en "Migas de pan" y luego en "Habilitar migas de pan".

A diferencia de sus competidores, al momento de escribir este artículo, Rank Math no ofrece un bloque de WordPress dedicado.

En ausencia de un bloque dedicado, deberá usar un código abreviado.

Con este método podrás añadir migas de pan a tu sitio con el editor de sitios o manualmente, publicación a publicación, como hemos visto con Yoast SEO o SEOPress.

1. Usando el código abreviado

Para agregar las migas de pan de Rank Math con un shortcode, primero debe agregar el bloque nativo de WordPress "Shortcode", luego pegue el siguiente código: [rank_math_breadcrumb] .

2. Directamente en los archivos PHP

Aquí, el procedimiento es el mismo que el descrito para Yoast SEO y SEOPress.

Aquí está el código para pegar en los archivos apropiados:

 /**
 * Use the following code in your theme template files to display breadcrumbs:
 */
 <?php if (function_exists('rank_math_the_breadcrumbs')) rank_math_the_breadcrumbs(); ?>

Cree un rastro de migas de pan con Breadcrumb NavXT

Los tres complementos presentados hasta ahora estaban dedicados a la optimización SEO de su sitio. La creación de una miga de pan fue solo una de las características.

Si solo necesita este elemento de navegación y ya utiliza otros medios para optimizar su SEO, le recomendamos Breadcrumb NavXT.

Creado en 2017, el complemento se ha descargado varios millones de veces y es popular entre muchos webmasters por su flexibilidad y facilidad de uso.

Incluso se puede mejorar con complementos.

Después de instalar y activar el complemento, vaya a "Configuración" y luego al menú "Breadcrumb NavXT".

Una vez configurado, puedes agregar el bloque “Breadcrumb Trail” en el editor de contenido o manualmente en cada publicación.

Para usuarios avanzados, el código para agregar en los archivos es el siguiente:

 <div class="breadcrumbs" typeof="BreadcrumbList" vocab="https://schema.org/">
 <?php
 if( function_exists('bcn_display') ) {
 bcn_display();
 }?>
 </div>

Cómo agregar migas de pan con Elementor

De forma predeterminada, Elementor no permite la creación de rutas de navegación.

Por lo tanto, la creación y configuración deberá realizarse con uno de los complementos mencionados anteriormente.

Elementor será útil para alterar la visualización de migas de pan en su tema y personalizar su apariencia, sin tener que manipular los archivos de su tema.

Solo Breadcrumb NavXT ofrece una integración gratuita con Elementor.

Solo tienes que buscar el bloque correcto en la biblioteca de elementos de Elementor y agregarlo a tu página:

Funciona de manera similar con SEOPress y Rank Math, pero necesita la versión paga de estos complementos para beneficiarse del widget de Elementor.

Para Yoast SEO, deberá tener la versión paga de Elementor para usar el widget "Breadcrumbs".

Puede usar estos códigos cortos con el widget "Código corto" de Elementor.

Cómo agregar pan rallado con Divi

Al igual que Elementor, su principal competidor, Divi, no ofrece de forma nativa una opción para crear y agregar migas de pan en WordPress.

Para hacerlo, puede usar el complemento gratuito "Breadcrumbs Divi Module" o usar uno de los siguientes complementos y su código abreviado:

• Yoast SEO: [wpseo_breadcrumb]
• SEOPress: [seopress_breadcrumbs]
• Clasificación matemática: [rank_math_breadcrumb]

Únase a los suscriptores de WPMarmite

Obtenga las últimas publicaciones de WPMarmite (y también recursos exclusivos).

SUSCRÍBASE AHORA

Agregar migas de pan en una tienda WooCommerce

WooCommerce ofrece migas de pan de forma predeterminada. No tienes que hacer nada para agregarlo.

Personaliza el estilo

Aunque los complementos descritos en este artículo le permiten personalizar el contenido que se muestra, no le permiten cambiar la forma en que se muestra.

Esto depende, de hecho, de su tema, que generalmente ofrece un diseño predeterminado.

Para adaptar la representación gráfica a sus necesidades, deberá utilizar código CSS.

En la mayoría de los casos, el código HTML generado para mostrar el rastro de migas de pan contiene un atributo class="breadcrumb" , que luego puede orientar en CSS.

El nombre exacto de la clase puede variar (por ejemplo, para WooCommerce se llama woocommerce-breadcrumb ), pero siempre contiene la palabra breadcrumb .

Sin embargo, dado que los detalles del código CSS son específicos para sus necesidades y su sitio, no podemos ir más allá en nuestras explicaciones sobre este tema.

Agregar migas de pan a la interfaz de administración de WordPress

Hasta ahora, hemos explicado cómo mostrar un rastro de migas de pan en la parte pública de su sitio, para ayudar al usuario web.

Pero en algunos casos, también puede resultar muy útil en la interfaz de administración de WordPress .

Desafortunadamente, al momento de escribir este artículo, no existe una solución simple para lograr esto.

No se espera que WordPress tenga esta función de forma predeterminada, por lo que tendría que confiar en un complemento.

A pesar de nuestra investigación, no encontramos un complemento que proporcione esto.

Si esta es una característica importante para usted, parece que la única solución es utilizar los servicios de un desarrollador.

Conclusión

El rastro de migas de pan es un elemento de navegación discreto pero esencial.

He aquí un recordatorio de sus funciones principales:

1. Para permitir a los usuarios encontrar su camino en la estructura de árbol del sitio
2. Ofrecer un medio de navegación rápida
3. Optimice la presentación de su sitio en ciertos motores de búsqueda
4. Fortalecer la vinculación interna , lo cual es útil para el SEO

Para agregar migas de pan a su sitio de WordPress, tiene tres opciones: codifíquelo usted mismo, elija un tema que ofrezca uno de forma predeterminada o use un complemento.

Sea cual sea la opción que elijas, ya tienes todas las migas de pan a mano para no perder más usuarios.

¿Y usted, ofrece un rastro de migas de pan en su sitio de WordPress? En caso afirmativo, ¿qué método utiliza para mostrarlo? Cuéntanoslo todo en los comentarios.