Certains articles de blogs WordPress peuvent parfois devenir très longs, c’est autant de scroll back inutile pour votre visiteur…
Autant faciliter la navigation du visiteur en lui proposant un simple lien “Retour vers le Haut” au bas de chacune de vos pages.
Pourquoi un lien Retour en Haut?
Un exemple typique : L’article est intéressant, le visiteur continue sa lecture et se retrouve à scroller de plus en plus loin et de plus en plus bas… Et si l’envie de revenir tout en haut le prenait? Il perdrait un temps fou à rescroller !
Voici des moyens très simples pour remédier à cela:
- Ajouter une ancre à la main dans votre header…
- Installer un plugin qui le fait tout seul !
1. Modifiez quelques fichiers
Avant toute chose, n’oubliez pas de faire une sauvegarde des fichiers que vous aller modifier.
Ajoutons une ancre dans le fichier “header.php” de votre thème actif. Via Apparence>Editeur, éditez le fichier “header.php” que vous retrouverez dans /wp-content/themes/votre-theme/
Recherchez ensuite la fermeture de balise </head> et l’ouverture de la balise <body>, après les avoir trouvé, copiez le code ci-dessous immédiatement après l’ouverture de la balise <body>. Parfois cette dernière contient des paramètres et des commandes supplémentaires, si tel était le cas, assurez vous d’ajouter l’ancre juste après la balise de fin.
<a name="top"></a>
Ce qui devrait vous donner :
</head> <body><a name="top"></a>
Vous pouvez maintenant sauvegarder votre fichier “header” et décider de l’endroit ou vous allez placer le lien “Retour vers le Haut”. Le plus souvent, ce sera à la fin de chaque page/article, aussi il vous faudra modifier votre fichier “footer.php”, mais vous pourriez l’ajouter n’importe où (single.php ou page.php par exemple).
Le lien doit être collé comme suit :
< a href = "#top" >Retour en haut</ a >
Voilà, c’est déjà terminé ! Une fois le fichier enregistré, vous verrez alors apparaître ce lien : “Retour en Haut” à la fin de toutes vos pages.
Vous pourriez, bien sûr, personnaliser d’avantage ce “Retour”, en utilisant une image/icône au lien d’un lien “texte”, en utilisant un href + une classe image (exemple: <a href=”#top”> <img class=”Nom-de-votre-classe” src=”https://lien-vers-image.png” alt=”Retour en Haut” /> </a>), ce qui vous donnera une image comme celle-ci : 
Avec un poil de CSS, on pourrait même customiser d’avantage :
#Nom-de-votre-classe{
z-index: 2;
background: #FF8500 url(images/votre-image.png) no-repeat center;
width: 30px;
height: 30px;
text-indent: -99999px;
border-radius: 50px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
position: fixed;
bottom: 10px;
right: 10px;
cursor: pointer;
}
2. Utiliser un plugin qui sait le faire…
Le plugin Dynamic-to-top sait le faire et le fait très bien. Il ajoute une icône dynamique et automatique “en haut” pour faciliter le retour vers le haut sur vos pages les plus longues. Dynamic-to-top est doté d’un panneau de style intuitif afin de s’adapter aux besoins spécifiques de chaque site.
Nota: Le bouton apparaît uniquement pour les navigateurs dont le javascript est activé et peut éventuellement être désactivé pour les visiteurs via mobiles.
Enfin et pour conclure, il est gratuit et en Français.
Dans le même genre, Ultimate Back to Top button fait bien son office. Léger et paramétrable comme il faut !
Bonjour Neo, merci de cette précision ;)
Une très bonne pratique qui devrait être mise en œuvre sur bon nombre de blogs. Personnellement, j’utilise ce plug-in à la fois très simple à mettre et très utile pour le lecteur.
Dynamic-to-top est l’un de mes “vieux” plugins. Son avantage par rapport au lien en bas d’écran, c’est qu’il agit dès que le visiteur s’éloigne du haut, pas la peine d’aller tout en bas pour pouvoir remonter. Je n’ai jamais vu l’équivalent en code (sans plugin), alors je le garde.
La première solution nous donne un exemple simple d’ancre, on peut s’en inspirer et trouver d’autres utilisations d’ancre.
J’aime beaucoup tes articles. Tu utilises quel thème wordpress ?
Merci ;)
Il s’agit du superbe thème Sahifa de chez ThemeForest
C’est le genre de plugins qui améliore la navigation pour les visiteurs. Ce sont des petits plus qui permettent peut être aux visiteurs de revenir car ils se sentent bien lorsqu’ils parcours le site web en question.
bonsoir,
peut on mettre dans footer.php, un lien hypertexte “retour en haut” ??
Merci
Oui c’est tout à fait possible!
Il y a aussi le Jquery qui permet de petites animations, tu connais mon côté foufou, et bien j’ai adoré le script de ce site de démo : http://demos.myjqueryplugins.com/backtotop/ (voir en bas et passer en ‘easeOutBounce’ vous comprendrez de quoi je parle) Cet effet te permet de fracasser ton retour en haut et créer un effet de rebond une fois arrivé en haut ! De plus, sympa à configurer.
Ah excellent ! j’ai le même thème que toi :) http://www.info-du-jour.net et j’ai cherché comment personnalisé le texte “Lire la suite” et rien de trouvé ! dèjà je ne comprend pas comment il a traduit tout seule (il pour le thème sahifa) le “more” en “Lire la suite”.
Donc, déjà désolé de poser une question qui n’est pas en relation avec le topic, ensuite où est ce que je peux mettre à jour le texte de mon “lire la suite” !
Merci :)
Pour le style, j’ai trouvé
a.more-link {
color:#00C;
text-decoration:underline;
}
il me reste de comprendre comment changer le texte “Lire la suite” !
Pour la traduction, il s’agit des fichiers .mo & .po fournis avec la plupart des thèmes et extensions. Pour changer cette traduction, voir https://wpformation.com/traduire-theme-wordpress-codestyling-poedit/
Merci je vais utiliser le plugin, une solution simple et efficace.