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

Czy kiedykolwiek zauważyłeś ten obracający się ikonę lub animację, która pojawia się podczas ładowania strony internetowej? To jest animacja preloadera i jest to przydatne narzędzie, którego możesz używać w swoich projektach WordPress.

Preloadery służą realnemu celowi. Na stronach z dużą ilością treści utrzymują zaangażowanie odwiedzających podczas tych kluczowych sekund ładowania, co może zmniejszyć współczynnik odrzuceń.

A dla stron biznesowych, markowy preloader może nawet dodać profesjonalnego charakteru.

Jeśli myślisz, że to brzmi skomplikowanie, nie martw się. Przygotowaliśmy 2 metody dodawania animacji preloadera WordPress, odpowiednie dla użytkowników na wszystkich poziomach umiejętności.

Dlaczego warto dodać animację preloadera w WordPressie?

Preloader to animacja, którą widzisz podczas oczekiwania na załadowanie strony. Sygnalizuje użytkownikom, że strona działa i prosi ich o cierpliwość.

Gdy treść będzie gotowa, preloader zniknie, a odwiedzający będzie mógł normalnie przeglądać witrynę. Oto przykład tego elementu projektowego WordPress:

Możesz chcieć dodać animację ładowania, jeśli Twoja strona zawiera duże obrazy lub osadzone filmy. Ponieważ ich ładowanie trwa dłużej, preloader utrzymuje zaangażowanie użytkowników, aby nie opuścili strony przedwcześnie.

Jednak nie należy używać preloaderów tylko po to, aby ukryć słabą wydajność.

Mając to na uwadze, przyjrzyjmy się, jak możesz łatwo dodać animację ładowania strony do swojej witryny WordPress. Po prostu skorzystaj z poniższych szybkich linków, aby przejść bezpośrednio do metody, której chcesz użyć:

Jak dodać prostą animację ładowania za pomocą WP Smart Preloader

Jednym z łatwych sposobów dodania animacji ładowania w WordPress jest użycie WP Smart Preloader.

Ta wtyczka jest świetnym wyborem, jeśli chcesz szybkiego i łatwego rozwiązania bez zagłębiania się w zbyt wiele ustawień.

Dzieje się tak, ponieważ ma 6 wbudowanych animacji preloaderów WordPress, których możesz użyć, i nie musisz konfigurować wielu ustawień, aby włączyć animację.

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

Po aktywacji przejdź do Ustawienia » WP Smart Preloader, a następnie otwórz rozwijane menu „Smart Preloader”. Tutaj zobaczysz wszystkie dostępne animacje.

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

Domyślnie animacja będzie wyświetlana na Twojej witrynie WordPress, ale jeśli wolisz, możesz użyć jej tylko na stronie głównej. Wystarczy zaznaczyć pole „Pokazuj tylko na stronie głównej”.

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

Inną opcją jest stworzenie niestandardowej animacji HTML5 poprzez dodanie kodu do pola „Niestandardowa animacja”.

Po wybraniu animacji przewiń do sekcji "Czas wyświetlania ładowarki". Tutaj możesz zmienić czas odtwarzania preloadera. 

Domyślna opcja to 1500 milisekund, czyli 1,5 sekundy. Powinno to działać dobrze dla większości witryn, ale możesz wpisać inną liczbę, jeśli chcesz.

Domyślnie animacja będzie potrzebować 2500 milisekund, czyli 2,5 sekundy, aby całkowicie zniknąć. Aby to zmienić, po prostu wpisz większą lub mniejszą liczbę w polu „Loader to Fade Out”.

Gdy będziesz zadowolony z konfiguracji preloadera, po prostu kliknij przycisk „Zapisz zmiany”, aby zachować swoje ustawienia.

Możesz teraz odwiedzić swojego bloga WordPress lub witrynę, aby zobaczyć preloader w akcji.

Jak dodać konfigurowalną animację ładowania za pomocą Safelayout Cute Preloader

Pierwsza wtyczka ułatwia dodanie animacji ładowania w WordPress. Jednak jeśli chcesz mieć większą kontrolę nad projektem, aby dopasować go do swojej marki, możesz sprawdzić Safelayout Cute Preloader.

Aby rozpocząć, zainstaluj i aktywuj wtyczkę w obszarze administracyjnym WordPress. Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem, jak zainstalować wtyczkę WordPress.

Po aktywacji wtyczki przejdź do Ustawienia » Safelayout Preloader, aby rozpocząć jej konfigurację.

Krok 1: Włącz preloader i wybierz ustawienie wstępne

Najpierw musisz włączyć preloader i zdecydować, gdzie będzie się pojawiał na Twojej stronie.

Możesz zacząć od zakładki "Ustawienia predefiniowane", aby wybrać gotowy projekt. Jeśli ci się spodoba, po prostu kliknij przycisk "Zmień ustawienia na ten preloader" poniżej szablonu.

Następnie przełącz się na zakładkę „Ustawienia wyświetlania”.

Tutaj musisz zaznaczyć pole „Włącz uroczy preloader Safelayout”, aby upewnić się, że wtyczka działa.

Następnie użyj listy rozwijanej „Wyświetl na”, aby wybrać, gdzie chcesz pokazać preloader. W tym samouczku wybierzemy „Cała witryna”.

Na tym ekranie możesz również ustawić czas trwania animacji.

• Minimalny czas ładowania: Ustawia najkrótszy czas, przez który preloader będzie widoczny. Jest to przydatne, jeśli chcesz mieć pewność, że Twoja markowa animacja będzie zawsze widoczna przez co najmniej chwilę, nawet jeśli Twoja strona ładuje się natychmiast.
• Maksymalny czas ładowania: Określa najdłuższy czas, przez który preloader będzie widoczny. Działa to jako siatka bezpieczeństwa, automatycznie ukrywając preloader, aby użytkownicy nie utknęli, oglądając go, jeśli Twoja strona napotka błąd ładowania.

Możesz również wybrać wyświetlenie przycisku „Zamknij” po upływie kilku sekund. Po wprowadzeniu zmian kliknij „Zapisz zmiany”.

Krok 2: Dostosuj animację rdzenia

Teraz możesz zaprojektować wygląd samej animacji. Obejmuje to tło, główną ikonę i opcjonalny pasek postępu.

Najpierw przejdź do zakładki „Tło”.

Tutaj możesz wybrać efekt animacji, zmienić kolor tła i dostosować jego przezroczystość.

Jeśli nie chcesz specjalnego efektu tła, po prostu wybierz „Brak tła”.

Następnie kliknij zakładkę „Pasek postępu”.

Pasek postępu to świetny sposób, aby pokazać odwiedzającym, że strona się ładuje.

Możesz wybrać kształt, a następnie dostosować jego kolor, pozycję i rozmiar.

Jeśli nie chcesz żadnego, po prostu wybierz „Brak paska postępu”.

Po tym przejdź do zakładki „Ikona”.

To jest główna animowana grafika, jak obracające się koło.

Możesz wybrać ikonę, a następnie zmienić jej rozmiar, kolor i styl animacji. Jeśli uważasz, że ikona jest zbyt wiele w stosunku do innych ustawień, możesz wybrać opcję „Brak ikony”.

Pamiętaj, aby kliknąć przycisk „Zapisz zmiany” po zakończeniu dostosowywania każdej zakładki.

Krok 3: Dodaj swoje logo i tekst

Na koniec możesz dodać swoje logo i niestandardowy tekst, aby preloader idealnie pasował do Twojej marki.

Przejdź do zakładki „Obraz marki” i zaznacz pole „Pokaż markę”, aby dodać swoje logo.

Następnie kliknij przycisk „Biblioteka mediów”, aby przesłać obraz swojego logo.

Możesz wtedy dostosować pozycję i marginesy logo, aby ładnie pasowało do innych elementów.

Następnie przyjrzyjmy się zakładce „Licznik”.

To ustawienie pokazuje procent od 0% do 100%, aby wskazać postęp ładowania. Możesz je włączyć i dostosować jego pozycję, kolor i rozmiar czcionki.

Na koniec przejdź do zakładki „Tekst”. Domyślnie preloader wyświetla tekst „Ładowanie…”, ale możesz zmienić go na coś bardziej kreatywnego.

Wystarczy zaznaczyć pole „Pokaż tekst”, napisać własną wiadomość i dostosować jej czcionkę, kolor i pozycję.

Po zakończeniu kliknij przycisk „Zapisz zmiany”.

I to wszystko! Animacja preloadera powinna teraz pojawić się zgodnie z Twoimi konfiguracjami. Możesz wyświetlić swoją stronę na telefonie komórkowym, komputerze stacjonarnym lub tablecie, aby zobaczyć ją w akcji.

Oto jak wygląda nasz:

Najczęściej zadawane pytania dotyczące preloaderów WordPress

Na przestrzeni lat wielu czytelników pytało nas o korzystanie z preloaderów. Oto odpowiedzi na niektóre z najczęściej zadawanych pytań.

Czy preloadery wpływają na szybkość strony internetowej?

Nie, preloader nie sprawia, że Twoja witryna ładuje się szybciej. Jest to czysto wizualne narzędzie, które zapewnia rozrywkę odwiedzającym podczas pobierania treści przez przeglądarkę.

Aby faktycznie poprawić szybkość witryny, powinieneś skupić się na buforowaniu, optymalizacji obrazów i korzystaniu z szybkiego dostawcy hostingu.

Czy preloadery są złe dla SEO?

Jeśli są poprawnie zaimplementowane, są w porządku. Musisz jednak uważać na Core Web Vitals Google, w szczególności Largest Contentful Paint (LCP).

Jeśli Twój preloader pozostaje na ekranie zbyt długo, Google może pomyśleć, że główna treść jeszcze się nie załadowała. Może to zaszkodzić Twojej pozycji w rankingu. Zalecamy, aby czas trwania animacji był krótszy niż 1,5 do 2 sekund.

Mój preloader ciągle się kręci. Jak to naprawić?

Jeśli Twój preloader się zawiesza, często jest to spowodowane konfliktem wtyczek buforujących. Wtyczki takie jak WP Rocket często mają funkcję „Opóźnij wykonanie JavaScript”.

Ta funkcja zatrzymuje działanie kodu preloadera, przez co nigdy nie otrzymuje on sygnału o zakończeniu ładowania strony. Aby to naprawić, musisz wykluczyć pliki wtyczki preloadera z ustawień opóźnienia JavaScript w swojej wtyczce cachującej.

Czy mogę używać preloader tylko na określonych stronach?

Tak, absolutnie. Większość wtyczek preloader pozwala wybrać, gdzie animacja ma się pojawić.

Możesz włączyć go w całej witrynie, tylko na stronie głównej, a nawet na konkretnych postach i stronach, gdzie spodziewasz się dłuższych czasów ładowania.

Jaka jest różnica między preloaderem a stroną powitalną?

Preloader działa podczas ładowania Twojej treści i znika automatycznie.

Strona powitalna to oddzielny ekran wprowadzający, który wymaga od użytkownika kliknięcia linku lub przycisku, aby wejść na główną stronę internetową.

Zazwyczaj odradzamy korzystanie ze stron powitalnych, ponieważ stanowią one dodatkowy krok dla odwiedzających i mogą negatywnie wpłynąć na współczynnik odrzuceń oraz SEO.

Więcej sztuczek WordPress, aby zaangażować odwiedzających Twoją witrynę

Dodanie animacji preloadera to tylko jeden z wielu sposobów na ulepszenie Twojej witryny WordPress. Jeśli szukasz bardziej kreatywnych pomysłów, aby przyciągnąć odbiorców, mamy dla Ciebie coś specjalnego:

• Jak dodać efekt paralaksy do dowolnego motywu WordPress – Stwórz głębię i zainteresowanie wizualne dzięki tej technice iluzji przewijania.
• Jak łatwo dodać spadające płatki śniegu do swojego bloga WordPress – Zachwyć swoich odwiedzających odrobiną zimowej magii na swojej stronie.
• Jak łatwo dodać tryb ciemny do swojej witryny WordPress – Oferuj wygodniejsze przeglądanie dzięki tej popularnej funkcji.
• Sposoby na wprowadzenie efektów Halloween na Twoją stronę WordPress – Upiornie udekoruj swoją stronę tymi zabawnymi i świątecznymi sztuczkami na Halloween.
• Jak dodać animowane tło w WordPress – Zrób mocne wrażenie dzięki przyciągającym wzrok wzorom ruchomych teł.
• Jak dodać wideo YouTube jako pełnoekranowe tło w WordPress – Stwórz potężne pierwsze wrażenie dzięki dynamicznym tłom wideo.
• Jak dodać nieskończone przewijanie do swojej strony WordPress (przewodnik krok po kroku) – Utrzymaj zaangażowanie odwiedzających, płynnie ładując więcej treści podczas przewijania.

Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak łatwo dodać animację preloadera do swojej strony WordPress. Możesz również zapoznać się z naszymi najlepszymi wyborami ekspertów dotyczącymi najlepszych kreatorów stron typu „przeciągnij i upuść” w WordPress oraz naszym kompletnym przewodnikiem na temat edycji strony WordPress.

Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube po samouczki wideo WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.