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.
6 Kommentare
Kommentar hinzufügen Antworten abbrechen
Mann, ich bin fassungslos… Jetzt habe ich STUNDEN verdackelt mit einem doofen „Zurück“ Button in WordPress, das glaubt man einfach nicht.
War schon kurz davor, es sein zu lassen, als ich dann endlich auf diese Seite hier gestossen bin.
Wirklich meine Rettung, aber echt!
Habe jetzt den ganzen return String einfach noch durch ein Input-Type-Button-Tag mit CSS ausgetauscht, damit ich einen schönen Button bekomme.
Ich bin so erleichtert, das Leben kann doch so einfach sein, wenn man die richtigen Infos findet.
In diesem Sinne, ganz herzlichen Dank an Dich, Sven, für diesen Beitrag!
Liebe Grüsse aus der Schweiz
Super! Danke
Hallo und schönen Sonntag.
Gibt es auch die Möglichkeit den Button (oder ein kleines Icon) außerhalb des Seiteninhalts an den rechten Seitenrand zu positionieren, der dann auch noch „mitscrollt“?
Grüße aus der Pfalz
Ja mit CSS und position:fixed; sollte es möglich sein den Button außerhalb des Seiteninhalts an dem rechten Browserand zu platzieren und mitscrollen zu lassen. Der CSS Code würde ungefähr so lauten:
position: fixed; right: 0; top: 50%;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.