Comment ajouter un bouton « Défiler vers le haut » à votre site WordPress sans plugins

L'ajout d'un bouton « Faire défiler vers le haut » à votre site Web améliore l'expérience utilisateur, permettant aux visiteurs de revenir rapidement en haut de votre page. De nombreux propriétaires de sites s'appuient sur des plugins pour cette fonctionnalité, mais l'installation d'un trop grand nombre de plugins peut ralentir votre site et potentiellement introduire des risques de sécurité.

Dans cet article, nous vous montrerons comment implémenter une personnalisation Faites défiler vers le haut bouton sur votre WordPress site utilisant un simple extrait de code. Cette approche est légère, sécurisée et élimine le besoin de plugins supplémentaires.

Table des matières

Pourquoi éviter les plugins pour des fonctionnalités simples ?

Amélioration de la vitesse du site:Moins de plugins signifient des temps de chargement plus rapides.
Sécurité renforcée:Chaque plugin ajouté augmente le risque de vulnérabilités.
Personnalisation complète:En ajoutant votre propre code, vous avez un contrôle total sur la conception et la fonctionnalité du bouton.

Guide étape par étape pour ajouter le bouton de défilement vers le haut

1. Comprendre le code

Vous trouverez ci-dessous le code personnalisé qui ajoute un bouton « Défiler vers le haut » à votre site Web WordPress :

/* Défiler vers le haut */
fonction add_scroll_to_top_script() {
    ?>
    
    
      #scrollToTopBtn {
        position : fixe ;
        largeur: 40px;
        hauteur: 40px;
        affichage : flex ;
        align-items:centre;
        justifier-contenu : centre ;
        bas : -100px ;
        droite : 20px ;
        couleur d'arrière-plan : #854FF5 ;
        couleur : blanc ;
        bordure : aucune ;
        rembourrage : 15 px ;
        bordure-rayon : 50% ;
        curseur : pointeur ;
        boîte-ombre : 0 4px 8px rgba(0, 0, 0, 0.2);
        transition : toutes les 0,3 s sont faciles ;
      }
      #scrollToTopBtn:hover {
        couleur d'arrière-plan : #432480 ;
      }
    
    
    
      const scrollToTopBtn = document.getElementById("scrollToTopBtn");
      fenêtre.onscroll = fonction() {
        si (document.body.scrollTop > 200 || document.documentElement.scrollTop > 200) {
          scrollToTopBtn.style.bottom = "85px";
        } autre {
          scrollToTopBtn.style.bottom = "-100px";
        }
      };
      scrollToTopBtn.onclick = fonction () {
        fenêtre.scrollTo({
          haut: 0,
          comportement : « lisse »
        });
      };
    
    <?php
}
add_action('wp_footer', 'add_scroll_to_top_script');

À la recherche de Services de création de sites Web professionnels? Youssef Dev propose une conception de site Web WordPress personnalisée pour aider votre entreprise à se développer en ligne. Obtenez un site Web époustouflant adapté à vos besoins !

2. Comment fonctionne le code

Style CSS:
- Le bouton est conçu pour être circulaire, avec un fond violet et des transitions de survol fluides.
- Le bouton reste masqué hors écran par défaut (bas: -100px) et apparaît lorsque l'utilisateur fait défiler vers le bas (bas: 85px).
Fonctionnalité JavaScript:
- Lorsque l'utilisateur fait défiler 200 pixels ou plus, le bouton devient visible.
- En cliquant sur le bouton, la page défile en douceur vers le haut.
Intégration PHP:
- Le code est ajouté au site en utilisant le ajouter_action fonction qui garantit que le bouton est inclus dans le pied de page du site.

3. Ajout du code à votre site WordPress

Suivez ces étapes pour ajouter le code à votre site :

Étape 1 : Accéder au tableau de bord WordPress

Connectez-vous à votre panneau d'administration WordPress.

Étape 2 : Accéder à l'éditeur de thèmes

Aller à Apparence > Éditeur de fichiers de thème.
Dans la barre latérale de droite, recherchez et cliquez sur l'icône fonctions.php fichier de votre thème actif.

Étape 3 : Insérer le code

Faites défiler vers le bas de la fonctions.php déposer.
Collez l'extrait de code fourni.

Étape 4 : Enregistrez vos modifications

Cliquez Mettre à jour le fichier pour enregistrer vos modifications.

Étape 5 : Testez votre site

Visitez votre site et faites défiler vers le bas pour voir apparaître le bouton « Faire défiler vers le haut ».
Cliquez sur le bouton pour confirmer la fonctionnalité de défilement fluide.

Personnaliser le bouton

Vous pouvez facilement modifier l'apparence du bouton pour qu'il corresponde à la conception de votre site Web :

Changer les couleurs:
Mettre à jour le couleur d'arrière-plan et flotter styles dans la section CSS.cssCopier le codebackground-color: #ff5722; /* Exemple : passer à l'orange */
Ajuster la position:
Changer le droite ou bas valeurs pour repositionner le bouton.
Redimensionner le bouton:
Ajustez le largeur et hauteur propriétés pour rendre le bouton plus grand ou plus petit.

Avantages de cette approche

Léger:Cette méthode évite la surcharge d'un plugin, gardant votre site rapide.
Personnalisable:Vous avez un contrôle total sur la conception et le comportement du bouton.
Aucune dépendance:Étant donné qu’aucune ressource externe n’est utilisée, c’est plus sûr et plus fiable.

Problèmes courants et dépannage

Le bouton n'apparaît pas: Assurez-vous que le code est correctement collé dans le fonctions.php fichier et que votre thème utilise le pied_de_page crochet.
Positionnement des boutons: Si le bouton chevauche d'autres éléments, ajustez le droite et bas valeurs dans le CSS.
Erreurs JavaScript:Ouvrez la console de votre navigateur (F12 > Console) pour vérifier les éventuelles erreurs JavaScript et les corriger.

Conclusion

En ajoutant un bouton personnalisé « Défiler vers le haut » à l'aide du code fourni, vous pouvez améliorer les fonctionnalités de votre site Web sans avoir recours à des plugins. Cette approche garantit de meilleures performances, une sécurité renforcée et une expérience utilisateur fluide.

Mettez en œuvre cette solution dès aujourd'hui et prenez le contrôle total de la conception et des fonctionnalités de votre site Web ! 🚀