Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets
Des Webbrowsers zurückgehen durch 'Zurück-Button' vorig Seite. Das Folgende ist nun für Websites, um dort die Schaltfläche direkt im Content anzubieten. Für den Besucher kann so back link ganz schön praktisch sein! – das auch, wenn es sich 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⸮ Aber so anklicke von Button leitet das den Besucher gleich’Zurück vorig Seite'.
Zurück-Button mit Start-Tag <button>
Sehr praktikabel ist der Start-Tag <button>
, denn die Formatierung geht aus dem Tag hervor. So für <button>
ist das die Akzentfarbe des Themes.
<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
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>
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
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
Back-Link mit Shortcode
Das im Folgenden ist ohne den Start-Tag <button>
, daher auch ohne die gefällige Formatierung. Oder auch in Kombination dann mit 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'
Allein den Shortcode [backlink]
eingeben.
Oder in Kombination mit Start-Tag <button>
Im Editor Text <button>[backlink]</button>
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
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
- Anderes mit
<button>
Style im Titel Browserneuladung (Reload page).
Aktualisiert im Jahr 2023-Januar