Dodawanie animacji CSS do WordPress

Animacje mogą być wciągającą i interesującą wizualnie funkcją dla Twoich stron internetowych. Jednak tworzenie animacji za pomocą Flasha lub JavaScriptu pochłonie znaczną część zasobów Twojej witryny.

Na szczęście możesz dodać animacje do swojej witryny WordPress za pomocą kaskadowych arkuszy stylów (CSS). Ten język kodowania umożliwia umieszczanie nieograniczonej liczby animacji w witrynie, ale nadal jest stosunkowo przystępny i łatwy do nauczenia.

W tym artykule omówimy, jak działają animacje CSS i jak dodać właściwość animacji CSS do swojej witryny z wtyczkami i bez. Ruszajmy się!

Jak działają animacje CSS? (I dlaczego powinieneś ich używać)

CSS3 daje użytkownikom możliwość tworzenia animacji poprzez zmianę stylu elementu (na przykład obrazu lub przycisku) w czasie. Możesz modyfikować dowolną liczbę właściwości CSS elementu, tyle razy, ile chcesz.

W przeciwieństwie do animacji Flash lub Javascript, animacje CSS unikają problemów ze zgodnością przeglądarek i skomplikowanego kodowania. Umożliwia to zwrócenie uwagi na ważne funkcje bez negatywnych skutków ubocznych, takich jak obniżona wydajność.

Dodawanie animacji CSS za pomocą wtyczki

Jeśli nie masz pewności co do swoich umiejętności kodowania, mamy dla Ciebie ochronę. Zamiast tego możesz łatwo tworzyć animacje CSS za pomocą wtyczki.

Krok 1: Zainstaluj i aktywuj wtyczkę animacji CSS

Aby rozpocząć, musisz zainstalować wtyczkę animacji CSS. Używamy Blocks Animation: CSS Animations for Gutenberg Blocks, stosunkowo nowego narzędzia stworzonego specjalnie dla Edytora bloków.

Możesz znaleźć tę wtyczkę, przechodząc do Wtyczki> Dodaj nowy na pulpicie WordPress. Po zlokalizowaniu kliknij Zainstaluj teraz , a następnie Aktywuj :

Po zakończeniu aktywacji przejdź do posta lub strony, na której chcesz umieścić swoją prostą animację.

Krok 2: Zaprojektuj animację

Następnie kliknij element, który chcesz animować. Na karcie Blok na pasku bocznym poszukaj sekcji o nazwie Animacja , która została dodana po aktywacji wtyczki w kroku 1 . Tutaj zobaczysz menu rozwijane zawierające kilka różnych efektów:

Możesz bawić się dowolną liczbą opcji animacji, aby znaleźć tę, która pasuje do Twoich treści.

Krok 3: Dostosuj opóźnienie i szybkość

Wtyczka Blocks Animation zawiera również funkcję pomiaru czasu, aby dostosować opóźnienie i szybkość animacji:

Pierwsze z tych dwóch ustawień opóźnia rozpoczęcie animacji. Może to pomóc przyciągnąć uwagę do elementu po załadowaniu strony lub umożliwić korzystanie z animacji w połączeniu, co wkrótce zademonstrujemy. Możesz ustawić właściwość opóźnienia animacji na maksymalnie pięć sekund.

Korzystając z menu rozwijanego Szybkość, możesz ustawić swoją animację Wolniej, Wolniej, Szybko lub Szybciej . Wolniejsza animacja może być bardziej subtelna i mniej drażniąca dla odwiedzających, podczas gdy szybsza animacja bardziej przyciągnie ich uwagę.

Krok 4: Zapisz i wyświetl podgląd animacji

Zalecamy zapisanie posta lub strony jako wersji roboczej i wyświetlenie podglądu animowanego elementu przed jego opublikowaniem. Pamiętaj, aby zapisać również właściwość nazwy animacji, jeśli pracujesz z wieloma animacjami CSS na jednej stronie. Chociaż animacje mogą okazać się bardzo przydatne, mogą również rozpraszać uwagę i sprawić, że Twoje strony będą zagracone.

Podgląd Twojej strony i utrzymywanie stosunkowo prostych animacji zapobiegnie tym niepożądanym wynikom. Poniżej możesz zobaczyć nasz gotowy przykład animacji CSS, który łączy animowany obrazek z przyciskiem, który stylowaliśmy w poprzednich krokach:

Jeśli okaże się, że animacja nie pasuje do reszty treści lub ma pożądany efekt, możesz po prostu wrócić do Edytora bloku i dostosować go. Na tym polega piękno korzystania z wtyczki do animacji CSS – jest to szybkie i łatwe.

Dodawanie animacji CSS bez wtyczki

Jeśli czujesz się komfortowo, edytując pliki swojego motywu, możesz ręcznie tworzyć niestandardowe animacje bez wtyczki. Wymaga to trochę wiedzy o kodowaniu, więc to rozwiązanie najlepiej pozostawić osobom z doświadczeniem programistycznym.

Zanim zaczniesz, utwórz kopię zapasową swojej witryny. Rozsądnie jest również użyć motywu podrzędnego, aby w razie potrzeby można było łatwo przywrócić domyślne pliki motywu.

Krok 1: Zrozumienie zaangażowanych właściwości CSS

Zanim zaczniesz edycję, musisz pamiętać o ośmiu ważnych właściwościach podczas tworzenia animacji CSS:

• @keyframes: określa style, które zostaną zastosowane do elementu poprzez animację.
• nazwa-animacji: Tworzy nazwę, której możesz użyć do odwoływania się do animacji w innym miejscu kodu.
• Animation-duration: Określa, jak długo animacja powinna trwać.
• Animation-delay: Określa, jak długo animacja powinna czekać na rozpoczęcie po załadowaniu strony.
• Animation-iteration-count: Odnotowuje, ile razy animacja powinna zostać uruchomiona.
• animacje-kierunek: Określa, w jakim kierunku powinna przebiegać animacja.
• Animation-timing-function: Określa krzywą prędkości animacji.
• Animation-fill-mode: określa styl elementu, gdy animacja nie jest odtwarzana.
• animacja: Skrócona właściwość do wiązania klatek kluczowych z elementami.

Najważniejszą z tych właściwości do zrozumienia jest „klatka kluczowa”. Termin ten pochodzi od ręcznie rysowanych procesów animacji, w których główną klatkę nazywano klatką kluczową, a inne rysowano w celu wejścia lub wyjścia z niej.

W animacji CSS klatka kluczowa określa, co się dzieje i kiedy. Weźmy na przykład ten:

 @keyframes przykład {
 0% {kolor-tła: czerwony;}
 25% {kolor tła: żółty;}
 50% {kolor-tła: niebieski;}
 100% {kolor-tła: zielony;}
 }

Powyższa klatka kluczowa wskazuje, że w 25 procentach animacji kolor tła określonego elementu zmieni się z czerwonego na żółty. Procenty są zwykle używane do definiowania czasu animacji. Jednak from i to mogą być użyte w miejsce odpowiednio 0% i 100%.

Krok 2: Utwórz plik animate.css

Aby dodać animacje CSS, musisz utworzyć plik w preferowanym edytorze tekstu, korzystając z powyższych właściwości. Powinien zawierać klatki kluczowe dla dowolnych animacji, których chcesz użyć. Następnie powiążesz je z określonymi klasami CSS, aby móc zastosować je do elementów w Twojej witrynie.

Oto przykład. W poniższym kodzie najpierw tworzymy animację klatki kluczowej CSS, korzystając z właściwości transformacji i widoczności, które umożliwią nam wsunięcie elementu z prawej strony ekranu:

 @klatki kluczowe slideInRight {
z {
-transformacja webkit: translate3d(100%, 0, 0);
transformacja: translate3d(100%, 0, 0);
widoczność: widoczna;
}
do {
-transformacja webkit: translate3d(0, 0, 0);
transformacja: translate3d(0, 0, 0);
}
}

Następnie musimy powiązać tę klatkę kluczową z klasą CSS. W tym przypadku nazwano go slideInRight. Ten kod zostanie umieszczony bezpośrednio po powyższej klatce kluczowej w pliku:

 .slajdw prawo {
 -webkit-nazwa animacji: slideInRight;
 nazwa animacji: slideInRight;
 }

Możesz powtórzyć ten proces, aby stworzyć tyle animacji, ile chcesz. Następnie zapisz plik jako animate.css. Alternatywnie możesz pobrać popularny plik Animate.css. Zawiera klatki kluczowe i klasy CSS dla dziesiątek popularnych animacji, dzięki czemu nie musisz kodować własnej złożonej animacji.

Krok 3: Prześlij plik animate.css do swojej witryny

Po ukończeniu pliku animate.css musisz przesłać go do katalogu motywu. Aby to zrobić, uzyskaj dostęp do swojej witryny za pomocą protokołu FTP (File Transfer Protocol) i klienta FTP, takiego jak FileZilla. Niezbędne dane uwierzytelniające możesz znaleźć na swoim koncie hostingowym.

Musisz wejść do katalogu public_html , przejść do wp-content> motywy i znaleźć folder dla aktywnego motywu (lub motywu podrzędnego):

Poszukaj podkatalogu o nazwie css . Jeśli taki istnieje, prześlij do niego plik animate.css (lub plik animate.mini.css z programu Animate.css). Jeśli nie masz jeszcze tego folderu, możesz łatwo utworzyć nowy podkatalog i odpowiednio go nazwać:

Po pomyślnym przesłaniu pliku nie opuszczaj od razu klienta FTP. Aby uzyskać dostęp do tego arkusza stylów w swojej witrynie WordPress, musisz przeprowadzić niewielką edycję pliku.

Krok 4: Wywołaj arkusz stylów Animate za pośrednictwem functions.php

Następnie w folderze aktywnego motywu znajdź plik functions.php . Na koniec dodaj ten fragment kodu:

 add_action( 'wp_enqueue_scripts', 'wpb_animate_styles' );
funkcja wpb_animate_styles() {
 wp_enqueue_style( 'animate-css', get_stylesheet_directory_uri() . '/css/animate.css', '3.5.0', 'all');
}

Zauważ, że jeśli przesłałeś plik animate.min.css z Animate.css, będziesz musiał użyć animate.min.css w ostatnim wierszu zamiast animate.css.

Dzięki temu motyw może wywołać właśnie przesłany arkusz stylów, dzięki czemu można zastosować zawarte w nim klasy do elementów w witrynie. Po zapisaniu zmian wróć do pulpitu WordPress.

Krok 5: Zastosuj animacje za pomocą klas CSS

Możesz teraz zastosować dowolną klasę w pliku animate.css do elementów w swoich postach i stronach. Jeśli używasz pliku Animate.css, możesz odwołać się do pełnej listy wszystkich zawartych w nim plików w serwisie GitHub.

Przejdź do posta lub strony zawierającej element, który chcesz animować. W Edytorze klasycznym przejdź do edytora tekstu. Jeśli używasz Edytora bloku, kliknij ikonę z trzema kropkami na pasku narzędzi bloku i wybierz Edytuj jako HTML :

Następnie dodaj animowaną klasę i klasę animacji do tagu elementu:

Na koniec przejrzyj podgląd swojego posta lub strony. Twoja animacja powinna teraz działać:

Możesz dostosować ten proces, aby włączyć dowolną animację do pliku animate.css .

Utrzymuj swoją witrynę świetnie wyglądającą dzięki WP Engine

Korzystanie z interesujących wizualnie funkcji, takich jak animacje, może zaangażować odwiedzających witrynę i zapewnić bardziej profesjonalną obecność w Internecie. W WP Engine jesteśmy dumni z dostarczania najlepszych wskazówek i trików dla programistów WordPress, dzięki czemu Twoja witryna zawsze wygląda najlepiej.

W połączeniu z naszą najwyższej klasy platformą hostingową będziesz mieć wszystkie narzędzia, których potrzebujesz, aby zaimponować użytkownikom. Sprawdź nasze plany już dziś!