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.
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.
¿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.
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.
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.
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 :
1 2 3 4 5 | <?php if ( function_exists('yoast_breadcrumb') ) { yoast_breadcrumb( '<p id="breadcrumbs">','</p>' ); } ?> |
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | *-- MIGAS DE PAN --*/ #breadcrumbs { width: 90% !important; max-width: 1020px; position: relative; z-index: 1; background: rgba(255,255,255,0.8) !important; border-radius: 3px; margin: auto; margin-top: 15px; margin-bottom: -20px; padding: 10px; font-size: 12px; line-height: 1.3em; color: #000; } /** Oculta las migas de pan en la home **/ .home #breadcrumbs { display: none; } |
El ejemplo 2, muesra las migas de pan centradas, con anchura total y centradas a la página:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | /*--MIGAS DE PAN--*/ #breadcrumbs { width: 100% !important; position: relative; z-index: 1; background: #3e5062 !important; border-top: 1px solid #5f6367; margin-bottom: -20px; padding: 10px 10%; font-size: 12px; line-height: 1.3em; color: #ffffff; text-align: center; } #breadcrumbs a { color: #c7c7c7; } /** Oculta las migas de pan en la home **/ .home #breadcrumbs { display: none; } |
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.
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.
Hola Juan,
He seguido todos los pasos y he probado con los dos códigos, pero en mi web no aparece nada.
La cabecera de mi pagina (Extra) está insertada como cabecera global a través del constructor de tema, la descargue de Eleganth Themes y luego la edité ¿puede ser este el problema?
De todos modos también he probado la opción dos, que sitúa las migas por debajo de la cabecera y tampoco aparece.
¿Se te ocurre que puede ocurrir?
Gracias por adelantado!
Al utilizar una cabecera global personalizada, el archivo header.php deja de funcionar y es sustituido por los módulos que se insertan en la cabecera del Generador de Temas. Para colocar las migas de pan en ese tipo de cabeceras tienes que hacerlo a través de un shortcode colocado en un módulo de texto en el diseño de la cabecera global. Acabo de publicar un vídeo que puede servirte donde explico el proceso. https://youtu.be/6GeQfQ3X3bg
Juan! Eres la caña!
Muchísimas gracias por resolver siempre nuestras dudas de una forma tan clara, ágil, didáctica y eficiente. Soy tu fa nº1.
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;
}
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.