Ajouter un lien ‘back to Top’ a son site wordpress

Ajouter un lien ‘back to Top’ a son site wordpress

backtop

Il existe deux façons principales d’insérer un lien ou un bouton de retour vers le haut sur son site wordpress.

En ajoutant un lien, version html, puis en ajoutant du css et du js :

1-Ajouter un lien

On aura besoin d’une image pour notre bouton

<a href="#" class="back-to-top"></a>
<?php wp_footer(); ?>
</body>
</html>

On insère donc un lien tout ce qu’il y a de plus banal, tout en bas de son site, dans le fichier footer.php.  On lui donne une classe, ici je lui donne comme nom « back-to-top« .

Voici ensuite un exemple de style pour le css:

.back-to-top {
    position: fixed;
    background:url('images/top.png');
    background-repeat: no-repeat;
display: none;
height: 50px; 
width: 50px;
bottom: 50px;
right: 10px;
text-indent:-9999px;
}

.back-to-top:hover {    
    opacity:0.9;
}

Je le place tout en bas à droite, je définis une largeur et une hauteur pour que l’image soit bien visible. J’ajoute pour l’exemple un effet d’opacité au survol.
Puis j’ajoute le jQuery nécessaire pour faire apparaître le bouton à une certaine hauteur de la page, et le faire disparaître.

jQuery(document).ready(function() {
    var offset = 220;
    var duration = 500;
    jQuery(window).scroll(function() {
        if (jQuery(this).scrollTop() > offset) {
            jQuery('.back-to-top').fadeIn(duration);
        } else {
            jQuery('.back-to-top').fadeOut(duration);
        }
    });
    
    jQuery('.back-to-top').click(function(event) {
        event.preventDefault();
        jQuery('html, body').animate({scrollTop: 0}, duration);
        return false;
    })
});

Ici, si vous ne voulez pas d’image mais un texte, traduisible, vous avez juste à insérer le texte dans la balise lien, et enlever bien sûr l’image en background dans le css.
On va dire que c’est la façon standard, qui marche finalement sur n’importe quel site.

2- Utiliser des fonctions:

Pour wordpress, on va pouvoir obtenir exactement le même résultat en travaillant uniquement dans notre fichier functions.php. On retourne dans le footer, on retire le lien qu’on y a mis, il sera généré dynamiquement depuis notre fichier de fonctions. On peut également commenter tout le js qu’on vient de mettre.

Voici le code: Une première fonction pour créer notre lien:

add_action( 'wp_footer', 'back_top' );
function back_top() {
    echo '<a id="back-top" href="#"></a>';
}

Deuxième fonction pour rajouter du style à notre lien, notamment pour placer une image de fond

add_action( 'wp_head', 'back_top_style' );
function back_top_style() {
    echo '<style type="text/css">
        #back-top {
            position: fixed;
            right: 30px;
            bottom: 30px;
            display: none;
            outline: none;
            background:url("wp-content/themes/roman/images/top.png")no-repeat;
            height:50px;width:100px
            
        }
    </style>';
}

Enfin, dernier bout de code, une troisième fonction dans laquelle on insère notre js:

add_action( 'wp_footer', 'back_top_script' );
function back_top_script() {
    echo '<script type="text/javascript">
        jQuery(document).ready(function($){
            $(window).scroll(function () {
                if ( $(this).scrollTop() > 400 )
                    $("#back-top").fadeIn();
                else
                    $("#back-top").fadeOut();
            });
 
            $("#back-top").click(function () {
                $("body,html").animate({ scrollTop: 0 }, 800 );
                return false;
            });
        });
    </script>';
}

Passant de l’un à l’autre, on ne voit strictement aucune différence visuelle.La seconde option est plus académique, mais en l’etat ne marche que sur la page d’accueil

Mis à jour le Par Copier coller | Dans jQuery