Dernières nouvelles de SeedProd

Tutoriels, astuces et ressources WordPress pour développer votre activité

Comment personnaliser le menu de WordPress

Comment personnaliser les styles de menu de WordPress en 3 étapes faciles 

Écrit par : image de l'auteur Stacey Corrin
image de l'auteur Stacey Corrin
Stacey écrit sur WordPress et le marketing numérique depuis plus de 10 ans et sur d'autres sujets depuis bien plus longtemps. Parallèlement, elle est fascinée par la conception de sites web, l'expérience utilisateur et le référencement.
     Reviewed By : John Turner
image du réviseur John Turner
John Turner est le cofondateur de SeedProd. Il a plus de 20 ans d'expérience dans le domaine des affaires et du développement et ses plugins ont été téléchargés plus de 25 millions de fois.

Voulez-vous apprendre à personnaliser les styles de menu de WordPress ?

Les menus WordPress permettent d'organiser le contenu de votre site web et facilitent la recherche des visiteurs. Mais le menu par défaut de WordPress peut être un peu banal, ce qui le rend difficile à mettre en valeur.

Dans ce guide, nous vous montrerons comment personnaliser les menus de WordPress pour faciliter la navigation sur votre site web.

Pourquoi personnaliser votre menu WordPress ?

Votre menu est l'une des parties les plus essentielles de votre site web WordPress. C'est ce que les visiteurs voient en premier lorsqu'ils arrivent sur votre site et ce qu'ils utilisent pour naviguer. C'est pourquoi il est important de veiller à ce que votre menu soit bien conçu et facile à utiliser.

Voici quelques raisons pour lesquelles vous devriez personnaliser votre menu de navigation WordPress :

  • Améliorez l'aspect et la convivialité de votre site web. Votre menu est un élément important de la conception générale de votre site. En le personnalisant, vous pouvez l'adapter à l'aspect et à la convivialité de votre page d'accueil et d'autres pages de premier niveau et le rendre plus attrayant sur le plan visuel.
  • Rendez votre site web plus convivial. Un menu bien conçu peut aider les visiteurs à trouver rapidement et facilement ce qu'ils cherchent. En personnalisant votre menu, vous pouvez faciliter la navigation des visiteurs sur votre site et leur permettre de trouver les informations dont ils ont besoin.
  • Améliorer le référencement de votre site web. La structure de votre menu peut également avoir une incidence sur le référencement de votre site. En personnalisant votre menu, vous faciliterez l'indexation de votre site par les moteurs de recherche et le classerez plus haut dans les résultats de recherche.

Il existe de nombreuses façons de personnaliser votre menu WordPress. Vous pouvez modifier l'ordre des éléments du menu, ajouter de nouveaux éléments et même changer le design du menu lui-même.

Il existe également de nombreux plugins qui permettent de personnaliser davantage les choses. Dans le guide étape par étape ci-dessous, nous partageons 3 façons d'ajouter des menus personnalisés à votre site WordPress avec et sans l'utilisation d'un plugin WordPress.

Comment personnaliser le menu de WordPress avec un plugin Page Builder

Tout d'abord, nous allons vous montrer comment personnaliser votre menu WordPress à l'aide d'un plugin de construction de pages. Nous utiliserons SeedProd dans cet exemple, mais les mêmes principes s'appliquent à tout autre constructeur de pages.

SeedProd Constructeur de site web WordPress Drag and Drop

SeedProd est un puissant constructeur de pages WordPress qui vous permet de créer des pages et des menus personnalisés dans WordPress sans écrire de code. Il est facile à utiliser et offre une large gamme de fonctionnalités, y compris :

  • Constructeur de pages par glisser-déposer
  • Constructeur de thèmes WordPress
  • Modèles préétablis
  • Menus personnalisables
  • Intégration des médias sociaux
  • Et plus encore.

Vous pouvez même l'utiliser pour ajouter des menus personnalisés au pied de page, à l'en-tête, à la barre latérale et au contenu des pages de votre site web

Cette méthode vous permet de personnaliser les menus quel que soit votre thème WordPress. Pour commencer, suivez les étapes ci-dessous.

Etape 1. Installer SeedProd Page Builder

Tout d'abord, téléchargez le plugin SeedProd, installez-le et activez-le sur votre site WordPress.

Pour vous aider dans cette étape, vous pouvez suivre notre guide sur l'installation de SeedProd.

Étape 2. Choisir un modèle de page d'atterrissage

Une fois le plugin activé, naviguez vers SeedProd " Landing Pages depuis votre tableau de bord WordPress, et cliquez sur le bouton Add New Landing Page (Ajouter une nouvelle page d'atterrissage ).

Ajouter une nouvelle page d'atterrissage avec SeedProd

Vous obtiendrez ainsi une bibliothèque de modèles de pages d'atterrissage que vous pourrez utiliser pour créer rapidement une page personnalisée. 

modèles de pages d'atterrissage

Chaque modèle est entièrement personnalisable pour s'adapter aux différentes niches de sites web. Par exemple, en cliquant sur l'onglet "Lead Squeeze" en haut de la page, vous obtiendrez les modèles les mieux adaptés à la création de pages "squeeze".

Lorsque vous trouvez un modèle qui correspond à vos besoins, survolez-le et cliquez sur l'icône orange de la coche.

Choisir un modèle de page d'atterrissage

Une fenêtre s'ouvre alors pour vous permettre de saisir le nom et l'URL de la page. Après avoir saisi ces informations, cliquez sur le bouton Enregistrer et commencer à modifier la page.

Informations sur la page d'atterrissage

Étape 3. Personnalisez le contenu de votre page

L'écran suivant montrera votre page d'atterrissage dans le constructeur visuel de pages de SeedProd. Il y aura des blocs, des sections et des paramètres sur la gauche et un aperçu de votre page sur la droite.

Interface de construction de la page d'atterrissage

Toutes les modifications que vous apportez à votre page s'affichent automatiquement en temps réel. Vous pouvez ainsi vous assurer que tout est en ordre avant de publier les modifications.

Pour personnaliser le contenu du modèle, il suffit de pointer et de cliquer. Par exemple, pour modifier le contenu d'un texte, cliquez dessus, supprimez le texte existant et remplacez-le par le vôtre.

personnaliser le contenu des pages

Pour ajouter de nouveaux éléments à votre page, tels qu'une image ou un bouton d'appel à l'action, recherchez le bloc dans le panneau de gauche et faites-le glisser sur la page.

personnaliser les images

Continuez à remplacer le contenu du modèle par le vôtre jusqu'à ce que vous soyez satisfait du design. Pour plus d'aide à la personnalisation, consultez notre guide sur la création d'une page d'atterrissage dans WordPress.

Étape 4. Personnaliser le menu de WordPress

Après avoir personnalisé votre page, vous pouvez créer des menus et les personnaliser facilement. Notre modèle ne comporte pas de zone d'en-tête, nous devons donc commencer par en créer une.

Pour ce faire, recherchez le bloc Colonne et faites-le glisser en haut de votre page.

Bloc de colonnes SeedProd

Ensuite, choisissez une mise en page. Dans ce cas, nous utilisons une mise en page à 3 colonnes.

Choisir une disposition en colonnes

Configurons maintenant la zone d'en-tête avec un bloc d'images pour afficher le logo de votre site web.

Ajouter un bloc d'images au menu

Pour télécharger l'image de votre logo, cliquez sur le bouton "Utiliser votre propre image" dans le panneau de configuration du bloc. Cela vous permet de choisir une image dans votre bibliothèque de médias WordPress ou d'en télécharger une depuis votre ordinateur.

Téléchargez un logo personnalisé pour votre menu

Ensuite, trouvez le bloc Menu Nav et faites-le glisser dans une autre colonne de votre en-tête. C'est ici que vous pouvez ajouter des éléments de menu sur lesquels les utilisateurs peuvent cliquer pour visiter d'autres pages de votre site.

Ajouter le bloc de menu nav

Dans les paramètres du bloc, il y a deux façons d'afficher votre menu.

Le type de menu Simple vous permet d'ajouter des liens de menu individuels sans quitter le constructeur de pages. Il vous suffit d'ajouter un nom de menu et de coller votre lien personnalisé.

Menu simple de WordPress

Vous pouvez également faire en sorte que le lien ne soit pas suivi et qu'il s'ouvre dans un nouvel onglet.

Le type de menu WordPress vous permet d'afficher les menus que vous avez déjà créés dans WordPress. En cliquant sur le menu déroulant, vous afficherez tous les menus disponibles sur votre site, tels que le menu primaire ou le menu principal.

Option de menu WordPress avancée

Il vous suffit de sélectionner les menus pour les afficher dans votre en-tête.

SeedProd dispose d'options de personnalisation avancées pour les deux types de menu. Dans l'onglet Avancé, vous pouvez modifier les couleurs du menu, les polices, les ombres du texte, les couleurs de survol, et plus encore.

Personnalisation avancée du menu WordPress

Vous pouvez même afficher vos menus à la verticale ou à l'horizontale. La présentation verticale convient parfaitement aux zones de widgets de la barre latérale et aux menus de pied de page.

Pour gérer vos menus, cliquez sur le lien de l'écran Menus ou naviguez vers Apparence " Menus depuis votre administrateur WordPress.

Gérer l'apparence du menu

Vous pouvez ici modifier la structure de votre menu, ajouter de nouveaux éléments de menu et des sous-menus en cliquant sur les cases à cocher, et gérer les emplacements. Vous pouvez même créer un nouveau menu sur cette page.

N'oubliez pas de cliquer sur le bouton Enregistrer le menu pour sauvegarder vos fonctions de menu.

De nombreux sites web utilisent des boutons dans la navigation du site pour promouvoir un appel à l'action spécifique. Avec le bloc de boutons de SeedProd, vous pouvez créer un bouton de menu en quelques clics.

Il suffit de trouver le bloc de boutons et de l'ajouter à votre en-tête.

Bouton de menu WordPres

Ensuite, dans les paramètres du bloc, vous pouvez ajouter votre lien de menu et personnaliser le style du bouton.

Paramètres de personnalisation des boutons de menu

Étape 5. Publier votre page personnalisée

Lorsque vous êtes satisfait de l'aspect de votre page, cliquez sur Enregistrer et publier dans le coin supérieur droit de l'écran.

Publier le menu WordPress

A partir de là, vous pouvez visiter la page pour voir votre menu WordPress personnalisé en action.

Exemple de menu WordPress personnalisé

Comment personnaliser le menu de WordPress avec l'éditeur de site de WordPress

La première méthode est une excellente solution pour tout site web, quel que soit le thème utilisé. Toutefois, si vous utilisez un thème WordPress basé sur des blocs, comme Twenty Twenty Three, vous préférerez peut-être utiliser l'éditeur de site WordPress pour personnaliser votre menu.

Attention : cette méthode ne fonctionne pas avec tous les thèmes et ne permet pas de personnaliser toutes les parties du menu.

Pour ouvrir l'éditeur de site, naviguez vers Apparence " Éditeur dans votre tableau de bord WordPress.

Editeur de site WordPress

Dans l'écran suivant, cliquez sur l'onglet Motifs.

Modèles d'éditeurs de sites

Cliquez ensuite sur l'option En-tête et choisissez votre modèle d'en-tête.

Modèle d'en-tête de l'éditeur de site

Ici, vous pouvez glisser-déposer pour réorganiser la position du menu ou supprimer des éléments du menu.

Vous pouvez également cliquer sur l'icône du crayon pour modifier le style du menu.

Personnaliser le menu dans l'éditeur de site

Par exemple, vous pouvez ajuster la couleur d'arrière-plan du menu, les polices, le rembourrage, les marges, les bordures, etc.

Personnaliser la couleur d'arrière-plan du menu

Si vous descendez jusqu'à l'onglet Avancé, vous pouvez saisir des classes CSS personnalisées.

Classes CSS pour les menus personnalisés

Pour ajouter une autre option de menu, comme un bouton d'en-tête, cliquez sur l'icône Ajouter un bloc.

Ajouter un bloc de boutons au menu de WordPress

Vous pouvez maintenant rechercher un bloc et cliquer dessus pour l'ajouter à votre menu et le personnaliser comme n'importe quel autre bloc WordPress.

Lorsque vous êtes satisfait des paramètres du menu et des personnalisations, cliquez sur le bouton Enregistrer.

Vous pouvez maintenant visiter votre site pour voir votre menu personnalisé.

Exemple de menu WordPress personnalisé avec éditeur de site

Comment personnaliser le menu de WordPress sans plugin

Si vous ne souhaitez pas installer un plugin de construction de pages et que vous ne disposez pas d'un thème WordPress en bloc, vous pouvez toujours utiliser du code pour ajouter un menu de navigation personnalisé.

Pour cela, nous vous recommandons d'utiliser un plugin d'extraits de code WordPress comme WPCode. C'est le moyen le plus sûr et le plus facile d'ajouter du code personnalisé à WordPress sans modifier les fichiers principaux de WordPress, comme votre fichier functions.php.

Pour ce faire, installez le plugin gratuit WPCode, puis allez dans Code Snippets " Add Snippet depuis votre tableau de bord WordPress.

WPCode Ajouter un extrait

Sur cette page, vous trouverez des extraits prêts à l'emploi que vous pouvez ajouter à votre site en quelques clics.

Pour ce tutoriel, nous voulons créer notre propre extrait, donc passez votre souris sur "Ajouter votre code personnalisé" et cliquez sur le bouton " Utiliser l'extrait".

Utiliser un extrait personnalisé

Saisissez maintenant un titre pour votre extrait, ouvrez le menu déroulant "Type de code" et cliquez sur Extrait de code PHP.

Type d'extrait de code PHP

Ensuite, collez l'extrait suivant dans l'éditeur de code :

function wpb_custom_new_menu() {
  register_nav_menu('my-custom-menu',__( 'My Custom Menu' ));
}
add_action( 'init', 'wpb_custom_new_menu' );

Ce snippet ajoute un nouvel emplacement de menu à votre thème, "Mon menu personnalisé".

Une fois que vous avez fait cela, descendez jusqu'aux options d'insertion et choisissez la méthode "Insertion automatique" pour ajouter l'extrait sur l'ensemble de votre site.

À partir de là, ouvrez le menu déroulant "Emplacement" et cliquez sur Exécuter partout.

Exécuter l'emplacement du snippet partout

Vous pouvez maintenant faire défiler l'écran jusqu'en haut et cliquer sur le bouton "Inactif" pour le transformer en "Actif".

Enfin, cliquez sur Enregistrer pour mettre l'extrait en ligne.

Enregistrer un extrait de code personnalisé

Maintenant, allez dans Apparence " Menus et voyez la zone "Affichage de l'emplacement".

Vous devriez voir une nouvelle option "Mon menu personnalisé" dans cette zone où vous pouvez ajouter des éléments de menu.

Menu personnalisé dans WordPress

L'étape suivante consiste à ajouter votre menu personnalisé à votre thème WordPress.

Vous pouvez afficher un menu de navigation personnalisé n'importe où sur votre site en ajoutant du code au fichier de modèle de votre thème.

Il suffit d'aller dans Apparence " Éditeur de fichiers de thème.

Ensuite, dans le menu de droite, trouvez le modèle où vous souhaitez ajouter le menu, par exemple l'en-tête de votre site web.

Éditeur de fichiers de thèmes WordPress

Vous devez maintenant ajouter une fonction wp_nav_menu et spécifier le nom de votre menu personnalisé. Par exemple, dans l'extrait de code suivant, nous ajoutons Mon menu personnalisé à l'en-tête du thème :

wp_nav_menu( array( 'theme_location'=>'my-custom-menu', 'container_class'=>'custom-menu-class' ) );

Après avoir ajouté le code, cliquez sur le bouton Mettre à jour le fichier pour enregistrer vos modifications.

Mise à jour du fichier du thème

Si vous visitez votre site, vous verrez le menu personnalisé en action, mais vous remarquerez qu'il apparaît sous la forme d'une simple liste à puces.

Menu WordPress personnalisé par défaut

Vous pouvez adapter le menu à votre thème WordPress ou à votre marque en ajoutant un code CSS personnalisé à votre site.

Pour ce faire, allez dans Appearance " Customize et cliquez sur Additional CSS dans le Customizer de WordPress.

Cela ouvre un éditeur dans lequel vous pouvez saisir votre CSS personnalisé.

CSS supplémentaires dans le personnalisateur de WordPress

Vous pouvez maintenant styliser votre menu à l'aide de la classe CSS que vous avez ajoutée au modèle de votre thème. Dans notre exemple, il s'agit de .custom_menu_class.

Dans le code suivant, nous ajoutons des margeset de l'espacement, nous définissons la couleur du texte en noir et nous disposons le menu dans une disposition horizontale :

div.custom-menu-class ul {
    margin:20px 0px 20px 0px;
    list-style-type: none;
    list-style: none;
    list-style-image: none;
    text-align:right;
    display:inline-block;
}
div.custom-menu-class li {
    padding: 0px 20px 0px 0px;
    display: inline-block;
} 
 
div.custom-menu-class a {
    color:#000;
}

Le Customizer de WordPress se met à jour automatiquement pour que vous puissiez voir à quoi ressemble le menu avec le nouveau style. Si vous êtes satisfait des changements, publiez-les pour les mettre en ligne.

Comment personnaliser le menu de WordPress avec CSS

Plus de conseils de navigation sur WordPress

Nous espérons que ce guide vous a aidé à apprendre comment personnaliser votre menu WordPress. Pour vous aider à tirer le meilleur parti de votre navigation WordPress, consultez les conseils et tutoriels suivants :

Merci de votre lecture ! Nous aimerions connaître votre avis, alors n'hésitez pas à laisser un commentaire pour nous faire part de vos questions et de vos réactions.

Vous pouvez également nous suivre sur YouTube, X (anciennement Twitter) et Facebook pour obtenir d'autres contenus utiles au développement de votre entreprise.

avatar de l'auteur
Stacey Corrin Rédacteur
Stacey écrit sur WordPress et le marketing numérique depuis plus de 10 ans et sur d'autres sujets depuis bien plus longtemps. Parallèlement, elle est fascinée par la conception de sites web, l'expérience utilisateur et le référencement.

Divulgation : Notre contenu est soutenu par les lecteurs. Cela signifie que si vous cliquez sur certains de nos liens, il se peut que nous recevions une commission. Nous ne recommandons que des produits dont nous pensons qu'ils apporteront une valeur ajoutée à nos lecteurs.