W tym poście przyjrzymy się, jak wykorzystać edytor Gutenberg do tworzenia świetnie wyglądających i nowoczesnych stron głównych lub stron docelowych. W szczególności przyjrzymy się, jak Ty jako programista możesz dostosować swój kod motywu, aby to obsługiwać. Ten przewodnik jest idealny dla tych, którzy chcą dostosować starszy motyw do obsługi Gutenberga lub chcą dowiedzieć się, jak tworzyć nowe motywy zoptymalizowane dla Gutenberga.
Kiedy WordPress wprowadził nowy edytor Gutenberg w WordPress 5.0 (wydany około grudnia 2018 r.), w większości przypadków nie było potrzeby korzystania z oddzielnej wtyczki do tworzenia stron. Edytor Gutenberga daje autorowi WordPressa dużą elastyczność i możliwość tworzenia bogatych treści i projektów, co wcześniej nie było łatwe – chyba że motyw lub wtyczka zapewniały im funkcjonalność za pomocą np. skrótów.
Dostajesz wiele stylizacji bloków Gutenberga w WordPressie, ale przy odrobinie pracy w swoim motywie i wiedzy o blokach możesz dodać o wiele więcej do doświadczenia Gutenberga. Zobaczmy, jak!
Włączanie bloków szerokich i pełnej szerokości
Większość bloków umożliwia wybór wyrównania bloków. Kiedy pracujesz w Gutenbergu w temacie, który nie został opracowany dla Gutenberga, masz wybór między „Wyrównaj do lewej", „Wyrównaj do środka” i „Wyrównaj do prawej”.
Ale czy wiesz, że w rzeczywistości są jeszcze dwa? Pozostałe dwa, „Szeroka szerokość” i „Pełna szerokość” są idealne do tworzenia strony głównej lub strony docelowej. Przyjrzymy się bliżej, jak zoptymalizować układ i projekt motywu, aby później w pełni obsługiwać bloki szerokie i pełnej szerokości. Najpierw musisz powiedzieć WordPressowi, aby dodał obsługę tych dwóch wyrównań bloków w twoim motywie.
W funkcji podpiętej do after_setup_themeCiebie po prostu wywołaj add_theme_support('align-wide'). Prawdopodobnie masz już funkcję „konfiguracji” w swoim motywie, a jeśli nie – dodaj to w swoim motywie functions.php:
add_action('after_setup_theme', function() {
add_theme_support('align-wide');
});Gdy ten kod jest aktywny w twoim motywie, powinieneś teraz otrzymać łącznie pięć opcji wyrównania bloków. W przypadku niektórych bloków, na przykład Kolumn, otrzymujesz tylko dwa nowe.
Istnieją pewne typy bloków, w których można ustawić wyrównanie bloków – najczęściej jest to rodzaj, który obsługuje zagnieżdżone bloki, tj. blok, który pozwala na dodawanie bloków do środka. Takie popularne bloki to Cover, Columns, Image, embed blocks i tak dalej. Blok Cover to świetny blok do tworzenia stron głównych lub stron docelowych, jak zobaczymy w tym poście.
Korzystanie z bloku okładki
Blok Cover to zdecydowanie najlepszy blok, gdy chcesz zbudować stronę główną lub stronę docelową podzieloną na sekcje. Możesz dodać dowolny rodzaj bloku i tyle bloków, ile chcesz w bloku Cover. Za pomocą bloku Cover możesz ustawić kolor tła, obraz tła lub obraz tła z kolorową nakładką.
W połączeniu z opcją ustawienia regulacji bloku na szeroką lub pełną szerokość (jak zrobiliśmy powyżej), blok Cover jest potężnym narzędziem. Możesz utworzyć stronę, w której cała zawartość znajduje się wewnątrz sekcji okładki o pełnej szerokości, z których każda ma własny kolor tła lub obraz tła. Dzięki odpowiedniej stylistyce i układowi w motywie masz pełnowartościowego, nowoczesnego kreatora strony głównej.
W WordPress 5.3 pojawiło się ważne ulepszenie w bloku Cover: wewnętrzna otoczka HTML. Oznacza to, że blok Cover ma jeden element HTML dla samej sekcji — z jego kolorem tła lub obrazem tła, a następnie inny element HTML, w którym znajduje się cała zawartość. Połącz to z wyrównaniem bloku do pełnej szerokości: nadaj styl zewnętrznemu elementowi (z kolorem tła lub obrazem), aby uzyskać pełną szerokość, a następnie dostosuj wewnętrzny element HTML do zawartości tak, aby zmieścił się w kontenerze motywu.
Załóżmy na przykład, że Twój motyw ma kontener o maksymalnej szerokości 1200 pikseli. Prawdopodobnie masz już konkretną klasę HTML, która jest stylizowana na max-width, zapewniając, że zawartość nie będzie po prostu przerzucana na całą szerokość, niezależnie od rozmiaru ekranu. Dodaj styl maksymalnej szerokości do wewnętrznego kodu HTML okładki; nazwa klasy wp-block-cover__inner-container. Jako przykład:
.wp-block-cover-image.alignfull .wp-block-cover__inner-container,
.wp-block-cover.alignfull .wp-block-cover__inner-container {
position: relative;
width: 100%;
max-width: 1200px;
padding: 0 20px;
}W powyższym kodzie CSS celuję w dwie klasy nadrzędne Cover. Klasa nadrzędnego bloku okładki zmienia się w zależności od tego, czy wybierzesz obraz tła, czy nie. Bloki okładki z obrazem tła otrzymują klasę „ wp-block-cover-image“, a bloki okładki z kolorem tła otrzymują klasę „ wp-block-cover“. Ponadto obieram za cel wyrównanie bloków „Pełna szerokość” z klasą „ alignfull“. Wyrównanie bloku „Szeroka szerokość” otrzymuje klasę „ alignwide“. Dodaj CSS, aby ukierunkować również to wyrównanie bloków – w zależności od tego, co chcesz zrobić.
Jeśli zacząłeś się tym bawić, być może napotkałeś problemy z ogólnym układem w motywie. Twój motyw prawdopodobnie wymusza, aby bloki okładki o pełnej szerokości w ogóle nie przechodziły na pełną szerokość. Spójrzmy na to dalej.
Układ motywu i stylizacja na całej szerokości
Do tej pory dodaliśmy obsługę bloków szerokich i pełnej szerokości oraz nauczyliśmy się używać i optymalizować blok Cover, aby działał jak sekcje strony głównej lub strony docelowej. Jednak w większości motywów Twój kod HTML i układ mogą uniemożliwić pełne rozmieszczenie treści posta.
Twój motyw prawdopodobnie ma prawy pasek boczny w widoku pojedynczego posta lub strony. Prawdopodobnie istnieją dodatkowe wrappery HTML, w tym element kontenera max-width, który uniemożliwia blokom pełnej szerokości faktyczne przejście do pełnej szerokości. Twoje opakowania prawdopodobnie mają również sporo marginesów lub wyściółki, co ponownie uniemożliwia blokom o pełnej szerokości całkowite dotknięcie krawędzi ekranu. Musisz jednak zadbać o to, aby pojedynczy post lub strona wyglądała dobrze w przypadku postów, w których użytkownik nie używa również Coverblocków. Podczas opracowywania dla Gutenberga z obsługą bloków szerokich i pełnej szerokości należy wziąć pod uwagę swoje opakowania. Wszystko zależy od projektu, kodu HTML i stylizacji Twojego motywu – ale spójrzmy na kilka pomysłów na rozwiązanie tego problemu.
Dobrym rozwiązaniem byłoby dodanie opcji postów; niestandardowe ustawienia meta dla postów i stron, które wpływają na układ tej strony. Możesz wprowadzić ustawienie, aby ukryć pasek boczny lub zmusić zawartość posta do pełnej szerokości. Twórz ustawienia postów ręcznie, dodając metaboksy, lub użyj zaawansowanych pól niestandardowych, aby ułatwić ten proces. A następnie w swoim motywie pobierasz ustawienia postu i odpowiednio obsługujesz wyjście HTML.
Inne dobre opcje postów to ukrywanie tytułu strony i/lub ukrywanie polecanego obrazu. Pozwala to na normalne tworzenie treści, ale dla określonych stron możesz łatwo skonfigurować stronę docelową z pełnymi blokami Cover. Ukrywając standardowy tytuł strony, możesz zbudować lepiej wyglądający nagłówek lub sekcję wezwania do działania, która będzie działać jako tytuł strony.
Twórz style blokowe
W WordPress Gutenberg jest mało znana funkcja; bloki mogą mieć różne style. Możesz zobaczyć style blokowe w działaniu za pomocą bloku Cytuj. Dodaj blok w edytorze i spójrz na Inspektora (prawy pasek boczny). Znajdziesz temat „Style” i dwie opcje między różnymi stylami.
Twórz niestandardowe style, które ułatwiają tworzenie strony głównej i stron docelowych. Sugeruję przynajmniej dodanie niestandardowych stylów bloków do bloku nagłówka, aby można było tworzyć niestandardowe style bez przerywania nagłówków normalnych postów. Stwórz styl blokowy dla tytułów sekcji z bardzo dużą czcionką i dodatkowym wypełnieniem.
Kiedy próbujesz tworzyć strony główne, zanotuj, co musisz wielokrotnie dostosowywać – może to być dobre dopasowanie do stylu blokowego.
Dodawanie niestandardowych stylów bloków jest naprawdę łatwe i nie wymaga znajomości języka Javascript. Mam osobny samouczek, jak to zrobić, jeśli chcesz dowiedzieć się więcej na ten temat.
PS: Jeśli nie widzisz stylów blokowych, Twój motyw może nie obsługiwać tego. Proces jest taki sam, jak w przypadku wyrównania bloków o szerokości i pełnej szerokości; w haczyku after_setup_themedodajesz add_theme_support('wp-block-styles'):
add_action('after_setup_theme', function() {
add_theme_support('wp-block-styles');
});Używanie kolorów motywu jako palety kolorów
Jeśli bawiłeś się Gutenbergiem, prawdopodobnie zauważyłeś, że Gutenberg oferuje pewien zestaw kolorów tekstu lub koloru tła. Na przykład dodanie bloku Cover spowoduje wyświetlenie monitu o wybranie koloru z palety kolorów.
Masz możliwość użycia selektora kolorów, aby wybrać lub wprowadzić kolor szesnastkowy, aby uzyskać dokładnie taki kolor, jaki chcesz. Możesz uzyskać do tego dostęp, klikając link „Niestandardowy kolor”. Ale jeśli używasz tego samego zestawu kolorów w swoim motywie i chcesz zachować spójność, ciągłe zapamiętywanie i wprowadzanie za każdym razem tych samych kodów szesnastkowych może być kłopotliwe.
Na szczęście WordPress Gutenberg pozwala zdefiniować paletę kolorów! To kolejna add_theme_support(), w której podajesz szereg kolorów, które chcesz w palecie. W funkcji podpiętej do after_setup_theme, wykonaj następujące czynności:
W powyższym kodzie dodajemy obsługę motywu dla „ editor-color-palette“, a jako drugi parametr funkcji definiujemy tablicę wszystkich kolorów, które chcemy. Każdy kolor wymaga atrybutów name, slugi color. namepojawia się po najechaniu myszą na kolor w palecie. slugto nazwa klasy, która zostanie dodana do elementu bloku. I colordefiniuje kod szesnastkowy dla twojego koloru.
Pamiętaj, że musisz dodać style w swoim CSS kierujące na każdą z tych klas (zdefiniowanych przez slug). WordPress nie stosuje automatycznie koloru szesnastkowego do twoich bloków, mimo że mówimy WordPressowi, jaki jest kod koloru.
Na przykład obraz po prawej to moja paleta kolorów, którą zdefiniowałem dla motywu tej witryny – dla A White Pixel:
To są kolory mojego motywu i w 95% przypadków użyję jednego z tych kolorów – albo jako tła, albo jako koloru tekstu. W rzadkich przypadkach mogę wyciągnąć colorpicker, ale posiadanie zwykłych podejrzanych już zdefiniowanych w palecie kolorów znacznie ułatwia życie.
Wskazówka: zawsze dodawaj czystą czerń (#000000) i czystą biel (#FFFFFF) do swojej palety kolorów. Prawdopodobnie dobrym pomysłem jest również posiadanie jednego lub dwóch jasnoszarych kolorów.
Korzystanie ze statycznej strony głównej i optymalizacja szablonu strony głównej
Pewnie już o tym wiesz, ale mimo to wspomnę. W WordPressie możesz ustawić stronę statyczną jako stronę główną, przechodząc do Ustawienia > Czytanie.
Domyślnie strona główna WordPressa wyświetla listę najnowszych postów. Ale jeśli wybierzesz „Strona statyczna” i wybierzesz stronę z listy rozwijanej, WordPress wyświetli tę stronę jako stronę główną Twojej witryny.
To nie wymaga myślenia przy tworzeniu strony głównej dla witryny WordPress. Na wybranej stronie możesz zbudować stronę główną, korzystając ze wszystkich wymienionych wyżej trików. Na przykład możesz mieć niezaznaczone opcje publikowania dotyczące wyświetlania tytułu strony, paska bocznego i polecanego obrazu. A strona jest w pełni zbudowana z bloków okładki i treści o pełnej szerokości. Możesz jednak zrezygnować z opcji postu (ukryj pasek boczny itp.) i po prostu utworzyć szablon strony głównej, aby je zastąpić lub wymusić.
Gdy Twój WordPress jest ustawiony jako strona statyczna jako strona główna, WordPress będzie szukał szablonu front-page.phpw Twoim motywie. To będzie używane zamiast page.php. Pozwala to na stworzenie i dostosowanie oddzielnego szablonu, który jest używany tylko na stronie głównej.
W tym front-page.phpszablonie możesz już zdefiniować HTML, aby zapewnić, że wszystkie bloki będą miały pełną szerokość, nie ma paska bocznego, tytułu strony ani polecanego obrazu. Możesz po prostu zrobić, the_content()aby wyświetlić pełną zawartość strony.
Na przykład to, co mam w motywie tej witryny front-page.php. Podczas gdy we wszystkich innych szablonach, takich jak page.php, mam mnóstwo wyników dla paska bocznego, tytułu posta i tak dalej, jest to pełny zakres mojej pętli w front-page.php:
while (have_posts()): the_post();
the_content('');
endwhile;Otóż to. Mój opakowujący kod HTML i klasy zapewniają, że treść posta jest w pełnej szerokości.
Pamiętaj, że jest to dobre rozwiązanie, jeśli jako użytkownik motywu rozumiesz, jak działają Twoje szablony. Wiem, że wszystkie moje treści na mojej stronie tytułowej muszą być w pełni opakowane w bloki Cover. Polegam na kodzie HTML wewnętrznego kontenera bloku okładki, aby upewnić się, że moja zawartość wygląda dobrze i mieści się w kontenerze o maksymalnej szerokości. Gdybym miał dodać prosty blok akapitu bez zawijania bloku okładki, nie wyglądałby dobrze, ponieważ nie miałby dopełnienia po bokach.
Uczynienie nagłówka witryny przezroczystym na pierwszym bloku Cover
Bardzo powszechną cechą nowoczesnych stron internetowych jest przejrzystość nagłówka na stronie głównej. Gdy użytkownik zaczyna przewijać stronę, nagłówek zmienia się w ustaloną stylizację i otrzymuje tło. Ale zachowanie przezroczystego nagłówka może wyglądać naprawdę ładnie, gdy widzimy kolory lub obraz za pierwszą sekcją.
Robię to na pierwszej stronie tej witryny. Spójrz! Na samej górze strony mój nagłówek nie ma tła i pokazuje tło fioletowej sekcji gradientu (bloku okładki) z tyłu. Gdy zaczniesz przewijać, otrzymuje stałe, stałe tło.
Pamiętaj, że musisz zdawać sobie sprawę z kolorów nagłówka i pierwszego tła okładki. Jeśli twój nagłówek składa się z białego logo i białych elementów menu (tak jak mój), nie możesz użyć tej sztuczki z blokiem Cover, który ma jasne tło. To sprawiłoby, że twój nagłówek byłby nieczytelny!
Jeśli chcesz to zrobić, pamiętaj, że wymaga to trochę wiedzy na temat Javascript. Ale to naprawdę bardzo proste. Przejdę dla Ciebie przez same podstawy:
Mój cały nagłówek to zawsze position: fixed. Ponieważ zwykle nie chcę, aby moja zawartość znikała za nagłówkiem, dodałem padding-top na elemencie body, przesuwając zawartość w dół poniżej nagłówka. Dodałem jednak regułę, że jeśli jesteśmy przy szablonie pierwszej strony, to dopełnienie nie zostanie dodane. Dzięki temu tylko na stronie tytułowej część body pojawi się za nagłówkiem. Następnie celuję w pierwszy blok Cover na pierwszą stronę i dodaję dodatkowe padding-top, aby upewnić się, że zawartość tego pierwszego bloku nie zbiegnie się za nagłówkiem – dając mu ładne, dobre wypełnienie po nagłówku.
A potem dodałem bardzo prosty kod JavaScript za pomocą jQuery:
Ten kod dodaje klasę „ navbar-fixed“, gdy strona jest przewijana dalej niż 60 pikseli w dół strony. A w moim CSS po prostu wybieram tę klasę i dodaję stały kolor tła. Bez tej klasy tło nagłówka jest przezroczyste na stronie głównej.
To są podstawy tego. Pobaw się CSS – dostosuj „punkt podpowiedzi” JavaScriptu i użyj na przykład transitionwłaściwości, aby uzyskać płynniejsze przejście po zastosowaniu koloru tła.
Świetne bloki na frontpage i landing page
WordPress oferuje pełną gamę gotowych do użycia bloków. Niektóre z nich są szczególnie przydatne przy budowaniu frontpage’a lub landing page’a. Jeśli znasz już wszystkie dostępne bloki, prawdopodobnie już o nich wiesz.
- Kolumny. Blok, który zezwala na zagnieżdżone bloki, co oznacza, że możesz dodać dowolne bloki wewnątrz każdej kolumny. Możesz również dodać kolumny wewnątrz bloku okładki. Idealny do porządkowania treści w kolumnach. Możesz określić liczbę kolumn, a dla każdej kolumny możesz określić ich szerokość. Wszystkie mogą mieć równe lub niestandardowe szerokości.
- Grupa. Kolejny blok, który pozwala na zagnieżdżone bloki. Świetnie nadaje się do ustawiania kolorowego tła wokół kilku innych bloków (takich jak tytuł i kilka akapitów).
- Przycisk. Nie ma strony głównej bez przycisków. Przyciski świetnie sprawdzają się jako wezwanie do działania i kierowanie odwiedzających tam, gdzie chcesz, aby się udali. Możesz dostosować wygląd i wygląd przycisku. Połącz to z niestandardowymi stylami bloków dla przycisków!
- Przekładka. Jeśli czujesz, że brakuje Ci miejsca w swoich sekcjach, dodaj blok Spacer – który jest po prostu przestrzenią bez zawartości. Możesz zdefiniować wysokość przekładki.
- Separator. Podobny do bloku Spacer, ale dodaje ładną linię. Kolejna opcja do wyraźnego oddzielenia treści. Dostosuj projekt linii w CSS swojego motywu lub dodaj niestandardowe style bloków.
- Galeria. Doskonały do prezentacji obrazów. Obsługuje wyrównanie bloków na całej szerokości, dzięki czemu możesz utworzyć galerię obrazów o pełnej szerokości na swojej stronie głównej.
- Media i tekst. Ładny, łatwy sposób na wyrównanie obrazu lub multimediów obok tekstu. W niektórych przypadkach może być lepszą opcją niż kolumny.
- Osadza: Youtube ++. WordPress oferuje wiele embedów dla mediów. Możesz na przykład odtwarzać wideo z YouTube o pełnej szerokości na swojej stronie głównej.
- Widgety: pole wyszukiwania, najnowsze posty, kalendarz++. WordPress oferuje kilka fajnych domyślnych elementów treści. Jeśli chcesz wyświetlić listę ostatnich postów lub pasek wyszukiwania na swoim landingu, zrób to.
Jeśli jednak czujesz, że brakuje Ci bloków, aby zrobić to, co chcesz, rozwiązaniem jest utworzenie własnych niestandardowych bloków.
Tworzenie niestandardowych bloków
Bardzo powszechną cechą strony głównej lub strony docelowej jest element „skrótu”; gdzie wybierasz post lub stronę i wyświetla blok z linkiem do posta, zawierający wyróżniony obraz, tytuł posta, ewentualnie fragment. W chwili pisania tego tekstu nie ma takiej opcji w standardowym WordPressie. Będziesz musiał ręcznie utworzyć ten skrót samodzielnie, ręcznie wstawiając ten sam wyróżniony obraz, co post, ręcznie wpisując tytuł posta i fragment oraz zawijając wszystko w link.
Innymi przykładami bloków, które są bardzo przydatne do budowania strony głównej i strony docelowej, są suwaki / karuzele, tabele porównawcze cen i referencje.
Aby zoptymalizować pod kątem tego rodzaju bloków, musisz albo znaleźć wtyczkę, która to daje (nie badałem tej opcji), albo zrobić je samodzielnie. Tworzenie własnych niestandardowych bloków wymaga znacznej wiedzy na temat Javascript i React oraz sporej ilości kodowania. Polecam pójście tą drogą, jeśli poważnie myślisz o byciu programistą WordPress.
Jeśli chcesz dowiedzieć się, jak tworzyć niestandardowe bloki dla Gutenberga, mam serię samouczków, która szczegółowo omawia to zagadnienie.
Możesz także wybrać łatwiejszą trasę i kupić Advanced Custom Fields Pro (ACF). Dzięki tej wtyczce możesz tworzyć niestandardowe bloki Gutenberga bez znajomości Javascriptu. Po prostu kontrolujesz wyjście PHP z bloków i pozwalasz ACF obsługiwać część JavaScript. Pamiętaj jednak, że tworzy to zależność twojego motywu od licencjonowanej wtyczki.
Wniosek
Mam nadzieję, że ten post pomógł Ci w dalszym rozwoju umiejętności i wiedzy z WordPress Gutenberg! W chwili pisania tego tekstu naprawdę brakuje informacji i doświadczenia, jak zoptymalizować swój motyw do Gutenberga. Szczególnie trudno było mi znaleźć coś na temat tego, jak ładnie zbudować stronę tytułową. Więc tego się nauczyłem, dużo eksperymentując i bawiąc się.