Jak dodać animację preloadera do WordPressa (krok po kroku)

Chcesz dodać animację preloadera do twojej witryny WordPress?

Preloader to animacja pokazująca postęp wczytywania strony w tle. Dzięki temu odwiedzający wiedzą, że strona się ładuje, co może poprawić wrażenia użytkownika i zmniejszyć twój współczynnik odrzuceń.

W tym artykule pokażemy, jak krok po kroku dodać preloader do WordPressa.

Czym jest animacja Preloader i dlaczego warto dodać ją do WordPressa?

Preloader to animacja widoczna podczas oczekiwania na wczytywanie strony. Informuje on użytkowników, że strona jest jeszcze przygotowywana i prosi ich o cierpliwe oczekiwanie. Po zakończeniu wczytywania, preloader znika, a użytkownicy mogą normalnie zobaczyć stronę.

Oto przykład animacji preloadera podczas dodawania nowego wpisu i jego podglądu w WordPressie:

Jednym ze scenariuszy, w których warto dodać preloader, jest sytuacja, w której twoja strona zawiera wiele obrazków lub osadzanych filmów. W takim przypadku twoja strona będzie się wczytywać dłużej niż zwykle, a ty chcesz, aby użytkownicy pozostali na niej wystarczająco długo, aby strona pojawiła się w całości.

Jeśli twoja strona nie zawiera wielu ciężkich elementów, lepiej skupić się na poprawie szybkości i wydajności witryny internetowej. Możesz również chcieć przejść na lepszego dostawcę hostingu WordPress.

Mając to na uwadze, przyjrzyjmy się, jak można łatwo dodać preloader do twojej witryny internetowej WordPress. Wystarczy skorzystać z poniższych odnośników, aby przejść bezpośrednio do wybranej metody:

Metoda 1: Dodanie Preloadera w WordPress za pomocą WP Smart Preloader (Prosta metoda)

Najprostszym sposobem na dodanie preloadera w WordPress jest użycie WP Smart Preloader. Ta wtyczka ma sześć wbudowanych animacji preloadera, których możesz użyć, lub możesz tworzyć własne animacje za pomocą dostosuj HTML i CSS.

Pierwszą rzeczą, którą musisz zrobić, jest zainstalowanie i włączanie wtyczki WP Smart Preloader. Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem krok po kroku, jak zainstalować wtyczkę WordPress.

Po włączaniu przejdź do Ustawienia ” WP Smart Preloader, a następnie otwórz menu rozwijane „Smart Preloader”. To pokazuje wszystkie różne animacje, których możesz użyć.

Wtyczka wyświetli podgląd twojej wybranej animacji, dzięki czemu możesz wybrać różne preloadery, aby zobaczyć, który najbardziej ci się podoba.

Domyślnie animacja pojawi się na całej twojej witrynie internetowej WordPress, ale jeśli wolisz, możesz użyć jej tylko na stronie głównej. Wystarczy zaznaczyć pole „Pokaż tylko na stronie głównej”.

Jeśli chcesz stworzyć własną animację CSS, po prostu wpisz swój kod w polu „Custom CSS”.

Inną opcją jest utworzenie własnej animacji HTML5 poprzez dodanie kodu do pola „Animacja własna”.

Po wybraniu animacji przewiń do sekcji „Czas trwania wyświetlania programu ładującego”. Tutaj możesz zmienić czas odtwarzania preloadera.

Opcja domyślna to 1500 milisekund lub 1,5 sekundy. Powinno to działać dobrze dla większości witryn, ale możesz wpisać inny rodzaj liczby, jeśli chcesz.

Domyślnie całkowite wygaszenie animacji trwa 2500 milisekund lub 2,5 sekundy. Aby to zmienić, wystarczy wpisać większą lub mniejszą liczbę w polu „Loader to Fade Out”.

Kiedy będziesz zadowolony z konfiguracji preloadera, kliknij przycisk „Zapisz zmiany”, aby zapisać twoje ustawienia.

Możesz teraz przejść na twój blog WordPress lub witrynę internetową, aby zobaczyć preloader w działaniu.

Metoda 2: Dodanie preloadera w WordPress za pomocą LoftLoader (bardziej konfigurowalny)

Innym sposobem na dodanie animacji preloadera do twojej witryny internetowej WordPress jest użycie LoftLoader. Ta wtyczka zawiera wbudowane animacje i pozwala konfigurować preloader na wiele różnych sposobów.

Pierwszą rzeczą, którą musisz zrobić, jest zainstalowanie i włączanie wtyczki LoftLoader. Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem dla początkujących, jak zainstalować wtyczkę WordPress.

Po włączaniu przejdź do Ustawienia ” LoftLoader Lite, aby skonfigurować ustawienia wtyczki. LoftLoader Lite integruje się z konfiguratorem motywu WordPress, więc ten ekran powinien wyglądać znajomo.

Aby rozpocząć, kliknij „Wyświetl na”. Na tym ekranie możesz wybrać, czy chcesz używać tego samego preloadera na całym twoim blogu WordPress, czy tylko na stronie głównej.

Na przykład, jeśli twoja strona główna zawiera dużo obrazków i filmów w porównaniu do reszty witryny, to sensowne może być wyświetlanie preloadera tylko na twojej własnej stronie głównej.

Po podjęciu twojej decyzji kliknij strzałkę „Wstecz”, aby powrócić do głównej strony ustawień.

Następnie kliknij opcję „Tło”.

Tutaj możesz zmienić kolor t ła, klikając pole „Wybierz kolor”. Możesz także zmienić krycie tła i wybrać nową animację końcową, taką jak „Zanikanie” lub „Przesuwanie w górę i w dół”.

Podczas wprowadzania zmian podgląd będzie aktualizowany, dzięki czemu można wypróbować różne ustawienia, aby zobaczyć, co wygląda najlepiej. Gdy będziesz zadowolony z ustawień tła, kliknij strzałkę „Wstecz”.

Następnie możesz zmienić animację, klikając opcję „Loader”.

Możesz wybrać nową animację, klikając różne miniaturki w polu „Loader Animation”. Aby zmienić kolor preloadera, wystarczy wybrać nowy kolor w polu „Pick Color”.

Gdy to zrobisz, kliknij strzałkę „Wstecz”.

Następnie kliknij opcję menu „Więcej”. Tutaj możesz zmienić czas odtwarzania animacji, wybierając opcję „Maksymalny czas wczytywania”.

Następnie można wpisać rodzaj czasu trwania preloadera.

Następnie możesz chcieć dać użytkownikom sposób na zamknięcie animacji, zwłaszcza jeśli używasz dłuższego maksymalnego czasu wczytywania. Aby dodać przycisk wyjścia, kliknij „Przycisk zamykania”, a następnie użyj ustawień, aby skonfigurować twój przycisk.

Kiedy będziesz zadowolony z konfiguracji przycisku, po prostu kliknij przycisk „Opublikuj”, aby Twój preloader stał się aktywny.

Teraz możesz przejść na swoją witrynę internetową, aby zobaczyć nowy preloader w działaniu.

Najlepsze przewodniki poprawiające wydajność twojej witryny WordPress

Animacja preloadera może sprawiać wrażenie szybszego wczytywania, nawet jeśli rzeczywista prędkość nie uległa zmianie. Nie jest to jednak długofalowe rozwiązanie optymalizujące wydajność twojej witryny internetowej.

Z tego powodu zalecamy stosowanie najlepszych praktyk optymalizacji prędkości. W miarę jak twoja witryna będzie się rozrastać, preloader nie będzie wystarczający, aby zapobiec odbijaniu się użytkowników od witryny.

Zapoznaj się z poniższymi przewodnikami, aby poprawić wydajność twojej witryny internetowej:

• Najlepszy przewodnik, jak przyspieszyć działanie WordPressa
• Najlepsze wtyczki WordPress do pamięci podręcznej, aby przyspieszyć twoją witrynę internetową
• Najszybsi dostawcy hostingu WordPress (z testami wydajności)
• Jak łatwo zoptymalizować obrazki na potrzeby sieci bez utraty jakości?
• Jak zoptymalizować filmy dla twojej witryny internetowej WordPress

Mamy nadzieję, że ten artykuł pomógł ci dowiedzieć się, jak dodać animację preloadera do WordPressa. Możesz również zapoznać się z naszym przewodnikiem na temat tworzenia stron docelowych za pomocą WordPress a lub zobaczyć nasze wybory ekspertów dotyczące najlepszych kreatorów stron WordPress typu „przeciągnij i upuść„.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.