HTML: Zurück-Button und -Link erstellen

Heute hat inzwischen nahezu jeder Browser einen Zurück-Button integriert. Es kann allerdings unter Umständen Sinn machen, einen Button einzubauen, der auf die vorherige Seite zurück springt. Deshalb gibt es die Möglichkeit in HTML einen Javascript-Befehl ausführen zu lassen, der auf die Seite zuvor navigiert.

Trotzdem muss man natürlich erwähnen, dass in Javascript der Zurück-Button nur funktioniert, wenn es in dem gleichen Tab auch eine vorherige Seite gibt. Wird eine Seite in einem Neuen Tab geöffnet, dann gibt es keine vorausgehenden Seiten und somit ist der Button dann auch ohne Funktion.

Manchmal möchte man keinen klassischen Button, sondern einen Link darstellen. Zurück zur vorherigen Seite kann somit auch als Text dargestellt werden. Hierzu benötigt man folgenden Code in HTML:

<a href="javascript:history.back()">Zurück</a>

HTML Zurück-Button als Button

Naben einem klassischen Text als Link, kann man auch einen richtigen Button darstellen lassen. Für einen Zurück-Button benötigt man folgenden Code in HTML, mit dem gleichen Javascript Inhalt:

<input type="button" value="Zurück" onClick="javascript:history.back()">

Zurück-Button in WordPress einbauen

In der heutigen Zeit werden viele Seiten nicht mehr selbst programmiert, sondern man nutzt CMS Systeme, unter andrem WordPress. Um einen Zurück-Button in WordPress zu integrieren, kann der gleiche HTML und JavaScript Code verwendet werden. Allerdings muss im Editor auf den Modus “Text” umgeschaltet werden, um den Quellcode zu bearbeiten. Alternativ kann man den Button per Shortcode einbinden.

HTML Zurück Button als Shortcode für WordPress

Um in WordPress einen Shortcode zu erstellen, muss dieser erst in die Datei functions.php integriert werden. Folgender Code muss also in das Theme kopiert werden:

function create_back_shortcode() {
return '<a href="javascript:history.back();">Zurück</a>';
}
add_shortcode('link_back', 'create_back_shortcode');

Nun kann man im eigenen WordPress den Text-Zurück per Shortcode einbinden. Der Name kann natürlich frei gewählt werden, in unserem Beispiel wäre der Shortcode [link_back].

Johannes
 

Click Here to Leave a Comment Below 0 comments