Guide du développeur Ajouter un effet de défilement fluide vers le haut dans WordPress à l'aide de JQuery

Publié: 2022-06-03

Nous aimons tous WordPress pour sa transparence et le fait qu'il facilite grandement l'utilisation d'un système de gestion de contenu efficace.

Ce n'est pas exagéré, mais le développement Web facile et accessible est une bénédiction pour les nouveaux webmasters. WordPress possède des dizaines de fonctionnalités qui permettent à divers propriétaires de sites Web de fournir à leurs utilisateurs une interface super fluide et interactive.

Ceux qui découvrent WordPress peuvent consulter les didacticiels WordPress sur des ressources telles que The Blog Starter, qui contient un guide étape par étape sur la façon de démarrer votre blog et de le gérer.

Si vous vous concentrez uniquement sur le contenu de votre site Web, nous aimerions vous dire qu'un site Web réactif et visuellement attrayant est aussi important que le contenu.

Si vous avez un site Web existant et que vous ne savez pas par où commencer, prenez un certain temps et investissez 30 minutes chaque jour pour réfléchir à l'apparence et à l'interface de votre site Web. Faites-nous confiance car vous trouverez progressivement les éléments à réparer. Une fois que vous aurez suralimenté votre site Web avec de grands efforts visuels, les taux de conversation augmenteront.

Et si vous êtes quelqu'un qui s'est déjà investi pour offrir aux utilisateurs une expérience de visite fluide sur votre site Web, bravo à vous ! Eh bien, nous avons un excellent didacticiel pour tous ceux qui souhaitent apporter un changement audacieux à leur site Web et améliorer les performances visuelles globales de leur site Web.

Dans cet article de blog, laissez-nous vous guider sur l'ajout d'un défilement lisse à l'effet supérieur dans WordPress à l'aide de jQuery.

Pourquoi utiliser le Smooth Scroll ?

Habituellement, lorsque les sites Web contiennent de longs articles et que l'utilisateur les parcourt, il peut être frustrant d'atteindre la fin de la page Web.

Ainsi, si votre site Web peut fournir un défilement fluide vers le haut en un seul clic, le lecteur trouvera votre site Web transparent et super fluide.

Donc, si vous êtes propriétaire d'un site Web ou spécialiste du marketing numérique, vous devez être un opportuniste et vous assurer que vous faites tout ce qu'il faut pour attirer un public supplémentaire et organique sur votre site Web.

Façons d'ajouter l'effet Smooth Scroll to Top dans WordPress

Pour pouvoir ajouter un défilement fluide à To Effect dans WordPress, vous pouvez utiliser l'une des méthodes ci-dessous :

1. Utiliser du code écrit en jQuery

2. Utiliser un plug-in

Nous préférons généralement le codage aux plugins car cela ne laisse aucune place au hoquet s'il est fait correctement. Les plugins peuvent parfois réduire la vitesse de chargement du site Web, mais le codage peut vous aider à ajouter une certaine personnalisation sans affecter la vitesse en premier lieu. En particulier, dans ce tutoriel, nous expliquerons le processus de codage.

Comment ajouter l'effet Smooth Scroll to Top dans WordPress avec codage ?

Afin d'ajouter un défilement fluide au meilleur effet sur votre site Web WordPress en utilisant le codage, vous devez suivre ces quatre étapes :

  1. Créez un fichier "Smoothscrolleffect.js".
  2. Attachez la fonction « Smoothscrolleffect.js » à votre thème.
  3. Ajouter l'icône dans le thème
  4. Lier l'effet avec les pages Web

Une fois que vous avez terminé ces 4 étapes, vous êtes prêt à attirer plus de lecteurs. Si vous êtes programmeur, vous pouvez créer vos propres scripts selon vos besoins.

Pour les non-programmeurs, nous avons expliqué chaque étape en détail et ajouté le code requis. Il vous suffit donc de lire les étapes et de les exécuter en conséquence.

Étape 1 : Créer un fichier "Smoothscrolleffect.js"

Il s'agit du fichier le plus important que vous allez créer pour cette étape. Si vous ne parvenez pas à mettre en œuvre cette étape efficacement, vous risquez de ne pas obtenir un défilement fluide complètement.

Dans cette étape, nous allons créer un fichier ".js" (jQuery) qui contient une fonction qui ajoutera un défilement fluide à l'effet Top. Suivez les étapes pour créer un fichier « .js » et téléchargez-le dans le répertoire du site Web.

  1. Créez un nouveau fichier bloc-notes dans votre système.
  2. Copiez le code suivant :

jQuery(document).ready(fonction($){

$(fenêtre).scroll(fonction(){

si ($(this).scrollTop() < 200) {

$('#smoothup') .fadeOut();

} autre {

$('#smoothup') .fadeIn();

}

});

$('#smoothup').on('clic', fonction(){

$('html, body').animate({scrollTop:0}, 'rapide');

retourner faux ;

});

});

  1. Collez le code dans le fichier bloc-notes.
  2. Enregistrez-le avec n'importe quel nom, mais assurez-vous que l'extension est ".js".
  3. Connectez-vous au cPanel de votre site Web.
  4. Accédez au répertoire du site "/js/"

Remarque : Si votre site Web n'a pas de répertoire js, vous devez en créer un.

  1. Téléchargez le fichier ".js" que vous avez créé sur votre système dans le répertoire.

Étape 2 : Attachez le défilement fluide au thème

Dans l'étape ci-dessus, nous avons créé un fichier (avec fonction de défilement fluide) dans le répertoire du site Web, et dans cette étape, nous allons lier la fonction de défilement fluide à notre thème. Pour ce faire, suivez les étapes :

Accédez à votre éditeur de thème dans le tableau de bord WordPress Admin. Ouvrez function.php pour modifier. et collez-y le code suivant.

wp_enqueue_script( 'smoothup', get_template_directory_uri() . '/js/smoothscroll.js', array( 'jquery' ), ”, true );

Appuyez sur "Enregistrer les modifications".

Étape 3. Ajouter une icône au thème

Évidemment, vous souhaitez ajouter une icône à votre site Web à travers laquelle vous pouvez proposer au lecteur de faire défiler vers le haut. En plus de cela, vous devez le rendre plus interactif et réactif. Vous pouvez le faire à l'aide de CSS comme suit :

  1. Accédez au stylesheet.css de votre thème dans l'éditeur de thème.
  2. Copiez le code suivant.

#lisser {

hauteur : 40px ;

largeur : 40px ;

Poste :fixe ;

Bas : 50 px ;

Droite : 100 px ;

Retrait de texte : -9999 px ;

Affichage : aucun ;

Arrière-plan :url("http://www.example.com/wp-content/uploads/2013/07/top_icon.png");

-durée de la transition webkit : 0,4 s ;

-moz-transition-durée : 0,4 s ; durée de transition : 0,4 s ;

}

#smoothup : survolez {

-webkit-transform : rotation (360 degrés) }

arrière-plan : url(") sans répétition ;

}

  1. Collez-le dans la feuille de style de votre thème.
  2. Appuyez sur "Enregistrer les modifications".

Ici, vous pouvez modifier l'icône selon vos besoins ; nous avons utilisé une référence. Pour modifier l'image, vous pouvez la télécharger sur votre site Web et la coller dans le champ Arrière-plan : URL du code ci-dessus.

Étape 4 : Relier le défilement fluide aux pages Web.

Maintenant que nous avons créé un fichier « .js » et que nous l'avons téléchargé dans le répertoire du site Web, que nous l'avons attaché avec le thème et créé une icône pour l'effet, il est temps de passer à l'étape finale. Nous allons maintenant lier l'effet de défilement fluide à toutes les pages Web du site Web. Suis les étapes:

  1. Ouvrez footer.php dans l'éditeur de thème.
  2. Copiez le code suivant :
    1. <a href="#top" id=”smoothup” title=”Retour en haut”></a>
  3. Collez-le dans la page footer.php.
  4. Appuyez sur "Enregistrer les modifications".

Félicitations !, vous avez ajouté avec succès l'effet supérieur de défilement fluide à votre site Web WordPress à l'aide de jQuery.

Conclusion

Nous espérons que le didacticiel ci-dessus vous aidera efficacement à ajouter l'effet "défilement fluide vers le haut" dans WordPress à l'aide de JQuery et à séduire vos utilisateurs avec une excellente expérience de navigation sur le site Web.

Si vous rencontrez des problèmes lors de la mise en œuvre des étapes mentionnées ci-dessus, faites-le nous savoir en déposant un commentaire ci-dessous.