WordPress 4.7 wprowadził koncepcję nagłówków wideo wbudowanych bezpośrednio w podstawowe oprogramowanie. Ten element wizualny nie jest niczym nowym-widzieliśmy go na niezliczonych stronach i motywach – ale budowanie go w core sprawia, że jest znacznie bardziej przystępny niż wcześniej.

Według WordPress.org:

Nagłówki wideo są uważane za elementy dekoracyjne-takie jak obrazy nagłówkowe, ale z ruchem. Mając to na uwadze, odtwarzają automatycznie, domyślnie zapętlają i nie mają dźwięku. Działają najlepiej w połączeniu z obrazem, dzięki czemu mogą stopniowo poprawiać wrażenia podczas obsługi wideo.

W tym poście omówię, jak korzystać z nowej funkcji nagłówka wideo, wraz ze stylizacją i dostosowaniami.

Wyświetlanie podstawowego nagłówka wideo

Nowy tag, the_custom_header_markup (), został wprowadzony w WordPress 4.7. Jednoczy wyświetlanie nagłówków i nagłówków wideo w jednym prostym kroku. Wyświetla div który zawiera obraz nagłówka i pyta skrypt niezbędny do filmu.

Domyślnie wyświetlany jest obraz nagłówka. Jeśli środowisko użytkownika obsługuje wideo, obraz będzie stopniowo ulepszany, aby zamiast tego wyświetlał wideo.

Aby wyświetlić nagłówek wideo, musisz zrobić dwie rzeczy: dodać obsługę motywu dla filmów i użyć the_custom_header_markup () gdziekolwiek chcesz, aby nagłówek się pojawił.

Aby dodać obsługę motywów, użyj poniższego fragmentu:

Ładowanie gist 0644025151b21592ea1c27ef59b1e287

Ustawianie Lokalizacji Wyświetlania

Domyślnie filmy są ładowane tylko na pierwszej stronie witryny WordPress. Motywy mogą chcieć zastąpić to zachowanie. Na szczęście istnieje wiele sposobów, aby to zrobić.

Filtr is_header_video_active

Kiedy WordPress decyduje, czy wyświetlić film, patrzy na wartość przekazaną przez is_header_video_active () filtr. Jeśli wartość jest prawdziwa, wyświetla wideo, w przeciwnym razie nie. Poniższy kod rozszerzy wideo na wszystkie pojedyncze strony, nie tylko na stronę główną.

Ładowanie gist 9a98e446f58462e3c100035cf03cda3a

Parametr nagłówka Video-active-callback

Podczas rejestracji motywu wsparcia dla filmów możemy użyć video-active-callback parametr modyfikujący Domyślne warunki, które określają, kiedy film jest wyświetlany. Domyślnie jest ustawiony na is_front_page. Oznacza to, że WordPress wyświetli nagłówek wideo, gdy is_front_page() funkcja zwraca true: na pierwszej stronie. Możesz użyć innej wbudowanej funkcji WordPress lub napisać własną:

Ładowanie gist 918e2b9f40d1f621c41f794046aa0d42

Powyższa funkcja wyświetli nagłówek wideo tylko dla gości, na wszystkich stronach z wyjątkiem strony głównej.

Ustawianie Warunków Wyświetlania

Oprócz kontrolowania, na których stronach wyświetlane są Filmy, możesz również ograniczyć filmy do określonych rozmiarów widoku. Domyślnie filmy są wyświetlane tylko na wyświetlaczach o szerokości co najmniej 900px i wysokości 500px.

Na header_video_settings filtr pozwala zmienić te wartości (i kilka innych ustawień). Poniższy kod modyfikuje warunki wyświetlania filmów:

Ładowanie gist e0166677197c89a6bc51af6a4b4b85b5

Modyfikowanie Tekstu

Ten sam header_video_settings filtr może być użyty do modyfikacji tekstu różnych elementów. Zobacz poniższy przykład dla wszystkich dostępnych opcji:

Ładowanie gist 7b665bfe6e69740553be74ef2be4c920

Modyfikowanie Stylów

Elementy są domyślnie nieostylowane, więc zadaniem motywu jest sprawienie, aby rzeczy wyglądały ładnie. A div z klasą wp-custom-header jest tworzony za każdym razem, gdy dostępny jest film lub obraz. Na div będzie zawierać jeden lub drugi, w zależności od ustalonych warunków.

Przyciski odtwarzania i pauzy mogą być również stylizowane. Są to zwykłe elementy przycisków, co widać w poniższym fragmencie kodu:

Ładowanie gist a6d2c9c4ffbfecef65039c4ddcd220c8

Dostosowywanie nagłówków wideo w WordPress

Filmy powinny być używane oszczędnie, ale mogą mieć ogromne znaczenie, gdy są używane prawidłowo. Nowa funkcja nagłówka wideo sprawia, że niezwykle łatwo jest zaimplementować motywy bez konieczności martwienia się o interfejs użytkownika.

Sprawdź zapowiedź funkcji, aby uzyskać więcej informacji i daj nam znać, jeśli stworzyłeś wspaniałe nagłówki wideo!

Masz stylizowane nagłówki wideo na swojej stronie internetowej lub masz pomysły na dostosowania, które chcesz zrobić? Podziel się swoimi przemyśleniami w komentarzach poniżej.

Tagi:

You May Also Like

Jak naprawić nieprawidłowy błąd JSON w WordPress (Przewodnik dla początkujących)

W artykule: Co powoduje błąd „nieprawidłowa odpowiedź JSON” w WordPress?1. Sprawdź adresy…

Jak zmienić kolor linku w WordPress (poradnik dla początkujących)

W artykule: Dlaczego Linki Są Ważne?Jak dodawać linki w postach i stronach…

Jak naprawić błąd krytyczny w WordPress (krok po kroku)

W artykule: Co To jest błąd krytyczny w WordPress?Co powoduje krytyczny błąd…

Jak zainstalować WordPress lokalnie na komputerze Mac za pomocą MAMP

W artykule: Jak zainstalować MAMP na komputerze MacInstalacja WordPress na komputerze MacWypróbowanie…