Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. WordPress
Webdesign

¿Qué son las migas de pan en WordPress?

by
Difficulty:BeginnerLength:ShortLanguages:

Spanish (Español) translation by Ana Paulina Figueroa Vazquez (you can also view the original English article)

En este tutorial, explicaré todo lo que necesitas saber para comenzar a utilizar migas de pan (también conocidas como breadcrumbs, en inglés) en WordPress.

Migas de pan en WordPress

Sigue los pasos con nosotros en nuestro canal de YouTube de Envato Tuts+:

Complementos de migas de pan en CodeCanyon

Si estás interesado en las soluciones que nuestra comunidad de programadores tiene en oferta, echa un vistazo a los complementos prémium de migas de pan de WordPress en CodeCanyon:

codecanyon
Complementos de migas de pan de WordPress disponibles en CodeCanyon

¿Qué son las migas de pan?

Las migas de pan, o los rastros de migas de pan, son una característica de muchos sitios web y actúan como un auxiliar para la navegación. Este es un ejemplo del sitio web gov.uk:

breadcrumbs on govuk
Un rastro de migas de pan en gov.uk

Themeforest también usa un rastro de migas de pan:

Breadcrumbs on themeforest
Migas de pan en Themeforest

Las migas de pan son una navegación secundaria, ya que no se utilizan como la forma principal de navegar por un sitio web. En vez de eso, estas muestran la ubicación actual del usuario y la ruta por la que llegaron ahí.

Las migas de pan permiten al usuario retroceder a cualquier punto de su camino a partir de la raíz del sitio web.

Gracias, Hansel y Gretel

Si estás familiarizado con la historia de Hansel y Gretel, sabrás en dónde se origina la metáfora (afortunadamente, las migas de pan en los sitios web modernos son mucho más prácticas que las migas de la historia).

Hansel and Gretel Near the Candy House
Ilustración de Hansel y Gretel en Envato Elements

¿En dónde debería usar la navegación con migas de pan?

Los ejemplos anteriores demuestran el uso perfecto de las migas de pan: en donde la jerarquía del contenido es potencialmente compleja, con varias profundidades de categorías y subcategorías.

No hay una necesidad real de usar migas de pan en un sitio o aplicación web en donde no hay una jerarquía lógica o contenido expansivo.

Usando migas de pan en WordPress

Las migas de pan en WordPress son exactamente lo mismo que en otros sitios web; no hay una diferencia funcional.

Sin embargo, de forma predeterminada WordPress no tiene un sistema de migas de pan, por lo que tendrás que implementarlo tú mismo. Podemos hacer eso usando un complemento, así que veamos cómo funciona.

1. Instala un complemento de migas de pan para WordPress

En tu administrador de WordPress, ve a Plugins > Add New (Complementos > Agregar nuevo) y escribe la palabra clave breadcrumbs (migas de pan) en el cuadro de búsqueda. Se te mostrarán una gran cantidad de opciones, pero tal vez la más popular y la que usaremos hoy está incluida en el complemento Yoast SEO.

Continúa e instálalo, luego actívalo.

the Yoast SEO plugin

2. Configuraciones de las migas de pan en Yoast SEO

Yoast SEO ofrece una gran cantidad de funcionalidad de SEO, pero por ahora solamente estamos interesados en las migas de pan. En el administrador de WordPress ve a SEO > Search Appearance (SEO > Apariencia de búsqueda), y luego ve a la pestaña Breadcrumbs (Migas de pan) y haz clic en Enabled (Habilitadas).

Yoast SEO Breadcrumb Settings

Notarás varias opciones:

  • Especifica el separador entre enlaces de migas de pan
  • Especifica el texto de anclaje usado para la página de inicio
  • y así sucesivamente

Realiza los cambios que necesites, y luego haz clic en Save (Guardar). Ahora necesitamos insertar las migas de pan en nuestro tema.

3. Inserta las migas de pan en WordPress

Puedes encontrar instrucciones detalladas en el sitio web de Yoast, pero los pasos son sencillos. En esas instrucciones verás un fragmento de código PHP que necesitas copiar:

Después regresa a tu administrador de WordPress y visita Appearance > Theme Editor (Apariencia > Editor de tema). En esta etapa necesitas decidir en dónde quieres insertar las migas de pan. Colocarlas en el encabezado las hará visibles en todas las páginas de tu sitio web, así que eso es lo que haremos.

Abre el encabezado del tema (header.php) y luego desplázate hacia abajo hasta el final del archivo, en donde puedes pegar tu fragmento de código.

Importante: lo que veas aquí exactamente dependerá por completo del tema que estés usando, por lo que los resultados pueden variar. Es posible que ni siquiera necesites las etiquetas <?php> en el fragmento de código, ya que tu encabezado ya podría estar envuelto en ellas, así que asegúrate de prestar atención a las advertencias de errores de código.

Yo estoy usando el tema Twenty Twenty, y lo que hemos hecho ahora nos da esto:

Insert the Breadcrumbs into WordPress

Esto necesita un poco de trabajo en cuanto a estilo, ¡pero tenemos migas de pan funcionales!

Nota: te recomiendo que uses un tema hijo con tu instalación de WordPress, de manera que los cambios que hagas a los archivos del tema no se sobrescriban cuando actualices este último.

4. Cómo usar el código abreviado de Yoast SEO para las migas de pan

Hay otra manera de usar las migas de pan de Yoast SEO que no involucra la escritura de código de ningún tipo, y es mediante el uso de un código abreviado. Veamos cómo funciona eso.

El código abreviado también está disponible para que puedas copiarlo en el sitio web de Yoast, pero aquí está de todos modos:

Después, en tu administrador de WordPress, ve a alguna de tus páginas o entradas ¡y pega el código abreviado! Verás las migas de pan en el front-end, pero desde luego están dentro del cuerpo de tu entrada y tu página, lo que quizá te parezca o no te parezca adecuado.

How to Use the Yoast SEO Breadcrumbs Shortcode

5. Cómo personalizar las migas de pan de Yoast SEO

Podemos ajustar la apariencia de nuestras migas de pan usando CSS; solo necesitamos saber qué selectores usar. Así que usa el inspector del navegador en tu front-end y verás algo como esto:

How to Customize Yoast SEO Breadcrumbs

De forma predeterminada, nuestras migas de pan están envueltas en un párrafo con un ID de breadcrumbs. Entonces, al ir a Appearance > Customize (Apariencia > Personalizar) del administrador de WordPress, podremos abrir el personalizador y (muy probablemente, dependiendo del tema que estés usando) la pestaña Additional CSS (CSS adicional).

Agrega estilos tales como:

Y verás que los cambios surten efecto ahí mismo en la ventana de la vista previa. También puedes enfocarte en el último enlace del rastro, usando:

Nuevamente, usa el inspector para descubrir cuál es la estructura y los selectores CSS que necesitarás.

Cuando hayas terminado, presiona Publish (Publicar) y tus cambios serán aplicados.

¡Sigue adelante y coloca migas de pan!

¡Y hemos terminado! Espero que esto te haya dado una buena idea de lo que son las migas de pan de WordPress, cómo puedes usarlas y cómo puedes implementarlas en tu propio sitio web.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.