Der Zurück-Button ist des Web-Browsers. Aber für Websites zum individuellen Gebrauch kann das für den Besucher 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⸮ Somit ist hier Features und Shortcode für einen Zurück-Button. Im anklicke dessen leitet das den Besucher ‘Zurück vorig Seite’. Und als Anhang ist sowas zur Browserneuladung (Reload page). Also mittels Button anklicke auf der Website ist dann der Browser neu zu laden. So was kann von wegen mal recht praktisch sein.

Der 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> = Button

… soweit noch ohne Zuweisung einer Funktion.

Der Back-Link mit Javascript

Als Back-Link hier der Class go-back, das ist eine Funktion durch Javascript:

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

^Kevin

… und im HTML

Start-Tag button mit Attributname bzw. Selektor class:

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

 Hier 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: 18px; padding: 15px; width: 100%; background-color: #772930; color: #dadada;">Inhaltsverzeichnis
in der Form von Sitemaps</button></a>

Inhaltsverzeichnis
in der Form von Sitemaps

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

Merkhilfe und Fachsimpelei

Anhang

Das folgende mit Reload page war gar nicht so im Netz und daher hat mir da ein Internet-Freund ausgeholfen.

Reload page

Das Features ist zum Gebrauch wie hier zum Beispiel ⇔ https://wegerl.at/wp-dark-mode/reload.

• Im Folgenden ist darauf acht zu geben, dass nur ein Code der dreien in die functions.php abzuspeichern bzw. aktiv ist, denn sonst ist ‘Error’.

Alternativ Reload page

// [wegerl_reload]
add_shortcode('wegerl_reload', function () {   return '<a href="#" onClick="window.location.reload();">Reload</a>';
});

Editor ‘Visuell’ [wegerl_reload] so ist visuell:

Und mit der Möglichkeit zur Textänderung:

Das betrifft dann den Shortcode von individuellen Text.

// [wegerl_reload text=""]
add_shortcode('wegerl_reload', function ($atts) {
    $defaults = ['text' => 'Reload'];
    $atts = shortcode_atts($defaults, $atts);    return '<a href="#" onClick="window.location.reload();">' . $atts['text'] . '</a>';
});

Beispiel Editor ‘Visuell’ [wegerl_reload text="Reload TEST"] so ist dann individuellen Text:

Nächst mit <button> Style

Das ist wie oben das mit dem Code zum Ändern des Textes und dabei ist das mit <button> Style (so wie es auch hier auf ‘Wegerl’ ist). Wobei nun dem Code da folgend auch noch die Möglichkeit für CSS dabei ist.

// [wegerl_reload text="Reload"]
add_shortcode('wegerl_reload', function ($atts) {
    $defaults = ['text' => 'Reload'];
    $atts = shortcode_atts($defaults, $atts);
    return '<button class="wegerl-reload-button" type="button" onClick="window.location.reload();">' . $atts['text'] . '</button>';
});

^Kevin

Für <button> ist die Akzentfarbe des Themes. Nun so als mittig <p style="text-align: center;">[wegerl_reload text="Reload page TEST"]</p>. Nun aber, anklicket! –

Reload page TEST

… und infolge <p style> ist hier der Text auch gleich mit Abstand.

Oder mit CSS

So WordPress Theme hat für <button> seine Färbung. Möglicherweise wird das aber von etwas anderem überschrieben?

Hier ist auf jeden Fall noch etwas CSS, falls es nicht so funktioniert. Das arbeitet mit der Class .wegerl-reload-button. Das ist dann für den Customzier (wp-admin → Design → Customizer > Benutzerdefiniertes CSS):

.wegerl-reload-button {
    background-color: #055344 !important;
    color: #fff !important;
    border-radius: 2px;
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    padding: 15px;
}

.wegerl-reload-button:hover {
    background-color: #227061 !important;
}

Zum Bspw des CSS die Erläuterung

background-color: die Farbe des Buttons
color: die Schriftfarbe
border-radius: der Umrandung die Ecken abgerundet
font-weight: die dicke der Schrift
font-size: die Größe der Schrift
text-transform: uppercase; die Schrift in Großbuchstaben
padding: innerer Abstand der Schrift zur Umrandung.

---

Aktualisiert im Jahr 2021-September