El Tema Divi está lleno de opciones, puede personalizar casi todo desde su oficina trasera. Excepto que los desarrolladores han olvidado (o omitido a sabiendas) predecir una opción para ruta de navegación.
Sin embargo, es tan útil, ya sea para los usuarios de Internet (que se puede localizar fácilmente en su sitio) o para indexar robots. Esto también es un activo SEO (referencia natural).
En este artículo, verás cómo agregar ruta de navegación gratis y sobre todo usted será capaz decidir dónde insertar.
Descubre todo lo que puedes hacer con el tema Divi
Aquí está el programa:
- ¿Para qué sirve la ruta de navegación?
- ¿Cómo insertar en Divi?
- ¿Dónde insertar el hilo Ariane?
- ¿Qué alternativa a Breadcrumb NavSiguiente?
- En conclusión...
¿Para qué sirve la ruta de navegación?
De hecho, es posible que no lo encuentre útil añadir una ruta de navegación en su sitio o blog y sin embargo esto se recomienda no decir sobreriding.
En primer lugar, piensa en el usuario, es decir, el usuario de Internet, para quien esta característica puede ser conveniente en la navegación interna en su sitio, especialmente si ofrece muchos contenidos. Por lo tanto, el visitante será más cómodo para encontrar su "camino", regresar etc., mejora el UX (experiencia del usuario).
A continuación, pensemos en la referencia natural de su sitio. A los robots de indexación les gustan los sitios que muestran rutas de navegación, por lo que es obvio complacerlos. Esta funcionalidad está lejos de ser superflua y es una ventaja que no debe pasarse por alto en términos de SEO.
¿Cómo insertar una ruta de navegación en Divi?
Para agregar a su Tema Divi, necesitarás tres cosas:
- uno Divi child theme,
- un plugin llamado Breadcrumb NavNext,
- un editor de texto.
1. Instala el plugin Breadcrumb NavSiguiente
Esto sucede de la misma manera que la instalación de cualquier plugin:
- Vaya a la pestaña Prórrogas Añadir
- Search plugin Breadcrumb NavNext
- Haga clic en instalar
- Enable it
2. Configurar plugin
Este plugin gratuito ofrece algunas opciones de configuración en las que no voy a morar pero sabe que puede habilitar o deshabilitar algunas opciones interesantes, para esto:
- Vaya a la pestaña Ajustes Breadcrumb NavNext
- Encontrará 4 fichas: General, Tipos de Correo, Taxonomías y Micellaneous. Aquí es donde puedes personaliza el contenido de tus rutas de navegación.
- Incluso puedes decidir del separador de los elementos que componen tu ruta de navegación. Por lo general encuentra este símbolo " >" pero puede cambiarlo utilizando el Guía de símbolos disponibles en HTML y poner una flecha, un corazón, un diamante, etc.
3. Mostrar tu hilo Ariane
Una vez el plugin Breadcrumb NavNext set, tendrás que insertar una pieza de código dentro un archivo PHP de su tema niño para que el hilo Ariane aparezca en su sitio. Esto es lo que necesitará insertar:
<div id="ad-breadcrumbs" class="breadcrumbs" typeof="BreadcrumbList" vocab="http://schema.org/">
<?php if(function_exists('bcn_display')){
bcn_display();
}?>
</div>¿Dónde insertar esta famosa ruta de navegación?
Ahora que tienes todas las cartas en la mano, sólo tienes que copiar y pegar el código que acabamos de ver... pero la gran pregunta es: ¿Dónde insertar esta pieza de código? Y la respuesta a esa pregunta es bastante subjetiva... Estos son algunos ejemplos:
Caso #1: en el archivo header.php
The extension Snippet Code header.php contiene el encabezado de su sitio con generalmente logotipo, navegación(s) etc. Por lo tanto, es el lugar adecuado para mostrar una ruta de navegación.
Con este método, estará presente en todas las páginas de su sitio : páginas, artículos, páginas de archivo, etc.
Para insertar, tendrá que archivo duplicado header.php contenidos en archivos de su tema Divi (el tema principal) y pega esta copia en la carpeta de tema infantil.
Entonces tú Editar este archivo con software (un editor de texto como SublimText o Bracket por ejemplo) y usted Elija el lugar ideal para la inserción.
Por ejemplo de mi captura de pantalla arriba, inserté el código después de la línea 60 de mi expediente header.php.
Caso 2: en el archivo soltero. php abajo el título del artículo
The extension Snippet Code soltero. php es el archivo de referencia para mostrar artículos del blog.
Si desea que su Breadcrumb aparezca sólo en sus artículos, entonces este es el archivo que necesitará editar. Siempre duplicar el archivo soltero. php el tema padre en el tema de su hijo y modificarlo usando un editor de texto como se explica en el caso #1.
Por este ejemplo, lo inserté después línea 37 archivo soltero. php, justo debajo del título que vi gracias a las etiquetas y.
Caso #3: en el archivo soltero. php debajo de la foto en el frente
También puede ser una solución alternativa que me gusta menos pero que podría adaptarse a algunos de sus proyectos. Simplemente cambie la ubicación de la punta del código para colocarla después de la llamada a imagen en el frente.
Para insertar esta pieza de código, localicé el final de la sección llamada .et_post_meta_wrapperDespués línea 123, como se puede ver en la imagen anterior.
¿Una alternativa a Breadcrumb NavNext?
Si no quieres demasiado Pon tus manos en el código, siempre puedes optar por un plugin premium que hace el trabajo muy bien.
Esta es la extensión llamada Divi Breadcrumbs Módulo que está disponible por $15... Eso puede ser una buena alternativa.
Otras soluciones: Yoast SEO y SEO Prensa también ofrecen una característica de Breadcrumb.
En conclusión...
Lo viste con un poco de código, podríamos Personalizar su tema Divi, no sólo no es complicado pero además, esta característica beneficiará el SEO natural de su sitio. Entonces, ¿qué estás esperando?
¿Necesita más recursos en Divi? Visita Elegante Themes blog lleno de ideas y tutos!
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
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.
Bonjour,
Une idée pour insérer un fils d’ariane quand on utilise le modèle « blank page » ?
Merci !
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.
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 !
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…
Ben … non : c’est du PHP qu’il faut insérer. Le module Code n’accepte que HTML, CSS ou Javascript
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…
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é
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 »
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.
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
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…
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
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
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 ?
Non c’est aussi une bonne méthode 😉
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
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 …
Salut Stephane. J’allais vous répondre mais vous avez trouvé ! Cool
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 !
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 ?
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…
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.
Bonjour Lycia,
JLuc ecrit :
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] ».
…
Mon modèle de page est un blank page
Peut tu développer s’il te plait ?
Merci
problème avec mes commentaires ?
Pardon c’est moi qui suis dans le jus…
Effectivement il y a des solutions plus faciles selon le plugin SEO utilisé.
oui merci Lycia ♥
Jean-Luc parlais de Yoast , et effectivement c’est simple, très rapide et ça fonctionne du premier coup !
MERCI
Ah super. Mon article est vieux et plus d’actualité certainement 😉
Salut Lycia,
Concernant la position du fil d’ariane, je veux le mettre sous le H1 mais, j’ai peur que niveau SEO ce ne soit pas top.
En effet, le premier paragraphe sous le H1 a un fort impact SEO. Donc que se passe t il lorsque le premier texte sous le H1 est un fil d’ariane? est ce que google le prend en compte comme « paragraphe explicatif du H1 » ?
Bonjour Alex. Pas de souci si le fil est dans une balise de paragraphe ou autre, tant qu’il n’a pas de balise Hun – ce qui ne devrait pas être le cas – tu peux le placer sous le H1
Bonjour Lycia,
merci beaucoup pour tes lumière sur le thème ! Sais-tu s’il existe une manière simple en natif de supprimer l’affichage des catégories dans le modules miettes de pain de Divi ?
Je voudrais simplement avoir la possibilité de passer de la page produit à la page boutique et de supprimer la catégorie.
Merci d’avance de ton aide !
Bonjour Laurette, tu me poses une colle. As-tu regardé s’il y a une option pour désactiver cela dans les paramètres ?
Bonjour
J’ai une question, j’ai installé un fil d’ariane sur les pages mais quand je fais une recherche sur le site ça me pourri ma recherche car du code apparait au résultat, as tu une solution pour que ça n’appairasse pas sur la page de recherche ?
Bonne soirée
Fabrice
Je pense que tu devrais créer une page de résultats de recherche personnalisée avec le thème builder et ne pas y faire apparaître le fil d’ariane : https://astucesdivi.com/page-des-resultats-de-recherche/