So fügen Sie eine Seitenladeanimation (Preloader) in WordPress hinzu

Die Seitengeschwindigkeit spielt eine entscheidende Rolle für die Leistung Ihrer Website. Wenn es länger als ein oder zwei Sekunden dauert, bis eine Seite vollständig geladen ist, kann dies die Benutzer so frustrieren, dass sie Ihre Website verlassen. Es kann jedoch hilfreich sein, wenn der Besucher etwas Interessantes zu sehen hat, während die Seite fertig geladen ist.

Eine Seitenladeanimation oder „Preloader-Animation“ informiert Besucher darüber, dass eine Seite geladen wird (sie hängt nicht fest) und erhöht die Wahrscheinlichkeit, dass sie auf der Website bleiben. Auf diese Weise kann es die User Experience (UX) verbessern und Ihre Absprungraten reduzieren.

In diesem Beitrag erläutern wir die Vorteile von Preloader-Animationen und wann sie verwendet werden. Dann führen wir Sie durch Ihre Optionen zum Hinzufügen einer Animation zum Laden von WordPress-Seiten. Lass uns anfangen!

Was ist eine Preloader-Animation?

Eine Preloader-Animation signalisiert Benutzern, dass eine Seite aktiv geladen wird. Es ist eine einfache Animation, die als Fortschrittsanzeige für Seiten verwendet werden kann, die jeweils nur bestimmte Inhalte laden.

WordPress-Preloader bieten Besuchern in Sekundenschnelle etwas Angenehmeres und Interessanteres, während sie darauf warten, dass die gesamte Seite vollständig geladen ist. In einigen Fällen können sie sogar eine Schätzung der verbleibenden Zeit anbieten.

Wann sollte ich einen Preloader verwenden?

Ein Preloader ist eine kluge Wahl, wenn Sie eine video- oder bildlastige WordPress-Site haben, deren Laden etwas länger dauert als normal. Auf diese Weise können Besucher sicher sein, dass Ihre Website wie beabsichtigt funktioniert und nicht beschädigt ist.

Wenn Ihre Website jedoch hauptsächlich textbasiert ist, ist eine Preloader-Animation möglicherweise nicht erforderlich. Stattdessen wäre es sinnvoller, sich auf die Verbesserung der Seitengeschwindigkeit zu konzentrieren.

2 Optionen zum Hinzufügen einer Seitenladeanimation zu WordPress

Es gibt zwei Hauptmethoden, mit denen Sie Ihrer Website eine WordPress-Preloader-Animation hinzufügen können. Sie können ein Plugin verwenden, was die einfachere Option ist, oder die Aufgabe manuell ausführen. Werfen wir einen Blick darauf, wie Sie mit beiden Methoden beginnen können.

Option 1: Fügen Sie eine Preloader-Animation mit einem Plugin hinzu

Das Hinzufügen einer Preloader-Animation über ein Plugin ist für die meisten Benutzer die schnellere und einfachere Option. Es gibt eine Handvoll Plugins, die Sie verwenden können, aber wir empfehlen WP Smart Preloader:

Dies ist ein kostenloses, hochgradig anpassbares Plugin. Es verwendet CSS und minimales HTML-Markup, um das Risiko zu verringern, dass Benutzer Ihre Website verlassen, während Inhalte geladen werden. In den folgenden Schritten zeigen wir Ihnen, wie es funktioniert.

Schritt 1: Laden Sie WP Smart Preloader herunter

Sie können das WP Smart Preloader-Plugin über das WordPress-Plugin-Verzeichnis herunterladen. Dann kannst du die .zip- Datei auf deine WordPress-Seite hochladen, indem du im Admin-Dashboard zu Plugins > Add New > Upload Plugin gehst:

Eine andere Möglichkeit besteht darin, über die Suchleiste auf dem Bildschirm Plugin > Neu hinzufügen nach dem Plugin zu suchen:

In beiden Fällen klicken Sie nach der Installation des Plugins auf die Schaltfläche Aktivieren . Sie finden die Optionen dann unter Einstellungen > WP Smart Preloader .

Schritt 2: Wählen Sie Ihren Stil aus

Auf der Seite WP Smart Preloader Settings wählen Sie zunächst einen Stil für den Preloader aus. Unter dem Abschnitt Preloader auswählen gibt es ein Dropdown-Menü, in dem Sie aus sechs Stiloptionen auswählen können, sowie eine Option für benutzerdefinierte Animationen:

Sobald Sie einen Stil ausgewählt haben, können Sie ihn im Fenster unten in der Vorschau anzeigen. Wenn Sie Ihre eigene benutzerdefinierte Animation hinzufügen möchten, können Sie Ihren HTML-Code im Abschnitt Benutzerdefinierte Animation einfügen:

Am Ende dieses Bildschirms können Sie die Dauer für den Loader selbst und den 'Fade-out'-Effekt einstellen:

Wenn Sie diese Felder leer lassen, werden die Standardwerte auf 1500 Millisekunden (1,5 Sekunden) bzw. 2500 Millisekunden (2,5 Sekunden) eingestellt. Wenn Sie fertig sind, klicken Sie auf die Schaltfläche Änderungen speichern .

Schritt 3: Vorschau Ihrer Preloader-Animation

Wenn Sie mit der Konfiguration Ihrer Einstellungen fertig sind, besuchen Sie Ihre WordPress-Site in einem neuen Browser-Tab, um eine Vorschau der Preloader-Animation anzuzeigen. Sie können zurückgehen, um bei Bedarf stilistische Änderungen vorzunehmen. Sobald Sie mit dem Preloader zufrieden sind, wird er eingerichtet und ist einsatzbereit.

Option 2: Manuelles Hinzufügen einer Preloader-Animation

Wenn Sie kein Plugin verwenden möchten, können Sie diese Funktion trotzdem manuell zu Ihrer Website hinzufügen. Der Hauptvorteil beim Erstellen eines benutzerdefinierten Preloaders besteht darin, dass Sie mehr Flexibilität bei der Gestaltung haben.

Natürlich ist es auch ein schwierigerer Prozess. Als Nächstes zeigen wir Ihnen, wie Sie eine benutzerdefinierte Preloader-Animation für Ihre WordPress-Site erstellen, hochladen und formatieren.

Schritt 1: Brainstormen Sie Ihre Animation

Der erste Schritt besteht darin, zu entscheiden, welche Art von Animation Sie verwenden möchten. Sie können andere Preloader-Animationstools recherchieren, um eine Vorstellung von dem Stil zu bekommen, der Ihnen gefällt. Es gibt einige kostenlose Animationen, die Sie auf Codepen verwenden und erkunden können, was eine großartige Möglichkeit sein kann, einige Ideen zu bekommen.

Schritt 2: Entwickeln oder laden Sie Ihre Animation herunter

Um Ihre Animation zu entwickeln, können Sie ein Tool wie Photoshop verwenden, um ein GIF oder eine sich drehende Preloader-Animation zu erstellen. Sie können sich auch auf unsere Ressource zum Erstellen von WordPress-Animationen mit CSS beziehen.

Wir empfehlen den letzteren Ansatz, da das Hinzufügen eines GIF-Preloaders zu Ihrer WordPress-Site am besten mit einem Plugin erfolgt. Zusätzlich zu Codepen (oben erwähnt) können Sie auch eine Animation von Websites wie Spinkit und LoadLab herunterladen.

Für dieses Tutorial verwenden wir eine Preloader-Animation von Spinkit. Unabhängig davon, woher Sie Ihre Animation beziehen, benötigen Sie den CSS-Quellcode, um sie manuell zu Ihrer WordPress-Site hinzuzufügen:

Die meisten kostenlosen Preloader-Animationen enthalten einen Quelllink, in dem Sie sowohl HTML als auch CSS finden können:

Denken Sie daran, dass Sie auch den CSS-Quellcode aus einer Preloader-Animation verwenden und ihn später nach Ihren Wünschen anpassen können.

Schritt 3: Erstellen Sie ein Child-Theme

Sobald Sie Ihre Animation haben, können Sie sie zu Ihrer WordPress-Site hinzufügen. Der sicherste Weg, dies zu tun, ist die Einrichtung eines untergeordneten Themas. Wenn Sie sich nicht sicher sind, wie das geht, können Sie unser Tutorial zum Erstellen eines untergeordneten WordPress-Themes lesen.

Schritt 4: Fügen Sie der header.php -Datei Ihres Themes HTML-Code hinzu

Der nächste Schritt besteht darin, die Datei header.php für Ihr WordPress-Theme zu finden. Sie können dies über den WordPress- Theme-Editor- Bildschirm tun:

Sie können die Dateien auch mit einem FTP-Client wie FileZilla bearbeiten. Die Datei befindet sich im Ordner wp-content > themes im Stammverzeichnis deiner Website.

Sobald Sie die Datei gefunden und geöffnet haben, fügen Sie den folgenden HTML-Code unter dem Body-Tag ein:

 <!--CSS Spinner--> <div class="spinner-wrapper"> <div class="spinner"></div> </div>

Passen Sie den für Ihre spezielle WordPress-Preloader-Animation erforderlichen HTML-Code an oder fügen Sie ihn hinzu und speichern Sie die Datei.

Schritt 5: Fügen Sie den CSS-Code zu Ihrem Stylesheet hinzu

Jetzt ist es an der Zeit, CSS hinzuzufügen, um Ihre Animation zu gestalten. Suchen Sie das CSS-Stylesheet ( style.css ) für Ihr WordPress-Design, kopieren Sie den CSS-Quellcode und fügen Sie ihn für Ihre Animation ein. In unserem Fall fügen wir Folgendes hinzu:

 .spinner { margin: 100px auto; width: 50px; height: 40px; text-align: center; font-size: 10px; } .spinner > div { background-color: #333; height: 100%; width: 6px; display: inline-block; -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out; animation: sk-stretchdelay 1.2s infinite ease-in-out; } .spinner .rect2 { -webkit-animation-delay: -1.1s; animation-delay: -1.1s; } .spinner .rect3 { -webkit-animation-delay: -1.0s; animation-delay: -1.0s; } .spinner .rect4 { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; } .spinner .rect5 { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; } @-webkit-keyframes sk-stretchdelay { 0%, 40%, 100% { -webkit-transform: scaleY(0.4) } 20% { -webkit-transform: scaleY(1.0) } } @keyframes sk-stretchdelay { 0%, 40%, 100% { transform: scaleY(0.4); -webkit-transform: scaleY(0.4); } 20% { transform: scaleY(1.0); -webkit-transform: scaleY(1.0); } }

Bevor Sie Ihre Änderungen speichern, entfernen Sie diesen Teil: „margin: 100px auto;“. Kopieren Sie stattdessen Folgendes und fügen Sie es ein:

 position: absolute; top: 48%; left: 48%;

Anschließend können Sie die Datei speichern.

Schritt 6: Fügen Sie jQuey-Code hinzu, damit die Animation funktioniert

Damit Ihre Spinner-Preloader-Animation funktioniert, müssen Sie etwas jQuery hinzufügen. Navigieren Sie dazu zurück zur Datei header.php und fügen Sie Folgendes vor dem schließenden Body-Tag ein:

 <script> $(document).ready(function() { //Preloader preloaderFadeOutTime = 500; function hidePreloader() { var preloader = $('.spinner-wrapper'); preloader.fadeOut(preloaderFadeOutTime); } hidePreloader(); }); </script>

Speichern Sie dann Ihre Datei und sehen Sie sich eine Vorschau Ihrer Website an, um sicherzustellen, dass die WordPress-Preloader-Animation wie beabsichtigt funktioniert.

Finden Sie weitere Tipps und Anleitungen von WP Engine

Das Hinzufügen von WordPress-Preloader-Animationen zu Ihrer Website kann dazu beitragen, Besucher anzusprechen und die Absprungraten zu reduzieren. Außerdem haben Sie mehrere Optionen, um die Arbeit schnell zu erledigen.

Bei WP Engine ist es unsere Mission, Tipps, Tricks und Ressourcen für Entwickler bereitzustellen, damit Sie sicherstellen können, dass Ihre Website immer optimal aussieht. Erfahren Sie noch heute mehr über unsere Pläne!