W artykule:
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:
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ą.
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ą:
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:
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:
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:
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!
Tagi: