Back-Link mit JavaScript

Als Back-Link hier der Class go-back, das ist eine Funktion durch JavaScript und ist dann für Childs Theme scrips.js

/* 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

Das im JavaScript mit ID statt Class?

– das kann feigel’n, wenn man den Zurück-Button mehrmals pro Seite verwendet. Siehe Code der Zeile $(".go-back").

Das #go-back mit Raute ist eine ID und das .go-back wie hier im Beitrag das gezeigt ist mit Punkt und hiermit eine Class.

• #go-back ist eine CSS-ID und darf nur einmal pro Seite zu finden sein.
• Hingegen .go-back ist eine CSS-Klasse und ist pro Seite so häufig zu nutzen, wie man möchte.

Back-Link mit Shortcode

Das im Folgenden ist ohne den Start-Tag <button>, daher auch ohne die gefällige Formatierung.

functions.php

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

^{Pr. WP-Freund}

… und im HTML oder Editor ‘Visuell’

[backlink]

Zum TEST Zurück vorig Seite

Info 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 mit Childs Theme Generator.
So zum Workflow und Browser Cache s. das Plug-in reBusted!

Merkhilfe

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.