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:
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:
- Basado en la jerarquía: Estas breadcrumbs muestran a los usuarios dónde se encuentran en la estructura de su sitio, como en el ejemplo anterior.
- Basado en atributos: Utilizadas principalmente en sitios de comercio electrónico, estas breadcrumbs muestran los atributos que el usuario ha buscado y que le han llevado al producto que está viendo actualmente.
- Basado en la historia: A medida que los usuarios se mueven de página en página a través de su sitio, estas breadcrumbs les llevarán de vuelta por el camino que vinieron.
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:
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:
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:
Cambie el interruptor de configuración de Breadcrumbs a activado. Luego, previsualice su sitio:
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:
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:
Haga clic en la flecha desplegable para abrir la configuración del widget y, a continuación, rellene los campos necesarios:
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:
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:
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:
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:
En la ficha Tipografía, también puede ajustar el color y el tamaño de la fuente para sus breadcrumbs:
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:
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:
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 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:
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:
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:
La primera pestaña se llama Opciones, e incluye algunos ajustes generales como texto personalizado, separadores y límites de caracteres:
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:
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:
Por último, es importante visitar la pestaña Código abreviado para añadir sus breadcrumbs a su sitio:
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:
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:
Puede personalizar sus breadcrumbs utilizando los siguientes parámetros:
- Clase: Incorpora una clase CSS personalizada.
- Color: Cambia el color del texto.
- Colores: Cambia el color del texto cuando los usuarios pasan el ratón por encima de sus breadcrumbs.
Simplemente agregue alguno o todos estos parámetros directamente en los corchetes del código abreviado:
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:
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:
A continuación, seleccione la ficha Breadcrumb:
Aquí, verá un menú desplegable que le permite elegir dónde quieres mostrar sus breadcrumbs en la página:
Una vez que haya hecho su selección, también aparecerán algunas opciones de estilo:
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:
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í):
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.
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:
- Poner en marcha el breadcrumbs en Yoast SEO.
- Instale y configure un plugin de WordPress breadcrumbs.
- Use un tema que incluya breadcrumbs.
- 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!
Editor en jefe de Kinsta y consultor de marketing de contenidos para desarrolladores de plugins de WordPress. Conéctese con Matteo en Twitter.
Deja una respuesta