Jeśli przeglądamy Katalog motywów WordPress, większość motywów zawiera obrazy okładek. Jest to funkcja, która cieszy się popularnością. Trend na stronie tytułowej jest prawdziwy nawet w zablokuj katalog motywów zrzuty ekranu również.
Rozważmy następujący przykład z Dwadzieścia Dwadzieścia (motyw klasyczny), który zawiera szablon okładki które mogą być używane do wyświetlania zarówno w pojedynczym poście, jak i na stronie, gdzie wyróżniony obraz posta jest wyświetlany u góry, który rozciąga się na ekranie przeglądarki, z tytułem posta i innymi pożądanymi metadanymi poniżej. Szablony okładek pozwalają tworzyć treści, które wyróżniają się na tle tradycyjnych ograniczeń wyświetlania treści.
Tworzenie szablonów okładek wymaga obecnie napisania kodu PHP, jak pokazano tutaj w Szablon okładki domyślnego motywu Twenty Twenty. Jeśli spojrzymy na template-parts/content-cover.php plik, zawiera kod do wyświetlania treści, gdy cover-template Jest używane.
Dlatego nie jest możliwe stworzenie własnej strony tytułowej, jeśli nie posiadasz głębokiej wiedzy na temat PHP. Dla wielu zwykłych użytkowników WordPressa jedyną opcją jest użycie takiej wtyczki Custom Post Type UI jak opisano w ten krótki film.
Sekcje okładki w motywach blokowych
Ponieważ WordPress 5.8, autorzy motywów mogą tworzyć niestandardowe szablony (takie jak pojedynczy post, autor, kategoria i inne) z górną sekcją bohaterów za pomocą edytor bloków blok okładki i dołączane do ich motywów z minimalnym kodem lub bez kodu.
Zanim zagłębimy się w tworzenie dużych sekcji okładki w szablonach motywów blokowych, przyjrzyjmy się pokrótce dwóm motywom blokowym Dwadzieścia Dwadzieścia Dwa i Wabi Rich Tabor (pełna recenzja tutaj).
Za kulisami Twenty Twenty-Two implementuje duży nagłówek przez dodawanie ukrytego obrazu przechowywanego jako wzór header-dark-large Części. Natomiast w motywie Wabi duży kolor tła nagłówka w jednym poście jest zaimplementowany za pomocą akcentujące kolory tła i blok dystansowy o wysokości 50px (linie: 5-9). Kolorami akcentów zarządza assets/js/accent-colors.js plik.
Wielu innych zdecydowało się na utworzenie sekcji okładki górnej za pomocą blok okładki, który umożliwiał użytkownikom zmianę koloru tła i dodanie statycznego obrazu z Biblioteki multimediów lub przesłanie z urządzeń multimedialnych – bez pisania kodu. Dzięki takiemu podejściu obrazy z opublikuj polecany blok obrazu musiał zostać dodany ręcznie do każdego pojedynczego postu, jeśli chcesz, aby obrazek posta był obrazem tła w pojedynczych postach.
Bloki okładki z dynamicznym obrazem posta
WordPress 6.0 udostępnił kolejny fajny wyróżnione bloki okładki obrazu funkcja, która umożliwia użycie wyróżnionego obrazu dowolnego postu lub strony jako obrazu tła w bloku okładki.
W następujących krótki film, inżynierowie firmy Automattic omawiają dodanie polecanych obrazów w celu pokrycia bloków z przykładem z Archaeo Temat:
Blok obrazu, w tym post polecany blok obrazu, można dodatkowo dostosować za pomocą duotone kolor w theme.json jak omówiono w tym krótkim Łączenie kropek Film na YouTube (Anne McCarthy z Automattic).
Przykłady użycia (Wei, Tryb jasny)
Jeśli przeglądamy miniatury obrazów w zablokuj katalog motywów, widzimy, że większość z nich zawiera duże sekcje nagłówka okładki. Jeśli zagłębimy się w ich pliki szablonów, wykorzystują one bloki okładki ze statycznym tłem obrazu.
Niektóre ostatnio opracowane motywy wykorzystują bloki okładek z dynamicznym tłem w postach (np. Archeo, Wei, Frost, Bright Mode itp.). Krótki przegląd nowej funkcji jest dostępny w ten krótki film na GitHubie.
Łącząc dynamiczne akcenty kolorystyczne cechy Wabi motyw z okładką i blokami graficznymi posta, Rich Tabor dalej rozwija swoją kreatywność w swoim nowym Wei motyw (dostępna pełna recenzja tutaj), aby wyświetlić dynamiczne obrazy okładki z jednego posta.
W swoim poście z ogłoszeniem Wei, Bogaty Tabor pisze: „Za kulisami single.html szablon używa bloku okładki, który wykorzystuje wyróżniony obraz posta. Następnie dodawany jest dwuton według schematu kolorów przypisanego do wpisu. W ten sposób prawie każdy obraz będzie wyglądał dobrze”.
Jeśli chcesz zagłębić się w blok okładki nagłówka motywu Wei i dowiedzieć się, jak tworzyć własne, oto krótki film od Frank Klein (Kursy rozwoju WP), który wyjaśnia krok po kroku, jak został stworzony.
Podobny do motywu Wei, Brian Gardner wykorzystuje również blok okładki z blokiem postu z obrazami w swoim ostatnim Tryb jasny motyw do wyświetlania wyróżniających się treści żywe kolory.
Brian powiedział WPTavern: „najbardziej podoba mu się w temacie sposób wykorzystania Cover Block pojedyncze strony. Przeciąga wyróżniony obraz do bloku Cover, a także oferuje niestandardowe style bloków dla cieni i opcji pełnej wysokości. […] Czuję, że to naprawdę pokazuje, co jest możliwe dzięki nowoczesnemu WordPressowi.”
Aby uzyskać więcej szczegółów, oto jego strona demo i pełna recenzja motywu Briana Bright Mode.
Projektowanie złożonych układów za pomocą edytora bloków
Niedawno WordPress uruchomił nowy edytor bloków zaprojektowany strona główna docelowa oraz pobrać stronę. Ogłoszenie przyciągnął mieszane reakcje od swoich czytelników, w tym od Matt Mullenweg (Automattic), który skomentował 33 dni potrzebne na zaprojektowanie i uruchomienie takiej „prostej strony”. Możesz znaleźć dodatkowe dyskusje za kulisami tutaj.
W odpowiedzi stworzył Jamie Marsland z Pootlepress ten film na YouTube gdzie odtwarza niemal identyczną stronę główną w prawie 20 minut.
Komentując wideo Marsland, Sarah Gooding z WP Travern pisze: „Jest kimś, kogo można by opisać jako zaawansowany użytkownik edytora bloków. Potrafi szybko przetasować wiersze, kolumny i grupy, dostosowując odpowiednio dopełnienie i marginesy, a także przypisać każdej sekcji odpowiedni kolor do projektu. W tym momencie nie jest to coś, co większość przeciętnych użytkowników WordPressa mogłaby zrobić”.
Chociaż edytor bloków przeszedł długą drogę, wciąż pojawiają się problemy z tworzeniem i projektowaniem złożonych układów za jego pomocą przez większość twórców motywów i zwykłych użytkowników.
Dodanie ulepszenia do bloków TT2 Gopher
W tej sekcji przeprowadzę Cię przez proces dodawania ulepszeń do Motyw TT2 Gopher Blocks o którym wspomniałem w poprzednim artykule. Zainspirowany blokami okładek z motywów, które opisałem wcześniej, chciałem dodać do motywu trzy szablony okładek (autor, kategoria i pojedyncza okładka).
Przeglądając strony internetowe, zauważamy dwa rodzaje nagłówków okładek. Najczęściej obserwowanym nagłówkiem jest sekcja okładki połączona z nagłówkiem witryny (tytuł witryny i górna nawigacja) w bloku okładki (np. Twenty Twenty, Twenty Twenty-Two, Wei, Wabi, Frost, Bright Mode, itp.). Znajdujemy również sekcję okładki nagłówka, która nie jest połączona z nagłówkiem witryny i znajduje się tuż pod nią, na przykład ta BBC Future stronie internetowej. W przypadku motywu bloków TT2 Gopher wybrałem ten drugi.
Tworzenie wzorów nagłówka okładki
Najpierw utwórzmy wzory nagłówków okładek dla szablonów autora, pojedynczych i innych (kategorii, tagów) za pomocą bloków okładek. Następnie przekształcimy je we wzorce (zgodnie z opisem tutaj wcześniej) i wywołaj odpowiednie wzorce nagłówka do szablonów.
Jeśli znasz się na pracy z edytorem bloków, zaprojektuj sekcję nagłówka za pomocą bloków okładki w edytorze witryny, a następnie przekonwertuj kod nagłówka okładki na wzorce. Jeśli jednak nie znasz edytora FSE, najprostszym sposobem jest skopiowanie wzorców z katalog wzorców w poście dokonaj niezbędnej modyfikacji i przekształć ją w wzór.
W moim poprzedni artykuł CSS-Tricks, szczegółowo omówiłem tworzenie i używanie wzorców blokowych. Oto krótki przegląd przepływu pracy, którego używam do tworzenia wzoru nagłówka okładki pojedynczego posta:
Wzór nagłówka okładki pojedynczego posta
Krok 1: Korzystając z interfejsu FSE, stwórzmy nowy pusty plik i rozpocznij budowę struktury bloków, jak pokazano na lewym panelu.
Alternatywnie można to zrobić najpierw w poście lub na stronie, a następnie skopiować i wkleić znacznik do pliku wzorca później.
Krok 2: Następnie, aby zakryć powyższe znaczniki we wzorcu, najpierw powinniśmy skopiować jego znaczniki kodu i wkleić je do nowego /patterns/header-single-cover.php w naszym edytorze kodu. Powinniśmy również dodać wymagane znaczniki nagłówka pliku wzorca (np. tytuł, slug, kategorie, inserter itp.).
Oto cały kod /patterns/header-single-cover.php file:
|
How To Customize WordPress Block Theme Cover Templates with Dynamic Post Feature Images
Krok 3: Do tego demo użyłem ten obraz z katalogu zdjęć jako obraz tła wypełniacza i zastosował Midnight kolor dwutonowy. Aby dynamicznie korzystać z prezentowanego obrazu, powinniśmy dodać "useFeaturedImage":true w bloku okładki, zastępując powyższe łącze obrazu wypełniacza tuż przed "dimRatio":50 tak, że linia 10 powinna wyglądać następująco:
Alternatywnie obraz wypełniający można również zmienić, klikając zastąpić i wybierając Użyj polecanego obrazu opcja:
Teraz wzory okładek nagłówków powinny być widoczne w panelu wstawiania wzorów do użycia w dowolnym miejscu w szablonach, postach i stronach.
Nagłówki okładki archiwum
Zainspirowany ten post WP Tavern i krok po kroku, jak utworzyć nagłówek szablonu autora, chciałem stworzyć podobny nagłówek okładki i dodać też do motywu TT2 Gopher.
Najpierw utwórzmy wzór nagłówka okładki archiwum dla author.html również szablon, zgodnie z powyższym przepływem pracy. W tym przypadku tworzę to na nowej pustej stronie, dodając bloki (jak pokazano poniżej w widoku listy):
W tle okładki użyłem tego samego obrazu, który został użyty w okładce nagłówka pojedynczego posta.
Ponieważ chcielibyśmy wyświetlić krótką biografię autora w bloku autora, oświadczenie biograficzne należy również dodać do strony profilu użytkownika, w przeciwnym razie pojawi się puste miejsce w interfejsie użytkownika.
Poniżej znajduje się kod znacznika header-author-cover, którego użyjemy w kolejnym kroku:
Published by:
Aby ukryć znaczniki w header-author-cover wzorzec, powinniśmy dodać wymagane znaczniki nagłówka pliku wzorca, jak opisano wcześniej. Edytując header-author-cover.php wzór, możemy tworzyć podobne okładki nagłówków dla tagów, taksonomii i innych niestandardowych szablonów.
Połączenia header-category-cover.php wzór dla mojego category.html szablon jest dostępny na GitHub.
Tworzenie szablonów z blokami okładek nagłówków
WordPress 6.0 i niedawne Gutenberg 13.7 rozszerzone funkcje tworzenia szablonów w edytorze bloków, dzięki czemu wielu użytkowników WordPressa, bez głębokiej znajomości kodowania, może tworzyć własne szablony.
Aby uzyskać bardziej szczegółowe informacje i przypadki użycia, oto dokładna notatka dotycząca dostosowywania autorstwa Justina Tadlocka.
Edytor bloków umożliwia tworzenie różnego rodzaju szablonów, w tym szablonów okładek. Przyjrzyjmy się pokrótce, jak łączyć blok okładki i opublikuj polecany blok obrazu z nowym interfejsem szablonów ułatwia tworzenie różnego rodzaju niestandardowych szablonów okładek, nawet bez umiejętności kodowania lub z niskimi umiejętnościami.
Tworzenie szablonów zostało znacznie ułatwione dzięki Gutenberg 13.7. Jak tworzyć szablony bloków z kodami i w edytorze strony jest opisany w Podręcznik tematyczny oraz w mój poprzedni artykuł.
Szablon autora z blokiem okładki
Top (sekcja nagłówka) znaczniki author.html szablon jest pokazany poniżej (linia 6):
...
...
...
... Oto zrzuty ekranu nagłówków okładek dla author.html i category.html szablony:
Cały kod dla obu szablonów jest dostępny na GitHub.
Pojedynczy słupek z blokiem przykrywającym
Aby wyświetlić blok okładki w naszym pojedynczym poście, musimy zadzwonić do header-cover-single pattern poniżej sekcji nagłówka (wiersz 3):
....
....
....Oto zrzut ekranu przedstawiający widok frontonu pojedynczego posta z sekcją okładki nagłówka:
Cały single-cover.html szablon jest dostępny na GitHub.
Możesz znaleźć dodatkowe samouczki krok po kroku dotyczące tworzenia sekcja postu nagłówka bohatera i za pomocą bloków okładek tła z postu on WP Tawerna i Pełna edycja witryny stronie internetowej.
Masz to!
Przydatne zasoby
Polecany blok okładki obrazu
Blogach
Mimo że ogólnie motywy blokowe są otrzymywanie wielu odpowiedzi od członków społeczności WordPress, moim zdaniem, są przyszłością WordPressa, także. Dzięki motywom blokowym amatorzy autorzy motywów, bez głębokich umiejętności kodowania i opanowania języków PHP i JavaScript, mogą teraz tworzyć motywy o złożonych układach z sekcją okładki bohatera, jak opisano w tym artykule w połączeniu z wzory i wariacje stylu.
Jako wczesny użytkownik Gutenberga nie mogłem być bardziej podekscytowany nowymi narzędziami do tworzenia motywów, takimi jak utwórz motyw blokowy wtyczki i inne, które pozwalają autorom motywów uzyskać następujące elementy bezpośrednio z interfejsu użytkownika edytora bloków bez pisania kodu:
- (I) Stwórz
- (ii) nadpisz pliki motywów i wyeksportuj
- (iii) wygenerować motyw pusty lub motyw potomny oraz
- (iv) modyfikować i zapisywać wariacje stylu bieżącego motywu
Ponadto ostatnie iteracje wtyczki Gutenberg umożliwiają włączenie płynna typografia i wyrównanie układu i inne kontrolki stylistyczne używające tylko theme.json plik bez JavaScript i linia reguł CSS.
Dziękujemy za przeczytanie i podzielenie się swoimi komentarzami i przemyśleniami poniżej!