Zurück-Button vorig Seite

Der Zurück-Button ist des Web-Browsers. Aber für Websites so zum individuellen Gebrauch kann das für den Besucher ganz schön praktisch sein! – das auch wenn es sich mal so ergibt, dass sich der Besucher von der Website selbst eingesperrt fühlt. Bspw könnte das hier dem Inhaltsverzeichnis in der Form von Sitemap sein⸮ Somit ist hier ein Features und Shortcode für einen Zurück-Button. Im anklicke dessen leitet das den Besucher 'Zurück vorig Seite'.

Der Start-Tag <Button>

Sehr praktikabel ist der Start-Tag Button, denn die Formatierung geht aus dem Tag hervor.

<button>Button</button>

… soweit noch ohne Zuweisung einer Funktion oder so Link.

Der Back-Link mit Javascript

So als Back-Link hier der Class go-back ist das eine Funktion durch Javascript:

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

Kevin P.

… und im HTML

Start-Tag button mit Attributname bzw. Selektor class:

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

Der Start-Tag <button> mit Link

So braucht es nur die Auszeichnung im HTML. So für den Link mit Start-Tag und Selektor a href="" dazu der Start-Tag button:

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

Klick als 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://performanz.wegerl.at/inhaltsverzeichnis-sitemap/"><button style="font-size: 16px; padding: 15px 70px;">Inhaltsverzeichnis
in der Form von Sitemaps</button></a>


Anders ein 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>';
});

… und im HTML bzw. Editor 'Visuell'

[backlink]

Info zu Shortcodes s. im Titel

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


Merkhilfe und Fachsimpelei

Das im Javascript mit ID statt Class?

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

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

  • So #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.

Welches hier oben als Shortcode so direkt im HTML?

<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 Textmodus. Also im gleich umschalten auf 'Visuell', würde der Code teils gelöscht, – weshalb das essentiell nicht richtig ist, da ja javascript:history.back(); dabei ist:

… in der Bearbeitung des Beitrags müsste vorher eine andere Seite im Textmodus abgespeichert sein … denn nächst Aufruf im Visuell-Modus wird der Code entfernt.

Was sagst Du zum Beitrag?