Jak dodać animację ładowania strony (Preloader) w WordPress

Szybkość strony odgrywa kluczową rolę w wydajności Twojej witryny. Jeśli pełne załadowanie strony zajmuje więcej niż sekundę lub dwie, może to sfrustrować użytkowników na tyle, że opuszczą Twoją witrynę. Może jednak pomóc, jeśli odwiedzający ma coś interesującego do obejrzenia, gdy strona kończy się ładować.

Animacja ładowania strony lub „animacja wstępnego ładowania” pomaga informować użytkowników, że strona się ładuje (nie jest zablokowana), i zwiększa prawdopodobieństwo, że pozostaną w witrynie. W ten sposób może poprawić User Experience (UX) i zmniejszyć współczynniki odrzuceń.

W tym poście wyjaśnimy zalety animacji preloadera i wyjaśnimy, kiedy z nich korzystać. Następnie przeprowadzimy Cię przez opcje dodawania animacji ładowania strony WordPress. Zacznijmy!

Co to jest animacja modułu wstępnego ładowania?

Animacja wstępnego ładowania sygnalizuje użytkownikom, że strona jest aktywnie ładowana. Jest to prosta animacja, której można użyć jako wskaźnika postępu dla stron, które ładują tylko określone fragmenty treści na raz.

Preloadery WordPress dają odwiedzającym coś przyjemniejszego i ciekawszego do obejrzenia w ciągu kilku sekund, podczas gdy czekają na zakończenie ładowania całej strony. W niektórych przypadkach mogą nawet oszacować, ile czasu pozostało.

Kiedy powinienem używać modułu wstępnego ładowania?

Moduł wstępnego ładowania to mądry wybór, gdy masz witrynę WordPress z dużą ilością wideo lub obrazów, której ładowanie trwa nieco dłużej niż zwykle. W ten sposób odwiedzający będą mieli pewność, że witryna działa zgodnie z przeznaczeniem i nie jest uszkodzona.

Jeśli jednak witryna jest w większości tekstowa, animacja modułu wstępnego ładowania może nie być konieczna. Zamiast tego bardziej sensowne byłoby skupienie się na poprawie szybkości strony.

2 opcje dodawania animacji ładowania strony do WordPress

Istnieją dwie główne metody, których możesz użyć, aby dodać animację modułu wstępnego ładowania WordPress do swojej witryny. Możesz użyć wtyczki, która jest łatwiejszą opcją, lub wykonać zadanie ręcznie. Przyjrzyjmy się, jak zacząć korzystać z obu metod.

Opcja 1: Dodaj animację modułu wstępnego ładowania za pomocą wtyczki

Dodanie animacji wstępnego ładowania za pomocą wtyczki jest szybszą i łatwiejszą opcją dla większości użytkowników. Istnieje kilka wtyczek, których możesz użyć, ale zalecamy WP Smart Preloader:

Jest to darmowa, wysoce konfigurowalna wtyczka. Wykorzystuje CSS i minimalne znaczniki HTML, aby zmniejszyć ryzyko opuszczenia witryny przez użytkowników podczas ładowania treści. W kolejnych krokach pokażemy, jak to działa.

Krok 1: Pobierz WP Smart Preloader

Wtyczkę WP Smart Preloader można pobrać z katalogu wtyczek WordPress. Następnie możesz przesłać plik .zip do swojej witryny WordPress, przechodząc do Wtyczki > Dodaj nowy > Prześlij wtyczkę na pulpicie administratora:

Inną opcją jest wyszukanie wtyczki za pomocą paska wyszukiwania na ekranie Wtyczka > Dodaj nową :

Tak czy inaczej, po zainstalowaniu wtyczki kliknij przycisk Aktywuj . Następnie możesz zlokalizować jego opcje w obszarze Ustawienia > WP Smart Preloader .

Krok 2: Wybierz swój styl

Na stronie ustawień WP Smart Preloader pierwszą rzeczą do zrobienia jest wybranie stylu dla modułu wstępnego ładowania. W sekcji Select Preloader pojawi się rozwijane menu umożliwiające wybór spośród sześciu opcji stylów, a także opcji niestandardowej animacji:

Po wybraniu stylu możesz wyświetlić jego podgląd w oknie poniżej. Jeśli chcesz dodać własną niestandardową animację, możesz dołączyć swój kod HTML w sekcji Animacja niestandardowa :

Na końcu tego ekranu możesz ustawić czas trwania samego programu ładującego i efekt „zanikania”:

Jeśli pozostawisz te pola puste, wartości domyślne zostaną ustawione odpowiednio na 1500 milisekund (1,5 sekundy) i 2500 milisekund (2,5 sekundy). Kiedy skończysz, kliknij przycisk Zapisz zmiany .

Krok 3: Wyświetl podgląd animacji modułu wstępnego ładowania

Po zakończeniu konfigurowania ustawień odwiedź witrynę WordPress w nowej karcie przeglądarki, aby wyświetlić podgląd animacji modułu wstępnego ładowania. W razie potrzeby możesz wrócić, aby wprowadzić zmiany stylistyczne. Gdy będziesz zadowolony z modułu wstępnego ładowania, zostanie on skonfigurowany i gotowy do pracy.

Opcja 2: Ręcznie dodaj animację modułu wstępnego ładowania

Jeśli nie chcesz korzystać z wtyczki, nadal możesz ręcznie dodać tę funkcję do swojej witryny. Główną zaletą tworzenia niestandardowego modułu wstępnego ładowania jest większa elastyczność w zakresie jego projektowania.

Oczywiście jest to również trudniejszy proces. Następnie przeprowadzimy Cię przez proces tworzenia, przesyłania i formatowania niestandardowej animacji modułu wstępnego ładowania dla Twojej witryny WordPress.

Krok 1: Przeprowadź burzę mózgów nad swoją animacją

Pierwszym krokiem jest podjęcie decyzji, jakiego rodzaju animacji zamierzasz użyć. Możesz poszukać innych narzędzi do animacji modułu wstępnego ładowania, aby zorientować się, jaki styl Ci się podoba. Istnieje kilka darmowych animacji, których możesz użyć i eksplorować w Codepen, co może być świetnym sposobem na zdobycie pomysłów.

Krok 2: Opracuj lub pobierz swoją animację

Aby opracować animację, możesz użyć narzędzia, takiego jak Photoshop, do utworzenia pliku GIF lub obracającej się animacji modułu wstępnego ładowania. Możesz również zapoznać się z naszym zasobem dotyczącym tworzenia animacji WordPress za pomocą CSS.

Zalecamy to drugie podejście, ponieważ dodanie modułu wstępnego ładowania GIF do witryny WordPress najlepiej wykonać za pomocą wtyczki. Oprócz Codepen (wspomnianego powyżej) możesz także pobrać animację z witryn takich jak Spinkit i LoadLab.

W tym samouczku użyjemy animacji wstępnego ładowania z Spinkit. Niezależnie od tego, skąd bierzesz animację, będziesz potrzebować jej kodu źródłowego CSS, aby ręcznie dodać ją do swojej witryny WordPress:

Większość bezpłatnych animacji modułu wstępnego ładowania będzie zawierała łącze źródłowe, w którym można znaleźć zarówno kod HTML, jak i CSS:

Pamiętaj, że możesz także użyć kodu źródłowego CSS z animacji preloadera, a później dostosować go do własnych upodobań.

Krok 3: Utwórz motyw potomny

Po utworzeniu animacji możesz dodać ją do swojej witryny WordPress. Najbezpieczniejszym sposobem na to jest skonfigurowanie motywu potomnego. Jeśli nie masz pewności, jak to zrobić, możesz przejrzeć nasz samouczek dotyczący tworzenia motywu potomnego WordPress.

Krok 4: Dodaj kod HTML do pliku header.php swojego motywu

Następnym krokiem jest zlokalizowanie pliku header.php dla motywu WordPress. Możesz to zrobić za pomocą ekranu edytora motywów WordPress:

Możesz także edytować pliki za pomocą klienta FTP, takiego jak FileZilla. Plik będzie znajdować się w folderze wp-content > themes w katalogu głównym Twojej witryny.

Po zlokalizowaniu i otwarciu pliku wstaw następujący kod HTML pod tagiem body:

 <!--CSS Spinner--> <div class="spinner-wrapper"> <div class="spinner"></div> </div>

Dostosuj lub dodaj dowolny kod HTML, który jest niezbędny dla konkretnej animacji preloadera WordPress, i zapisz plik.

Krok 5: Dodaj kod CSS do swojego arkusza stylów

Teraz nadszedł czas, aby dodać styl CSS do animacji. Znajdź arkusz stylów CSS ( style.css ) dla swojego motywu WordPress, a następnie skopiuj i wklej kod źródłowy CSS swojej animacji. W naszym przypadku dodamy:

 .spinner { margin: 100px auto; width: 50px; height: 40px; text-align: center; font-size: 10px; } .spinner > div { background-color: #333; height: 100%; width: 6px; display: inline-block; -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out; animation: sk-stretchdelay 1.2s infinite ease-in-out; } .spinner .rect2 { -webkit-animation-delay: -1.1s; animation-delay: -1.1s; } .spinner .rect3 { -webkit-animation-delay: -1.0s; animation-delay: -1.0s; } .spinner .rect4 { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; } .spinner .rect5 { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; } @-webkit-keyframes sk-stretchdelay { 0%, 40%, 100% { -webkit-transform: scaleY(0.4) } 20% { -webkit-transform: scaleY(1.0) } } @keyframes sk-stretchdelay { 0%, 40%, 100% { transform: scaleY(0.4); -webkit-transform: scaleY(0.4); } 20% { transform: scaleY(1.0); -webkit-transform: scaleY(1.0); } }

Zanim zapiszesz zmiany, usuń tę część: „margines: 100px auto;”. W jego miejsce skopiuj i wklej następujące elementy:

 position: absolute; top: 48%; left: 48%;

Następnie możesz zapisać plik.

Krok 6: Dodaj kod jQuey, aby animacja działała

Aby animacja modułu wstępnego ładowania pokrętła działała, musisz dodać trochę jQuery. Aby to zrobić, możesz wrócić do pliku header.php i wstawić następujący tekst przed zamykającym znacznikiem treści:

 <script> $(document).ready(function() { //Preloader preloaderFadeOutTime = 500; function hidePreloader() { var preloader = $('.spinner-wrapper'); preloader.fadeOut(preloaderFadeOutTime); } hidePreloader(); }); </script>

Następnie zapisz plik i wyświetl podgląd witryny, aby upewnić się, że animacja modułu wstępnego ładowania WordPress działa zgodnie z przeznaczeniem.

Znajdź więcej wskazówek i przewodników z WP Engine

Dodanie animacji modułu wstępnego ładowania WordPress do witryny może pomóc w zaangażowaniu odwiedzających i zmniejszeniu współczynnika odrzuceń. Ponadto masz wiele opcji szybkiego wykonania zadania.

W WP Engine naszą misją jest dostarczanie wskazówek, wskazówek i zasobów dla programistów, aby pomóc Ci zapewnić, że Twoja witryna zawsze wygląda najlepiej. Dowiedz się więcej o naszych planach już dziś!