Last Updated on 11/10/2021 by MTE Leben
Seiten jeder Website benötigen einige Zeit zum Laden. Darüber hinaus können während dieses Vorgangs einige Änderungen auf einer Seite vorgenommen werden. Dies geschieht normalerweise beim Laden von Stilen, Schriftarten und Bildern. Um diesen unschönen Moment vor Besuchern zu verbergen, können Sie einen animierten Preloader verwenden. Und nachdem die Seite vollständig geladen ist, verschwindet sie.
Ein Preloader ist also ein Indikator für das Laden der Site. Es kann sowohl in Form eines animierten Gif-Bildes als auch in Form einer Ladeskala erstellt werden. Das Hauptziel jedes Seiten-Preloaders ist es, den Eindruck Ihrer Website zu verbessern. In diesem Tutorial erfahren Sie, wie Sie den Preloader in WordPress ohne Plugin ändern. Wenn Sie nicht wissen, wie Sie den Seiten-Preloader aktivieren, lesen Sie bitte So deaktivieren Sie den Seiten-Preloader.
Es gibt auch einige Merkmale eines effektiven WordPress-Seiten-Preloaders:
Es sollte möglichst früh inhaltsübergreifend angezeigt werden.
Das Mapping sollte nicht von externen abhängig sein Ressourcen.
Ein guter Preloader „verblasst“, sobald das Laden einer Seite abgeschlossen ist. Sie können jede verfügbare JavaScript-Bibliothek verwenden, um sie auszublenden.
Wenige Klicks, um den Preloader in WordPress zu ändern
Wenn Sie einen Preloader ändern möchten, sollten Sie zuerst den auswählen, der auf Ihrer Site erscheinen soll. Zum einen können Sie den Preloader aus der Codepen-Sammlung auswählen.
Klicken Sie auf einen der Preloader, die Sie für Ihre Website ausgewählt haben. Sie sehen drei verschiedene Codeblöcke, die Sie Ihrer Site hinzufügen müssen, um den ausgewählten Preloader zu verwenden. Einige der Preloader erfordern das Hinzufügen von Codes in HTML- und CSS-Dateien, während andere auch JS-Code haben.
Navigieren wir zu wp-content/themes/theme-name/ inc-Ordner. Suchen Sie hier die Datei template-tags.php. Laden Sie es von Ihrem Server auf die Festplatte herunter und öffnen Sie es im Code-Editor, um einige Änderungen daran vorzunehmen.
Drücken Sie Strg+F-Hotkeys und suchen Sie nach der Standard-Seiten-Preloader-Code. Sie sollten es durch Ihren eigenen Code für den Preloader ersetzen. Es kann wie folgt aussehen die HTML-Code-Schublade auf Codepen. Sie können dieser Funktion Ihren eigenen HTML-Code hinzufügen (vergessen Sie nicht, theme-name durch Ihren tatsächlichen Theme-Namen zu ersetzen, damit es funktioniert.
Nach alles ist fertig Laden Sie die Datei wieder an ihren vorherigen Speicherort auf dem Server hoch.
Jetzt fahren wir mit dem Hinzufügen von CSS-Code fort. Navigieren Sie zu wp-content/themes/theme- name/assets/sass/elements-Verzeichnis und laden Sie die Datei _page-preloader.scss auf Ihre Festplatte herunter.
Sie müssen sie im Code-Editor öffnen.
Im HTML haben wir den Preloader-ID-Namen verwendet, also werden wir ihn als Klasse im CSS-Code verwenden (.div#preloader-Klasse).
Fügen Sie den CSS-Code zur Datei hinzu (wenn es einen anderen Seiten-Preloader gibt, dann ersetzen Sie ihn durch Ihren eigenen Code, der aus dem CSS-Code-Tray kopiert wurde. In unserem Beispiel ist es der folgenden Code.https://gist.github.com/Shininglow/691ffa405c50a7ec3c4548479be36920
Laden Sie die Datei zurück auf den Server, um die alte zu ersetzen.
Wir sind fast fertig, b Aber es gibt noch die JS-Codepassage, die wir hinzufügen müssen. Navigieren Sie dazu zum Ordner wp-content/themes/theme/name/assets/js. Laden Sie hier die Datei theme-script.js herunter und öffnen Sie sie im Code-Editor.
Im document_ready_render: function können Sie die Liste der JS-Funktionen sehen. Bitte fügen Sie den folgenden am Ende der Liste hinzu. this.preloader_figure( this );
Fügen Sie nun die folgenden Codezeilen am Ende der Datei hinzu.https://gist.github.com/Shininglow/f4bbac63289bf89f86a16d710037b5e3
Sie können die JS-Funktion gerne durch Ihre eigene aus dem JS-Code-Tray ersetzen.
Jetzt können Sie gerne Aktualisieren Sie die Seite Ihrer Website im Browser, um Ihren neuen Preloader anzuzeigen! Als Ergebnis sehen Sie Ihren neuen Preloader, während die Webseite noch geladen wird.
Einpacken
Endlich ist es für Sie klarer, wie Sie den Preloader in WordPress ändern. Stellen Sie sicher, dass Sie einen vollständig animierten Vorladebildschirm erhalten. Und Ihren Website-Besuchern wird gefallen, was sie sehen, während sie darauf warten, dass eine Seite geladen wird. Lernen Sie bald weitere nützliche Tutorials kennen!
