Es hat zwar schon nahezu seit immer jeder Browser einen Zurück-Button, aber dennoch kann es manchmal Sinn machen, einen solchen Button, der zurück zur vorherigen Seite führt, auf der eigenen Website einzubauen. Deshalb zeige ich euch, wie ihr ganz einfach einen solchen Button bzw. Link mit einem kleinen Javascript Befehl erstellen könnt.
Der Zurück-Button funktioniert nur, wenn es auch (in diesem Tab) eine vorherige Seite zum Zurückspringen gibt. Wenn die Seite mit dem Zurück-Button also z.B. direkt in einem neuen Tab aufgerufen oder geöffnet wurde, gibt es keine Seite zum Zurückspringen und der Button funktioniert nicht.
HTML Zurück-Button als Link
Der Sprung zur vorherigen Seite kann z.B. als Textlink umgesetzt werden. Dazu muss folgender Code in das HTML eingebaut werden:
<a href="javascript:history.back()">Zurück</a>
HTML Zurück-Button als Button dargestellt
Falls der zurück-Button auch tatsächlich als Button dargestellt werden soll, kannst du dies mit folgendem HTML Code ermöglichen:
<input type="button" value="Zurück" onClick="javascript:history.back()">
Zurück-Button in WordPress einbauen
Obigen Button bzw. Code-Schnipsel kannst du natürlich auch in WordPress einbauen. Wichtig zu wissen ist aber, dass du den Code-Schnipsel in dem Text-Editor nicht im Modus „visuell“ einfügen darfst, sondern zuerst den Editor auf den Modus „Text“ (rechts oben) umschalten musst. Nur im Text-Modus kannst du HTML Code einfügen.
Alternativ kannst du auch den Button per Shortcode einzubauen.
HTML Zurück Button als Shortcode für WordPress
Füge folgenden Code-Schnipsel in deine functions.php Datei deines (Child-)Themes ein:
function add_back_button_shortcode() {
return '<a href="javascript:history.back();">Zurück</a>';
}
add_shortcode( 'back_button', 'add_back_button_shortcode' );
Dann kannst du mit dem Shortcode [back_button]
den zurück-Button in deine WordPress Seite einfügen.
2 Kommentare
Kommentar hinzufügen Antworten abbrechen
Coole Sache! Kannst du noch erklären, wie die Hover Farbe geändert werden kann?
Hallo Lennard, die hover-Farbe kannst du per CSS-Code ändern, in dem du auf das Element/Link den Pseudo-Selector :hover benutzt und dann die color angibts: Also z.B. „a:hover { color: #ff0000; }“. Dann werden alle Links beim hovern rot gemacht. Falls du den zurück-Button als Button (also als
<input>
) gebaut hast, wäre es soetwas wie „input[type=submit]:hover { color: #ff0000; }“. Falls du den Hover-Effekt nur bei dem zurück-Button haben möchtest (und nicht auch bei allen anderen Elementen) musst du am besten dem zurück-Button eine Class oder ID geben und dann per .class:hover oder #id:hover die Farbe im CSS angeben.