W artykule:
Czy chcesz dodać preloader do swojej witryny WordPress? Preloader to animacja wskazująca postęp ładowania strony w tle.
Preloadery zapewniają użytkownikom, że strona pracuje nad ładowaniem strony. Może to pomóc poprawić wrażenia użytkownika i zmniejszyć ogólny współczynnik odrzuceń.
W tym artykule pokażemy, jak łatwo dodać preloader do WordPress.
Co to jest Preloader i kiedy należy go używać?
Preloader to animacja lub komunikat o stanie informujący o postępie wczytywania strony w tle.
Zwykle podczas odwiedzania witryny Przeglądarka rozpoczyna pobieranie różnych części zawartości. Niektóre części strony ładują się szybciej (tj. tekst, kod HTML, CSS), podczas gdy inne ładują się znacznie wolniej (tj. obrazy i filmy).
Jeśli większość treści to tekst z bardzo małą ilością zdjęć i filmów, nie musisz dodawać preloadera do swojej witryny. Zamiast tego powinieneś skupić się na poprawie szybkości i wydajności witryny w celu szybszego ładowania strony.
Z drugiej strony, jeśli większość treści to obrazy, Zdjęcia i osadzenia wideo, użytkownicy muszą poczekać chwilę, zanim będą mogli zobaczyć całą zawartość.
Podczas tych częściowych pobrań Twoja witryna może czuć się wolna. Czasami użytkownicy mogą nawet myśleć, że jest uszkodzony. Dodanie preloadera, wypełnia tę lukę i pokazuje użytkownikowi wskaźnik postępu podczas ładowania strony.
Możesz zobaczyć na żywo przykład preloadera, klikając przycisk Podgląd podczas pisania posta na blogu w WordPress.
WordPress otworzy podgląd na żywo Twojego posta na blogu w nowym oknie i wyświetli preloader, zanim faktycznie pokaże podgląd na żywo.
Mając to na uwadze, przyjrzyjmy się, jak łatwo dodać preloader do swojej witryny WordPress.
Metoda 1. Dodawanie Preloadera w WordPress za pomocą WP Smart Preloader
Ta metoda jest zalecana, ponieważ jest łatwiejsza do wdrożenia i nie wymaga żadnych zmian w Twoim motywie WordPress.
Pierwszą rzeczą, którą musisz zrobić, to zainstalować i aktywować wtyczkę WP Smart Preloader. Aby uzyskać więcej informacji, zobacz nasz przewodnik krok po kroku, jak zainstalować wtyczkę WordPress.
Po aktywacji musisz odwiedzić Ustawienia ” WP Smart Preloader strona do konfiguracji ustawień wtyczki.
Najpierw musisz wybrać styl preloadera lub animację ładowania strony. Wtyczka zawiera sześć wbudowanych animacji do wyboru. Możesz również przesłać własny niestandardowy HTML i CSS, aby utworzyć niestandardowy preloader.
Następnie możesz sprawić, że preloader pojawi się tylko na stronie głównej, zaznaczając opcję „Pokaż tylko na stronie głównej”.
Następnie musisz przewinąć w dół do sekcji „czas trwania, aby pokazać program ładujący”. Musisz określić czas trwania preloadera. Domyślną opcją jest 1500 milisekund (1,5 sekundy), która powinna działać dla większości witryn, ale możesz to zmienić, jeśli chcesz.
Można również ustawić czas potrzebny ładowaczowi do całkowitego zaniku. Domyślną opcją jest 2500 sekund lub 2,5 sekundy.
Na koniec nie zapomnij kliknąć przycisku „Zapisz zmiany”, aby zapisać swoje ustawienia.
Możesz teraz odwiedzić swoją stronę, aby zobaczyć preloader w akcji.
Metoda 2. Dodawanie Preloadera w WordPress za pomocą wtyczki Preloader
Ta metoda jest elastyczna, ale wymaga dodatkowych kroków, aby prawidłowo wdrożyć ją w witrynie WordPress.
Pierwszą rzeczą, którą musisz zrobić, to zainstalować i aktywować wtyczkę Preloader. Aby uzyskać więcej informacji, zobacz nasz przewodnik krok po kroku, jak zainstalować wtyczkę WordPress.
Po aktywacji musisz odwiedzić Wtyczki ” Preloader strona do konfiguracji ustawień wtyczki.
Najpierw musisz wprowadzić kod szesnastkowy dla koloru tła, którego chcesz użyć na ekranie ładowania. Domyślną opcją jest #ffffff (biały). Możesz użyć narzędzia próbnika kolorów online, aby znaleźć kod szesnastkowy dla koloru, którego chcesz użyć.
Następnie musisz podać adres URL obrazu preloadera, którego chcesz użyć. Wtyczka zawiera domyślny obraz animacji.
Jeśli chcesz użyć innej animacji, znajdziesz link do pobrania animowanego obrazu preloadera ze strony internetowej innej firmy. Następnie możesz przesłać ten obraz do folderu wp-content i wkleić adres URL tutaj.
Następnie musisz wybrać, gdzie chcesz wyświetlić preloader.
Możesz wybrać wyświetlanie go na wszystkich stronach witryny lub wybrać konkretną sekcję.
Na koniec zobaczysz instrukcję, aby dodać następujący kod do nagłówka motywu WordPress.plik php.
<div id="wptime-plugin-preloader"></div>
Przed opuszczeniem strony nie zapomnij kliknąć przycisku „Zapisz zmiany”, aby zapisać swoje ustawienia.
Nie zalecamy dodawania kodu do motywu WordPress, ponieważ zostanie on wyczyszczony po zaktualizowaniu motywu.
Jeśli używasz motywu podrzędnego, możesz dodać kod do nagłówka motywu podrzędnego.plik php.
Jeszcze lepszym rozwiązaniem byłoby dodanie tego kodu za pomocą oddzielnej wtyczki urywki kodu lub wtyczki specyficznej dla witryny.
Oto kod, który musisz dodać:
function wpb_add_preloader () {
echo '< div id = "wptime-plugin-preloader" ></div>';
}
add_action ('wp_body_open', 'wpb_add_preloader' );
Uwaga: ta metoda dodawania kodu będzie działać tylko na motywach WordPress, które są kompatybilne z funkcją wp_body_open () dodaną w WordPress 5.2.
Ta metoda dodawania kodu zapewnia, że kod pozostanie tam, nawet jeśli zaktualizujesz motyw.
Po dodaniu kodu możesz odwiedzić swoją stronę, aby zobaczyć preloader w akcji.
Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak łatwo dodać Preloader do swojej witryny WordPress. Możesz również zobaczyć naszą listę najbardziej przydatnych wskazówek, sztuczek i hacków WordPress, aby uzyskać więcej fajnych pomysłów.
Jeśli podoba Ci się ten artykuł, zasubskrybuj nasz kanał YouTube dla samouczków wideo WordPress. Znajdziesz nas również na Twitterze i Facebooku.
