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 Child 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!

Inhaltsverzeichnis in der Form von Sitemap

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>

Inhaltsverzeichnis
in der Form von Sitemaps

Merkhilfe

Wenn man in JavaScript statt der 'Class' die 'ID' verwendet, kommt es zu Fehlern, wenn man den Zurück-Button mehrmals pro Seite verwendet. Dies liegt daran, dass die Verwendung von $('.go-back') auf eine Class 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-Class so oft wie nötig verwendet werden können.

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.

Zurück vorig Seite

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.