Cómo agregar migas de pan a su sitio web de WordPress

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 hasta el "inicio" de un sitio web (o página de inicio). Permiten a los usuarios ver cómo encaja la página actual en toda la estructura del sitio al proporcionar un seguimiento en línea de enlaces (o etiquetas) que conducen hasta la página de inicio.

Página de productos 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 salto en los rankings 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 encuentren con una de sus páginas de forma orgánica (reduciendo su tasa de rebote).

Pensaría que agregar un sistema integrado de nativación 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 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. Aparte de Yoast SEO, el complemento Breadcrumb NavXT es otra gran opción que es altamente personalizable y también funciona bien con nuestro propio tema Divi.

Suscríbete a nuestro canal de Youtube

Cómo agregar migas de pan a su sitio web de WordPress usando Yoast

Para agregar rutas de navegación a su sitio web de WordPress utilizando Yoast SEO, deberá realizar 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 Tablero 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.

Agregue el fragmento de código Breadcrumbs a su tema secundario de WordPress

A continuación, debemos agregar un breve fragmento de código a sus archivos de tema de WordPress. Entonces, si aún no lo ha hecho, es una buena idea crear un tema hijo. Para este ejemplo, le mostraré cómo agregar el fragmento de código de migas de pan al tema TwentyNineteen WordPress predeterminado. 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 al archivo header.php (para que aparezca en todo el sitio).

Para este ejemplo, voy a agregar el código de migas de pan al archivo header.php de mi tema hijo. 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:

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

Esto mostrará migas de pan directamente debajo del encabezado de todas las páginas, una ubicación común para las migas de pan.

Habilite y configure Yoast Breadcrumbs en la configuración del complemento

Una vez que se haya agregado el fragmento de código a su tema infantil de WordPress, todo lo que le queda por hacer es activar Breadcrumbs en la configuración del complemento Yoast SEO. Para hacer esto, vaya a su Panel 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 la ruta de navegación según sus necesidades. Es posible que también desee elegir una taxonomía para mostrar en las rutas de navegación de su publicación. Para este ejemplo, voy a configurar mis publicaciones para que muestren categorías en las rutas de navegación.

Ahora sigamos adelante 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 rutas de navegación.

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 rutas de exploración que elegí en la configuración de rutas de exploración.

Es posible que deba ajustar el estilo de sus migas de pan utilizando algún CSS externo. Para hacer eso, puede usar el ID de CSS "breadcrumbs" que se incluyó 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:

#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:

#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.

[wpseo_breadcrumb]

Agregar Breadcrumbs a su sitio web de WordPress usando Breadcrumb NavXT

Si no desea instalar Yoast SEO por alguna razón o si está buscando otra opción simple, 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. A continuación, 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 integrado de navegación Breadcrumb que se proporciona en la página de widgets. Esto le permitirá arrastrar el widget a las diversas áreas de widgets proporcionadas por su tema. Para hacer esto, vaya a su Panel de WordPress y navegue hasta 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. Así es como se ve en una publicación.

Al igual que en el ejemplo de Yoast Breadcrumb, también puede llamar a la ruta de navegación 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 de schema.org:

<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.

Configurar las migas de pan usando la configuración del complemento

El complemento Breadcrumb NavXT tiene algunas opciones poderosas para configurar sus rutas de navegación. Puede personalizar toda la plantilla de sus rutas de navegación para diferentes taxonomías y mucho más. Puede obtener acceso a estas configuraciones desde su Panel de WordPress navegando a Configuración> Breadcrumb NavXT.

Diseñando las migas de pan

Si desea diseñar las rutas de exploración, puede apuntar a la clase llamada "ruta de exploración" que se incluye en el código.

Simplemente agregue el siguiente CSS al archivo style.css de su tema hijo o al CSS adicional del personalizador de temas:

.breadcrumbs {

/*add css to style breadcrumbs here*/

}

Si desea utilizar 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 rutas de navegación 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 de 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 tener noticias tuyas en los comentarios.

¡Salud!