Een ‘terug’ knop voor je webpagina

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]

WordPress Developer worden?

Wil je leren hoe je zelf plugins, thema's, shortcodes, widgets, Gutenberg blocks en meer kan maken?
Schrijf je dan in voor de cursus WordPress Developer.

Meer snippets

De webwinkel is op zondag gesloten
Het voordeel van een webshop is dat hij 24/7 open is. Maar wat nu, wanneer je op zon- en feestdagen principieel...
Shortcodes voor het tonen en verbergen van content
Hoe maak ik een shortcode waarmee ik content van mijn posts kan verbergen?
De geschatte leestijd voor je content tonen
Laat de geschatte tijd voor een blogposts zien op diverse manieren.
WooCommerce SKU verbergen
Hoe verberg je de SKU in WooCommerce, wanneer je die niet gebruikt?
De presentatie van variabele producten hun prijs verbeteren
Een variabel product wordt in WooCommerce weergegeven als een prijs €100-€250 in plaats van 'vanaf €...
De WordPress 'admin bar' ook daadwerkelijk alleen voor admins
Zelf vind ik de WordPress ‘admin bar’ heel handig om snel toegang te krijgen tot verschillende...

Veiligheid voor alles!

Met betrekking tot de code die je hier aantreft een aantal waarschuwingen, voordat je deze code snippets toepast op je eigen website.

  1. Voer de code nooit direct uit op je eigen website, maar probeer deze eerst op een staging omgeving of een locale kopie van je website. 
  2. Voor je de geteste code installeert op je website, maak eerst een back up van je website.
  3. Zorg altijd voor alle zekerheid, dat je voor je een aanpassing live zet, je ook de FTP gegevens van je website bij de hand hebt.  
 
Voel je je onvoldoende vertrouwd met het toepassen van een dergelijke code snippet, bedenk dat je dit ook door een professional kan laten doen. De WordXPression support strippenkaart is een voordelige manier om dit soort aanpassingen te laten doen.
Heeft dit artikel je geholpen je probleem op te lossen?
Deel het met je vrienden via je favoriete social media.

Heb je vragen bij, of opmerkingen over deze code snippet, stel deze bij de commentaren hieronder.

Geef een antwoord

Het e-mailadres wordt niet gepubliceerd.

Word je website de baas. Neem vandaag nog contact op!

Contact Information

WordXPression 
Imkersdreef 525
7328DG Apeldoorn
06-10449807 (van 9:00 tot 17:00 van ma-vr)

KVK : 75580152 

Social media
Stuur een bericht

Flinke kortingen op cursussen van WordXPression.