Cómo añadir Breadcrumb o Migas de pan a Extra

por | 2 Comentarios

migas de pan - Temas Elegant Themes

Las migas de pan, más conocidas entre los desarrolladores como «breadcrumb» (en inglés), son un indicador del punto exacto donde nos encontramos dentro de nuestra web.

Esta opción, además de ayudar al usuario de nuestra web a tener una mejor experiencia de usuario, puede ayudarnos a sumar un granito más en el momento del posicionamiento en los buscadores.

Suscríbete a mi canal:

Colocar Breadcrumbs en Extra de Elegant Themes

Desconozco la razón por la que no se ha añadido esta funcionalidad a este «theme», ni siquiera en Divi que son primas hermanas de la misma compañía, teniendo en cuenta que otras plantillas de esta misma casa sí disponen de la posibilidad de activar las migas de pan.

La cuestión es que no dispone de migas de pan propias, pero podemos añadirlas de forma sencilla utilizando un plugin que deberíamos tener ya instalado (Yoast SEO) y configurando un par de líneas de código.

¿Porque añadir migas de pan a Extra?

Podemos encontrar muchas razones: que si queda más «bonito», hace que moverse por una web sea más fácil e intuitivo, indica en cada momento donde nos encontramos…

Pero todavía hay más, cosas que no vemos a primera vista pero que nos ayudarán a que mejoremos un poquito nuestro SEO.

Al ofrecer una navegación más sencilla indicando la posición dentro de nuestra web, conseguimos que el usuario navegue dentro de nuestro sitio, reteniéndolo más tiempo.

Si tenemos bien estructurada la web, los navegadores dispondrán de una información adicional de donde se encuentra cada cosa, aunque esto es mejor hacerlo a través de los sitemaps.

Y como guinda del pastel, podemos conseguir mejorar los datos enriquecidos que muestra Google al realizar una búsqueda, mostrando una imagen más agradable y visual en la url de enlace.

datos enriquecidos yoast y breadcrumbs
Datos enriquecidos con yoast en breadcrumbs

¿Qué plugin utilizo para colocar las migas de pan?

Es una pena que tengamos que utilizar plugins con este tema que lo trae casi todo, pero es el «casi todo» el que hace que tengamos que recurrir a esta práctica necesaria. Lo que tenemos que hacer es buscar el adecuado.

Existen plugins específicos para generar las migas de pan o «breadcrumbs», pero no serán necesarios si aprobechamos las opciones que nos ofrece el plugin Yoast SEO, uno de los plugins imprescindibles para WordPress y desde mi punto de vista de instalación obligatoria

Este complemento concebido para ayudar a mejorar el SEO, incluye una opción para activar y configurar las migas de pan. Así matamos dos pájaros de un tiro.

El plugin «Yoast SEO» no es mágico y por tanto no vamos a conseguir que nuestra web se posicione mejor con el simple hecho de instalarlo, debemos configurarlo correctamente y prestar atención a las indicaciones que muestra en cada artículo o página por separado para poder conseguirlo.

Pero como eso es otra historia, vamos a centrarnos en la función específica para la colocación de Breadcrumbs o Migas de pan.

Plugin Yoast SEO para WordPress
Plugin Yoast SEO para WordPress

Configurar las migas de pan del plugin Yoast SEO

En la zona de administración de WordPress, nos dirigimos a la pestaña del plugin «SEO«, y en el apartado «Apariencia en el buscador» localizamos la pestaña «Migas de pan«.

En la parte inferior activamos el único botón que hay y se desplegará una serie de opciones adicionales.

No es necesario tocar nada, pero podemos configurar estos campos para ver qué tipo de migas de pan nos gustan, os lo dejo a vuestra elección para que investiguéis una vez las tengamos visibles.

migas de pan o breadcrumbs en yoast seo
Activar migas de pan de Yoast SEO

Configurar el tema para mostrar las migas de pan

Aunque hayamos activado la opción del plugin, aun no podremos ver las migas de pan en nuestra web.

Tenemos que indicar con unas líneas de código, colocadas en el archivo header.php, dónde queremos que se muestren las migas de pan.

La mejor manera de hacerlo es sobre un tema hijo, donde tenemos que haber duplicado este archivo. Así nos aseguramoss que no perderemos los cambios con futuras actualizaciones del tema Extra.

Para ver cómo crear un tema hijo podéis ver el artículo y vídeo en este enlace. Sólo tendremos que añadir el archivo header.php a la hora de duplicar los archivos.

migas de pan header.php

Editamos el archivo «header.php» del tema hijo y hacemos scroll hacia abajo hasta llegar a la etiqueta de cierre de la cabecera «/header«, a continuación pegamos las siguientes líneas de código sacadas de la página oficial del plugin Yoast :

Ahora ya podemos ir a ver como quedan nuestras migas de pan en el sitio.

Ajustar el aspecto visual con CSS

No hace falta ser un lince para ver que no queda muy bien con el resto del sitio. Para eso vamos a añadir unos estilos CSS en la pestaña del personalizador «CSS adicional«.

Como podría extenderme mucho explicando cada línea de código que os dejo para que lo podáis copiar, basta decir que sabiendo un poquito de CSS podéis modificarlo para daptarlo a vuestra identidad, y si no, me dejáis un comentario e intentaré ayudaros lo antes que pueda.

En el ejemplo 1, las migas de pan en Extra quedan flotando en una ventana independiente:

Migas de pan o breadcrubs
Migas de pan o breadcrubs – Ejemplo 1

El ejemplo 2, muesra las migas de pan centradas, con anchura total y centradas a la página:

Migas de pan o breadcrubs
Migas de pan o breadcrubs – Ejemplo 2

Si al añadir el código, no funciona o no se ven los cambios, es posible que las futuras actualizaciones del tema estén interfiriendo. La solución está en colocar la función «!important» detrás de cada orden CSS y antes del punto y coma. (Ej.: width: 100% !important;)

Espero que os resulte útil y podáis utilizarlo en vuestros sitios y páginas webs realizadas con Extra.

Temas Elegant Themes

Puedes pinchar aquí para ver todas las entradas relacionadas con esta plantilla.


Suscríbete para no perderte ningún artículo nuevo, te aviso por email


Si necesitas que te ayude a adaptar el código CSS, o tienes algo que compartir, no dudes en dejar un comentario abajo con tu opinión o tus dudas.

VISITA MI CANAL DE YOUTUBE

Juan

Juan

Juan Martín es el autor del blog Ingresos Vía Web, una persona como tú que intenta ganarse la vida en internet. Trabajo en mi blog para convertir mi sueño de generar autoempleo en realidad y poder ayudar a quien quiera, a conseguir su sueño a través de mis contenidos. Si te parece interesante apúntate a mi newsletter.

2 Comentarios

  1. Juan

    Hola Roberto,

    Si tienes asignada una página concreta para la página principal no deberían salir la migas de pan, pero como cada web es un mundo que utiliza diferentes configuraciones, entres plugins instalados y páginas configuradas, no siempre se obtiene el mismo resultado.

    Si has decidido utilizar como página principal el blog, o no sabes porque aparecen las migas de pan, prueba a añadir este código a continuación del anterior que has copiado en la pestaña «CSS adicional».

    .home #breadcrumbs,
    .blog #breadcrumbs {
    display: none;
    }

    Responder
  2. Roberto

    Uf, encantado con el trozo de código, de verdad. pero me asalta una duda… ¿se podrían eliminar las migas de pan solo de la página de inicio y mantenerlas en el resto de páginas?

    Un saludo y gracias.

    Responder

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Al dejar un comentario se solicitan datos como tu email y nombre que se almacenan en una cookie para que no tengas que volver a completarlos en próximas visitas. Para enviar un comentario debes aceptar nuestra política de privacidad. Responsable de los datos: Juan Martín Pascual. | Finalidad: Controlar spam, gestión y moderación de comentarios. | Legitimación: Tu consentimiento expreso. |Comunicación de los datos: No se comunicarán a terceros salvo por obligación legal. | Destinatario: Base de datos alojada en SiteGround Spain S.L. dentro de la UE. Ver política de privacidad de Siteground. | Derechos: Acceso, rectificación, supresión, limitación, portabilidad y olvido de sus datos.

Más de lo mío en Youtube

Categorías

Recomendado para Afiliados de Amazon

AAWP Amazon Affiliate for WordPress
Banner AzonPress

Esta web funciona gracias a:

Hosting WordPress de SiteGround

Pin It on Pinterest

Share This
Ir al contenido