Willkommen beim WP Wegerl.at 'Lesemodus'!
Entspanntes Lesen und spannende Artikel warten auf dich.
Entdecke unsere besten Beiträge und genieße den Lesemodus.
Reload page
smilies.4-user.de

Browserneuladung
(Reload page). – garantiert

Icon DCEmr_e var. und Hintergrund krzysztof-m var.
Info echo
OpenClipart-Vectors-katze-1

Ist der Classic-Editor schon zu kennen? –
"Advanced Editor Tools – ist so klasse!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-2

Anklickt Classic-Editor mit Advanced Editor Tools
"Advanced Editor Tools – ist das ausgezeichnete!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-3

Klassischen Editor anwenden! – und …
"Advanced Editor Tools – ist so sehr gut !"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-7

… die Welt gehört dem, der sie genießt.
"Advanced Editor Tools – und tut sehr gut!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-4

Advanced Editor Tools aktive Installationen: 2+ Millionen
"Advanced Editor Tools – ist so fabelhaft!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-5

Ansprechend! – so gehts hier zur Lancierung
"Advanced Editor Tools – ist de luxe!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Info echo
OpenClipart-Vectors-katze-6

… und NEU! – Classic Widgets
"Classic Widgets – sind so grandiose!"
Anklickt! – Advanced Editor Tools; 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
"Advanced Editor Tools – ist so fein!"
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets

Die Aktualisierung des Browsers erfolgt durch die Option "Seite neu laden". Diese Funktion ist auch direkt auf der Website möglich und kann sich als äußerst praktisch erweisen. Du kannst dann einfach einen Button auf der Website verwenden, um den Browser neu zu laden. – Weltmeisterliche.

Reload page

Es ist wichtig sicherzustellen, dass nur einer der drei folgenden Codes in der functions.php-Datei gespeichert und aktiviert ist, da sonst ein Fehler auftreten kann.

Code1, alternativ 'Reload page':

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

Editor 'Visuell' [wegerl_reload] zeigt dies:

reload
– Das Bild als Double.

Code 2, 'Reload page' mit der Möglichkeit zur Änderung des Textes:

// [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 im visuellen Editor: [wegerl_reload text="Reload TEST"] ermöglicht die individuelle Textanpassung.

reload-test
– Das Bild als Double.

Code 3, 'Reload page' <button> Style mitsamt der Möglichkeit zur Änderung des Textes und CSS des Buttons:

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

Für den Button wird die Akzentfarbe des Themes verwendet. Du kannst ihn zentriert platzieren:

<p style="text-align: center;">[wegerl_reload text="Neu laden TEST"]</p>.

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

Die Verwendung des 3. Codes ermöglicht auch die einfache Anpassung des Buttons mit 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;
}

Dieses CSS passt die folgenden Eigenschaften des Buttons an:

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.


  • Hier ist ein weiteres Beispiel mit dem Tag <button> für den Zurück-Button auf der vorherigen Seite.

Aktualisiert im Jahr 2022-September