Améliorer la navigation de votre site web peut améliorer l'expérience utilisateur, permettant aux visiteurs de parcourir le contenu plus efficacement.
L'ajout de la navigation au clavier avec les touches fléchées dans WordPress permet aux utilisateurs de naviguer sur les articles de votre site en utilisant uniquement leurs touches fléchées. Cependant, WordPress n'offre pas ces fonctionnalités de navigation par défaut.
Chez WPBeginner, nous nous concentrons sur la création d'une expérience utilisateur fluide et agréable. Au fil du temps, nous avons testé diverses méthodes pour améliorer l'utilisabilité de notre site, y compris la navigation avec les touches fléchées. Bien que cette fonctionnalité ne soit pas importante pour notre blog, nous comprenons à quel point elle pourrait être bénéfique pour les auteurs d'e-books et les petits blogs cherchant à améliorer l'expérience de lecture.
Dans cet article, nous vous montrerons comment ajouter facilement la navigation au clavier avec les touches fléchées dans WordPress.
Pourquoi ajouter la navigation au clavier avec les touches fléchées dans WordPress ?
L'ajout de la navigation au clavier permet aux utilisateurs de parcourir facilement les articles de blog sur votre site web WordPress.
Les utilisateurs peuvent voir les articles de blog suivants et précédents en cliquant sur les touches fléchées droite et gauche de leur clavier.
Cette fonctionnalité est utile lorsque vous souhaitez que les utilisateurs parcourent facilement les articles dans un ordre séquentiel. Par exemple, si vous utilisez des articles de blog pour publier des chapitres d'un livre, des éléments de portfolio, des événements historiques, ou plus encore.
L'ajout de la navigation au clavier avec les touches fléchées peut également être un excellent moyen d'améliorer l'expérience utilisateur sur votre blog WordPress en encourageant les utilisateurs à explorer davantage votre site.
Cela dit, voyons comment ajouter facilement la navigation au clavier avec les touches fléchées dans WordPress, étape par étape :
- Méthode 1 : Ajouter la navigation au clavier avec les touches fléchées à l'aide de WPCode (Recommandé)
- Méthode 2 : Ajouter la navigation au clavier avec les touches fléchées à l'aide du plugin Arrow Keys Navigation
- Navigation par touches fléchées pour les sliders et les galeries d'images WordPress
Méthode 1 : Ajouter la navigation au clavier avec les touches fléchées à l'aide de WPCode (Recommandé)
Vous pouvez facilement ajouter la navigation par touches fléchées sur votre site WordPress en ajoutant du code au fichier functions.php de votre thème WordPress.
Ce faisant, les utilisateurs pourront passer d'une page et d'un article à l'autre sur votre site en utilisant les touches fléchées de leur clavier.
Cependant, gardez à l'esprit que l'ajout de code personnalisé aux fichiers de base de WordPress peut être risqué, et une petite erreur peut casser votre site.
C'est pourquoi nous recommandons toujours d'utiliser WPCode. C'est le meilleur plugin d'extraits de code WordPress du marché qui rend l'ajout de code à votre site web sûr et facile.
Tout d'abord, vous devez installer et activer le plugin WPCode. Pour plus de détails, consultez notre guide pour débutants sur comment installer un plugin WordPress.
Note : WPCode propose également une version gratuite que vous pouvez utiliser pour ce tutoriel. Cependant, la mise à niveau vers le plan payant débloquera plus de fonctionnalités comme la bibliothèque d'extraits de code, la logique conditionnelle, et plus encore.
Après l'activation, rendez-vous sur la page Extraits de code » + Ajouter un extrait depuis le tableau de bord d'administration de WordPress.
Ensuite, vous pouvez cliquer sur le bouton « Utiliser l'extrait » sous l'option « Ajouter votre code personnalisé (Nouvel extrait) ».
Cela vous mènera à la page « Créer un snippet personnalisé », où vous pourrez commencer par taper un nom pour votre snippet de code.
Ici, sélectionnez simplement « Extrait universel » comme « Type de code » dans le menu déroulant situé dans le coin droit de l'écran.
Note : Veuillez ne pas sélectionner « JavaScript » comme type de code. Même s'il s'agit de code JavaScript, le code ne fonctionne sur votre site que si vous sélectionnez l'option « Extrait universel ».
Ensuite, copiez et collez simplement le code suivant dans la zone « Aperçu du code » :
<script type="text/javascript">
document.onkeydown = function (e) {
var e = e || event,
keycode = e.which || e.keyCode;
if (keycode == 37 || keycode == 33)
location = "<?php echo get_permalink(get_previous_post()); ?>";
if (keycode == 39 || keycode == 34)
location = "<?php echo get_permalink(get_next_post()); ?>";
}
</script>
Après cela, faites défiler vers le bas jusqu'à la section « Insertion » pour choisir un emplacement pour l'extrait de code.
Ici, sélectionnez l'option « Pied de page du site » dans le menu déroulant à côté de l'option « Emplacement ».
Ensuite, choisissez « Insertion automatique » comme méthode d’insertion pour le code personnalisé.
Le code sera désormais exécuté automatiquement sur votre site web lors de l’activation.
Après cela, faites défiler vers le haut de la page et basculez le commutateur de « Inactif » à « Actif ».
Ensuite, tout ce que vous avez à faire est de cliquer sur le bouton « Enregistrer le extrait ».
C’est tout ! Vous avez ajouté avec succès la navigation par touches fléchées gauche et droite sur votre site web.
Méthode 2 : Ajouter la navigation au clavier avec les touches fléchées à l'aide du plugin Arrow Keys Navigation
Si vous ne souhaitez pas ajouter de code à votre site web, vous pouvez utiliser le plugin Navigation par touches fléchées.
Ce plugin vous permet de naviguer entre les articles précédents et suivants de votre site en utilisant les touches fléchées gauche et droite de votre clavier.
Tout d’abord, vous devez installer et activer le plugin Arrow Keys Navigation. Pour plus de détails, consultez notre guide étape par étape sur comment installer un plugin WordPress.
Remarque : Ce plugin n’a pas été mis à jour récemment. Cependant, nous l’avons testé avec la dernière version de WordPress, et il fonctionne toujours. Pour plus de détails, vous pouvez consulter notre guide sur l’utilisation de plugins obsolètes.
Comme il s’agit d’un plugin très simple, il ne nécessite aucune configuration supplémentaire. Une fois que vous avez activé le plugin, vous pouvez désormais passer d’un article à l’autre sur votre site en utilisant les touches fléchées.
Gardez à l’esprit que ce plugin vous permet uniquement de passer d’un article à l’autre sur votre site web, vous ne pourrez donc pas utiliser les touches fléchées pour passer d’une page à une autre.
Par exemple, vous ne pouvez pas passer de votre page « Accueil » à votre page « Contactez-nous » en utilisant les touches fléchées.
Une fois que vous avez activé le plugin, vous pouvez ajouter une barre d'alerte ou un popup sur votre site Web qui indique aux utilisateurs qu'ils peuvent désormais naviguer dans divers articles de blog en utilisant simplement les touches fléchées pour passer d'un article à l'autre.
Pour des instructions détaillées, veuillez consulter notre tutoriel sur comment créer une barre d'alerte dans WordPress.
Navigation par touches fléchées pour les sliders et les galeries d'images WordPress
Les deux solutions ci-dessus permettront aux utilisateurs de naviguer dans vos articles de blog avec les touches fléchées. Cependant, vous voudrez peut-être parfois ajouter d'autres fonctionnalités, comme permettre aux utilisateurs de déplacer des images avec les touches fléchées ou peut-être déplacer votre curseur avec les touches fléchées.
Dans ces cas, vous devrez utiliser un plugin de galerie WordPress et/ou un plugin de curseur WordPress. La plupart des plugins de curseur et de galerie populaires sont dotés de fonctionnalités de navigation par touches fléchées.
Nous vous recommandons d'utiliser Envira Gallery car c'est le meilleur plugin de galerie qui vous permet de personnaliser vos images selon vos goûts, y compris les filigranes, les touches fléchées et le texte alternatif.
Pour plus de détails, consultez notre tutoriel sur comment créer une galerie d'images dans WordPress.
Nous espérons que cet article vous a aidé à apprendre comment ajouter la navigation au clavier avec les touches fléchées dans WordPress. Vous pourriez également vouloir consulter notre sélection des meilleurs constructeurs de thèmes WordPress pour concevoir un beau site web ou les raccourcis clavier les plus utiles pour WordPress.
Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.
Jiří Vaněk
J'ai essayé d'utiliser l'extrait sur le site de mon ami et cela fonctionne très bien. Il a un blog de voyage conçu comme un journal de voyage et c'était une très bonne façon de rendre le site plus agréable pour les gens. Merci pour le code fourni.
Brian
Ça marche à merveille, pour la première option WP Code. Mais avez-vous des idées sur la façon de faire en sorte que cela 'boucle' sur tous les articles disponibles dans un type d'article ? Actuellement, au premier ou au dernier article, l'implémentation recharge simplement la page de cet article.
Support WPBeginner
Pas pour le moment, mais nous étudierons la possibilité pour une future mise à jour de l'article !
Admin
Shiran
Pourquoi cela fonctionne-t-il à l'envers ? C'est-à-dire que je dois appuyer sur la flèche « retour » pour avancer...
Support WPBeginner
Il se peut qu'il y ait un problème avec votre clavier lui-même. Avez-vous essayé d'utiliser un clavier à l'écran pour voir si le problème se produit lorsque vous utilisez un autre clavier ?
Admin