Een “terug naar bovenknop” in WordPress maken

Het is onhandig en lastig voor je bezoekers als ze een lang artikel lezen en ze aan het eind van het artikel van onderaan de pagina weer helemaal naar boven moeten scrollen. Maak je bezoekers blij en voorzie je WordPress website van een terug naar bovenknop.

Veel thema’s zijn al voorzien van zo’n knop maar lang niet allemaal. Vandaar deze korte tutorial hoe je zelf een terug naar bovenknop kunt maken. De makkelijkste maar naar mijn mening niet de allerbeste manier is een plugin die deze functie toevoegt installeren. Er zijn er genoeg op WordPress.org te vinden. Echter in dit artikel gaan we het zonder plugin doen.

Het is misschien ten overvloede, ga niet in het thema rommelen maar maak een child thema en voeg de terug naar bovenknop daaraan toe. We gaan nu eerst een tekstknop maken.

Terug naar bovenknop maken

Eerst is het nodig om een link te maken. Deze link kan in de header geplaatst worden maar het is beter om hem in de footer te plaatsen. Er is een hook die we kunnen gebruiken namelijk wp_head of wp_footer. Voeg de volgende code aan het functions.php van je child thema toe:

<?php add_action( 'wp_footer', 'back_to_top' );

function back_to_top() {

    echo '<a id="totop" href="#">Back to Top</a>';

}

?>

De link naar boven is gemaakt, maar nu moeten hij nog gestyled worden.

We zijn nog steeds aan het werk in functions.php en we gaan nu de link style invoegen. De link moet rechtsonder gaan verschijne. De style wordt door middel van wp_head in de header geplaatst zoals je kunt zien in de onderstaande code:

<?php add_action( 'wp_head', 'back_to_top_style' );

function back_to_top_style() {

    echo '

<style type="text/css">

        #totop {

            position: fixed;

            right: 30px;

            bottom: 30px;

            display: none;

            outline: none;

        }

    </style>

 

';

}

?>

Tot slot moet er nog een scrollend effect toegevoegd worden zodat de pagina niet naar boven springt als je er op klikt. Hiervoor wordt jQuerie in de header of de footer van de pagina gebruikt. De link zal worden getoond als we ons op 400 pixels van de kop van de pagina bevinden. Wanneer we ons bovenaan de pagina bevinden zal hij verborgen zijn. je kunt dit natuurlijk naar eigen wens veranderen.

<?php add_action( 'wp_footer', 'back_to_top_script' );

function back_to_top_script() {

    echo '<script type="text/javascript">

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

            $(window).scroll(function () {

                if ( $(this).scrollTop() > 400 )

                    $("#totop").fadeIn();

                else

                    $("#totop").fadeOut();

            });

  

            $("#totop").click(function () {

                $("body,html").animate({ scrollTop: 0 }, 800 );

                return false;

            });

        });

    </script>';

}

?>

Met deze drie eenvoudige stappen heb je een terug naar bovenknop met een mooi scrollend effect gemaakt. Je kan de link aanpassen of een afbeelding gebruiken.

Geef een reactie