Möchten Sie Ihrer WordPress-Site einen Preloader hinzufügen? Ein Preloader ist eine Animation, die den Fortschritt eines Seitenladens im Hintergrund anzeigt.
Preloader versichern den Benutzern, dass die Website zum Laden der Seite arbeitet. Dies kann dazu beitragen, die Benutzererfahrung zu verbessern und die allgemeine Absprungrate zu verringern.
In diesem Artikel zeigen wir Ihnen, wie Sie WordPress einfach einen Preloader hinzufügen können.
Was ist ein Preloader und wann sollten Sie ihn verwenden?
Ein Preloader ist eine Animation oder Statusmeldung, die den Fortschritt des Ladens der Seite im Hintergrund anzeigt.
Wenn Sie eine Website besuchen, lädt Ihr Browser normalerweise verschiedene Teile des Inhalts herunter. Einige Teile der Website werden schneller geladen (d. H. Text, HTML, CSS), während andere langsamer geladen werden (d. H. Bilder und Videos).
Wenn der größte Teil Ihres Inhalts aus Text mit sehr wenigen Bildern und Videos besteht, müssen Sie Ihrer Website keinen Preloader hinzufügen. Stattdessen sollten Sie sich darauf konzentrieren, die Geschwindigkeit und Leistung der Website zu verbessern, um das Laden von Seiten zu beschleunigen.
Wenn der größte Teil Ihres Inhalts aus Bildern, Fotos und Video-Einbettungen besteht, sollten Ihre Benutzer etwas warten, bis sie den gesamten Inhalt sehen können.
Während dieser teilweisen Downloads erscheint Ihre Website möglicherweise langsam. Manchmal denken Benutzer sogar, dass es kaputt ist. Das Hinzufügen eines Preloaders füllt diese Lücke und zeigt dem Benutzer eine Fortschrittsanzeige beim Laden der Seite.
Sie können ein Live-Beispiel eines Preloaders sehen, indem Sie auf die Schaltfläche Vorschau klicken, während Sie einen Blog-Beitrag in WordPress schreiben.
WordPress öffnet eine Live-Vorschau Ihres Blog-Beitrags in einem neuen Fenster und zeigt einen Preloader an, bevor die Live-Vorschau tatsächlich angezeigt wird.
Schauen wir uns an, wie Sie Ihrer WordPress-Website ganz einfach einen Preloader hinzufügen können.
Methode 1. Fügen Sie mit WP Smart Preloader einen WordPress-Preloader hinzu
Diese Methode wird empfohlen, da sie einfacher zu implementieren ist und keine Änderungen an Ihrem WordPress-Theme erfordert.
Als erstes sollten Sie das WP Smart Preloader-Plugin installieren und aktivieren. Weitere Informationen finden Sie in unserer Schritt-für-Schritt-Anleitung zum Installieren eines WordPress-Plugins.
Nach der Aktivierung müssen Sie besuchen Einstellungen »WP Smart Preloader Seite zum Konfigurieren der Plugin-Einstellungen.
Zunächst müssen Sie einen Preloader-Stil oder eine Seitenladeanimation auswählen. Das Plugin enthält sechs integrierte Animationen zur Auswahl. Sie können auch Ihr eigenes benutzerdefiniertes HTML und CSS hochladen, um einen benutzerdefinierten Preloader zu erstellen.
Danach können Sie den Preloader nur auf der Startseite anzeigen lassen, indem Sie die Option "Nur auf der Startseite anzeigen" aktivieren.
Dann müssen Sie nach unten zum Abschnitt "Dauer des Show Loader" scrollen. Sie müssen die Dauer des Preloaders angeben. Die Standardoption ist 1500 Millisekunden (1,5 Sekunden), was für die meisten Websites funktionieren sollte. Sie können sie jedoch ändern, wenn Sie möchten.
Sie können auch die Zeit konfigurieren, die das Ladegerät benötigt, um vollständig zu verschwinden. Die Standardoption ist 2500 Sekunden oder 2,5 Sekunden.
Vergessen Sie nicht, auf die Schaltfläche "Änderungen speichern" zu klicken, um Ihre Einstellungen zu speichern.
Sie können jetzt ihre Website besuchen, um den Preloader in Aktion zu sehen.
Methode 2. Fügen Sie mit dem Preloader-Plugin einen Preloader in WordPress hinzu
Diese Methode ist flexibel, erfordert jedoch zusätzliche Schritte, um sie ordnungsgemäß auf Ihrer WordPress-Site zu implementieren.
Als erstes sollten Sie das Preloader-Plugin installieren und aktivieren. Weitere Informationen finden Sie in unserer Schritt-für-Schritt-Anleitung zum Installieren eines WordPress-Plugins.
Nach der Aktivierung müssen Sie die besuchen Plugins »Preloader Seite zum Konfigurieren der Plugin-Einstellungen.
Zunächst müssen Sie den Hexadezimalcode für die Hintergrundfarbe eingeben, die Sie für den Ladebildschirm verwenden möchten. Die Standardoption ist #FFFFFF (weiß). Sie können ein Online-Farbauswahlwerkzeug verwenden, um den HEX-Code für die Farbe zu finden, die Sie verwenden möchten.
Als Nächstes müssen Sie die URL des Preloader-Images angeben, das Sie verwenden möchten. Das Plugin enthält ein Standardanimationsbild.
Wenn Sie eine andere Animation verwenden möchten, finden Sie einen Link zum Herunterladen eines animierten Preloader-Bildes von einer Website eines Drittanbieters. Anschließend können Sie das Bild in Ihren wp-content-Ordner hochladen und die URL hier einfügen.
Als nächstes müssen Sie auswählen, wo Sie den Preloader anzeigen möchten.
Sie können es auf jeder Seite Ihrer Website anzeigen oder einen bestimmten Abschnitt auswählen.
Schließlich sehen Sie die Anweisungen zum Hinzufügen des folgenden Codes zur Datei header.php Ihres WordPress-Themas.
Stellen Sie vor dem Verlassen der Seite sicher, dass Sie auf die Schaltfläche "Änderungen speichern" klicken, um Ihre Einstellungen zu speichern.
Wir empfehlen, Ihrem WordPress-Theme keinen Code hinzuzufügen, da dieser beim Aktualisieren des Themas gelöscht wird.
Wenn Sie ein untergeordnetes Thema verwenden, können Sie den Code zur Datei header.php Ihres untergeordneten Themas hinzufügen.
Eine noch bessere Lösung wäre, diesen Code mithilfe eines separaten Code-Snippet-Plugins oder eines ortsspezifischen Plugins hinzuzufügen.
Hier ist der Code, den Sie hinzufügen sollten:
function wpb_add_preloader() {
echo '';
}
add_action( 'wp_body_open', 'wpb_add_preloader' );
Hinweis: Diese Methode zum Hinzufügen von Code funktioniert nur bei WordPress-Designs, die die in WordPress 5.2 hinzugefügte Funktion wp_body_open () unterstützen.
Diese Methode zum Hinzufügen des Codes stellt sicher, dass Ihr Code auch dann dort bleibt, wenn Sie das Thema aktualisieren.
Sobald Sie den Code hinzugefügt haben, können Sie deren Website besuchen, um den Preloader in Aktion zu sehen.
Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie Ihrer WordPress-Site auf einfache Weise einen Preloader hinzufügen können. Weitere interessante Ideen finden Sie in unserer Liste der nützlichsten WordPress-Tipps, Tricks und Hacks.
Wenn dir dieser Artikel gefallen hat, abonniere unseren YouTube-Kanal, um WordPress-Tutorial-Videos anzusehen. Sie finden uns auch unter Twitter und Facebook.
