Zurück-Button

Zurück-Button vorig Seite!
– so ganz praktikabel das

Info echo
OpenClipart-Vectors-katze-1

Ist der Classic-Editor schon zu kennen? –
“Classic und TinyMCE – ist so klasse!”
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-2

Anklickt Classic-Editor mit TinyMCE Advanced
“Classic und TinyMCE – ist das ausgezeichnete!”
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-3

Klassischen Editor anwenden! – und …
“Classic und TinyMCE – ist so sehr gut !”
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-7

… die Welt gehört dem, der sie genießt.
“Classic und TinyMCE – und tut sehr gut!”
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-4

TinyMCE aktive Installationen: 2+ Millionen
“Classic und TinyMCE – ist so fabelhaft!”
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-5

Ansprechend! – so gehts hier zur Lancierung
“Classic und TinyMCE – ist de luxe!”
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-6

… und NEU! – Classic Widgets
“Classic Widgets – sind so grandiose!”
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-8a

Werkraum ist Werkraum und Frontend ist Frontend
Katzen SVG OpenClipart-Vectors; Ticker von Ditty News Ticker
“Classic und TinyMCE – ist so fein!”
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets


85
/ 100


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 dem Inhaltsverzeichnis in der Form von Sitemap sein⸮ Somit ist Features und Shortcode für einen Zurück-Button angesagt. 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>

… soweit noch ohne Zuweisung einer Funktion.

Inhaltsverzeichnis

Tab 1: Back-Link mit Javascript
Tab 2: Back-Link mit Shortcode
Tab 3: Reload page

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>

 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!

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

…hier im scrolle

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").

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 Short

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

…hier im scrolle

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 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 ist der Code weg.

 

Reload page

Reload page

Das Features ist zum Gebrauch wie hier zum Beispiel  https://wegerl.at/svg-icon-link/ im neuen Browser-Tab etwas unterhalb.

  • 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

functions.php

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

Editor ‘Visuell’ [wegerl_reload] so ist:

reload
– Das Bild als Double.

… mit der Möglichkeit zur Textänderung

Da ist im Shortcode von Text

functions.php

// [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:

reload-test
– Das Bild als Double.

… dazu mit <button> Style

Dem folgend Code ist durch type="button"  der Button im <button> Style und durch class="wegerl-reload-button" dann auch für CSS geeignet

functions.php

// [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>';
});

Pr. WP-Freund

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

Anmerkung: Dem Beispiel infolge Re-Load trifft das durch das Tabmenü nicht konform die Stelle wie hier ist

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

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.at’ ist).

Und so bspw 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 oder auc nur anders sein soll. Das arbeitet mit der Class .wegerl-reload-button. Das ist dann für Childs Theme oder Customizer (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;
}
Des CSS

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 2022-Januar

… Und wie ist dein Erfolg des Beitrags?