Comment ajouter la navigation par touches fléchées dans WordPress

Améliorer la navigation de votre site peut améliorer le compte des utilisateurs/utilisatrices, en permettant aux internautes de parcourir plus facilement le contenu de manière efficace.

L’ajout de la navigation par touches fléchées dans WordPress permet aux utilisateurs/utilisatrices de naviguer dans les publications 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 la convivialité 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 comment elle pourrait être bénéfique pour les auteurs/autrices de livres électroniques et les petits blogs qui cherchent à améliorer l’expérience des lecteurs.

Dans cet article, nous allons vous afficher comment ajouter facilement la navigation par touches fléchées au clavier dans WordPress.

Pourquoi ajouter la navigation par touches fléchées dans WordPress ?

L’ajout d’une navigation au clavier permet aux utilisateurs/utilisatrices de parcourir facilement les publications de blog sur votre site WordPress.

Les utilisateurs peuvent afficher 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 très utile lorsque vous souhaitez que les utilisateurs/utilisatrices trient facilement les publications en les commandant. Par exemple, si vous utilisez des publications de blog pour publier les chapitres d’un livre, des articles d’un portfolio, des évènements historiques, etc.

L’ajout de touches de navigation au clavier 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.

Ceci étant dit, voyons comment ajouter facilement la navigation par touches fléchées au clavier dans WordPress, étape par étape :

Méthode 1 : Ajout de la navigation par touches fléchées au clavier à 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.

Ainsi, les utilisateurs/utilisatrices pourront passer d’une page à l’autre et d’une publication à l’autre de votre site en utilisant les touches fléchées de leur clavier.

Cependant, gardez à l’esprit que l’ajout de code personnalisé aux fichiers du cœur de WordPress peut être risqué, et qu’une toute petite erreur peut briser votre site.

C’est pourquoi nous recommandons toujours d’utiliser WPCode. C’est la meilleure extension d’extraits de code WordPress sur le marché qui permet d’ajouter facilement et en toute sécurité du code à votre site.

Tout d’abord, vous devez installer et activer l’extension WPCode. Pour plus de détails, consultez notre guide du débutant sur l’installation d’une extension WordPress.

Une fois activé, rendez-vous sur la page Code Snippets  » + Add Snippet «  du tableau de bord WordPress.

Ensuite, vous pouvez cliquer sur le bouton « Utiliser l’extrait » sous l’option « Ajouter votre code personnalisé (nouvel extrait) ».

Vous accédez alors à la page « Créer un extrait personnalisé », où vous pouvez commencer par saisir un nom pour votre extrait de code.

Il suffit de sélectionner « Universal Sélectionné » comme « Type de code » dans le menu déroulant situé dans le coin droit de l’écran.

Ensuite, il suffit de copier et de coller le code suivant dans la case « Prévisualisation 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>

Ensuite, défilez vers le bas jusqu’à la section « Insertion » pour choisir un emplacement pour l’extrait de code.

Sélectionnez l’option « Site Wide Footer » dans le menu déroulant situé à côté de l’option « Emplacement ».

Choisissez ensuite « Insertion automatique » comme méthode d’insertion du code personnalisé.

Le code sera alors automatiquement activé sur votre site.

Ensuite, défilez vers le haut de la page et permutez le commutateur de « Inactif » à « Actif ».

Il ne vous reste plus qu’à cliquer sur le bouton « Enregistrer l’extrait ».

Vous avez réussi à ajouter les touches de navigation gauche et droite à votre site web. Vous avez ajouté avec succès les touches de navigation gauche et droite sur votre site web.

Méthode 2 : Ajout d’une navigation par touches fléchées à l’aide de l’extension Arrow Keys Navigation

Si vous ne souhaitez pas ajouter de code à votre site, vous pouvez utiliser l’extension Arrow Keys Navigation.

Cette extension vous permet de naviguer dans les publications précédentes et suivantes de votre site à l’aide des touches fléchées droite et gauche de votre clavier.

Tout d’abord, vous devez installer et activer l’extension Arrow Keys Navigation. Pour plus de détails, consultez notre guide étape par étape sur l’installation d’une extension WordPress.

Comme il s’agit d’une extension très simple, elle ne nécessite aucune configuration supplémentaire. Une fois l’extension activée, vous pouvez désormais passer à différentes publications de votre site à l’aide des touches fléchées.

Gardez à l’esprit que cette extension vous permet uniquement de passer d’une publication à l’autre sur votre site, vous ne pourrez donc pas utiliser les touches fléchées pour passer d’une page à l’autre.

Par exemple, vous ne pouvez pas passer de la page « Accueil » à la page « Nous contacter » à l’aide des touches fléchées.

Après avoir activé l’extension, vous pouvez ajouter une barre d’alerte ou une fenêtre surgissante sur votre site qui indique aux utilisateurs/utilisatrices qu’ils/elles peuvent désormais naviguer dans les différentes publications du blog en utilisant simplement les touches fléchées pour passer d’une publication à l’autre.

Pour des instructions détaillées, veuillez consulter notre tutoriel sur la création d’une barre d’alerte dans WordPress.

Navigation par touches fléchées pour les diaporamas et les galeries d’images de WordPress

Les deux solutions ci-dessus permettent aux utilisateurs/utilisatrices de naviguer dans les publications de votre blog à l’aide de touches fléchées. Cependant, il peut arriver que vous souhaitiez ajouter d’autres fonctionnalités, par exemple permettre aux utilisateurs/utilisatrices de déplacer des images à l’aide de touches fléchées ou de déplacer votre Diaporama à l’aide de touches fléchées.

Dans ce cas, vous devrez utiliser une extension de galerie WordPress et/ou une extension de diaporama WordPress. La plupart des plugins populaires de diaporama et de galerie sont intégrés avec des fonctionnalités de navigation par flèche.

Nous vous recommandons d’utiliser Envira Gallery car c’est la meilleure extension de galerie qui vous permet de personnaliser vos images selon vos goûts, y compris les filigranes, les flèches et le texte alt.

Pour plus de détails, consultez notre tutoriel sur la création d’une galerie d’images dans WordPress.

Nous espérons que cet article vous a aidé à apprendre comment ajouter la navigation par touches fléchées au clavier sur WordPress. Vous voudrez peut-être aussi consulter notre top des meilleurs constructeurs de thèmes WordPress pour concevoir un beau site web ou les raccourcis de mots-clés les plus utiles pour WordPress.

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