Comment ajouter un bouton retour en haut de page dans WordPress

Vous ne savez pas comment ajouter un bouton de retour en haut de page dans WordPress ? Malheureusement, la plupart des thèmes WordPress n’incluent pas ce bouton nativement. Mais il existe plusieurs méthodes que vous pouvez utiliser pour ajouter ce bouton à votre site web.

Et cela en vaut la peine. Si votre site web comporte de longues pages où les utilisateurs font défiler loin de votre menu de navigation ou de votre appel à l’action, cela peut aider les utilisateurs à revenir à l’élément principal de la page avec un minimum d’effort. 

Les moyens les plus courants d’ajouter un bouton de retour en haut de page dans WordPress consistent à utiliser une extension, à ajouter du code personnalisé ou à intégrer un widget sans code. Les extensions et les widgets intégrés ne nécessitent aucune compétence en programmation, ce sont donc les méthodes privilégiées si vous ne maîtrisez pas le HTML, le CSS ou le JavaScript. Le code personnalisé vous donne un contrôle total sur votre bouton, mais ce n’est pas une solution idéale pour les débutants.

Dans ce guide, nous explorons comment ajouter un bouton de retour en haut de page dans WordPress à l’aide de ces méthodes, ainsi que les avantages et les inconvénients de chacune. 

Ajouter un bouton de retour en haut de page avec une extension WordPress

WordPress propose une variété d’extensions pour améliorer les fonctionnalités de votre site web. Dans son répertoire, vous trouverez des extensions de retour en haut de page WordPress provenant de plusieurs développeurs — c’est la façon la plus courante d’ajouter le bouton. 

Options disponibles dans une extension de retour en haut de page WordPress

Bon nombre de ces extensions offrent des options de personnalisation qui vous permettent de choisir l’emplacement du bouton et son design. Lorsque vous recherchez la bonne extension de bouton de retour en haut de page pour votre site web, déterminez quels paramètres comptent le plus pour vous. En voici quelques-uns à prendre en compte :

• Position du bouton : Cela détermine l’endroit où le bouton apparaît sur votre page. Les extensions peuvent vous proposer des options pour placer le bouton à droite, à gauche ou au centre. Certaines offrent un contrôle plus précis.
• Icône ou libellé : Les extensions peuvent proposer une seule icône ou vous offrir un menu d’options parmi lesquelles choisir. Certaines vous permettent également de personnaliser la couleur de l’icône.
• Visibilité sur mobile ou ordinateur : Les boutons peuvent s’afficher différemment sur PC et sur appareils mobiles. Vérifiez les options de visibilité de l’extension pour comprendre comment ils apparaîtront.
• Défilement fluide : Certains boutons proposent des options de défilement au lieu de sauter immédiatement en haut de la page. C’est utile si vous souhaitez que les utilisateurs aient plus de contrôle sur la navigation dans la page.
• Décalage ou seuil de défilement : Ce paramètre détermine l’espace laissé entre les éléments en haut de la page et la position de défilement. Idéalement, cliquer sur le bouton de retour en haut de page ne masquera pas le contenu des menus ou des en-têtes.

Certaines extensions offrent plus de personnalisation que d’autres. Même si vous n’avez pas besoin d’un bouton de retour en haut de page avec de nombreuses options de style, celui que vous choisissez ne doit pas sembler déplacé sur votre site web. Vous voulez qu’il s’intègre harmonieusement aux autres éléments de la page.

Comment ajouter un bouton de retour en haut de page dans WordPress

Une fois que vous avez sélectionné une extension qui répond à vos besoins, installez-la en suivant ces étapes :

1. Connectez-vous au tableau de bord administrateur de votre site web.
2. Cliquez sur Extensions.
3. Repérez l’extension dans le répertoire des extensions WordPress. Vous pouvez utiliser la zone de recherche pour saisir son nom.
4. Cliquez sur l’extension.
5. Cliquez sur Installer et activer. (Si vous installez une extension payante, cliquez sur Acheter et activer.)

Après avoir installé le programme, accédez à son menu Paramètres pour configurer l’apparence du bouton de retour en haut de page et son comportement de défilement.

Extensions WordPress de retour en haut de page populaires

Il existe des centaines d’extensions qui ajoutent un bouton de retour en haut de page dans WordPress. Voici quelques options :

• WPFront Scroll Top : Cette extension propose des dizaines de boutons de retour en haut de page pré-stylisés parmi lesquels choisir. Elle vous permet également de définir la taille, l’emplacement et le comportement de défilement du bouton.

• Smooth Scroll Page Up/Down Buttons : Si les pages de votre site comportent des documents longs, cette extension peut vous aider. Elle offre une fonctionnalité de défilement fluide vers le haut de la page dans WordPress, permettant aux utilisateurs de faire défiler entre les différents documents texte ou jusqu’au début de la page.

• Nicescrollr : Cette extension vous permet d’ajouter un bouton de retour en haut de page et de gérer plusieurs paramètres, notamment la taille du bouton et la vitesse de défilement.

Bien que les extensions soient faciles à installer, elles ajoutent une nouvelle dépendance que vous devrez maintenir. Il est important de rester attentif aux mises à jour de l’extension, car elles peuvent introduire des correctifs de sécurité.  

Ajouter un bouton de retour en haut de page dans WordPress avec du code personnalisé

Un bouton de retour en haut de page personnalisé dans WordPress vous donne un contrôle total sur son apparence et son comportement. Vous n’êtes pas limité par les options de paramètres fournies par une extension, et vous pouvez modifier le bouton pour qu’il réponde parfaitement à vos exigences. C’est une alternative solide pour ceux qui souhaitent un design sur mesure ou qui préfèrent éviter l’alourdissement des pages que les extensions peuvent provoquer.

Cependant, créer votre propre bouton nécessite une certaine expertise. Vous devrez être à l’aise avec la modification des thèmes WordPress et avoir de l’expérience avec le HTML, le CSS ou le JavaScript personnalisé. 

Pour développer votre propre bouton, ajoutez votre code à un bloc HTML personnalisé, à une zone de personnalisation du thème ou à un flux de travail d’extraits de code. Une fois intégré à votre site, testez soigneusement le nouveau bouton pour vous assurer qu’il n’introduit pas de bugs.

Avantages et inconvénients d’un bouton personnalisé

Un bouton de retour en haut de page sur mesure offre beaucoup de flexibilité. Vous pouvez adapter l’icône et la couleur pour qu’elles s’intègrent naturellement à votre site web, et vous pouvez ajuster sa visibilité. Par exemple, vous pouvez concevoir le bouton de sorte qu’il n’apparaisse que lorsqu’un utilisateur atteint un certain point sur la page. Ou bien, vous pouvez ajouter un bouton de retour en haut de page flottant dans WordPress qui reste visible pendant que l’utilisateur fait défiler la page.

Les principaux inconvénients de la création d’un bouton personnalisé sont la configuration technique et les tests. Il faut du temps pour écrire un code qui s’aligne sur votre site web et qui n’interfère pas avec son thème WordPress. 

Les tests sont également essentiels au développement d’un bouton personnalisé. Prévoyez de tester les performances du bouton sur plusieurs appareils, notamment les PC, les tablettes et les smartphones. C’est également une bonne idée d’essayer le bouton sur plusieurs plateformes, telles qu’iOS, Windows et Android.

Méthode sans code plus simple : utilisez le widget Retour en haut de page de Jotform

Il existe une alternative aux extensions et aux boutons personnalisés : le widget Retour en haut de page de Jotform. C’est une solution sans code que vous pouvez ajouter à votre site web en quelques minutes.

Contrairement aux extensions, notre widget Retour en haut de page n’alourdit pas les pages et ne nécessite pas de mises à jour régulières. Aucun codage n’est requis, et il n’affecte pas les fonctionnalités de votre thème WordPress. 

Le widget Retour en haut de page de Jotform est également entièrement personnalisable. Vous pouvez ajuster le style de l’icône, les couleurs, la taille et le rayon des coins. Des options vous permettent de modifier l’emplacement et la visibilité du bouton lors du défilement. Et il fonctionne sur tous les appareils, y compris les écrans mobiles.

Comment installer le widget Retour en haut de page de Jotform

Intégrer le widget à votre site web est facile. Commencez par vous rendre sur notre page widget Retour en haut de page, puis suivez ces étapes :

1. Donnez un nom à votre widget en modifiant le champ « Sans titre » dans la barre d’outils.
2. Saisissez les paramètres de position et de défilement de votre choix, puis cliquez sur Continuer.

• Position du bouton : Choisissez Gauche ou Droite.
• Afficher le libellé : Activez ou désactivez cette option. Saisissez le texte que vous souhaitez afficher sur le bouton.
• Afficher après défilement : Utilisez le curseur pour indiquer de combien de pixels l’utilisateur doit faire défiler avant que le bouton n’apparaisse.
• Animation de défilement : Sélectionnez Fluide ou Instantané.

3. Saisissez vos préférences de style pour le bouton et cliquez sur Continuer.

• Taille du bouton : Utilisez le curseur pour définir la largeur et la hauteur du bouton.
• Taille de l’icône : Utilisez le curseur pour définir la taille de l’icône en forme de flèche.
• Icône : Choisissez un style d’icône en forme de flèche pour le bouton (Flèche vers le haut, Chevron vers le haut ou Flèche en gras vers le haut).
• Rayon des coins : Sélectionnez Coins carrés, Coins arrondis ou Coins circulaires.
• Couleurs du bouton : Saisissez le code couleur hexadécimal de votre choix pour l’arrière-plan et la couleur du texte.
• Ombre portée : Activez ou désactivez une ombre douce sous le bouton.

4. Configurez les règles d’affichage et cliquez sur Essayez-le gratuitement sur votre site web.

• Distance par rapport au bas : Utilisez le curseur pour définir la distance entre le bouton et le bord inférieur.
• Distance par rapport au côté : Utilisez le curseur pour contrôler la distance entre le bouton et le bord latéral.
• Afficher sur ordinateur : Activez ou désactivez.
• Afficher sur mobile : Activez ou désactivez.

5. Copiez le code d’intégration et collez-le dans votre éditeur HTML WordPress.

Pendant que vous personnalisez le bouton, vous pouvez cliquer sur l’icône PC ou smartphone dans le coin inférieur droit pour voir comment il apparaîtra.

Avantages de l’utilisation des outils Jotform sur votre site web WordPress

Que vous soyez un concepteur web expert ou que vous appreniez simplement comment utiliser WordPress, Jotform propose de nombreux outils pratiques pour soutenir votre site web.

Nous proposons plusieurs widgets de site web gratuits que vous pouvez personnaliser pour afficher les avis de votre organisation provenant de sites tiers, notamment Google, Facebook et Tripadvisor — parfaits pour les propriétaires de sites web qui souhaitent mettre en avant des témoignages, mais qui hésitent à s’engager avec les extensions payantes disponibles via WordPress.

Vous pouvez également profiter de l’extension d’intégration de formulaire WordPress personnalisée de Jotform. Elle vous permet de recueillir les soumissions de formulaires des utilisateurs qui visitent votre site. Nous proposons plus de 20 000 modèles de formulaires WordPress personnalisés gratuits qui couvrent les cas d’usage courants, notamment les coordonnées, les informations de paiement et les soumissions de candidatures. Vous pouvez intégrer votre formulaire dans WordPress en quelques étapes seulement.

Et surtout, Jotform propose un forfait gratuit qui prend en charge un nombre illimité de widgets WordPress et jusqu’à cinq formulaires. Passer à un forfait payant augmente le nombre de formulaires que vous pouvez utiliser, supprime la marque Jotform et offre un espace de stockage supplémentaire.

Ajoutez un bouton de retour en haut de page sans ralentir votre flux de travail WordPress

Un bouton de retour en haut de page améliore l’expérience utilisateur lors du défilement de contenus longs. Il favorise également l’engagement et les conversions sur les pages e-commerce et les pages de destination. Mais bien qu’il soit possible d’ajouter un bouton à l’aide d’extensions ou de code personnalisé, la solution sans code la plus simple reste le widget de Jotform.

Pour découvrir comment le widget Retour en haut de page de Jotform ajoute un bouton de défilement vers le haut soigné à votre site WordPress, essayez-le dès aujourd’hui.