Voulez-vous crĂ©er un menu WordPress rĂ©actif pour les appareils mobiles? Les utilisateurs mobiles ont dĂ©jĂ surpassĂ© les utilisateurs de bureau sur de nombreux sites Web. L’ajout d’un menu mobile personnalisable facilite la navigation des utilisateurs sur votre site Web. Dans cet article, nous vous montrerons comment crĂ©er facilement un menu WordPress rĂ©actif prĂȘt pour les appareils mobiles.
Ceci est un tutoriel approfondi. Nous montrerons à la fois la méthode complémentaire pour les débutants (pas de codage) et la méthode de codage pour nos utilisateurs plus avancés.
à la fin de ce didacticiel, vous apprendrez à créer un menu contextuel coulissant, un menu contextuel déroulant et un menu contextuel à bascule.
PrĂȘt? Commençons.
Didacticiel vidéo
Abonnez-vous Ă WPBeginner
Si vous n’aimez pas la vidĂ©o ou avez besoin de plus d’instructions, lisez la suite.
MĂ©thode 1: ajouter un menu rĂ©actif dans WordPress Ă l’aide d’un plugin
Cette méthode est plus facile et recommandée pour les débutants car elle ne nécessite pas de codage personnalisé.
Dans cette mĂ©thode, nous allons crĂ©er un menu hamburger qui glisse sur l’Ă©cran mobile.
La premiĂšre chose Ă faire est d’installer et d’activer le plugin Responsive Menu. Pour plus de dĂ©tails, consultez notre guide Ă©tape par Ă©tape sur la façon d’installer un plugin WordPress.
Lors de l’activation, le plugin ajoutera un nouvel Ă©lĂ©ment de menu intitulĂ© “Responsive Menu” Ă votre barre d’administration WordPress. En cliquant dessus, vous accĂ©dez Ă la page de configuration du plugin.
Vous devez d’abord entrer la largeur de l’Ă©cran, Ă quel point le plugin commencera Ă afficher un menu rĂ©actif. La valeur par dĂ©faut est 800 px, ce qui devrait fonctionner pour la plupart des sites Web.
AprĂšs cela, vous devez sĂ©lectionner le menu que vous souhaitez utiliser pour votre menu rĂ©actif. Si vous n’avez pas encore crĂ©Ă© de menu, vous pouvez en crĂ©er un en visitant Apparence »Menus. Consultez notre guide sur la façon d’ajouter le menu de navigation dans WordPress pour des instructions dĂ©taillĂ©es.
La derniĂšre option Ă l’Ă©cran consiste Ă fournir une classe CSS pour votre menu actuel qui ne rĂ©pond pas. Cela permettra au plugin de masquer son menu qui ne rĂ©pond pas sur des Ă©crans plus petits.
N’oubliez pas de cliquer sur le bouton pour enregistrer vos paramĂštres.
Vous pouvez maintenant visiter leur site Web et redimensionner l’Ă©cran de votre navigateur pour voir le menu rĂ©actif en action.
Le plugin de menu rĂ©actif est livrĂ© avec de nombreuses autres options qui vous permettent de modifier le comportement et l’apparence de votre menu rĂ©actif. Vous pouvez explorer ces options sur la page de configuration du plugin et les ajuster si nĂ©cessaire.
MĂ©thode 2: ajouter un menu de sĂ©lection dĂ©roulant Ă l’aide d’un plugin
Une autre façon d’ajouter un menu rĂ©actif consiste Ă ajouter un menu de sĂ©lection dĂ©roulant. Cette mĂ©thode ne nĂ©cessite aucune compĂ©tence en codage, elle est donc recommandĂ©e pour les dĂ©butants.
La premiĂšre chose Ă faire est d’installer et d’activer le plugin Responsive Select Menu. Pour plus de dĂ©tails, consultez notre guide Ă©tape par Ă©tape sur la façon d’installer un plugin WordPress.
AprĂšs l’activation, vous devez visiter Apparence »Responsive Select pour configurer les paramĂštres du plugin.
Vous devez faire dĂ©filer la page jusqu’Ă la section “Activer les emplacements de thĂšme”. Par dĂ©faut, le plugin est activĂ© dans tous les emplacements de thĂšmes. Vous pouvez changer cela en l’activant de maniĂšre sĂ©lective pour des emplacements de thĂšme spĂ©cifiques.
N’oubliez pas de cliquer sur le bouton Enregistrer tous les paramĂštres pour enregistrer vos modifications.
Vous pouvez maintenant visiter leur site Web et redimensionner l’Ă©cran du navigateur pour voir le menu de sĂ©lection rĂ©actif en action.
Méthode 3: créer un menu réactif adapté aux mobiles avec effet de bascule
L’une des mĂ©thodes les plus utilisĂ©es pour afficher un menu sur des Ă©crans mobiles consiste Ă utiliser l’effet de bascule.
Cette mĂ©thode nĂ©cessite que vous ajoutiez du code personnalisĂ© Ă vos fichiers WordPress. Si vous ne l’avez pas encore fait, consultez notre guide sur le collage d’extraits du Web dans WordPress.
Vous devez d’abord ouvrir un Ă©diteur de texte comme le bloc-notes et coller ce code.
( function() {
var nav = document.getElementById( 'site-navigation' ), button, menu;
if ( ! nav ) {
return;
}
button = nav.getElementsByTagName( 'button' )[0];
menu = nav.getElementsByTagName( 'ul' )[0];
if ( ! button ) {
return;
}
// Hide button if menu is missing or empty.
if ( ! menu || ! menu.childNodes.length ) {
button.style.display = 'none';
return;
}
button.onclick = function() {
if ( -1 === menu.className.indexOf( 'nav-menu' ) ) {
menu.className = 'nav-menu';
}
if ( -1 !== button.className.indexOf( 'toggled-on' ) ) {
button.className = button.className.replace( ' toggled-on', '' );
menu.className = menu.className.replace( ' toggled-on', '' );
} else {
button.className += ' toggled-on';
menu.className += ' toggled-on';
}
};
} )(jQuery);
Vous devez maintenant enregistrer ce fichier sous navigation.js sur votre bureau.
Ensuite, vous devez ouvrir un client FTP pour télécharger ce fichier dans le dossier / wp-content / themes / your-theme-dir / js / sur votre site WordPress.
Remplacez votre rĂ©pertoire de thĂšmes par le rĂ©pertoire de votre thĂšme actuel. Si votre rĂ©pertoire de thĂšme n’a pas de dossier js, vous devez le crĂ©er.
AprĂšs avoir chargĂ© le fichier JavaScript, l’Ă©tape suivante consiste Ă s’assurer que votre site WordPress charge ce JavaScript. Vous devrez ajouter le code suivant au fichier functions.php de votre thĂšme.
wp_enqueue_script( 'wpb_togglemenu', get_template_directory_uri() . '/js/navigation.js', array('jquery'), '20160909', true );
Maintenant, nous devons ajouter le menu de navigation Ă notre thĂšme WordPress. Habituellement, le menu de navigation est ajoutĂ© au fichier header.php d’un thĂšme.
