Migas de pan en WordPress: 2 formas de colocarlas en tu WEB

migas de pan en wordpress alvaro arrarte

¿Sabes que son las migas de pan en WordPress? o ¿Cómo añadir migas de pan en GeneratePress?

Es común que veas en diferentes sitios WEB una serie de enlaces en la parte superior de cada página (breadcrumbs) que te permiten desplázate por el contenido, además de indicarte en donde te encuentras.

Las migas de pan de WordPress y otros sitios WEB son utilizadas para ayudar a los visitantes a ubicarse dentro de la estructura, además de mejorar la relevancia de la WEB al incluir enlaces claves para el acceso al contenido.

También las migas de pan WEB son muy utilizadas en sitios con mucho contenido como foros, tiendas online o blogs para facilitar la navegación de los usuarios entre los diferentes artículos y mejorar la usabilidad.

Existen sitios WEB que optan por quitar breadcrumbs WordPress porque les afecta el diseño, sin estar conscientes del potencial que tiene esta herramienta para mejorar el tráfico y la tasa de conversión.

Las breadcrumbs o migas de pan es un elemento de navegación que es utilizado en programas con interfaces gráficas y sitios WEB, su nombre está relacionado al cuento clásico de Hansel y Gretel donde los niños dejaban un rastro en el camino para no perderse dentro del bosque.

Generalmente consigues las migas de pan en la parte superior de cada página después de la cabecera y muestran la ubicación del contenido dentro de la arquitectura del sitio WEB, pero además te permite que puedas ir directamente hacia el contenido relacionado como a la categoría que estás viendo.

Ejemplo de migas de pan en Google

La miga de pan WEB es un elemento que favorece la navegación de un sitio en Internet, debido a que está compuesto por una serie de enlaces con los que tus visitantes pueden navegar a través de la arquitectura de tu WEB.

Además las breadcrumbs son analizadas y aparecen en los resultados de las búsquedas de algunos buscadores como Google, para ofrecer un acceso más fácil y directo a los contenidos de tu sitio WEB.

¿Que son las migas de pan en WordPress?

Las breadcrumbs en WordPress aportan un gran valor a tu sitio WEB porque además de ayudar a tus visitantes a ubicarse dentro de contenido también ofrecen enlaces beneficiosos para el SEO.

Como las migas de pan en WordPress dependen de la jerarquía de tu contenido (taxonomía) al realizar el diseño WEB, debes hacerla de tal forma que tenga un sentido lógico para que sea amigable a los usuarios y les ofrezcas una experiencia positiva.

Breadcrumbs ejemplos

Como ya sabes las breadcrumbs WordPress son una referencia que sirven para que tus visitantes sepan en todo momento en que parte de tu sitio WEB se encuentran y les funcione de acceso directo a contenido relacionado, en la siguiente imagen verás un ejemplo de las migas de pan en WordPress.

ejemplo migas de pan alvaro arrarte
Ejemplo de migas de pan en WordPress

Para este ejemplo puedes ver que por medio migas de pan en WordPress estas en el artículoLimpiar la base de datos en WordPress: 2 formas hacerlo”, que está en la categoríaDesarrollo”, el cual es un contenido de la sección “Blog”, que viene desde la página de “Inicio”.

Además con esta miga de pan web puedes ir directamente a la página de “Inicio”, a mi “Blog” o a todo el contenido de la categoría “Desarrollo” a un solo clic de distancia.

4 Ventajas de usar Migas de Pan

  • Las migas de pan ayudan a que los buscadores entiendan mejor cómo está estructurado o la taxonomía de tu sitio WEB, lo que facilita su rastreo e indexación.
  • Con las breadcrumbs aumentan el tiempo de permanencia de los visitantes en tu sitio WEB porque mejora la usabilidad y les permite acceder fácilmente a más contenido que puede ser de su interés.
  • Como las migas de pan WEB mejoran y aumentan los enlaces internos de tu sitio WEB mejoran la puntuación general de tu WEB porque distribuyen la autoridad de tu contenido entre las diferentes páginas.
  • Generan mejor visibilidad para todos tus contenidos haciéndolo más interesantes para tus visitantes y para los buscadores.

Tipos de Migas de Pan

Dependiendo del tipo de objetivo que quieras conseguir a través de la navegación, las migas de pan en WordPress o en cualquier otro sitio WEB pueden ser de tres tipos los cuales son:

migas de pan en amazon alvaro arrarte
Ejemplo de migas de pan en Amazon

De ubicación o localización

Este tipo de migas de pan informan del lugar donde se encuentra el contenido que estás mirando dentro de la estructura del sitio WEB y es independiente de la dirección por donde le accedas.

Dinámica o de Exploración

La información que muestra está íntimamente relacionada con la navegación por cual es dinámica, así que cada contenido le puedes acceder desde distintas rutas, el objetivo de estas breadcrumbs es mostrar el camino que has recorrido durante tu navegación.

Descriptivo o de atributo

Está relacionado con los metadatos del contenido (contenido referencial asociado), independientemente de mostrar la ubicación o te muestre los datos de tu navegación.

Su objetivo es poderte ofrecer contenido referencial que pueda completar la información que estás visitando, por eso son muy utilizados al mostrar migas de pan en tiendas online para acceder a productos por medio de los atributos que tengan como referencia.

Mejores prácticas para el uso de migas de pan en WordPress

  • No utilices textos muy largos o sobre optimizados en los enlaces para que no afectes la usabilidad de tu sitio WEB.
  • No utilices las breadcrumbs WordPress para sustituir el menú principal de tu sitio WEB, sino como un complemento para la navegación.
  • Asegúrate de que la estructura de tu sitio WEB tenga un orden jerárquico lógico y no posea más de cuatro niveles.
  • Busca que los enlaces tengan una redacción natural para que sean fáciles de leer y se vean relevantes con el contenido.

Las 2 formas de colocar las migas de pan en WordPress

Básicamente existen dos formas de mostrar migas de pan en WordPress una es desarrollando una función que te permita mostrarlas y la segunda es por medio de alguna funcionalidad (breadcrumbs WordPress plugin) que te ayude a realizarlo.

migas de pan en google drive alvaro arrarte
Ejemplo de migas de pan en Google Drive

Mostrar las breadcrumbs de WordPress sin plugin

Si quieres activar las migas de pan en WordPress sin utilizar ninguna funcionalidad adicional, necesitarás tener algo de conocimiento para desarrollar código en PHP con la finalidad de que puedas agregar esta funcionalidad a tu sitio WEB.

Para hacerlo debes ubicar el archivo funtions.php de tu tema activo y editarlo para colocar las siguientes líneas de código:

//* Integra migas de pan a WordPress sin plugin
function migas_de_pan() {
                   if (!is_front_page()) {
        echo '<a href="/">Inicio</a> » ';
        if (is_category() || is_single() || is_page()) {
            if(is_category()){
                $category = get_the_category();
                echo $category[0]->cat_name;
            }else{
                the_category(' - ');
            }if(is_page()) {
                echo the_title();
            }if (is_single()) {
                echo " » ";
                the_title();
            }
        }
    }
}

Si quieres puedes cambiar el delimitador “»” por otro que tú quieras, luego lo mejor es que agregues un Hook y coloques la llamada a esta función con la siguiente línea de código:

<?php migas_de_pan(); ?>

Si no has hecho esto antes no te preocupes te muestro como crear un Hook de WordPress aquí un poco más abajo.

Recuerda que es importante cuando hagas este tipo de modificaciones, las realices sobre un tema hijo para que cuando actualices tu theme no pierdas los cambios realizados.

3 plugins para mostrar las breadcrumbs de WordPress

Si tu tema no tiene activada las migas de pan, puedes activar las breadcrumbs en WordPress con plugins a través de varios plugins para migas de pan como el Rank Math, el Yoast SEO o el NavXT entre muchos otros.

Mostrar las migas de pan Rank Math

rank math alvaro arrarte
Plugin Rank Math SEO en el repositorio de WordPress

Rank Math en mi opinión el plugin Rank Math es uno de los mejores plugins para SEO que tiene WordPress porque es muy completo, ya que con él además de darte consejos y la puntuación del SEO, puedes gestionar las redirecciones y las WP breadcrumbs.

Para mostrar las migas de pan en Rank Math debes ir al menú “Rank Math” de tu administrador y seleccionar la opción “Ajustes generales”.

Opción Ajustes generales del menú de menú de Rank Math

Esto te abrirá una pantalla en la que puedes cambiar diversas opciones del plugin Rank Math según tus necesidades, allí también encontrarás un menú en donde debes seleccionar la opción “Migas de pan”.

Opción Migas de pan del menú de Ajustes del plugin Rank Math

Cuando lo hagas serás redirigido a la sección para que puedas personalizar las migas de pan, lo primero que debes hacer es activarlas en la opción “activar las migas de pan”.

Luego selecciona el carácter que servirá de separador en la opción “Carácter separador”, lo siguiente que debes decidir es si quieres colocar un enlace directo a una página de inicio en “Mostrar enlace a la página de inicio”.

También puedes colocarle un nombre a este enlace en la opción “Etiqueta de la página de inicio”.

Primeras 4 opciones para ajustar las migas de pan en Rank Math

Luego puedes agregar a qué dirección WEB van a ir los visitantes cuando presionen ese enlace en “Enlace a la página de inicio”.

Además te da la opción de colocar algún texto que aparecerá antes de las WP breadcrumbs en “Prefijo de las migas de pan” o dar un formato especial a las páginas de archivo en “Formato del Archivo” si así lo deseas.

Adicionalmente puedes dar formato a la etiqueta que muestran las páginas de resultados en “Formato de los resultados de búsqueda” y la tequita para las wp breadcrumbs de la página de error en “Etiqueta 404”, sin embargo estas dos opciones las puedes dejar como están.

Mi recomendación es colocar en inactivo la opción de “Ocultar título de la publicación” para que se puedan los títulos de las publicaciones en las migas de pan.

migas de pan rank math 5 al 10 alvaro arrarte
De la 5ta a la décima Opción para ajustar las migas de pan en Rank Math

Si quieres que los artículos en las migas de pan muestren la categoría a la que pertenecen debes activar la opción “Mostrar categoría(s)”, de igual forma si deseas que se muestren o no las etiquetas en “Ocultar el nombre de la taxonomía”.

La última “Mostrar la página del blog” es para que puedas mostrar la página del blog en las migas de pan, activar esta opción te lo recomiendo porque facilita el acceso a tu contenido.

ultimas 3 opciones migas de pan rank math alvaro arrarte
Últimas 3 opciones para ajustar las migas de pan en Rank Math

Para que estos cambios tengan efecto debes presionar el botón “Guardar cambios”, ya con esto tendrás funcionando las migas de pan en WordPress, sin embargo si el tema que tienes no tiene activada las breadcrumbs no podrás verlas.

En mi opinión el tema GeneratePress es bueno, sin embargo no tiene las breadcrumb WordPress activadas, por eso para añadir migas de pan en GeneratePress debes agregar un Hook con el código o el shortcode de Rank Math que está en la parte superior de la pantalla para personalizar las migas de pan.

funcion migas de pan rank math alvaro arrarte
Código PHP y Breadcrumbs WordPress shortcode para las migas de pan

El código de un Hook para mostrar las migas de pan en Rank Math seria:

<?php 
    if (function_exists('rank_math_the_breadcrumbs')) rank_math_the_breadcrumbs(); 
?>

Mostrar las migas de pan Yoast SEO

yoast seo alvaro arrarte alvaro arrarte
Plugin Yoast en el repositorio de WordPress

Otro plugin muy utilizado para el posicionamiento orgánico y quizás el más difundido es el plugin Yoast SEO, que también tiene una funcionalidad para gestionar las WP breadcrumbs.

Es igual de fácil de personalizar y utilizar que el Rank Math, para mostrar las migas de pan en Yoast SEO es necesario que busques en el menú “Y SEO” de tu administrador de WordPress la opción “Apariencia en el buscador”.

Opción Apariencia en el buscador del plugin Yoast SEO

Lo primero que debes hacer es verificar es que este como Activo la opción “Activar las migas de pan”, esto te desplegará el resto de las opciones para personalizar las migas de pan en WordPress.

En la opción “Separador de las migas de pan” en principio viene con “»” pero lo puedes cambiar por el que más te guste, en la siguiente opción puedes colocar un nombre al enlace de inicio en “Texto del enlace para la página de inicio”.

Además puedes colocar un texto delante de las migas de pan como por ejemplo “Estás en” en la opción “Prefijo en la ruta de las migas de pan”, también puedes hacer lo mismo con las páginas de archivo en “Prefijo para los archivos de las migas de pan”.

El texto que pones en “Prefijo para la página de búsqueda de las migas de pan” es el que aparecerá en las breadcrumbs que muestran los buscadores en sus resultados, también puedes personalizar el texto de las migas de pan que aparecen en la página 404 en “Migas de pan para la página 404”.

Si quieres un acceso directo a tu blog dentro de cada contenido activa la opción “Mostrar la página del blog” y para que destaque el título del contenido que estas mostrando coloca en negrita la opción “Última página en negrita”.

migas de pan yoast seo 1 al 9 alvaro arrarte
Opciones para personalizar las migas de pan en Yoast SEO

En la sección “Taxonomía a mostrar en las migas de pan para los tipo de contenido” puedes elegir cómo se mostrarán las migas de pan dependiendo del tipo de contenido.

Por ejemplo puedes colocar la categoría de cada contenido antes de mostrar el título de cada entrada, dependiendo de los plugin y tipos de elementos que conformen tu WEB tendrás diferentes opciones.

taxonomia a mostrar yoast alvaro arrarte
Taxonomía a mostrar en Yoast SEO

Por último puedes elegir cómo se mostrarán las migas de pan para las taxonomías que tengan contenido archivado en “Archivo de tipo contenido a mostrar en las migas de pan para las taxonomías”.

archivo de tipo contenido yoast seo alvaro arrarte
Archivo de tipo contenido a mostrar en las migas de pan Yoast SEO

Para que los cambios tengan efecto debes presionar el botón “Guardar cambios” al final de la pantalla, con esto tendrás funcionando las migas de pan en WordPress.

Recuerda que si el tema no tiene activada las breadcrumb WordPress no podrás verlas, por eso para añadir migas de pan en GeneratePress o Divi por ejemplo debes agregar un Hook de WordPress con el siguiente código PHP:

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

Mostrar las migas de pan Breadcrumb NavXT

breadcrumb navxt alvaro arrarte
Plugin Breadcrumb NavXT en el repositorio de WordPress

El plugin Breadcrumb NavXT está hecho con el único de propósito de mostrar las migas de pan en WordPress y aunque tiene múltiples opciones una vez que te familiarizas es muy fácil de utilizar.

Una de las grandes ventajas que tiene el plugin Breadcrumb NavXT es que lo puedes utilizar a penas lo instales porque sus parámetros iniciales se adaptan a casi todos los sitios WEB.

Una vez lo instales para acceder a la pantalla de personalización solo debes ir al menú “Ajustes” del administrador de tu WordPress y elegir la opción ”Breadcrumb NavXT”.

Opción de Breadcrumb NavXT en el menú Ajustes

Como las opciones son muy parecidas a las que encuentras en el Rank Math y en el Yoast SEO no es necesario ahondar en cada una, sin embargo este breadcrumbs WordPress plugin tiene la peculiaridad que divide sus opciones en 4 bloques los cuales son:

General

Para las opciones que afectan a todas las migas de pan en tu sitio WEB como el carácter de separación entre los niveles, mostrar o no las breadcrumbs en la página de inicio y mucho más.

Tipos de entradas

Puedes modificar las migas de pan dependiendo del tipo de elemento entre los que están los artículos o post, las páginas, los medios, los banners, las plantillas y cualquier otro elemento.

Taxonomías

Estas opciones afectan a todos los elementos que tienen que ver con la taxonomía de tu sitio WEB como las etiquetas, categorías, formato de las entradas y el grupo de banners.

Misceláneos

Para el resto de las opciones como el formato de la fecha con vínculo o sin vínculo, el título que se mostrará en las migas de pan de la página de error 404 y los archivos de Autor entre otras cosas.

Como sabes el número de opciones así como la cantidad de elementos para personalizar, dependerá de la estructura y los plugins que tengas instalados en tu sitio WEB.

Para que todos los cambios puedan visualizarse es necesario que presiones el botón azul “Guardar cambios” que se encuentra en la parte inferior de la pantalla al final de las opciones de personalización.

Bloques del Breadcrumb NavXT

Recuerda que si el theme que tienes no tiene activada las breadcrumbs no podrás verlas, por eso para añadir migas de pan en GeneratePress o en Divi debes agregar un Hook de WordPress con el siguiente código PHP:

<?php 
    if(function_exists('bcn_display') && is_front_page() == false){
        bcn_display();
    }
?>

¿Qué es un Hook de WordPress?

Los Hook en WordPress son estructuras dentro del núcleo de WordPress que permiten agregar funciones para que sean ejecutadas en el momento que este elemento sea cargado.

Los Hooks o ganchos permiten modificar el comportamiento de los elementos de una página, porque son cargados secuencialmente y en un orden específico cada vez que se vista una de las páginas de tu sitio WEB.

Esto te da la ventaja de poder agregar nuevas funcionalidades al núcleo de WordPress de una forma sencilla y sin tener que estar modificando directamente archivos críticos de tu WEB como header.php o el functon.php.

Crear un Hook para mostrar las migas de pan en WordPress

Para crear un Hook en WordPress lo primero que debes hacer es entrar con usuario que tenga privilegios de administrador y buscar en el menú de “Apariencia” en la parte del administrador de WordPress, para elegir la opción “Elements”.

Opción Elements del menú Apariencia

Una vez selecciones está opción aparecerá una pantalla en donde verás un cuadro en donde aparecen los distintos tipos de elementos que tienes ejecutándose en tu sitio WEB.

Para agregar un nuevo elemento de tipo Hook debes presionar el botón “Añadir nuevo” que se encuentra al lado del título “Elements” en la parte superior del cuadro.

pantalla elements alvaro arrarte
Cuadro de todos los Elementos que tiene tu sitio WEB

Lo primero que te aparecerá es una pantalla para que elijas el tipo de elemento que quieres añadir, para este caso selecciona la opción “Hook” del menú desplegable.

seleccionar tipo de elemento alvaro arrarte
Seleccionar el tipo de elemento a agregar

En la siguiente pantalla debes colocar un nombre referencial en la primera casilla para este caso sería “Migas de Pan”, posteriormente en el siguiente recuadro puedes colocar las líneas de código o el llamado a las funciones de PHP, sin embargo también puedes un Shortcode que cumple la misma tarea.

Para este ejemplo agregas el código PHP que te el plugin Rank Math para que puedas mostrar las migas de pan en WordPress, lo que es tan sencillo como copiar desde el sitio donde te lo explique y pegarlo en este recuadro.

nombre codigo elemento alvaro arrarte
A agregar nombre y código al elemento

Posteriormente tienes la posibilidad de controlar donde, cuando y que es lo que se ha a ejecutar en este Hook de WordPress, para comenzar debes ir a la sección “Settings” o personalización (configuración) colocar las opciones según tus necesidades.

Para seguir con el ejemplo en la primera opción “Hook” elijes donde quieres que se ejecute la función o líneas de código que agregaste, para este caso sería antes del contenido principal “before_main_content”.

Luego tienes que marcar si el Hook de WordPress va a llamar a una función por medio de un Shortcode “Execute Shortcode” o si por el contrario va a ejecutar código en PHP “Execute PHP”, en este caso sería la segunda opción.

Por último debes elegir la prioridad que tendrán las tareas de este Hook en relación a las demás funciones creadas, por los momentos la puedes dejar como está, en el caso que tengas otros Elementos debes elegir las prioridades.

configuracion hook alvaro arrarte
Opciones de configuración del Hook

Para ajustar donde se puede o no ejecutar tu código debes pasar a la siguiente pestaña “Display Rules” o reglas para mostrar, en “Location” puedes especificar los sitios en donde se mostrará el Hook para el ejemplo de las migas de pan en WordPress coloca el sitio WEB completo “Entire Site

En la sección “Exclude” puedes establecer diferentes reglas para quitar de ciertas partes la ejecución del Hook de WordPress, en este caso yo he agregado dos una para que no se muestre en la página de inicio y otra para no se muestre en las páginas.

También puedes hacer excepciones por usuarios en la sección “Users”, para este caso no coloques ninguna regla para que se le puedan mostrar las migas de pan a todos los visitantes de tu WEB.

reglas para mostrar alvaro arrarte
Reglas para mostrar la función del Hook

La última pestaña “Internal Notes” sirve para que puedas agregar una nota que te recuerde para qué sirve este Hook de WordPress, es muy útil cuando tienes varios elementos creados o varias personas le hacen mantenimiento a tu WEB.

Para que los cambios tengan efecto y comience a funcionar tu Hook para que mostrar las migas de pan en WordPress debes publicarlo para ello es necesario que presiones el botón “Publicar” de la sección del mismo nombre que se encuentra en la parte superior derecha.

guardar cambios elemento alvaro arrarte
Publicar el nuevo Hook

Una vez se guarden los cambios tu Hook quedará publicado y volverás a la pantalla de inicio donde estaba el cuadro, esta vez podrás ver tu nuevo elemento de WordPress.

Recomendaciones finales sobre las migas de pan en WordPress

Ahora que ya sabes que son las migas de pan y como mostrar migas de pan en WordPress para hacer que tu contenido tenga una mejor visibilidad tanto para los usuarios de tu sitio WEB como para los buscadores.

Además viste como colocar las migas de pan de WordPress en páginas WEB hechas con GeneratePress, Divi o cualquier otro tema que no tenga las breadcrumb WordPress activadas con un Hook de WordPress.

Recuerda que todos estos cambios pueden parecer sencillos sin embargo afectan todo el funcionamiento de tu sitio WEB, por eso antes de realizar cualquier modificación toma las previsiones necesarias.

Si todavía tienes dudas de cómo mostrar las migas de pan en WordPress puedes hacer contacto conmigo y así me cuentes como te puedo ayudar. También si necesitas mantenimiento WEB o cualquier de los otros servicios que ofrezco en asesoría y soporte para tu negocio.

Déjame un comentario contándome qué te pareció este artículo y si te ayudo a saber cómo agregar las migas de pan en WordPress para mejorar la visibilidad del contenido de tu WEB.

También si tienes alguna duda, sugerencia, comentario o reclamo en la parte de abajo y así podré contar con tu valioso aporte.

Deja un comentario

Te informo que los datos de carácter personal que proporciones en este formulario, serán tratados por Alvaro Arrarte como responsable de este sitio WEB. Estos datos son recolectados y tratados para la gestión de los comentarios que realices en este blog.

Legitimación: Si no introduces los datos personales que aparecen como obligatorios, no podrás realizar ningún comentario.  Tus datos serán almacenados en los servidores de GlobalHost en los Estados Unidos, esta es su política de privacidad.

Puedes ejercer tus derechos de acceso, rectificación, limitación y suprimir los datos en info@alvaroarrarte.com así como el derecho a presentar una reclamación ante una autoridad de control.