Jak zbudować nagłówek w WordPressie bez wtyczki

Nagłówek to rekord, widoczny w panelu administracyjnym WordPress na liście jak strona i edytowany w tym samym edytorze blokowym. Ta jedna decyzja sprawia, że wtyczka do nagłówków przestaje być potrzebna.

Inne motywy budują nagłówek w innym miejscu. Blocksy i Astra trzymają swoje kreatory nagłówka w Customizerze, panelu ustawień obok witryny, z dala od edytora, w którym piszesz strony. Nasze porównanie z Blocksy zestawia obie metody obok siebie.

Zagnieżdżanie

Rekord nagłówka zawiera Header Root. Root zawiera Header Container, który decyduje, czy nagłówek jest ograniczony do szerokości treści, na pełną szerokość, czy jedna wersja obowiązuje przy jednym punkcie przełamania, a druga poza nim. Kontener zawiera Header Zones, a strefa to komórka w wierszu nagłówka. Logo umieszcza się w pierwszej, nawigację w następnej, a ikonę wyszukiwania i koszyk w ostatniej.

W rodzinie nagłówka jest łącznie 22 bloki, a na typowej witrynie zwykle wystarczają cztery lub pięć z nich. Reszta przydaje się wtedy, gdy zachodzi potrzeba wyszukiwarki sklepu, linku do innego języka albo bloku z godzinami otwarcia w rogu strony.

Strefy odpowiadają za układ, więc prawie nigdy nie trzeba walczyć z klasami wyrównania.

• Przesuń strefę do krawędzi. Lewa strefa na logo, środkowa na menu, prawa na przyciski akcji to układ, do którego najczęściej dochodzą witryny.
• Grupuj elementy, które do siebie należą. Ikona wyszukiwania, koszyk i przycisk umieszczone w jednej strefie tworzą skupisko i są rozmieszczone jako jedna grupa.
• Zmiana kolejności dla każdego breakpointu. Strefa, która na komputerze znajduje się na trzecim miejscu, może na telefonie znaleźć się na pierwszym, bez drugiego rekordu nagłówka.
• Ogranicz strefę do kategorii urządzeń. Ustaw strefę tak, by pomijała urządzenia bez miejsca na nią, dzięki czemu nic nie trzeba później ukrywać w CSS.
• Dodaj własne klasy do strefy, gdy chcesz się do niej odwołać z własnego arkusza stylów.

Najpierw zbuduj układ na komputerze i nie ruszaj go, dopóki nie pojawią się wszystkie elementy. Decyzje o układzie są znacznie łatwiejsze, gdy prawdziwa treść jest już w wierszu.

Zachowanie wynika z presetów, czyli zestawów ustawień układu, które stosuje się jednym kliknięciem, a następnie dostosowuje. Wybierz pożądane zachowanie i zmień później dowolne ustawienia.

• Przezroczysty. Bez tła, więc to, co znajduje się za nagłówkiem, prześwituje. Połącz go z ciemnym lub jasnym wariantem logo, aby logotyp tekstowy pozostał czytelny.
• Półprzezroczyste. Tło, które pozwala zobaczyć obraz za nim i zachować czytelność tekstu. Zwykle bezpieczniejszy wybór niż zatłoczone zdjęcie.
• Pływający, oraz pływający półprzezroczysty lub pływający mały, gdy nagłówek znajduje się wewnątrz strony z odstępem wokół, z dala od krawędzi okna.
• Pełna szerokość, przyklejony. Obejmuje cały widok i pozostaje na miejscu podczas przewijania strony.
• Przyklejony przy przewijaniu w górę. Znika z góry, gdy odwiedzający przewija w dół, i wraca, gdy przewija z powrotem w górę, dzięki czemu długie strony odzyskują miejsce.

Ustawienia dla całej witryny, które za nimi stoją

Opcje nagłówka to największa sekcja w Opcjach motywu: obejmuje 94 z 533 pól i odpowiada za rzeczy, których żaden pojedynczy rekord nie powinien posiadać: domyślny nagłówek, zachowanie przyklejonego nagłówka, wysokość, odstępy i punkt przełamania dla urządzeń mobilnych. Import dema wypełnia je wszystkie, a te, na których zależy, można zmienić.

Rekord nic nie robi, dopóki coś na niego nie wskazuje. Są dwa poziomy, a działają one tak samo dla każdego elementu nagłówka i stopki.

Ustawienie domyślne dla całej witryny

Ustaw domyślny nagłówek w Opcjach motywu, a każda strona z niego skorzysta. Zrób to samo w przypadku górnego paska, wyglądu tytułu strony i stopki. To ustawienie sprawia, że nowa strona od razu wygląda dobrze po jej opublikowaniu.

Nadpisanie dla pojedynczej strony

Każda strona może nadpisać dowolne z tych ustawień we własnych ustawieniach. Landing page kampanii ma przezroczysty nagłówek i nie ma paska górnego; strona kontaktowa zachowuje standardowy. Nic nie jest powielane, a nic nie trzeba pamiętać później, ponieważ nadpisanie obowiązuje na stronie, której dotyczy.

Górne paski

Pasek górny to osobny rekord z własnymi blokami: numer telefonu, godziny otwarcia, przełącznik języka, ogłoszenie. Blok Header Topbar umieszcza go nad wierszem nagłówka. Ponieważ jest oddzielny, komunikat na czas świąt zmienia się w całej witrynie bez otwierania nagłówka.

Źródła

Tam, gdzie ten przewodnik opisuje coś spoza samego Canvas, poniżej znajdziesz oficjalne strony, na których to udokumentowano.

• Ekran Menu (Wygląd)wordpress.org · Miejsce, w którym tworzy się menu WordPress i przypisuje je do lokalizacji oferowanych przez motyw
• Zrozumienie kryterium sukcesu 2.5.8: Rozmiar celu (minimalny)w3.org · Dlaczego elementy dotykowe muszą mieć minimalny rozmiar 24 na 24 piksele CSS