Een ’terug’ knop voor je webpagina

Stel, je bezoeker is op een pagina en je wilt dat die bezoeker eenvoudig terug kan gaan naar de voorgaande pagina, door op een knop te drukken. Hoe doe je dat?

Dat is op zich vrij eenvoudig te implementeren, wanneer je je echter wel bewust bent van een aantal beperkingen van deze functie.

De eerste beperking, is dat deze terug knop net zo zal werken als de terug knop van je browser. Je kan je dus afvragen, hoe nuttig deze knop werkelijk zou zijn.

Wat volgt uit deze eerste beperking is dat wanneer iemand direct op jouw pagina land, en er geen ‘historie’ is, zal de knop wel zichtbaar zijn, maar niet werken. En wanneer iemand via een andere site op jouw site is gekomen, zal de terug knop terug gaan naar die andere site. Iets wat je mogelijk niet zou willen.

Maar wanneer je deze beperkingen voor lief neemt, is eigenlijk zo’n terug knop met één regel code te implementeren.

Dit is javascript code, dus dat is code die in de browser wordt uitgevoerd. Je plaatst deze code dus niet in je ‘functions.php’, maar direct -bijvoorbeeld via een HTML widget- in de pagina waar je deze code wilt gebruiken.

<button onclick="history.back()">Terug</button>

Omdat je hier een saai grijze knop zal krijgen, tenzij je thema knoppen anders heeft gedefinieerd, wil je misschien een iets fraaiere oplossing. Vaak zijn knoppen op pagina’s niet echt ‘knoppen’, maar mooi opgemaakte links. Zelf zou ik eerder in plaats van bovenstaande code, kiezen voor iets als dit.

<a href="javascript:history.back()" class="wxp-back-button">Terug</a>

Dit ziet er nog niet veel beter uit, want alles wat je hier krijgt is het onderstreepte woordje ‘Terug’. Dat komt omdat we hier eerst nog wat CSS aan toe willen voegen.

De meeste thema’s bieden de mogelijkheid om via de ‘Customizer’ CSS toe te voegen, en daar maken we dan ook dankbaar gebruik van. Alternatief kan je -wanneer je een child theme gebruikt- in de ‘style.css’ van je child theme deze code toevoegen.

.wxp-back-button {
     text-decoration: none;
     padding: 5 10 5 10;
     color: white;
     background-color: black;
}

.wxp-back-button:hover {
     color: black;
     background-color: white;
}

Wat je hier dus krijgt is een zwarte knop met witte tekst die wit met zwart wordt, wanneer je er met de muis overheen gaat. Wil je liever wat meer ruimte om de tekst heen, verhoog dan de getallen 5 10 5 10 tot een grootte die meer past bij je wensen.

Wil ik die knop vaker opnemen in meerdere pagina’s, dan kan het een goed idee zijn om hem tot een shortcode te maken. Laten we even over één ding duidelijk zijn: De beste manier voor wat performance betreft is het gebruik direct als JavaScript code. Maar wellicht ben je zelf -of is degene die het zou moeten gebruiken- wat minder bekend met JavaScript. Een shortcode is dan makkelijker.

Als shortcode plaats je de code wel in je functions.php of in een maatwerk plugin voor je code snippets.

De bijbehorende CSS blijf je gewoon via de Customizer toevoegen. Let er overigens wel op, dat wanneer je het thema verandert, je opnieuw de ‘knop’ zal moeten stylen via de Customizer.

<?php
add_shortcode('backbutton','wxp_back_button');

function wxp_back_button() {
    return  '<a href="javascript:history.back()" class="wxp-back-button">Terug</a>';
}

Je kan vervolgens de shortcode in een pagina opnemen door waar dan ook waar shortcodes worden geaccepteerd de onderstaande code te gebruiken:

[backbutton]