Dans le cadre d’un développement WordPress personnalisé ou pour alléger la dépendance aux extensions, il est tout à fait pertinent de créer un fil d’Ariane en PHP directement dans le thème. Cet élément de navigation, à la fois discret et structurant, facilite la compréhension de l’arborescence du site par les utilisateurs, tout en contribuant à l’optimisation SEO. Ce guide présente une méthode complète pour intégrer un fil d’Ariane sans plugin, avec des conditions adaptées aux différents types de contenus : pages, articles, archives, taxonomies et erreurs 404.
Les bases de la structure d’un fil d’Ariane en php
Le fil d’Ariane, également appelé breadcrumb, est un élément de navigation qui affiche à l’utilisateur le chemin parcouru depuis la page d’accueil jusqu’à la page en cours. Il permet de visualiser l’emplacement d’une page dans la hiérarchie du site, tout en offrant une possibilité de remonter facilement à des niveaux supérieurs (catégorie, rubrique, dossier parent…). Sa structure de base suit une logique hiérarchique simple, typiquement :
Accueil > Catégorie > ArticleCette suite de liens est généralement séparée par un symbole comme >, une barre oblique (/) ou un chevron personnalisé. Le fil d’Ariane est non seulement un repère pour l’utilisateur, mais également un levier technique dans la structuration sémantique du site. Il contribue à améliorer l’expérience utilisateur (UX), à diminuer le taux de rebond, et à renforcer le maillage interne du site, autant d’éléments favorables au référencement naturel.
Sur le plan technique, le fil d’Ariane peut être intégré directement dans un fichier de template principal (comme header.php) ou dans un fichier partiel dédié (par exemple breadcrumb.php). Ce dernier peut ensuite être inclus dans les différents modèles du thème grâce à un appel via get_template_part() ou à l’aide d’une fonction personnalisée. Voici une première version très simplifiée, qui servira de base pour le développement progressif du fil d’Ariane :
<?php
function custom_breadcrumb() {
echo '<nav class="breadcrumb">';
echo '<a href="' . home_url() . '">Accueil</a> > ';
// contenu dynamique selon le contexte
echo '</nav>';
}
?>
À ce stade, seul le lien vers la page d’accueil est affiché. Il est important de noter que le mot « Accueil » peut tout à fait être remplacé par un terme plus stratégique, en particulier dans une optique SEO. Par exemple, si le site est dédié au tourisme local, le lien pourrait afficher « Page d’accueil – Tourisme dans le Jura » ou simplement « Jura Tourisme ». Cette légère personnalisation permet d’associer un mot clé pertinent à l’un des liens les plus visibles du site, y compris dans les résultats enrichis de Google, si le balisage est correctement structuré en données JSON-LD.
Attention toutefois à ne pas sur-optimiser ce libellé : il doit rester naturel, court, compréhensible par l’utilisateur, et cohérent avec la thématique globale du site. Un bon compromis consiste à intégrer une expression claire et descriptive comme :
- « Accueil – Boutique bio »
- « Page d’accueil – Agence SEO Lille »
- « Accueil – Blog développement web »
Ce petit ajustement peut renforcer le contexte sémantique de la page d’accueil et améliorer l’identification du site par les moteurs de recherche. C’est une astuce simple à mettre en place qui peut contribuer à optimiser la structure globale du site, sans alourdir le code ou dégrader l’expérience utilisateur.
Ajout des conditions selon les types de contenu
Le fil d’Ariane sur WordPress doit refléter fidèlement la structure logique du site (Celui de Yoast SEO le fait d’ailleurs). Cela signifie qu’il doit s’adapter dynamiquement à chaque type de page visitée : article de blog, page statique, catégorie, étiquette, page de recherche, archive mensuelle, ou encore page d’erreur 404. Chaque situation implique une hiérarchie propre, qu’il convient de reproduire avec justesse dans le fil d’Ariane pour qu’il soit à la fois lisible pour l’utilisateur et interprétable par les moteurs de recherche. Ce reflet de la structure peut se faire de deux façons complémentaires :
- À partir des titres : Dans la majorité des cas, les éléments affichés dans le fil d’Ariane sont les titres des pages, des articles ou des catégories (via
get_the_title(),single_cat_title(), etc.). Cela permet de proposer une navigation cohérente avec le contenu affiché, et une lisibilité immédiate pour l’utilisateur. - À partir des URLs ou slugs : Dans certains cas, notamment pour les contenus fortement structurés, il peut être judicieux d’afficher une représentation plus technique, issue des slugs (morceaux d’URL), surtout si ceux-ci contiennent des mots clés importants pour le référencement. Cela permet de renforcer la cohérence entre navigation interne, architecture de l’URL et stratégie SEO.
Par exemple, une URL telle que /agence-seo/paris/ peut justifier un fil d’Ariane affichant : Accueil > Agence SEO > Paris, même si les titres internes sont légèrement différents. L’important est de garder une logique claire, compréhensible, et conforme à l’expérience utilisateur attendue. Voici un exemple de fonction PHP prenant en charge les principaux cas de figure rencontrés sur un site WordPress classique :
<?php
function custom_breadcrumb() {
if (is_front_page()) return;
echo '<nav class="breadcrumb">';
echo '<a href="' . home_url() . '">Accueil</a> > ';
// Cas d’un article (post standard)
if (is_single()) {
$category = get_the_category();
if ($category) {
$first_cat = $category[0];
echo '<a href="' . get_category_link($first_cat->term_id) . '">' . $first_cat->name . '</a> > ';
}
echo '<span>' . get_the_title() . '</span>';
// Cas d’une page statique
} elseif (is_page()) {
global $post;
if ($post->post_parent) {
$parent_links = array();
$parent_id = $post->post_parent;
while ($parent_id) {
$page = get_post($parent_id);
$parent_links[] = '<a href="' . get_permalink($page->ID) . '">' . get_the_title($page->ID) . '</a>';
$parent_id = $page->post_parent;
}
$parent_links = array_reverse($parent_links);
foreach ($parent_links as $link) {
echo $link . ' > ';
}
}
echo '<span>' . get_the_title() . '</span>';
// Cas d’une page de catégorie
} elseif (is_category()) {
$category = get_category(get_query_var('cat'));
if ($category->parent != 0) {
$parent = get_category($category->parent);
echo '<a href="' . get_category_link($parent->term_id) . '">' . $parent->name . '</a> > ';
}
echo '<span>' . single_cat_title('', false) . '</span>';
// Cas d’une page d’étiquette (tag)
} elseif (is_tag()) {
echo '<span>Étiquette : ' . single_tag_title('', false) . '</span>';
// Cas d’une recherche interne
} elseif (is_search()) {
echo '<span>Résultats de recherche pour : ' . get_search_query() . '</span>';
// Cas d’une page 404
} elseif (is_404()) {
echo '<span>Page non trouvée</span>';
// Cas d’une archive (date ou type de contenu)
} elseif (is_archive()) {
if (is_day()) {
echo '<span>Archives : ' . get_the_date() . '</span>';
} elseif (is_month()) {
echo '<span>Archives : ' . get_the_date('F Y') . '</span>';
} elseif (is_year()) {
echo '<span>Archives : ' . get_the_date('Y') . '</span>';
} else {
echo '<span>' . post_type_archive_title('', false) . '</span>';
}
}
echo '</nav>';
}
?>
Dans cette fonction, les titres affichés correspondent généralement aux titres des contenus (catégories, pages, articles, etc.). Toutefois, il est possible de modifier ces libellés pour faire apparaître des slugs ou des textes personnalisés, notamment dans le cas de contenus optimisés pour le référencement naturel. Cela peut être fait, par exemple, en remplaçant get_the_title() par une chaîne personnalisée, ou en construisant manuellement les éléments du fil d’Ariane selon une logique fondée sur les URLs.
Un fil d’Ariane bien structuré contribue à une meilleure compréhension de l’architecture du site, à la fois pour les internautes et pour les moteurs de recherche. En combinant affichage des titres pertinents et logique d’URL optimisée, il devient un véritable levier à la fois ergonomique et sémantique.
L’intégration du fil d’Ariane dans le thème WordPress
Plusieurs méthodes permettent d’intégrer ce fil d’Ariane dans un thème WordPress :
1. Via le fichier functions.php
Insérer la fonction custom_breadcrumb() dans le fichier functions.php de votre thème (ou thème enfant) est la méthode la plus directe pour rendre le fil d’Ariane accessible dans l’ensemble des fichiers de votre template WordPress. Ce fichier agit comme un point d’entrée pour toutes les fonctions personnalisées utilisées sur le site, ce qui en fait l’endroit idéal pour centraliser ce type de logique. Une fois la fonction ajoutée, elle peut être appelée à n’importe quel endroit de vos templates à l’aide d’un simple appel PHP :
<?php custom_breadcrumb(); ?>Ce code peut être placé dans header.php, juste en dessous de la balise <h1> du contenu principal, ou encore dans des modèles spécifiques tels que single.php, page.php, archive.php, etc., selon les besoins de l’arborescence. Il est également possible de l’intégrer dans des fichiers conditionnels grâce à des instructions if afin de ne l’afficher que sur certains types de pages.
Voici un exemple d’intégration conditionnelle :
<?php
if (!is_front_page()) {
custom_breadcrumb();
}
?>
Il est recommandé d’utiliser cette fonction dans un thème enfant plutôt que dans le thème principal, afin de conserver la compatibilité avec les futures mises à jour du thème parent. Cela permet également de maintenir une meilleure séparation entre la logique métier personnalisée et les fichiers de base du thème utilisé.
Pour garder un code propre et réutilisable, certains développeurs choisissent de déclarer cette fonction dans un fichier séparé (par exemple includes/breadcrumbs.php) et de l’inclure ensuite via require_once ou include dans functions.php. Cela favorise une architecture modulaire et facilite la maintenance du site à long terme.
2. En utilisant un fichier partiel
Il est également possible de créer un fichier séparé, généralement nommé breadcrumb.php, qui contiendra tout le code HTML et PHP relatif à l’affichage du fil d’Ariane. Ce fichier est ensuite intégré dans les différents templates du thème à l’aide de la fonction WordPress get_template_part(), comme dans l’exemple suivant :
<?php get_template_part('breadcrumb'); ?>Cette méthode présente plusieurs avantages :
- Lisibilité du code : en isolant le fil d’Ariane dans un fichier dédié, les fichiers principaux du thème (comme
header.phpousingle.php) restent plus clairs et plus faciles à maintenir. - Réutilisation : le même composant peut être appelé depuis plusieurs modèles sans avoir à dupliquer le code à chaque fois, ce qui évite les erreurs et limite la dette technique.
- Organisation modulaire : cette approche respecte les principes du développement modulaire en WordPress, en regroupant les éléments récurrents dans des composants autonomes.
Le fichier breadcrumb.php est à placer à la racine du dossier du thème (ou dans un sous-dossier comme /template-parts/ si une organisation plus poussée est mise en place). Si vous utilisez ce dernier cas, l’appel devra alors préciser le chemin :
<?php get_template_part('template-parts/breadcrumb'); ?>Ce fichier peut contenir soit :
- Le code HTML et PHP directement (sans fonction enveloppante), idéal si le fichier est exclusivement dédié à l’affichage du fil d’Ariane ;
- Ou bien une fonction (comme
custom_breadcrumb()) si l’on souhaite pouvoir l’appeler dynamiquement ailleurs dans le thème ou via un hook.
Dans le premier cas (sans fonction), voici un exemple de contenu pour breadcrumb.php :
<nav class="breadcrumb">
<a href="<?php echo home_url(); ?>">Accueil</a> >
<?php
if (is_single()) {
$category = get_the_category();
if ($category) {
echo '<a href="' . get_category_link($category[0]->term_id) . '">' . $category[0]->name . '</a> > ';
}
echo '<span>' . get_the_title() . '</span>';
}
?>
</nav>
Cette technique est particulièrement recommandée si le fil d’Ariane s’inscrit dans une démarche de développement soigné, où chaque composant a son propre fichier dédié. Elle s’intègre parfaitement dans les thèmes modernes, qu’ils soient construits à partir de zéro ou via un starter theme comme _s (Underscores), Sage ou autre framework WordPress.
3. Ajout de styles CSS
Une fois le fil d’Ariane intégré dans les templates, il est nécessaire de le styliser pour qu’il s’intègre visuellement au design du site, tout en restant lisible et cohérent avec l’expérience utilisateur. L’ajout de styles CSS permet de contrôler à la fois l’apparence, l’espacement, la typographie, les couleurs, ainsi que la manière dont les liens et les éléments inactifs sont affichés.
Voici un exemple de base à insérer dans le fichier style.css du thème (ou thème enfant) :
.breadcrumb {
font-size: 0.9rem;
margin: 1em 0;
}
.breadcrumb a {
color: #0073aa;
text-decoration: none;
}
.breadcrumb a:hover {
text-decoration: underline;
}
.breadcrumb span {
color: #555;
}
Ce style est volontairement sobre, mais il peut être personnalisé de manière plus poussée pour correspondre à la charte graphique du site. Voici quelques axes d’amélioration ou d’adaptation :
- Typographie et taille : On peut ajuster la taille de la police, la graisse (bold, normal), ou même changer la casse (majuscule, minuscule, capitalisation) pour une meilleure hiérarchisation visuelle ;
- Séparateur personnalisé : Le séparateur (
>) peut être remplacé par une icône (comme», une flèche SVG, ou même un pictogramme Font Awesome) pour un rendu plus moderne. Ce séparateur peut aussi être stylisé via un pseudo-élément CSS (::beforeou::after) ; - Couleurs et accessibilité : Il est important de garantir un contraste suffisant entre le texte et l’arrière-plan pour respecter les normes WCAG (niveau AA minimum). L’état
:hoverdes liens doit être clair et perceptible, notamment sur les écrans tactiles ; - Responsive design : Sur mobile, un fil d’Ariane trop long peut gêner la lisibilité. Il peut être utile de masquer certains niveaux (par exemple les niveaux intermédiaires) ou de réduire la taille du texte sur les petits écrans.
Voici un exemple complémentaire de styles pour un séparateur sous forme d’icône :
.breadcrumb a::after {
content: "›";
padding: 0 0.5em;
color: #999;
}
.breadcrumb span:last-child::after {
content: "";
}
Ce code ajoute un chevron léger après chaque lien, sauf après le dernier élément, qui correspond à la page active. Cela permet de structurer visuellement le fil d’Ariane sans ajouter manuellement les séparateurs dans le code HTML, tout en gardant une meilleure flexibilité pour les traductions ou le multilingue. Enfin, pour un rendu plus design, il est possible d’encapsuler le fil d’Ariane dans une <nav> avec un attribut aria-label, tel que <nav class="breadcrumb" aria-label="Fil d’Ariane">, afin de renforcer l’accessibilité du site pour les lecteurs d’écran. Ce type d’amélioration est recommandé pour tout site soucieux d’inclusivité et de conformité RGAA.
0 commentaires