El término «migas de pan» se refiere a una herramienta de navegación de sitios web eficiente que (como nos enseñaron Hansel y Gretel) está destinada a ayudar a rastrear los pasos de uno hasta el «inicio» (o página de inicio) de un sitio web. Permiten a los usuarios ver cómo encaja la página actual en toda la estructura del sitio proporcionando un seguimiento en línea de enlaces (o etiquetas) que conducen hasta la página de inicio.
Página de producto de Home Depot con migas de pan
Las migas de pan son en realidad más importantes para su sitio web de WordPress de lo que piensa. No solo mejoran la experiencia del usuario, sino que también pueden darle a su sitio un impulso en las clasificaciones de búsqueda . A Google le gusta este elemento estructural en un sitio web, y los visitantes tendrán una ayuda de navegación crucial cuando se topen con una de sus páginas de forma orgánica (reduciendo su tasa de rebote ).
Podría pensar que agregar un sistema de navegación tan integrado a su sitio web sería difícil, pero en realidad es bastante simple con el uso de un complemento. De hecho, si está utilizando el complemento Yoast SEO , tiene una ventaja inicial porque la funcionalidad de migas de pan ya está integrada en Yoast. Y agregar migas de pan a través de Yoast es definitivamente uno de los métodos preferidos que existen. Además de Yoast SEO, el complemento Breadcrumb NavXT es otra excelente opción que es altamente personalizable y también funciona bien con nuestro propio tema Divi . Para obtener una lista completa de complementos disponibles, consulte nuestra revisión de los 5 mejores complementos de migas de pan de WordPress .
Suscríbete a nuestro canal de Youtube
Para agregar migas de pan a su sitio web de WordPress usando Yoast SEO, deberá seguir tres pasos simples:
- Instalar y activar el complemento Yoast SEO
- Agregar el fragmento de código Breadcrumbs a su tema de WordPress
- Habilite / configure Breadcrumbs the Yoast Breadcrumbs en la configuración del complemento
Instalar y activar el complemento Yoast SEO
Para instalar el complemento Yoast SEO, vaya a su Panel de WordPress y navegue a Complementos> Agregar nuevo. Luego busque el repositorio de WordPress para «yoast». Cuando vea el complemento Yoast SEO, haga clic para instalar y activar el complemento.
A continuación, debemos agregar un pequeño fragmento de código a sus archivos de temas de WordPress. Entonces, si aún no lo ha hecho, es una buena idea crear un tema secundario . Para este ejemplo, le mostraré cómo agregar el fragmento de código de migas de pan al tema predeterminado de WordPress de TwentyNineteen. Puede agregar el código a cualquier archivo/plantilla de tema, pero en su mayor parte, querrá agregarlo a su archivo single.php (para que aparezca en todas las publicaciones), archivo page.php (para que aparezca en todas las páginas ), o a su archivo header.php (para que aparezca en todo el sitio).
Para este ejemplo, agregaré el código de migas de pan al archivo header.php de mi tema secundario. Una vez que copie el archivo header.php del tema principal, ábralo para editar el archivo en un editor de código de su elección .
Luego, en la parte inferior del archivo header.php, agregue el siguiente fragmento de php proporcionado por Yoast para activar la funcionalidad Breadcrumbs:
|
01
02
03
04
05
|
<?phpif ( function_exists('yoast_breadcrumb') ) { yoast_breadcrumb( '<p id="breadcrumbs">','</p>' );}?> |
Esto mostrará las migas de pan directamente debajo del encabezado de todas las páginas, una ubicación común para las migas de pan.
Una vez que el fragmento de código se haya agregado a su tema de WordPress Child, todo lo que le queda por hacer es activar Breadcrumbs en la configuración del complemento Yoast SEO. Para hacer esto, vaya a su Tablero de WordPress y navegue a SEO> Apariencia de búsqueda y luego haga clic en la pestaña Breadcrumbs. En la configuración de Migas de pan, asegúrese de habilitar las migas de pan cambiando la opción a «habilitado». Luego puede configurar los ajustes de la ruta de navegación según sus necesidades. También puede elegir una taxonomía para mostrar en las migas de pan para su publicación. Para este ejemplo, configuraré mis publicaciones para que muestren categorías en las migas de pan.
Ahora avancemos y veamos cómo se ven las migas de pan en una de las publicaciones que creé en el tema TwentyNineteen.
Así es como se ve la publicación antes de habilitar las migas de pan.
Así es como se ve la publicación después de habilitar las migas de pan. Este ejemplo de publicación en particular tiene una categoría («WordPress») y una categoría principal («Diseño web») para mostrarle la taxonomía de categorías de las migas de pan que elegí en la configuración de migas de pan.
Es posible que deba ajustar el estilo de sus migas de pan usando algún CSS externo. Para hacer eso, puede usar las «migas de pan» de CSS ID que se incluyeron en el código php. Abra el archivo style.css de su tema secundario (o puede agregarlo en el personalizador de temas en CSS adicional) y agregue lo siguiente:
|
01
02
03
04
05
|
#breadcrumbs {/*Add breadcrumb styling here*/} |
Para el tema TwentyNineteen, es posible que desee hacer coincidir el margen del texto de mi encabezado agregando el siguiente CSS personalizado:
|
01
02
03
04
05
|
#breadcrumbs {margin: 0 calc(10% + 60px);} |
Si desea tener más control sobre la ubicación específica de sus migas de pan, también puede usar el siguiente código abreviado para publicaciones o páginas individuales.
|
01
|
<span><span><a href="https://www.elegantthemes.com/blog">Blog</a></span> / <span><a href="https://www.elegantthemes.com/blog/category/tips-tricks">Tips & Tricks</a></span> / <span class="breadcrumb_last" aria-current="page">How To Add Breadcrumbs To Your WordPress Website</span></span> |
Si por alguna razón no quieres instalar Yoast SEO o si buscas otra opción sencilla, el complemento Breadcrumb NavXT es una excelente opción.
Para instalar el complemento , vaya a su Tablero de WordPress y navegue a Complementos> Agregar nuevo. Luego busque en el repositorio de WordPress «breadcrumb navxt». Una vez que vea el complemento, haga clic para instalarlo y activarlo.
Para llamar a las migas de pan para que se muestren en su sitio web, puede usar el widget Breadcrumb NavXT incorporado que se proporciona en la página de widgets. Esto le permitirá arrastrar el widget a las distintas áreas de widgets proporcionadas por su tema. Para hacer esto, vaya a su Tablero de WordPress y navegue a Apariencia> Widgets. Luego arrastre el widget al área de widgets o su elección y actualice la configuración del widget.
Para este ejemplo, estoy usando el tema Divi para mostrar las migas de pan en la parte superior de mi barra lateral. Esto es lo que parece en una publicación.
Al igual que en el ejemplo de Yoast Breadcrumb, también puede llamar al rastro de migas de pan a su sitio agregando el código necesario a su tema hijo. Aquí está el código que proporcionan que es compatible con la lista de migas de pan schema.org:
|
01
02
03
04
05
06
07
|
<div class="breadcrumbs" typeof="BreadcrumbList" vocab="https://schema.org/"> <?php if(function_exists('bcn_display')) { bcn_display(); }?></div> |
Como estoy usando el tema Divi para este ejemplo, agregaré el código al archivo Single.php de mi tema Divi Child justo encima de la etiqueta del artículo. Esto mostrará las migas de pan en la parte superior de todas mis publicaciones.
Así es como se ve una publicación después de agregar el código.
El complemento Breadcrumb NavXT tiene algunas opciones poderosas para configurar sus migas de pan. Puede personalizar toda la plantilla de sus migas de pan para diferentes taxonomías y mucho más. Puede obtener acceso a esta configuración desde su Panel de WordPress navegando a Configuración> Breadcrumb NavXT.
Si desea diseñar las migas de pan, puede apuntar a la clase llamada «migas de pan» que se incluye en el código.
Simplemente agregue el siguiente CSS al archivo style.css de su tema secundario o al CSS adicional del personalizador de temas:
|
01
02
03
04
05
|
.breadcrumbs {/*add css to style breadcrumbs here*/} |
Si desea usar el widget de ruta de navegación con el tema Divi, también puede usar el módulo de la barra lateral de Divi para agregar estilo a la ruta de navegación dentro de Divi Builder.
Pensamientos finales
Las migas de pan son una parte importante de un sitio web tanto para la usabilidad como para el SEO. Entonces, si está considerando agregar migas de pan a su sitio de WordPress, le sugiero que comience con los métodos proporcionados por los complementos mencionados en este artículo (Yoast SEO y Breadcrumb NavXT). Tiene más sentido usar las migas de pan de Yoast si ya está aprovechando su complemento SEO, ya que ya está a su disposición. Sin embargo, Breadcrumb NavXT también es una opción altamente personalizable. Claro, es posible que deba acceder a los archivos de su tema, pero en general, el proceso es simple. En todo caso, espero que esto ayude a aliviar el dolor de obtener migas de pan en su propio sitio de WordPress.
Espero escuchar de usted en los comentarios.
¡Salud!