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

Publicado: 2023-02-12

La navegación es una parte vital de cualquier sitio web y hay más de una forma de proporcionarla. El menú principal de su sitio web es la principal herramienta de navegación que lleva a los usuarios al contenido que desean. Sin embargo, no les dice a sus clientes dónde se encuentran actualmente en su sitio web.

Un menú de migas de pan es un sistema de navegación secundario que les dice a sus clientes dónde están en relación con su página de inicio. Esto les ayuda a navegar por las páginas de su sitio web con facilidad y evitar perderse.

En este artículo, veremos qué son las migas de pan y cómo benefician a su sitio web. Luego le mostraremos cómo agregar migas de pan a su sitio web de WordPress. ¡Empecemos!

Tabla de contenido
1. ¿Qué son las migas de pan en WordPress?
2. Beneficios de agregar pan rallado
3. Cómo agregar migas de pan en WordPress
3.1. Método 1: usar un complemento
3.1.1. Paso 1: descarga el complemento Yoast SEO
3.1.2. Paso 2: agregue una función a su archivo header.php
3.1.3. Paso 3: activa el soporte de migas de pan
3.2. Método 2: Codificación de sus propias migas de pan
3.2.1. Paso 1: crear una función de esqueleto
3.2.2. Paso 2: Agregar reglas básicas
3.2.3. Paso 3: agregue la declaración 'if else'
3.2.4. Paso 4: Agregar función al encabezado del tema
4. Personaliza tu sitio con WP Engine

¿Qué son las migas de pan en WordPress?

Breadcrumbs es el término utilizado para describir un menú de navegación jerárquico. Este tipo de menú implica un rastro de enlaces, similar al rastro de migas de pan dejado por Hansel y Gretel:

Dado que muchos usuarios no ingresan a su sitio de WordPress a través de la página de inicio, la navegación con migas de pan les ayuda a comprender dónde han aterrizado. Los motores de búsqueda también usan migas de pan para comprender mejor la jerarquía de sus páginas web.

Beneficios de agregar pan rallado

Agregar menús de migas de pan de WordPress a su sitio web ofrece varios beneficios. A Google le encantan las migas de pan, por ejemplo, por lo que esta función puede mejorar su optimización de motores de búsqueda (SEO) y atraer más visitantes a su sitio.

Los menús de migas de pan también pueden reducir las tasas de rebote, ya que mejoran la experiencia del usuario (UX) de su sitio. Cuando los usuarios pueden navegar fácilmente por su sitio web, es más probable que pasen tiempo en él.

Cómo agregar migas de pan en WordPress

Puede agregar migas de pan a su sitio web de WordPress de dos maneras. El método más fácil es usar un complemento de WordPress, pero también puede codificar migas de pan en el archivo header.php de su sitio. Antes de usar cualquiera de los métodos, debe crear una copia de seguridad de su sitio web en caso de que algo salga mal.

Método 1: usar un complemento

La forma más fácil de agregar migas de pan a WordPress es con un complemento de migas de pan. Hay muchos complementos que puede usar, incluidos Breadcrumb NavXT y Yoast SEO:

Yoast SEO suele ser la mejor opción, porque es probable que sea un complemento que su sitio web ya utiliza.

Paso 1: descarga el complemento Yoast SEO

Dado que Yoast es un complemento de SEO, ofrece una amplia gama de funciones. Eso incluye la creación y el estilo de la navegación con migas de pan.

Para usar este complemento, deberá descargarlo del directorio de complementos de WordPress. Simplemente puede dirigirse a la página Complementos de su sitio, buscar "Yoast SEO" e instalar y activar el complemento como cualquier otro.

Paso 2: agregue una función a su archivo header.php

Después de activar el complemento, debe agregar una función al archivo header.php de su sitio. Para acceder a este archivo, vaya a Apariencia > Editor de temas y seleccione el archivo para abrirlo.

Luego, agregue el siguiente código donde desee que aparezca el menú de configuración de la ruta de navegación:

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

En general, querrá colocar este código al final de su archivo header.php . Sin embargo, puede experimentar con la ubicación del menú, revisando la parte frontal de su sitio para ver cómo se ve el resultado.

Incluso puede agregar la función anterior al archivo single.php o page.php de su tema, si desea habilitar la función de ruta de navegación para que aparezca en otra parte de la página. Solo asegúrate de agregarlo solo en un lugar.

Paso 3: activa el soporte de migas de pan

Finalmente, deberá activar el soporte de migas de pan. En Yoast SEO, esto significa navegar a SEO > Aspecto de búsqueda > Migas de pan :

¡Simplemente cambie el interruptor a "Habilitado" y listo! Su menú de migas de pan de WordPress estará configurado y listo para usar.

Método 2: Codificación de sus propias migas de pan

Agregar migas de pan del sitio web también se puede hacer manualmente a través de la codificación. Si no desea utilizar un complemento de migas de pan, puede agregar migas de pan sin uno. Antes de intentar esto, es posible que desee leer sobre los microdatos para aprovechar al máximo el potencial de SEO de las migas de pan de WordPress.

Paso 1: crear una función de esqueleto

Para agregar migas de pan a WordPress manualmente, deberá crear una función PHP. El primer paso para crear esta función es construir el esqueleto. Su función básica necesitará un nombre único para evitar conflictos con otras funciones.

function my_breadcrumbs() {
/* Breadcrumbs code will go here */
}

La función anterior es el esqueleto, y el resto del código de migas de pan se colocará entre llaves.

Paso 2: Agregar reglas básicas

Después de crear el esqueleto, deberá agregar reglas a la función. Las reglas deben colocarse en la sección de migas de pan:

/* Change according to your needs */
$show_on_homepage = 0;
$show_current = 1;
$delimiter = '»';
$home_url = 'Home';
$before_wrap = '<span clas="current">';
$after_wrap = '</span>';

/* Don't change values below */
global $post;
$home_url = get_bloginfo( 'url' );

Las reglas anteriores generalmente usan variables, por lo que se pueden cambiar más adelante. Las dos primeras variables usan valores booleanos, donde "0" es falso y "1" es verdadero.

Paso 3: agregue la declaración ' if else '

Debajo de las variables, debe agregar una declaración 'if else'. Esta declaración verificará si un usuario está en la página de inicio de su sitio web o no. Con base en esta información, la declaración determinará si se muestran o no las migas de pan:

/* Check for homepage first! */
if ( is_home() || is_front_page() ) {
$on_homepage = 1;
}
if ( 0 === $show_on_homepage && 1 === $on_homepage ) return;

/* Proceed with showing the breadcrumbs */
$breadcrumbs = '<ol itemscope itemtype="http://schema.org/BreadcrumbList">';

$breadcrumbs .= '<li itemprop="itemListElement" itemtype="http://schema.org/ListItem"><a target="_blank" href="' . $home_url . '">' . $home_url . '</a></li>';

/* Build breadcrumbs here */

$breadcrumbs .= '</ol>';
echo $breadcrumbs;

Si esta declaración no se agrega a la función, la configuración de las migas de pan puede aparecer o no cuando lo desee.

Paso 4: Agregar función al encabezado del tema

Una vez que su función de migas de pan esté completa, puede agregarla al archivo header.php de su sitio web. Vaya a Apariencia > Editor de temas para abrir el archivo y agregue la función hasta el final.

A continuación, guarde los cambios y consulte el menú de migas de pan de su nuevo sitio web en la interfaz. Puede continuar modificando la función y su ubicación hasta que el menú se vea bien (o desactive la ruta de navegación cuando sea necesario).

Personaliza tu sitio con WP Engine

Los menús de navegación de migas de pan ayudan a los visitantes de su sitio a encontrar su camino. También facilitan que los motores de búsqueda entiendan la jerarquía de su sitio web. Un complemento como Yoast SEO es la forma más fácil de agregar migas de pan a su sitio web, pero también puede codificarlas manualmente.

Usar el servidor web adecuado puede ayudar a garantizar el rendimiento de su sitio web, dejándole tiempo para concentrarse en el desarrollo y la experiencia de usuario. ¡WP Engine puede ofrecerle los planes de alojamiento de WordPress mejor administrados y los mejores recursos para crear una experiencia de sitio web increíble!