dropdown-menu-guide
Le monde du Web

Comment créer un menu déroulant dans WordPress (Guide du débutant)

Voulez-vous créer un menu déroulant et l’ajouter à votre site Web WordPress?

Un menu déroulant affiche une liste de liens lorsque vous passez votre souris sur un élément du menu.

Nous utilisons un menu déroulant sur WPBeginner, allez-y et passez votre souris sur le menu de navigation en haut.

Dans ce guide du débutant, nous allons vous montrer comment créer facilement un menu déroulant dans WordPress avec des instructions pas à pas.

Pourquoi utiliser les menus déroulants dans WordPress?

WordPress est livré avec un système de gestion de menus intégré qui vous permet d’ajouter facilement des menus de navigation à votre site WordPress.

Les menus de navigation sont des liens vers les pages principales de votre site Web. Ils apparaissent généralement sur le dessus, sous la forme d’une rangée horizontale, juste à côté du logo du site.

Menu de navigation typique avec une rangée horizontale de liens

Si vous démarrez un blog ou créez un site Web avec seulement quelques pages, vous pouvez les ajouter en une seule ligne.

Toutefois, si vous exploitez une boutique en ligne ou un site Web volumineux, vous pouvez ajouter d’autres liens au menu de navigation.

Les menus déroulants vous aident à résoudre le problème d’espace limité en affichant les liens de menu uniquement lorsque les utilisateurs déplacent leur souris sur un élément parent. Ils vous permettent également d’organiser la structure du menu par sujet ou par hiérarchie.

Exemple de menu déroulant

Enfin, ils ont l’air très bien aussi.

Cela dit, voyons maintenant comment créer facilement des menus déroulants WordPress pour les ajouter à votre site Web.

Étape 0. Choix d’un thème avec prise en charge du menu déroulant

WordPress est livré avec un système de gestion de menus intégré, mais l’affichage de ces menus dépend entièrement de votre thème WordPress.

Presque tous les thèmes WordPress prennent en charge les menus déroulants par défaut. Cependant, certains thèmes peuvent ne pas avoir un support de menu approprié.

Vous devez vous assurer que vous utilisez un thème WordPress prenant en charge les menus déroulants.

Comment savoir si le thème que vous utilisez prend en charge le menu déroulant?

Vous pouvez simplement visiter le site Web du thème où vous trouverez un lien vers la démonstration du thème. À partir de là, vous pouvez voir si la démo affiche un menu déroulant dans le menu de navigation.

Si ce n’est pas le cas, vous devrez trouver un thème WordPress qui le fasse.

Consultez notre guide sur la manière de choisir le thème WordPress idéal pour votre site Web.

Voici quelques excellents thèmes qui prennent en charge le menu déroulant.

  • Astra – C’est un thème WordPress polyvalent livré avec plusieurs sites de démarrage et des tonnes de fonctionnalités.
  • Thèmes StudioPress – Construits au-dessus du cadre de thèmes Genesis, ces thèmes professionnels sont hautement optimisés pour la performance.
  • OceanWP – Un thème WordPress populaire qui convient à tout type de sites Web.
  • Générateur Ultra – Powered by Themify, ce thème WordPress « drag and drop » est livré avec de superbes modèles et des options de thème flexibles.
  • Divi – thème populaire de Elegant Themes qui utilise le constructeur de pages Divi et qui est livré avec une multitude de fonctionnalités de glisser-déposer, y compris des menus déroulants.

Cela dit, voyons maintenant comment créer un menu déroulant WordPress.

Étape 1. Création d’un menu de navigation dans WordPress

Si vous avez déjà configuré un menu de navigation sur votre site Web, vous pouvez passer à l’étape suivante.

Commençons par créer un menu simple.

Aller à Apparence »Menus page et cliquez sur le lien « Créer un nouveau menu » en haut.

Créer un menu

Ensuite, vous devez donner un nom à votre menu de navigation. Ce nom ne sera pas visible publiquement sur votre site web. Le nom du menu a pour but de vous aider à identifier le menu dans la zone d’administration de WordPress.

Nom du menu

Entrez un nom pour votre menu, puis cliquez sur le bouton «Créer un menu».

WordPress va maintenant créer un nouveau menu vide pour vous.

Ajoutons les liens du haut au menu de navigation. Ces éléments apparaîtront dans la rangée supérieure de votre menu.

Sélectionnez simplement les pages que vous souhaitez ajouter dans la colonne de gauche et cliquez sur le bouton « Ajouter au menu ». Vous pouvez également sélectionner des articles de blog, des catégories ou ajouter des liens personnalisés.

Ajouter des pages au menu

Vous verrez maintenant que ces pages apparaissent dans la colonne de droite sous votre nouveau menu.

Étape 2. Ajout de sous-éléments à un menu

Les sous-éléments sont les éléments qui apparaîtront dans le menu déroulant. Selon la manière dont vous souhaitez organiser vos menus, vous pouvez les ajouter sous n’importe quel élément existant.

Dans l’intérêt de ce tutoriel, nous ajouterons des catégories sous le lien du blog.

Sélectionnez simplement les éléments que vous souhaitez ajouter dans la colonne de gauche, puis cliquez sur le bouton « Ajouter au menu ». Vos articles vont maintenant apparaître dans la colonne de droite.

Nouveaux éléments de menu ajoutés au menu

Cependant, ces liens apparaîtront comme des éléments ordinaires. Nous devons en faire un sous-élément d’un menu parent.

Vous pouvez simplement faire glisser un élément de menu et le placer sous l’élément parent. Déplacez-le légèrement vers la droite et cela deviendra un sous-élément.

Ajout d'éléments de sous-menu pour créer un menu déroulant

Répétez le processus pour tous les liens que vous souhaitez afficher dans le menu déroulant.

Une fois que vous avez terminé, n’oubliez pas de cliquer sur le bouton « Enregistrer le menu » pour enregistrer vos modifications.

Étape 3. Publiez votre menu déroulant

Si vous modifiez un menu déjà actif sur votre site Web, il apparaîtra immédiatement sur votre site Web.

Cependant, s’il s’agit d’un nouvel élément de menu, vous devez maintenant choisir un emplacement de thème pour afficher ce menu.

Les thèmes WordPress peuvent afficher des menus à différents endroits. Chaque thème définit ses propres emplacements de menu et vous pouvez sélectionner le menu que vous souhaitez y afficher.

Vous trouverez cette option dans la colonne de droite sous ‘Paramètres du menu’. Sélectionnez une option en regard du paramètre « Emplacement d’affichage » et cliquez sur le bouton « Enregistrer le menu ».

Choisissez l'emplacement du thème

Vous pouvez maintenant visiter votre site Web pour voir votre menu déroulant en action.

Aperçu du menu déroulant

Conseils sur la création de menus déroulants interactifs

Les menus de navigation sont importants car c’est le premier endroit où vos utilisateurs chercheront s’ils veulent voir des informations spécifiques.

Les utiliser correctement aidera vos utilisateurs à se repérer dans votre site Web. Il vous aidera également à obtenir davantage de pages vues, de conversions et de ventes sur votre site Web.

Voici quelques conseils pour rendre vos menus de navigation plus interactifs avec les menus déroulants.

1. Vous pouvez créer des menus déroulants multi-niveaux

Si un lien est un sous-élément d’un autre lien, il apparaît dans le menu déroulant. Vous pouvez également ajouter un sous-élément sous un autre sous-élément pour créer des menus déroulants à plusieurs niveaux.

Menus multi niveaux

Votre thème les afficherait automatiquement sous forme de sous-menu dans la liste déroulante.

Menu déroulant à plusieurs niveaux

2. Vous pouvez également créer plusieurs menus déroulants

Vous pouvez créer un menu déroulant sous n’importe quel lien du haut de votre menu. Vous pouvez même ajouter plusieurs menus déroulants dans votre menu de navigation principal.

Plusieurs menus déroulants dans le menu principal

3. Créer des menus avec un aperçu en direct

Si votre menu devient trop compliqué, vous pouvez passer à l’aperçu visuel. Aller à Apparence »Personnaliser pour lancer le personnalisateur de thème en direct.

De là, cliquez sur l’onglet ‘Menus’ puis sélectionnez votre menu de navigation. Vous verrez maintenant un éditeur de menu glisser-déposer dans la colonne de gauche avec un aperçu en direct de votre site dans le volet de droite.

Personnaliser les menus WordPress avec un aperçu en direct

4. Créer un grand méga-menu sous forme de liste déroulante dans WordPress

Les menus déroulants ne montrent qu’un menu déroulant à la fois. Et si vous vouliez afficher la structure complète de votre site Web sous la forme d’un méga-menu qui apparaît uniquement lorsque les utilisateurs survolent le menu principal?

Exemple de méga menu

Les méga-menus apparaissent sous forme de menu déroulant, mais ils peuvent afficher beaucoup plus de liens, de sous-menus, etc. Pour des instructions détaillées, consultez notre didacticiel pas à pas sur la création d’un méga-menu dans WordPress.

Nous espérons que cet article vous a aidé à apprendre à créer facilement un menu déroulant dans WordPress. Vous voudrez peut-être aussi consulter notre guide sur la création d’un menu de navigation flottant collant dans WordPress et sur la manière d’ajouter des icônes d’image aux menus de navigation dans WordPress.

Si vous avez aimé cet article, abonnez-vous à nos tutoriels vidéo sur la chaîne YouTube pour WordPress. Vous pouvez aussi nous trouver sur Twitter et Facebook.

Le monde du Web Wordpress

RGPD et site vitrine WordPress, que dois-je faire ?

A ce jour, WordPress est utilisé pour gérer plus de 30% des sites internet dans le monde. Parmi cette majorité, de très nombreux sites sont des sites vitrines, présentant une personne, une entreprise ou une entité autre. Sont-ils concernés par la RGPD ? Que faut-il faire alors pour se mettre en conformité ?

Le monde du Web

Comment envoyer des e-mails cryptés ?

A l’heure de la RGPD et des préoccupations générales sur la sécurité des données, il me semble opportun de mettre le doigt sur un constat affolant : personne ne sait réellement comment protéger ses mails ! De la PME qui monte aux entreprises nationales, la sécurité des données que vous envoyez est de votre responsabilité, alors équipez-vous 😉

Le monde du Web Wordpress

Quelle est la différence entre WordPress.com et WordPress.org?

Si vous êtes nouveau sur WordPress, vous ne savez peut-être pas qu’il existe deux versions différentes des systèmes de gestion de contenu WordPress. Il y a WordPress. com et WordPress. org. Connaissez-vous les différences entre les deux? Est-ce que ça compte vraiment? Et si c’est le cas, comment savoir ce qui vous convient?

Le monde du Web

L’entreprise StartCom arrête son activité de distributeur de certificats

L’entreprise StartCom, depuis plusieurs mois en difficulté, a envoyé à tous ses clients un mail pour leur indiquer l’arrêt de leur activité.

Le monde du Web

L’avenir radieux du Web décentralisé ?

Connaissez-vous le Web décentralisé ? les sphères les plus calées du Web en parlent de plus en plus et, pourtant, ces plateformes peinent encore à attirer les foules, malgré leurs avantages évidents. Avantages pour qui ? c’est ce que nous allons voir.

Le monde du Web

3 choses à savoir avant de créer son site internet

Vous êtes un professionnel et vous souhaitez vous lancer dans l’aventure Internet ? Pas de problème ! Par contre, avant de foncer tête baissée, voici quelques conseils et choses à savoir.

Le monde du Web

Créer un motif de fond personnalisé pour votre site internet

Il y a encore quelques jours, lorsque je souhaitais mettre en place un fond répétitif sur un site internet, je me débrouillais pour en bricoler un avec mon éditeur d’images gratuit favori : GIMP. C’était long et fastidieux, mais au moins, il n’y avait aucun problème de droits sur les images.

Le monde du Web

Intégrer des cartes interactives avec Google My Maps

Voici un tutorial simple pour ajouter à votre site une carte interactive, sur laquelle vous allez pouvoir insérer des points, des trajets, et des descriptions composées de photos ou de liens hypertexte.

Créer une carte Google My Maps

Gérer les calques

Les calques servent à trier les points d’une carte et à les personnaliser. Vous pourrez ainsi afficher ou cacher à volonté certains groupes de points sur votre carte. Cliquez sur les trois points à droite de votre calque pour en modifier le nom, ou pour le supprimer.

Entrer un point sur la carte

Entrer une adresse ou des coordonnées GPS dans la barre sur le haut de la carte

Un point apparaît sur la carte, il doit correspondre à ce que vous avez saisi.
Si ce n’est pas le cas, vous pouvez le déplacer à la main.

Il peut y avoir plusieurs suggestions pour une adresse que vous avez saisi

Les points verts sur la gauche ne sont pas encore ajoutés à votre carte Pour les ajouter, appuyez sur le «+» correspondant

Le point va alors changer de couleur et s’ajouter automatiquement au calque en cours.

En cliquant sur ce point, vous ouvrirez un menu détaillé.
Les options de modification se trouvent en bas à droite.

Personnaliser la description des points

Ajouter des liens dans la description d’un point

Cliquez sur  l’icône

Pour ajouter des liens dans la description, il vous suffit de les copier-coller, cependant ils seront probablement trop longs pour être agréables à lire.

Rendez-vous sur le réducteur de liens de Google : https://goo.gl/

Entrez l’URL du lien que vous souhaitiez ajouter dans la description et cliquez sur «Shorten URL». Copiez la nouvelle URL, puis collez-la dans la description de votre point.

Ajouter des images dans la description

Cliquez sur l’icône
Vous pouvez glisser-déposer des photos. La première servira d’aperçu au point. Les photos seront stockées sur votre espace Google Drive, vous pourrez donc construire votre album complet au préalable et ensuite vous soucier de paramétrer vos points. Les dimensions conseillées sont 495×370 pixels, pensez donc à redimensionner vos images si elles ont été prises avec un appareil photo récent.

Résultat final, après personnalisation des points : Une carte complète des services de randonnée !

Inclure la carte sur votre site

Pour inclure la carte sur votre site, il vous faudra utiliser une IFrame, qui ressemble à ceci (copiez-collez ce code dans votre page, avec l’éditeur en mode « Texte », pas « Visuel ») :

<iframe src="https://www.google.com/maps/d/embed?mid=1L4dxKF3Ly60ZUEIzNAFnwCyyTic" width="900" height="400">

Vous devrez évidemment remplacer la partie src="" pour qu’elle corresponde à votre carte et pas à la carte exemple de ce tuto. Pour obtenir ce code, vous pouvez utiliser directement la fonction « Partager »  incluse en haut à droite de la carte, représentée par le symbole

Le monde du Web

Comment afficher des blocs d’annonces dans des articles spécifiques dans WordPress

 

Voulez-vous afficher des blocs d’annonces dans des messages spécifiques de WordPress? Ce placement publicitaire vous permet de diffuser des publicités lorsque vos utilisateurs sont fortement impliqués dans le contenu. Dans cet article, nous vous montrerons comment afficher facilement les blocs d’annonces dans des messages spécifiques de WordPress sans écrire de code ou rompre votre site.

"

Pourquoi afficher des annonces dans des messages WordPress spécifiques?

Bien qu’il existe de nombreuses façons de faire des blogs en argent, les bannières publicitaires complètent la liste. Souvent, vous voyez des bannières dans la barre latérale ou sur l’en-tête du site. Étant donné que ce sont des spots publicitaires très courants, cela entraîne une bannière qui affecte le taux de clics et les revenus de votre site.

Pour résoudre ce problème, de nombreux éditeurs insèrent des publicités dans le contenu de la publication. Cela fonctionne parce que c’est le moment où vos utilisateurs sont les plus engagés avec le contenu. Cela augmente la visibilité de l’annonce et vous aide à obtenir plus de clics.

Cependant, vous devez également considérer l’expérience de l’utilisateur. Placer trop d’annonces dans vos messages peut être gênant et ennuyeux.

Pour réduire les effets néfastes, vous pouvez afficher sélectivement les blocs d’annonces dans des messages spécifiques de WordPress sur votre site. Ces publications peuvent être vos articles les plus populaires, les articles de forme prolongée ou le contenu en vedette.

Cela dit, voyons comment afficher facilement les publicités dans des messages spécifiques de WordPress.

Affichage d’annonces dans des messages WordPress spécifiques

La première chose à faire est d’installer et d’activer le plugin Adsanity. Pour plus de détails, consultez notre guide étape par étape sur la façon d’installer un plugin WordPress.

Adsanity est un plugin premium de gestion de publicité WordPress. Il vous permet de créer facilement des blocs d’annonces et de les afficher n’importe où sur votre site WordPress. Il fonctionne avec n’importe quel réseau publicitaire tiers, y compris Google Adsense. Vous pouvez également l’utiliser pour vendre des publicités directement aux annonceurs.

Pour plus d’informations, consultez notre guide sur la gestion des annonces dans WordPress avec le plugin Adsanity.

Après avoir activé le plugin, vous devez visiter la page Adsanity »Créer une annonce pour créer votre première annonce.

Vous devez d’abord saisir un titre pour votre annonce. Cela vous aidera à identifier les publicités sur votre site.

Ensuite, vous devez choisir le type d’annonce que vous souhaitez créer. Adsanity vous permet d’ajouter des publicités hébergées et des publicités tierces.

Pour les publicités hébergées, vous devez sélectionner la taille de l’annonce. Après cela, vous pouvez entrer une URL de suivi et fournir une image que vous souhaitez utiliser pour l’annonce.

"

Pour les réseaux publicitaires tiers comme Google Adsense, vous devez passer à l’onglet «Réseau publicitaire externe». Ici, vous pouvez sélectionner la taille de l’annonce et coller le code publicitaire fourni par le réseau publicitaire.

"

Ensuite, vous pouvez publier votre annonce ou cliquer sur le lien d’édition et définir un horaire pour l’annonce. Vous pourrez définir une date de début et une date d’expiration pour cette annonce particulière.

"

Après avoir publié l’annonce, vous pouvez l’ajouter à vos messages et pages de WordPress ou ailleurs sur votre site Web que vous désirez.

Insertion de blocs publicitaires dans un message WordPress

D’abord, vous devez modifier la publication ou la page où vous souhaitez afficher votre bloc d’annonces. Vous remarquerez les boutons ‘Insérer une annonce’ et ‘Insérer des groupes d’annonces’ dans l’éditeur visuel. Vous devez cliquer sur le bouton Insérer une annonce.

"

Cela affichera une fenêtre contextuelle où vous pouvez sélectionner l’annonce que vous souhaitez afficher et cliquer sur le lien Insérer.

"

Le plugin insère le shortcode d’annonce dans votre publication. Vous pouvez maintenant enregistrer et afficher votre publication pour voir l’annonce en cours.

"

Ajout d’un bloc d’annonces dans WordPress Post Using Shortcode

Vous pouvez également ajouter le bloc d’annonces à une publication WordPres en utilisant un code court. Ceci est particulièrement utile si vous utilisez l’éditeur de texte pour écrire vos publications.

Aller à Adsanity »Gérer les annonces page. Vous verrez la liste des annonces que vous avez créées.

À côté de chaque annonce, vous verrez un lien de code court. En cliquant dessus, vous copiez automatiquement le code court dans votre presse-papiers.

"

Allez et modifiez la publication ou la page où vous souhaitez afficher l’annonce et collez le code court. N’oubliez pas de mettre à jour la publication pour enregistrer vos modifications.

Nous espérons que cet article vous aidera à apprendre à afficher facilement les blocs d’annonces dans des messages spécifiques de WordPress. Vous pouvez également voir notre liste des meilleurs outils de marketing d’affiliation et des plugins pour WordPress.

Si vous avez aimé cet article, veuillez vous abonner à notre chaîne YouTube pour les didacticiels vidéo WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.