Ajouter une image à un menu WordPress en utilisant le plugin ACF

Par défaut, un menu WordPress affiche du texte. Ajouter une image à un élément de menu WordPress permet de transformer une navigation basique en navigation visuelle, plus claire, plus engageante… et souvent plus premium.

Pourquoi ajouter une image à un élément de menu WordPress ?

Par défaut, un menu WordPress affiche du texte.
Un simple lien, éventuellement une description… et c’est à peu près tout.

Dans certains projets, ça suffit largement, mais dès qu’on commence à travailler sur :

un site e-commerce,
un média éditorial,
ou un site avec une direction artistique un peu poussée,

le menu devient un véritable élément de design et d’expérience utilisateur.

Ajouter une image à un élément de menu WordPress permet de transformer une navigation basique en navigation visuelle, plus claire, plus engageante… et souvent plus premium.

Les limites natives de WordPress

Le problème, c’est que WordPress ne permet pas d’ajouter une image à un élément de menu nativement.
On peut ajouter :

un titre,
une URL,
une description,
des classes CSS personnalisées,

mais aucun champ personnalisé sans développement supplémentaire.

C’est là que le plugin ACF devient intéressant.
Il permet d’ajouter facilement des champs personnalisés directement aux éléments de menu, sans créer d’interface complexe.

On garde une administration propre, compréhensible par le client… tout en ayant un contrôle total côté front.
Et c’est exactement ce qu’on va mettre en place dans la suite de ce tutoriel.

Préparer les champs ACF pour les éléments de menu

Avant d’injecter quoi que ce soit dans le front, il faut préparer le terrain côté administration.

L’objectif ici est simple : ajouter deux champs personnalisés directement aux éléments de menu WordPress :

une image principale,
une icône.

Créer le groupe de champs ACF

Rendez-vous dans : ACF → Groupes de champs → Ajouter

Créez un nouveau groupe, par exemple : Champs Mega Menu

Ajoutez ensuite deux champs.

1- Champ “image”

Type : Image
Nom du champ : image
Label : Image
Type de retour : URL

Pour le code que nous allons utiliser plus loin, le retour en URL est le plus simple, car nous injectons directement la valeur dans l’attribut src.

2- Champ “icone”

Type : Fichier
Nom du champ : icone
Label : Icône
Type de retour : URL

Même logique ici.

Définir la règle d’emplacement

Dans les règles d’affichage du groupe de champs sélectionnez :
Afficher ce groupe si :
Type de menu = Élément de menu

ACF permet nativement d’attacher des champs aux éléments de menu.
Aucune manipulation supplémentaire n’est nécessaire.

Résultat dans l’administration WordPress

Rendez-vous maintenant dans : Apparence → Menu et dépliez un élément de menu.
Vous verrez apparaître vos deux nouveaux champs :

Image
Icône

Chaque item peut désormais avoir son propre visuel.

À ce stade, rien ne s’affiche encore côté front.
On a simplement enrichi la structure des éléments de menu.

Dans la prochaine étape, on va récupérer ces champs et les injecter dynamiquement dans le rendu du menu.

Injecter l’image dans le menu avec un filtre WordPress

Maintenant que nos champs ACF sont bien en place dans l’administration, il faut les exploiter.

Objectif : récupérer les champs image et icone de chaque élément de menu et les injecter automatiquement dans le HTML généré par WordPress.

Pour ça, on va utiliser un filtre natif très pratique.

Comprendre le hook wp_nav_menu_objects

Lorsque WordPress génère un menu, il :

Récupère tous les éléments du menu en base de données.
Les transforme en objets.
Les passe ensuite au walker qui génère le HTML final.

Le hook wp_nav_menu_objects intervient avant la génération du HTML. Il permet de modifier les objets représentant chaque item du menu.

Concrètement :

On récupère tous les éléments.
On les parcourt.
On modifie leurs propriétés si besoin.
Puis WordPress continue son traitement normal.

Le code à ajouter dans functions.php

Ajoutez le code suivant dans le fichier functions.php de votre thème (idéalement dans un thème enfant) :


// Mega menu
add_filter('wp_nav_menu_objects', 'my_wp_nav_menu_objects', 10, 2);
function my_wp_nav_menu_objects( $items, $args ) {
    foreach( $items as &$item ) {
        $image = get_field('image', $item);
        if( $image ) {
            $item->title = '<img src="'.$image.'" alt="Vignette de '.$item->title.'">'.$item->title;
        }
        $icone = get_field('icone', $item);
        if( $icone ) {
            $item->title = '<img src="'.$icone.'" class="inject-me icon">'.$item->title;
        }
    }
    return $items;
}

Dans la partie suivante, on va regarder précisément ce que ça génère côté DOM.

Côté front : quel est le HTML généré dans le DOM ?

Maintenant qu’on a modifié dynamiquement le title des éléments de menu, regardons concrètement ce que WordPress génère côté front.

Structure HTML d’un élément de menu par défaut

Sans aucune modification, WordPress génère généralement une structure de ce type :

<li class="menu-item menu-item-type-post_type menu-item-object-page">
    <a href="https://monsite.com/page-exemple/">
        Page Exemple
    </a>
</li>

Structure HTML après injection de l’image

Avec notre filtre, on a modifié la propriété title avant le rendu. Le HTML devient alors :

<li class="menu-item menu-item-type-post_type menu-item-object-page">
    <a href="https://monsite.com/page-exemple/">
        <img src="https://monsite.com/uploads/image.jpg" alt="Vignette de Page Exemple">
        <img src="https://monsite.com/uploads/icone.svg" class="inject-me icon">
        Page Exemple
    </a>
</li>

Ici, les images sont injectées à l’intérieur du lien. Elles deviennent donc cliquables et elles héritent du comportement du lien (hover, active, etc.).

On ne modifie pas la structure globale du menu mais on enrichit simplement le contenu du lien.

Conclusion

Ajouter une image à un élément de menu WordPress n’est pas possible nativement.

Mais avec ACF et le filtre wp_nav_menu_objects, on peut enrichir la navigation très simplement, sans créer de Walker personnalisé ni complexifier l’administration.

On obtient :

une interface propre côté back-office,
un contrôle total côté front,
et une solution maintenable par un client.

C’est typiquement le genre d’amélioration qui transforme un menu standard en navigation plus premium, plus visuelle et plus efficace.

Et comme souvent avec WordPress :
un petit hook bien placé suffit à débloquer beaucoup de possibilités.