Parfois, vous pouvez trouver un thème génial seulement pour réaliser qu’il serait génial s’il avait un menu de navigation supplémentaire avec des liens importants ou fréquemment utilisés pour augmenter la convivialité de votre site WordPress.
Avec juste un peu de codage, vous pourriez avoir la base de votre nouveau menu mis en place rapidement, et prêt à être stylé pour correspondre à votre thème.
Si vous préférez ne pas vous embêter avec le code, il existe de nombreux plugins qui peuvent faire le gros du travail pour vous, et également fournir des options de style.
Quoi que vous choisissiez, le guide ci-dessous vous aidera à le réaliser.
Maintenance de base
Pour créer un nouveau menu, vous devez modifier les fichiers de votre thème. Avant d’apporter des modifications à l’un de vos fichiers de base, il est préférable de sauvegarder l’ensemble de votre site au cas où quelque chose irait mal en cours de route. Vous serez en mesure de restaurer votre site rapidement et ce sera comme si rien ne s’était passé.
Vous pouvez sauvegarder manuellement votre site via FTP ou en utilisant un plugin, tel que notre très propre Snapshot. Assurez-vous simplement de sauvegarder une copie à la fois de votre base de données et de vos fichiers dans un emplacement distinct de votre site pour minimiser le risque de perdre votre sauvegarde.
Construction d’un thème enfant
Pour créer de nouveaux menus avec du code, vous devez apporter des modifications qui seraient perdues lorsque vous mettez à jour votre thème. La création d’un thème enfant prend en charge ce problème.
Vous pouvez trouver les détails dont vous avez besoin pour créer un thème enfant en consultant deux de nos autres articles Comment créer un thème enfant WordPress et Comment créer automatiquement des thèmes enfants dans WordPress.
Vous pouvez également choisir de créer un tout nouveau thème de votre propre chef ou de l’essayer sur un site local ou de test.
Vous pouvez consulter ces articles pour plus de détails sur la façon de créer une installation locale de WordPress :
- Comment développer WordPress localement avec MAMP
- Comment installer XAMPP et WordPress localement sur PC/Windows
- Comment installer WordPress localement en 5 minutes avec DesktopServer
- Le guide rapide et facile pour migrer une installation WordPress locale vers un site en direct
- Comment déplacer WordPress pour un développement local avec XAMPP
.
Une fois que vous avez mis en place une de ces options, vous êtes libre de commencer à créer vos menus de navigation supplémentaires. Bien que, si vous décidez d’utiliser un plugin ou un framework de thème, vous n’avez pas besoin de créer un thème enfant.
Création de nouveaux menus
Pour ajouter une option d’emplacement de menu sélectionnable dans votre tableau de bord d’administration sous Apparence > Menus, vous devez faire ce qu’on appelle « enregistrer un menu ». Il suffit d’ajouter un bout de code à votre fichier functions.php situé dans wp-content > themes >votre-theme.
Dans cPanel, cliquez sur l’icône du gestionnaire de fichiers dans la section Fichiers de la page d’accueil. Si vous n’avez pas précédemment configuré votre gestionnaire de fichiers pour qu’il charge à la racine du document de votre site, naviguez-y maintenant.
Il y a un fichier functions.php dans votre dossier /wp-includes/, mais ce n’est pas celui que vous devez modifier. Assurez-vous de trouver le fichier functions.php qui se trouve dans le thème que vous utilisez. Sinon, vous vous retrouveriez avec des erreurs en essayant d’ajouter le code trouvé plus tard.
Localisez votre fichier functions.php et cliquez dessus une fois, puis cliquez sur le bouton Editer en haut de la page.
Si une fenêtre contextuelle s’ouvre, cliquez simplement sur le bouton Editer en bas à droite. Il se peut que vous n’en voyiez pas si vous l’avez désactivé auparavant.
Défilez jusqu’au bas du fichier. Si vous souhaitez ajouter un seul menu, ajoutez le code suivant sur une nouvelle ligne:
function register_my_menu() {register_nav_menu('new-menu',__( 'New Menu' ));}add_action( 'init', 'register_my_menu' );
Dans cet exemple, New Menu est le nom qui apparaîtra dans la page de menu de votre tableau de bord d’administration pour le rendre compréhensible pour les yeux humains. Le nom new-menu est ce que WordPress comprendra pour exécuter votre code correctement.
Vous pouvez appeler votre menu comme vous le souhaitez, mais assurez-vous que seul le nom lisible par les humains contient des espaces et des majuscules.
Si vous souhaitez ajouter plusieurs menus à votre site, ajoutez plutôt ce code sur une nouvelle ligne :
Vous pouvez ajouter autant de nouveaux menus que vous le souhaitez avec cette méthode. Les mêmes règles s’appliqueront pour les nommer.
Enregistrez les modifications que vous avez apportées au fichier. Il ne reste plus qu’à ajouter le nouveau menu à votre site.
Ajouter des emplacements de menu à votre thème
C’est ici que vous devez décider où vous souhaitez placer votre menu. Si vous souhaitez que votre menu apparaisse en haut de votre page, vous devrez modifier le fichier header.php. Vous pouvez également le mettre dans votre pied de page, ce qui signifie que vous éditeriez le fichier footer.php.
Vous pouvez même afficher un menu sur une page en éditant son fichier de modèle ou à une barre latérale, en éditant son fichier sidebar.php.
Vous pouvez placer votre nouveau menu où bon vous semble. Voici la quantité minimale de code que vous devez ajouter à l’un de ces emplacements:
<?php wp_nav_menu( array( 'theme_location' => 'new-menu' ) ); ?>
Remplacez simplement new-menu par le nom lisible par WordPress que vous avez choisi. Vous voudrez probablement styliser votre menu avec CSS afin qu’il aille au-delà de la fonctionnalité de base et qu’il soit aussi très beau. Pour ce faire, vous devrez créer une classe et l’ajouter à votre thème avec le code suivant.
<?php wp_nav_menu( array( 'theme_location' => 'new-menu', 'container_class' => 'new_menu_class' ) ); ?>
Comme précédemment, remplacez new-menu par le nom que vous avez choisi. Dans cet exemple, j’ai nommé la classe que j’ai créée new_menu_class. Vous pouvez le changer, mais assurez-vous de mettre à jour ce code pour refléter l’ajustement.
Cliquez sur le bouton Enregistrer et dirigez-vous vers Apparence > Menus dans votre tableau de bord. Vous remarquerez que vos nouveaux menus seront répertoriés sous Emplacements du thème dans la section Paramètres du menu.
Vous serez maintenant en mesure de voir vos nouveaux emplacements de menu répertoriés. Lorsque vous ajoutez un menu, vous pouvez sélectionner un ou tous les emplacements.
Pour que les liens soient affichés dans vos emplacements de menu nouvellement créés, cliquez sur créer un nouveau menu en haut de la page.
Si vous n’avez pas déjà un menu, vous pouvez saisir un nom pour votre menu dans le champ de la page, puis cliquer sur créer un menu. Si vous avez déjà un menu précédemment créé, vous pouvez cliquer sur le lien créer un nouveau menu vers le haut de la page.
Une fois que vous avez créé un nouveau menu, vous pouvez également gérer les emplacements où ils sont affichés sous l’onglet « Gérer les emplacements ».
Styling, plugins et menus responsives
Votre nouveau menu est maintenant prêt à être stylé à l’aide de CSS. Le codage requis est spécifique au thème que vous utilisez donc je ne l’aborderai pas dans cet article, mais nous avons un autre article que vous pouvez consulter pour cela, intitulé Comment créer un menu responsive génial pour votre thème WordPress. Il vous montre également comment créer des menus réactifs qui sont prêts pour les mobiles.
Si vous souhaitez une option plus facile, il existe de nombreux plugins qui créeront des menus réactifs basés sur les styles de votre thème. L’un des meilleurs que j’ai trouvé est Responsive Menu.
Certaines mentions notables que vous pouvez également trouver utiles sont ShiftNav, WP Responsive Menu et Max Mega Menu.
Ressources pour aller plus loin
Vous avez maintenant la base solide dont vous avez besoin pour créer des menus supplémentaires pour votre thème et des ressources pour vous aider à aller plus loin. Que vous le codiez vous-même, que vous utilisiez un plugin ou un framework de thème, vous avez maintenant un nouveau menu sur votre site WordPress.
Si vous rencontrez des difficultés, allez-y et demandez à nos héros du support. Ils peuvent vous donner des conseils d’experts et un soutien pour aider à résoudre à peu près n’importe quel problème. Vous pouvez ouvrir un ticket dans notre forum de support et nous serons juste à côté pour vous aider.
Pour plus d’informations sur la façon de styliser votre nouveau thème, il y a beaucoup de ressources que vous pouvez vérifier et vous pouvez les trouver toutes dans notre post Un méga guide pour apprendre et référencer CSS pour WordPress : 150+ Ressources.
Vous pouvez également consulter certains de nos autres articles 10 conseils simples pour apprendre le CSS pour WordPress, 25 conseils d’experts pour un codage CSS plus propre pour WordPress, 25 conseils de pro pour améliorer votre flux de travail CSS et 5 plugins CSS gratuits pour éditer en direct votre site WordPress pour plus de détails sur le codage de certains CSS pour votre thème.
Tags :
- menus
- navigation