{"id":3727,"date":"2020-03-11T21:03:04","date_gmt":"2020-03-11T21:03:04","guid":{"rendered":"https:\/\/blogging-techies.com\/ge\/so-fugen-sie-wordpress-eine-preloader-animation-hinzu-schritt-fur-schritt\/"},"modified":"2020-03-11T21:03:04","modified_gmt":"2020-03-11T21:03:04","slug":"so-fugen-sie-wordpress-eine-preloader-animation-hinzu-schritt-fur-schritt","status":"publish","type":"post","link":"https:\/\/blogging-techies.com\/ge\/so-fugen-sie-wordpress-eine-preloader-animation-hinzu-schritt-fur-schritt\/","title":{"rendered":"So f\u00fcgen Sie WordPress eine Preloader-Animation hinzu (Schritt f\u00fcr Schritt)"},"content":{"rendered":"

M\u00f6chten Sie Ihrer WordPress-Site einen Preloader hinzuf\u00fcgen? Ein Preloader ist eine Animation, die den Fortschritt eines Seitenladens im Hintergrund anzeigt. <\/p>\n

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. <\/p>\n

In diesem Artikel zeigen wir Ihnen, wie Sie WordPress einfach einen Preloader hinzuf\u00fcgen k\u00f6nnen. <\/p>\n

\"F\u00fcgen<\/p>\n

Was ist ein Preloader und wann sollten Sie ihn verwenden?<\/h4>\n

Ein Preloader ist eine Animation oder Statusmeldung, die den Fortschritt des Ladens der Seite im Hintergrund anzeigt. <\/p>\n

Wenn Sie eine Website besuchen, l\u00e4dt Ihr Browser normalerweise verschiedene Teile des Inhalts herunter. Einige Teile der Website werden schneller geladen (d. H. Text, HTML, CSS), w\u00e4hrend andere langsamer geladen werden (d. H. Bilder und Videos). <\/p>\n

Wenn der gr\u00f6\u00dfte Teil Ihres Inhalts aus Text mit sehr wenigen Bildern und Videos besteht, m\u00fcssen Sie Ihrer Website keinen Preloader hinzuf\u00fcgen. Stattdessen sollten Sie sich darauf konzentrieren, die Geschwindigkeit und Leistung der Website zu verbessern, um das Laden von Seiten zu beschleunigen. <\/p>\n

Wenn der gr\u00f6\u00dfte Teil Ihres Inhalts aus Bildern, Fotos und Video-Einbettungen besteht, sollten Ihre Benutzer etwas warten, bis sie den gesamten Inhalt sehen k\u00f6nnen. <\/p>\n

W\u00e4hrend dieser teilweisen Downloads erscheint Ihre Website m\u00f6glicherweise langsam. Manchmal denken Benutzer sogar, dass es kaputt ist. Das Hinzuf\u00fcgen eines Preloaders f\u00fcllt diese L\u00fccke und zeigt dem Benutzer eine Fortschrittsanzeige beim Laden der Seite. <\/p>\n

Sie k\u00f6nnen ein Live-Beispiel eines Preloaders sehen, indem Sie auf die Schaltfl\u00e4che Vorschau klicken, w\u00e4hrend Sie einen Blog-Beitrag in WordPress schreiben. <\/p>\n

WordPress \u00f6ffnet eine Live-Vorschau Ihres Blog-Beitrags in einem neuen Fenster und zeigt einen Preloader an, bevor die Live-Vorschau tats\u00e4chlich angezeigt wird. <\/p>\n

\"WordPress<\/p>\n

Schauen wir uns an, wie Sie Ihrer WordPress-Website ganz einfach einen Preloader hinzuf\u00fcgen k\u00f6nnen. <\/p>\n

Methode 1. F\u00fcgen Sie mit WP Smart Preloader einen WordPress-Preloader hinzu<\/h4>\n

Diese Methode wird empfohlen, da sie einfacher zu implementieren ist und keine \u00c4nderungen an Ihrem WordPress-Theme erfordert. <\/p>\n

Als erstes sollten Sie das WP Smart Preloader-Plugin installieren und aktivieren. Weitere Informationen finden Sie in unserer Schritt-f\u00fcr-Schritt-Anleitung zum Installieren eines WordPress-Plugins.<\/p>\n

Nach der Aktivierung m\u00fcssen Sie besuchen Einstellungen \u00bbWP Smart Preloader<\/strong> Seite zum Konfigurieren der Plugin-Einstellungen. <\/p>\n

\"WP<\/p>\n

Zun\u00e4chst m\u00fcssen Sie einen Preloader-Stil oder eine Seitenladeanimation ausw\u00e4hlen. Das Plugin enth\u00e4lt sechs integrierte Animationen zur Auswahl. Sie k\u00f6nnen auch Ihr eigenes benutzerdefiniertes HTML und CSS hochladen, um einen benutzerdefinierten Preloader zu erstellen. <\/p>\n

Danach k\u00f6nnen Sie den Preloader nur auf der Startseite anzeigen lassen, indem Sie die Option "Nur auf der Startseite anzeigen" aktivieren. <\/p>\n

Dann m\u00fcssen Sie nach unten zum Abschnitt "Dauer des Show Loader" scrollen. Sie m\u00fcssen die Dauer des Preloaders angeben. Die Standardoption ist 1500 Millisekunden (1,5 Sekunden), was f\u00fcr die meisten Websites funktionieren sollte. Sie k\u00f6nnen sie jedoch \u00e4ndern, wenn Sie m\u00f6chten. <\/p>\n

\"Stellen<\/p>\n

Sie k\u00f6nnen auch die Zeit konfigurieren, die das Ladeger\u00e4t ben\u00f6tigt, um vollst\u00e4ndig zu verschwinden. Die Standardoption ist 2500 Sekunden oder 2,5 Sekunden. <\/p>\n

Vergessen Sie nicht, auf die Schaltfl\u00e4che "\u00c4nderungen speichern" zu klicken, um Ihre Einstellungen zu speichern. <\/p>\n

Sie k\u00f6nnen jetzt ihre Website besuchen, um den Preloader in Aktion zu sehen. <\/p>\n

\"WP<\/p>\n

Methode 2. F\u00fcgen Sie mit dem Preloader-Plugin einen Preloader in WordPress hinzu<\/h4>\n

Diese Methode ist flexibel, erfordert jedoch zus\u00e4tzliche Schritte, um sie ordnungsgem\u00e4\u00df auf Ihrer WordPress-Site zu implementieren. <\/p>\n

Als erstes sollten Sie das Preloader-Plugin installieren und aktivieren. Weitere Informationen finden Sie in unserer Schritt-f\u00fcr-Schritt-Anleitung zum Installieren eines WordPress-Plugins.<\/p>\n

Nach der Aktivierung m\u00fcssen Sie die besuchen Plugins \u00bbPreloader<\/strong> Seite zum Konfigurieren der Plugin-Einstellungen. <\/p>\n

\"Preloader-Konfigurationen\"<\/p>\n

Zun\u00e4chst m\u00fcssen Sie den Hexadezimalcode f\u00fcr die Hintergrundfarbe eingeben, die Sie f\u00fcr den Ladebildschirm verwenden m\u00f6chten. Die Standardoption ist #FFFFFF (wei\u00df). Sie k\u00f6nnen ein Online-Farbauswahlwerkzeug verwenden, um den HEX-Code f\u00fcr die Farbe zu finden, die Sie verwenden m\u00f6chten. <\/p>\n

Als N\u00e4chstes m\u00fcssen Sie die URL des Preloader-Images angeben, das Sie verwenden m\u00f6chten. Das Plugin enth\u00e4lt ein Standardanimationsbild. <\/p>\n

Wenn Sie eine andere Animation verwenden m\u00f6chten, finden Sie einen Link zum Herunterladen eines animierten Preloader-Bildes von einer Website eines Drittanbieters. Anschlie\u00dfend k\u00f6nnen Sie das Bild in Ihren wp-content-Ordner hochladen und die URL hier einf\u00fcgen. <\/p>\n

Als n\u00e4chstes m\u00fcssen Sie ausw\u00e4hlen, wo Sie den Preloader anzeigen m\u00f6chten. <\/p>\n

\"W\u00e4hlen<\/p>\n

Sie k\u00f6nnen es auf jeder Seite Ihrer Website anzeigen oder einen bestimmten Abschnitt ausw\u00e4hlen. <\/p>\n

Schlie\u00dflich sehen Sie die Anweisungen zum Hinzuf\u00fcgen des folgenden Codes zur Datei header.php Ihres WordPress-Themas. <\/p>\n

<\/pre>\n
Stellen Sie vor dem Verlassen der Seite sicher, dass Sie auf die Schaltfl\u00e4che "\u00c4nderungen speichern" klicken, um Ihre Einstellungen zu speichern. <\/p>\n
Wir empfehlen, Ihrem WordPress-Theme keinen Code hinzuzuf\u00fcgen, da dieser beim Aktualisieren des Themas gel\u00f6scht wird. <\/p>\n
Wenn Sie ein untergeordnetes Thema verwenden, k\u00f6nnen Sie den Code zur Datei header.php Ihres untergeordneten Themas hinzuf\u00fcgen. <\/p>\n
Eine noch bessere L\u00f6sung w\u00e4re, diesen Code mithilfe eines separaten Code-Snippet-Plugins oder eines ortsspezifischen Plugins hinzuzuf\u00fcgen. <\/p>\n
Hier ist der Code, den Sie hinzuf\u00fcgen sollten:<\/p>\n
\r\nfunction wpb_add_preloader() {\r\necho '';\r\n}\r\nadd_action( 'wp_body_open', 'wpb_add_preloader' );\r\n<\/pre>\n
Hinweis:<\/strong> Diese Methode zum Hinzuf\u00fcgen von Code funktioniert nur bei WordPress-Designs, die die in WordPress 5.2 hinzugef\u00fcgte Funktion wp_body_open () unterst\u00fctzen.<\/p>\n
Diese Methode zum Hinzuf\u00fcgen des Codes stellt sicher, dass Ihr Code auch dann dort bleibt, wenn Sie das Thema aktualisieren.<\/p>\n
Sobald Sie den Code hinzugef\u00fcgt haben, k\u00f6nnen Sie deren Website besuchen, um den Preloader in Aktion zu sehen. <\/p>\n
\"Preloader-Vorschau\"<\/p>\n
Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie Ihrer WordPress-Site auf einfache Weise einen Preloader hinzuf\u00fcgen k\u00f6nnen. Weitere interessante Ideen finden Sie in unserer Liste der n\u00fctzlichsten WordPress-Tipps, Tricks und Hacks. <\/p>\n
Wenn dir dieser Artikel gefallen hat, abonniere unseren YouTube-Kanal, um WordPress-Tutorial-Videos anzusehen. Sie finden uns auch unter Twitter und Facebook.<\/p>\n   ","protected":false},"excerpt":{"rendered":"
M\u00f6chten Sie Ihrer WordPress-Site einen Preloader hinzuf\u00fcgen? 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 […]<\/p>\n","protected":false},"author":1,"featured_media":3728,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","fifu_image_url":"","fifu_image_alt":""},"categories":[9],"tags":[],"_links":{"self":[{"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/posts\/3727"}],"collection":[{"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/comments?post=3727"}],"version-history":[{"count":0,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/posts\/3727\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/media\/3728"}],"wp:attachment":[{"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/media?parent=3727"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/categories?post=3727"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogging-techies.com\/ge\/wp-json\/wp\/v2\/tags?post=3727"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}