Reload page

Browserneuladung
(Reload page). – garantiert

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

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.

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

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

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



Aktualisiert im Jahr 2022-September