Werbung

Der Classic-Editor: Vertraut und zuverlässig –
Ihr bewährter Begleiter.

Viele Nutzer schätzen die vertraute Umgebung des Classic-Editors, die eine einfache und schnelle Bearbeitung ermöglicht.

---

Werbung

Mit dem Advanced Editor Tools auf das nächste Level –
Mehr Funktionen, mehr Möglichkeiten.

Der Advanced Editor erweitert den Funktionsumfang des Classic-Editors und ermöglicht es, Inhalte noch effektiver zu bearbeiten.

---

Werbung

Einfach und intuitiv –
Der Classic-Editor für alle.

Der Classic-Editor zeichnet sich durch Stabilität und Zuverlässigkeit aus, was für professionellen Anwender von Bedeutung ist.

---

Werbung

Mehr schaffen in weniger Zeit –
Der Advanced Editor für kreative Köpfe.

Mit dem Advanced Editor können Designer und
Content Creatoren kreative Ideen umsetzten.

---

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:

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.

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

Neu laden TEST

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

Der Beitrag wurde mit fachlicher Unterstützung erstellt.

Aktualisiert im Jahr 2024 April