Browserneuladung
(Reload page). – garantiert

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

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

[wegerl_reload text=“Reload page TEST“]

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