Browserneuladung
(Reload page). – garantiert

2022-Februar Ditmar

Collage coffeebeanworks

Info echo

Ist der Classic-Editor schon zu kennen? –

"Classic und TinyMCE – ist so klasse!"
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo

Anklickt Classic-Editor mit TinyMCE Advanced

"Classic und TinyMCE – ist das ausgezeichnete!"
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo

Klassischen Editor anwenden! – und …

"Classic und TinyMCE – ist so sehr gut !"
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo

… 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

TinyMCE aktive Installationen: 2+ Millionen

"Classic und TinyMCE – ist so fabelhaft!"
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo

Ansprechend! – so gehts hier zur Lancierung

"Classic und TinyMCE – ist de luxe!"
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo

… und NEU! – Classic Widgets

"Classic Widgets – sind so grandiose!"
Anklickt Classic! – TinyMCE; und NEU! – Classic Widgets

Info echo

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

Die Browserneuladung erfolgt durch Browser "Seite neu laden". So was zur Browserneuladung (Reload page) direkt auf der Website ist Features, das von wegen mal recht praktisch sein kann. Also mittels Button anklicke auf der Website ist dann der Browser neu zu laden.

Inhaltsverzeichnis

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:

… mit der Möglichkeit zur Textänderung

Da ist im Shortcode von wegen mit 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:

… 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>.

… 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 auch 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.