Zurück-Button

Zurück-Button vorig Seite!
– sicher ganz praktikabel

Info echo
OpenClipart-Vectors-katze-1

Ist der Classic-Editor schon zu kennen? –
"Classic und TinyMCE – ist so klasse!"
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-2

Anklickt Classic-Editor mit TinyMCE Advanced
"Classic und TinyMCE – ist das ausgezeichnete!"
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-3

Klassischen Editor anwenden! – und …
"Classic und TinyMCE – ist so sehr gut !"
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-7

… die Welt gehört dem, der sie genießt.
"Classic und TinyMCE – und tut sehr gut!"
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-4

TinyMCE aktive Installationen: 2+ Millionen
"Classic und TinyMCE – ist so fabelhaft!"
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-5

Ansprechend! – so gehts hier zur Lancierung
"Classic und TinyMCE – ist de luxe!"
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-6

… und NEU! – Classic Widgets
"Classic Widgets – sind so grandiose!"
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-8a

Werkraum ist Werkraum und Frontend ist Frontend
Katzen SVG OpenClipart-Vectors; Ticker von Ditty News Ticker
"Classic und TinyMCE – ist so fein!"
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Der Zurück-Button des Browsers ist sicherlich eine der einfachsten Methoden, um zur vorherigen Seite zurückzukehren. Es ist jedoch auch möglich, dass Websites eine Schaltfläche im Content bereitstellen, um dem Besucher einen direkten Link zur vorherigen Seite zu ermöglichen. Es kann sich eben so ergeben, dass das dort und da ganz komfortabel sein kann.

Zurück-Button mit Start-Tag <button>

Die Verwendung des Start-Tags <button> ist sehr praktisch, da die Formatierung meistens durch das Theme vorgegeben wird. So wird beispielsweise die Akzentfarbe des Themes für den <button> verwendet, was eine konsistente Gestaltung der Website ermöglicht.

<button>Button</button>

… soweit noch ohne Zuweisung einer Funktion.

Inhaltsverzeichnis

Tab 1: Back-Link mit  Javascript und zs. Start-Tag <button>
Tab 2: Back-Link mit Shortcode

Back-Link JS

Back-Link mit JavaScript

Um einen Back-Link mit JavaScript zu erstellen, kann man die Funktion go-back verwenden und ihr die Class go-back zuweisen. Dies kann dann beispielsweise im Childs Theme über die Datei scrips.js erfolgen.

/* Zurück-Button */
(function($) {
$(function() {
$(".go-back").on("click", function(e) {
e.preventDefault();
window.history.back();
});
});
})(jQuery);

Pr. WP-Freund

… und im HTML

Start-Tag button mit Attributname bzw. Selektor class:

<button class="go-back">Zurück vorig Seite</button>

 Zum TEST Zurück-Button

Der Start-Tag <button> mit Link

Zur Auszeichnung ist das im HTML. So für den Link mit Start-Tag und Selektor a href="" dazu der Start-Tag button:

<a href="https://wegerl.at/inhaltsverzeichnis-sitemap/"><button>Inhaltsverzeichnis in der Form von Sitemaps</button></a>

Anklickt hier zum TEST!

Den Button formatieren …

… gleich wie oben und der Start-Tag button mit Attributname bzw. Selektor style folgend die Deklarationen ("Eigenschaft-Wert"-Kombination).

<a href="https://wegerl.at/inhaltsverzeichnis-sitemap/"><button style="font-size: 16px; padding: 15px; width: 100%; background-color: #772930; color: #dadada;">Inhaltsverzeichnis
in der Form von Sitemaps</button></a>

Merkhilfe

Wenn man in JavaScript statt der Klasse (Class) die ID verwendet, kann es zu Fehlern kommen, insbesondere wenn man den Zurück-Button mehrmals pro Seite verwendet. Dies liegt daran, dass die Verwendung von $('.go-back') auf eine Klasse und $('#go-back') auf eine ID verweist.

Die Raute (#) vor dem Namen kennzeichnet eine ID, während der Punkt (.) eine Klasse kennzeichnet. Es ist wichtig zu beachten, dass CSS-IDs nur einmal pro Seite verwendet werden dürfen, während CSS-Klassen so oft wie nötig verwendet werden können.

Back-Link mit Shortcode

Back-Link mit Shortcode

In diesem Beispiel wird der Back-Link mit einem Shortcode ohne den Start-Tag <button> erstellt, daher wird keine automatische Formatierung angewendet. Wenn man jedoch eine bestimmte Formatierung wünscht, kann man den Shortcode in Kombination mit CSS-Regeln verwenden, um das Aussehen des Links anzupassen.

functions.php

/* Shortcode: backlink */
add_shortcode( 'backlink', function() {
return '<a href="javascript:history.back();">Zurück vorig Seite</a>';
});

Pr. WP-Freund

Beispiel und Kombination mit Start-Tag <button>

Um den Back-Link mit einem Shortcode zu erstellen, kann man einfach [backlink] in den HTML- oder visuellen Editor eingeben.

Möchte man jedoch den Start-Tag <button> verwenden, kann man den Shortcode innerhalb des Tags platzieren, indem man im Editor den Text <button>[backlink]</button> eingibt.

Zum TEST Zurück vorig Seite

Infos zu Shortcodes s. im Titel Shortcodes – selbst erstellen.

Die Snippets zur functions.php ab ins Plug-in Code Snippets.
Mit Obhut der Codes! – so bleibt das auch nach Theme-Update.
Oder Childs Theme! – zum Beitrag Quick Child Theme Generator.
So zum Workflow und Browser Cache s. das Plug-in reBusted!

Merkhilfe, wie es nicht richtig ist

Welches hier oben als Shortcode direkt im Text-Modus?

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

Erst mal ist das im Dashboard / Einstellungen / Schreiben das Häkchen: „WordPress soll falsch verschachteltes XHTML automatisch korrigieren“, sehr gut. Aber nun des Codes bedarf es das Abspeichern im Text-Modus. Also gleich umschalten auf 'Visuell', würde der Code teils gelöscht, – weshalb das essenziell nicht richtig ist, da ja javascript:history.back(); dabei ist:

… In der Bearbeitung des Beitrags müsste vorher eine andere Seite im Text-Modus abgespeichert sein … denn nächst Aufruf im Visuell-Modus ist der Code weg.

Tab 1: Back-Link mit  Javascript und zs. Start-Tag <button>
Tab 2: Back-Link mit Shortcode



 


Aktualisiert im Jahr 2023-März