In diesem Artikel zeigen wir, Hinzufügen eines Preloaders auf der WordPress-Homepage mit einfachem PHP-, CSS- und JavaScript-Code. Preloader ist eine Animation, die angezeigt wird, bevor der Inhalt der Website geladen wird. So können Sie einen attraktiven ersten Eindruck für den Benutzer schaffen. Lesen Sie unser Tutorial im Detail, um zu erfahren, wie Sie eine Schritt-für-Schritt-Animation hinzufügen. Preloader mit Ihrem eigenen Logo und wie Sie das Timing der Animation anpassen können.
Warum einen Preloader zur WordPress-Startseite hinzufügen?
Ein Preloader hilft, die Aufmerksamkeit des Benutzers zu erhalten, während die Seite geladen wird. Dies kann besonders wichtig sein, wenn Ihre Website große Grafiken oder viele Plugins enthält, die die Seite verlangsamen. Mit einem Preloader sehen die Nutzer eine Animation oder ein Logo, bevor die Seite vollständig geladen ist, so dass das Nutzererlebnis reibungsloser verläuft.
Falls Sie sich das fragen, Hinzufügen eines Preloaders auf der WordPress-Homepagebefolgen Sie sorgfältig die folgenden Schritte. Wir werden nicht nur den PHP-Code, sondern auch das CSS und JavaScript im Detail besprechen, um einen auf Ihre Bedürfnisse zugeschnittenen Preloader zu erstellen.
PHP-Code für die Anzeige des Preloaders
Der erste Schritt besteht darin, PHP-Code hinzuzufügen, der die Preloader nur auf der Startseite der Website. Der folgende Code sollte in die Datei eingefügt werden header.php:
<?php if (is_front_page()) : ?>
<div id="preloader" class="fade-in">
<div id="loader-content">
<img src="//* LINK DO TWOJEGO LOGO *//" alt="Logo Preloader">
</div>
</div>
<?php endif; ?>
Dieser Code macht Preloader erscheint nur auf der Startseite, was für die Optimierung der Website wichtig ist. Dadurch wird sichergestellt, dass Nutzer, die andere Unterseiten besuchen, nicht die Preloader.
Gestaltung des Preloaders mit CSS
Der nächste Schritt besteht darin, die CSS-Stile hinzuzufügen, die das Aussehen der Preloader. In der Datei style.css fügen Sie den folgenden Code hinzu:
#preloader {
Position: fixiert;
top: 0;
links: 0;
Breite: 100%
Höhe: 100%;
Hintergrundfarbe: #ffff;
z-index: 9999;
Anzeige: flex;
justify-Inhalt: zentriert;
align-items: center;
Deckkraft: 0;
Sichtbarkeit: versteckt;
transition: opacity 1s ease-in-out, visibility 1s;
}
#loader-Inhalt img {
max-width: 300px;
Höhe: auto;
}
#preloader.fade-in {
Deckkraft: 1;
Sichtbarkeit: sichtbar;
}
body.loaded #preloader {
Deckkraft: 0;
Sichtbarkeit: versteckt;
Übergang: Deckkraft 1s, Sichtbarkeit 1s;
}
Das Styling sorgt dafür, dass das Logo in der Mitte des Bildschirms angezeigt wird und der Hintergrund des Preloaders weiß ist. Außerdem haben wir das Auftauchen und Verschwinden der Animation mit sanften Effekten versehen, was die Website professioneller aussehen lässt.
Hinzufügen von JavaScript, um den Preloader auszublenden, wenn die Seite geladen wird
Das letzte Element ist das Hinzufügen von JavaScript-Code zum Ausblenden der Preloader nach einer bestimmten Zeit oder nachdem die gesamte Website geladen wurde. Fügen Sie den folgenden Code in Ihre Datei ein functions.php (oder Plug-ins Code-Schnipsel - die ich persönlich mehr empfehle):
function add_preloader_script() {
if (is_front_page()) {
echo "
";
}
}
add_action('wp_footer', 'add_preloader_script');
Dieses Skript lässt den Preloader nach 3 Sekunden automatisch verschwinden. Sie können die Anzeigezeit anpassen, indem Sie den Wert von 3000 auf eine andere Zahl, ausgedrückt in Millisekunden.
Zusammenfassung - wie füge ich der WordPress-Homepage einen Preloader hinzu?
Jetzt wissen Sie genau, wie Sie einen Preloader zu Ihrer WordPress-Homepage hinzufügen können. Fügen Sie einfach PHP-, CSS- und JavaScript-Code hinzu, um eine attraktive Animation zu erstellen, bevor Ihre Website geladen wird. Dadurch sieht Ihre Website professioneller aus und vermittelt den Nutzern einen besseren ersten Eindruck.
Hinzufügung von Preloader ist nicht nur eine Frage der Ästhetik, sondern auch eine praktische Lösung zur Verbesserung der Benutzerfreundlichkeit. Wenn Sie möchten, dass Ihre Homepage besser aussieht, sollten Sie eine Preloader ist eine der einfachsten Möglichkeiten, dies zu erreichen.