Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets
Anklickt! – Advanced Editor Tools; und NEU! – Classic Widgets
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:
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>
.
… 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