¿Cómo puedo insertar un rastro de migas de pan en Divi? ¿Y dónde ponerlo?

Actualizado el 30/10/2020 | Publicado el 29/09/2017 | 24 comentarios

El Tema Divi está lleno de opciones, puede personalizar casi todo desde su back-office. Excepto que los desarrolladores olvidaron (u omitieron conscientemente) proporcionar una opción para el rastro de migas de pan.

Sin embargo, es muy útil, tanto para el usuario (que podrá ubicarse fácilmente en su sitio) como para los robots de indexación. También es una ventaja para mejorar el SEO (referencia natural).

En este artículo verás cómo añadir un rastro de migas de pan gratis y sobre todo podrás decidir dónde insertarlo.

Vea lo que puede hacer con el tema Divi

Aquí está el programa:

Anuncio: este artículo contiene enlaces de afiliación que reconocerá fácilmente. Los enlaces clásicos están en púrpura y los enlaces patrocinados están en rosa.

¿Para qué sirve un rastro de migas de pan?

De hecho, es posible que no encuentre ninguna utilidad para añadir un rastro de migas de pan en su sitio o blog y, sin embargo, es recomendable, si no esencial.

En primer lugar, pensemos en el usuario, es decir, en el internauta, para quien esta funcionalidad puede ser muy práctica en la navegación interna de su sitio, sobre todo si ofrece muchos contenidos. El visitante se sentirá más cómodo para encontrar su "camino", volver, etc., lo que mejora la UX (experiencia del usuario).

A continuación, piense en la referenciación natural de su sitio. Los robots de indexación aprecian los sitios que muestran un rastro de migas de pan, por lo que es obvio complacerlos. Esta característica no es ni mucho menos superflua y es una baza que no hay que descuidar en términos de SEO.

¿Cómo puedo insertar un rastro de migas de pan en Divi?

Para añadirlo a tu tema Divi, necesitarás tres cosas:

1. Instalar el plugin Breadcrumb NavNext

Breadcrumb NavNext - fil d'Ariane
Breadcrumb NavNext plugin para insertar un breadcrumb

Esto se hace de la misma manera que la instalación de cualquier plugin:

  • Ir a la pestaña Extensiones > Añadir
  • Buscar el plugin Breadcrumb NavNext
  • Haga clic en instalar
  • Actívalo

2. Configurar el plugin

Este plugin gratuito ofrece algunas opciones de configuración en las que no me voy a detener pero que sepas que puedes habilitar o deshabilitar algunas opciones interesantes, para ello :

  • Ir a la Ajustes > Navegación con migas de panSiguiente
  • A continuación, encontrará 4 pestañas: General, Tipos de publicaciones, Taxonomías y Miscelánea. Aquí es donde puede personalizar el contenido de su rastro de migas de pan.
  • Incluso puede decidir el separador de los elementos que componen su rastro de migas de pan. Normalmente, encontrará este símbolo " > " pero puede cambiarlo con la ayuda del guía de los símbolos disponibles en HTML y poner una flecha, un corazón, un diamante, etc.
Choisir le séparateur de son fil d'Ariane
Opción de elegir el separador para su rastro de migas de pan

3. Mostrar el rastro de las migas de pan

Una vez que el plugin Breadcrumb NavNext esté configurado, tendrá que insertar un trozo de código dentro de un archivo PHP de su tema infantil para que el rastro de migas de pan aparezca en su sitio. Esto es lo que tendrá que insertar:

 

¿Dónde insertar este famoso hilo de Ariadna?

Ahora que tienes todas las cartas en la mano, lo único que tienes que hacer es copiar y pegar el código que acabamos de ver... pero la gran pregunta es : ¿dónde insertar este trozo de código? Y la respuesta a esta pregunta es bastante subjetiva... Veamos algunos ejemplos:

Caso 1: en el expediente header.php

El archivo header.php contiene la cabecera de su sitio web, generalmente con el logotipo, las navegaciones, etc. Por lo tanto, es el lugar adecuado para mostrar un rastro de migas de pan.

Con este método, estará presente en todas las páginas de su sitio: páginas, artículos, páginas de archivo, etc.

Para insertarlo, tendrás que duplicar el archivo header.php contenido en los archivos de tu tema Divi (el tema padre) y pegar esa copia en la carpeta de tu tema hijo.

Breadcrumb placé sous le menu - header.php
Ruta de migas de pan bajo el menú - header.php

A continuación, editará este archivo con un programa inform ático (un editor de texto como SublimText o Soporte por ejemplo) y elegirá el lugar ideal para insertarlo.

Para el ejemplo de mi captura de pantalla anterior, he insertado el código después de la línea 60 de mi archivo header.php.

Caso n°2 : en el expediente single.php debajo del título del artículo

El archivo single.php es el archivo de referencia para mostrar las entradas del blog.

Si quiere que su rastro de migas de pan aparezca sólo en sus artículos, tendrá que modificar el archivo. Duplicar siempre el archivo single.php del tema padre en su tema hijo y modificándolo con un editor de texto como se explica en el caso 1.

Fil d'Ariane affiché sous le titre de mon article
Rastro de migas de pan publicado bajo el título de mi artículo

Para este ejemplo, lo inserté después de la línea 37 del single.phpjusto debajo del título que he localizado gracias al

y etiquetas.

.

Caso 3: en el expediente single.php archivo debajo de la imagen de la página principal

Esta también puede ser una solución alternativa que me gusta menos pero que podría ser adecuada para algunos de sus proyectos. Todo lo que tienes que hacer es cambiar la ubicación del fragmento de código para colocarlo después del la foto de la portada.

Fil d'Ariane placé sous l'image à la une
Ruta de migas de pan bajo la imagen de la página principal

Para insertar este trozo de código, localicé el final de la sección denominada .et_post_meta_wrapperdespués de la línea 123, como puede ver en la captura de pantalla anterior.

obtenir Divi - get Divi

¿Una alternativa a Breadcrumb NavNext?

Si no quieres meter mucho las manos en el código, siempre puedes optar por un plugin premium que hace muy bien el trabajo.

Se trata de la extensión denominada Módulo Divi Breadcrumbs que está disponible por 15$... Puede ser una buena alternativa.

Otras soluciones : Yoast SEO y SEOPress también ofrecen una función de migas de pan.

En conclusión...

Has visto que con unos pocos trozos de código, puedes personaliza tu tema DiviNo sólo es fácil de hacer, sino que también será beneficioso para la referenciación natural de su sitio web. Entonces, ¿a qué esperas?

¿Necesitas más recursos sobre Divi? Visite el blog de ElegantThemes que está lleno de ideas y tutoriales.

Comment ajouter un fil d'Ariane dans Divi ?
¿Cómo se añade un rastro de migas de pan en Divi? Dilo en Pinterest
Divi tutorial : add breadcrumb in divi

1.063 palabras

4

A ti también te debería gustar:

Appliquer des masques et des formes sur vos images avec Divi

Aplica máscaras y formas a tus imágenes con Divi

Las máscaras hacen que tus imágenes parezcan más gráficas y dan a tu diseño un aspecto original. ¿Sabías que puedes crearlos fácilmente con el Constructor Visual de Divi? Te muestro cómo en este tutorial y en este vídeo.

24 Commentaires

  1. Jamel

    Bonjour Lycia,

    Meilleurs voeux pour cette nouvelle année!

    J’ai suivi ton tuto. Toutefois, lorsque j’ajoute ton code, le fil d’ariane s’affiche dans le menu secondaire. Je n’ai pas le même rendu…
    J’utilise Divi + Woocommerce. Où placer ce code pour qu’il puisse s’afficher en haut des pages te fiches produits.

    Merci d’avance

  2. Lycia

    Bonjour Jamel ! Meilleurs vœux à toi aussi.
    Concernant le Fil d’Ariane, je me doute que s’il apparaît dans ton menu secondaire c’est que tu l’as inséré à cette endroit dans le code, tu as dû l’insérer dans le fichier header.php, je me trompe ? Il faut donc que tu refasses des essais jusqu’à ce qu’il apparaisse où tu le désires. Pour ma part, sur ce blog Astuces Divi, j’ai utilisé le Cas N°2, c’est à dire, en dessous du titre de mon article, j’ai donc modifié le fichier single.php : regarde en haut de cet article, il est en couleur VIOLET & VERT…
    Concernant WooCommerce, moi aussi je l’utilise et le fil d’Ariane est automatique, je n’ai rien eu à faire, c’est l’extension WooCommerce qui l’a géré toute seule, comme tu peux le voir sur un produit de ma boutique (boutique en cours de construction mais déjà visible), le chemin (fil d’Ariane) est déjà disponible, juste au dessus de l’image de mon produit, regarde sur ce produit par exemple (le fil d’Ariane est en gris, cette fois) : Support Divi
    J’espère que ma réponse va t’aider et n’hésite pas à revenir nous donner ta solution, ça pourrait aider d’autres personnes.
    Bonne continuation.

  3. Philippe Lenders

    Bonjour,

    Une idée pour insérer un fils d’ariane quand on utilise le modèle « blank page » ?

    Merci !

  4. Lycia Diaz

    Bonne question !
    Je n’ai pas testé avec un modèle Blank. Il faudrait voir quel est le modèle de page qui est utilisé par Divi pour afficher une Blank Page. Tu peux utiliser l’extension « Afficher le modèle courant » qui t’indiquera quel fichier modifier. Peut-être l’insérer dans le fichier page.php ??? À tester.

  5. Philippe Lenders

    Non, j’avais déjà essayé avec « page.php » 😉
    Grâce à l’extension « afficher le modèle courant », c’est résolu !
    C’est dans « page-template-blank.php »
    On est cependant « condamné » (je pense) à afficher le fils d’Ariane tout en haut, ce qui n’est pas très joli et moins pratique qu’en dessous du module « menu pleine page » par exemple.
    Peut-être demain avec Divi 4 ?
    Encore merci Lycia !

  6. Lycia Diaz

    Super ! Merci Philippe pour le tuyau !
    Du coup, ça me fait penser à quelque chose : pourquoi ne pas placer le code du fil d’Ariane au sein d’un module « code » de Divi et de le placer où tu veux au sein de ton layout ? Par exemple, en dessous de ton module « menu » ? C’est peut-être faisable ? À tester…

  7. Philippe Lenders

    Ben … non : c’est du PHP qu’il faut insérer. Le module Code n’accepte que HTML, CSS ou Javascript

  8. Lycia Diaz

    Ah mince… je n’avais pas réfléchi… ni essayé… mais du coup avec le nouveau Theme Builder, je me demande comment faire. Il faudrait que je teste…

  9. Philippe Lenders

    Divi 4.0 avec custom header :

    J’ai mis le code dans page.php, après la ligne 17
    Juste avant

    Je pense qu’il y a d’autres possibilité

  10. Philippe Lenders

    Euh, pas une bonne idée de copier coller la ligne en php.
    Donc, coller le code après la ligne 17 juste avant le test «  »have_posts »

  11. Lycia Diaz

    Merci Philippe,
    En effet, tu ne peux pas insérer du PHP en commentaire, c’est une histoire de sécurité 😉 mais merci pour l’info, elle pourra servir pour d’autres utilisateurs.

  12. arlt

    Bonsoir Lycia,

    Merci à nouveau pour ce superbe tutoriel qui va changer ma vie si j’arrive à régler un petit soucis 🙂

    J’ai tout respecté à la lettre, par contre je n’arrive pas à trouver la solution pour que le fil d’ariane soit : accueil > la page et non la catégorie.

    J’ai peut-être un soucis dans la hiérarchie de mon site…

    Au cas où, si jamais tu as quelques minutes pour me sauver, voici comment se présente mon site.

    Dans mon menu, j’ai un onglet blog avec deux sous-rubriques (ce sont des pages). Ces deux pages comprennent des articles de blog qui eux sont classés dans des catégories.

    Voilà rien de plus ! cela ne me paraît pas très déconnant niveau utilisation.
    Mais pour le coup, le fil d’ariane me renvoie vers mes catégories. Je n’ai pas trouvé de solution dans les réglages (ou pas vu). Et pour couronner le tout, je me rends compte que la catégorie vers laquelle il me renvoie, comprend tous mes articles sur une seule page à la suite. Pas top top pour Google.

    En tout cas, je te remercie d’avance si tu as le temps de m’aider.

    Stéphanie

  13. Lycia Diaz

    Salut Stéphanie !
    Je suis allée voir ton site.
    Effectivement, c’est la catégorie qui est prise en compte dans la hiérarchie. Je ne pense pas qu’il y ait une option pour ça. Et bien sûr, un fil d’Ariane est très compliqué à coder, donc, là je ne vois pas de solution.
    Par contre – et cela n’est que mon avis – c’est mieux que la page d’archive de catégorie affiche de nombreux articles plutôt que 5 ou 10 : cela évite à Google d’indexer beaucoup de pages. Par exemple, si tu as 100 articles dans ta catégorie, il vaut mieux que Google indexe 1 page d’archive comprenant 100 articles plutôt que 10 pages de 10 articles, non ? Le budget crawl « coûte cher »…
    Par contre, j’ai une solution pour toi : tu peux customiser ta page d’archive de catégorie depuis le nouveau thème builder et tu pourrais afficher tes cartes de blog avec tes jolies « images à la une » au sein de cette page.
    Au passage j’ai vu que tes articles utilisaient la mention « mis à jour le » : as-tu suivi le tuto publié ici ? Hi hi, c’est un clin d’œil 😉
    Au plaisir d’échanger…

  14. Stéphanie

    Bonjour Lycia,
    Je te remercie pour ton retour et surtout pour ta solution. Je vais voir ce que je peux faire pour garder les choses dans l’état et customiser ma page d’archive.
    Pour répondre à ta dernière question : en effet j’ai suivi le tuto de mise à jour (ce n’est pas le seul d’ailleurs :)). Tes 2 blogs sont pour moi d’excellentes sources d’améliorations et d’inspiration. Un grand merci pour le travail accompli.
    Belle journée,
    Stéphanie

  15. Lycia Diaz

    Merci Stéphanie ! C’est très gentil à toi ! Et oui, je me doute que mon tuto n’est pas le seul, c’est une fonctionnalité plutôt courante 😉 À bientôt
    Lycia

  16. JLuc

    Lycia,
    Pour installer mon fil d’Ariane, je ne suis pas passé par autant d’aspects tech.
    J’ai simplement ajouté à l’emplacement souhaité le module « code » puis j’y ai collé « [wpseo_breadcrumb] ».
    Trop simpliste pour être efficace à ton avis ?

  17. Lycia Diaz

    Non c’est aussi une bonne méthode 😉

  18. Stéphane

    bonjour et merci pour toutes vos astuces que je parcours assidument depuis 2 jours (vive le confinement). Je trouve par contre des choses un peu contradictoire, comme par exemple le positionnement d’un breadcrumb « automatique » sur les pages produits woocommerce. Cela est tout a fait juste, mais comme j’utilise en même temps ton tuto sur la création d’un template général pour mes fiches produits avec le divi thème builder, il se trouve que le breadcrumb disparait a cet endroit ! et aucune extension divi ou woocommerce n’est proposé pour ça dans le theme builder, donc comment faire ?
    en général, mais a moins que je me trompe, je trouve dommage que l’on ne puisse pas implanter des extensioins externes a divi dans le theme builder, car pour ma boutique j’ai besoin de modules tres spécifiques, et du coup jene vois pas comment les intégrer sur l’ensemble des mfiches produits (sauf ceux qui disposent évidemment d’un shortcode). en tout cas merci pour ces tutos clairs et précis

  19. stéphane

    Oups méa culpa !! contrairement a ce que je disais, et pour ceux qui chercheraient bêtement comme moi le fil d’ariane dans le theme builder, et en particulier sur une fiche produit, le module a appeler est le « woo miettes de pain »…et oui j’ai même pas tilté qu’ils avaient traduit breadcrumb au mot à mot!! mdr c’était là sous mes yeux et j’ai rien vu!!! donc rectification et amende honorable, il semble qu’on puisse faire ce que l’on veut avec ce thème builder …

  20. Lycia Diaz

    Salut Stephane. J’allais vous répondre mais vous avez trouvé ! Cool

  21. stéphane

    Salut Lycia, de rien, et finalement j’ai encore besoin de tes lumières ! comme je le disais dans mon premier post, je n’arrive pas a trouver par contre sur le thème builder, le moyen d’insérer des modules autres que ceux de divi. sais-tu si c’est volontaire de leur part ou pas ? car le soucis c’est que j’ai au moins 2 a 3 modules qui me permettent d’avoir des fonctions complémentaires sur mes fiches produit (comme calcul d’un prix dégressifs selon les quantités), et je ne peux pas les utiliser du coup sur mon modèle de page..c’est bien dommâge puisque le but est de gagner du temps dans la composition de ses fiches produits, mais là sans ces fonctionnalités cela ne m’avance a rien…merci de ta réponse !

  22. Lycia Diaz

    Salut Stéphane,
    J’avais perdu de vue ton commentaire.
    Euh, quand tu parles de module, tu parles d’une extension ?
    Normalement, la fonctionnalité doit marcher et ne doit pas être supprimée de tes fiches produit. C’est bien des fiches produit que tu parles ?

  23. Christian DECONYNCK

    Bonjour Lycia,
    Christian dans le tuyau… Je viens de chercher à intégrer le fil d’Ariane mais rien n’apparaît. J’ai fais de multiples tentatives. Pour information, j’utilise un thème enfant de DIvi dont j’ai personnalisé header et corps pour la page d’accueil et les articles. Du coup je me pose la question : le fait de ne pas utiliser un header global a-t-il une incidence sur le choix du fichier header dans lequel on intègre le bout de ton code ? Je pensais que non, mais je me trompe peut-être ?
    Merci pour ton aide…

  24. Lycia Diaz

    Salut Christian. Je crois qu’effectivement les fichiers sont différents selon la méthode utilisée. J’ai remarqué de nouveaux fichiers depuis l’apparition du thème builder mais je te confirme que le fichier header.php est bien celui utilisé si tu n’utilises PAS le Thème Builder de Divi. Tu peux utiliser des plugins du genre Which Template (https://wordpress.org/plugins/which-template/) pour voir quels fichiers sont utilisés par le thème lorsque tu navigues en front. Cela peut te donner des indications.

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Je souhaite recevoir les news du blog Astuces Divi !

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Pínchalo en Pinterest

Acciones
Comparte esto