Zamiana nagłówka lub stopki: Wybierz fragment szablonu w widoku listy i wybierz jeden z wzorców projektu w prawym pasku bocznym.
Transkrypcja
Wprowadzenie
W tej lekcji stworzymy i dostosujemy nagłówek oraz stopkę. Motywy blokowe pozwalają nam budować całą witrynę przy użyciu bloków, w tym stron, wpisów, szablonów i fragmentów szablonów. Omówiliśmy już zagnieżdżanie bloków i korzystanie z wzorców bloków. W tej sesji utworzę i dostosuję nagłówek i stopkę mojej witryny, korzystając z wzorców dostarczonych wraz z moim motywem. Wzorce nagłówków i stopek stanowią solidną podstawę do pracy, a większość układu została już przygotowana.
Statyczna strona główna i strona z wpisami
Zanim zaczniemy, chciałbym zaznaczyć, że używam motywu blokowego Twenty Twenty-Four, a jeśli przejdę do „Ustawienia”, a następnie „Czytanie”, zauważysz, że ustawiłem statyczną stronę główną i stronę wpisów. Dzięki temu, jeśli przejdziemy do stron i otworzymy naszą stronę główną, zauważymy, że została ona przypisana do domyślnego szablonu strony, takiego samego jak inne strony w moim menu nawigacyjnym.
Wzorce nagłówków i stopek
Zacznijmy więc. Przejdziemy do edytora witryny, gdzie możemy edytować i aktualizować nasze szablony. Należy pamiętać, że na tym etapie wszystkie nasze szablony mają ten sam nagłówek i stopkę. Jeśli więc otworzymy na przykład szablon stron, zauważymy, że jest on taki sam jak szablon 404 i szablon pojedynczych wpisów. Co to oznacza? Oznacza to, że jeśli dostosujemy aktualny fragment szablonu nagłówka i stopki, automatycznie zaktualizuje się on we wszystkich szablonach, w których się znajduje. Jeśli jednak zastąpię nagłówek lub stopkę w jednym szablonie, będę musiał ręcznie zastąpić je we wszystkich innych szablonach, w których zamierzam ich używać.
Dodawanie wzorca nagłówka
Bez dalszych wstępów otworzę szablon strony i zacznę dostosowywać nagłówek i stopkę. Zacznijmy od nagłówka i otwórzmy widok listy. Chcę zastąpić nagłówek, więc kliknę trzy pionowe kropki, a następnie wybieram opcję „Zastąp nagłówek”. Teraz mogę wybierać spośród wielu wzorców dostępnych w moim motywie. Wybiorę nagłówek wewnątrz obrazka tła o pełnej szerokości. Po wybraniu zacznę modyfikować. Upewnię się, że zaznaczyłem blok „Okładka”, a następnie zastąpię obrazek tła obrazkiem, który już przesłałem do mojej biblioteki multimediów. Następnie zaznaczę blok „Logo witryny” i prześlę przezroczysty obrazek, który zapisałem jako logo w mojej bibliotece multimediów. Następnie ponownie wybieram blok „Okładka”, otwieram „Style” i zmieniam krycie na zero, ponieważ wybrałem jasny obrazek. Po zakończeniu wybieram blok „Tytuł witryny” i wybieram ciemniejszy kolor tekstu. Następnie klikam trzy pionowe kropki obok opcji „Typografia”, wybieram „Fonty” i wybieram nowy krój pisma. Chcę również powiększyć tytuł witryny, więc ustawiam niestandardowy rozmiar.
Następnie możemy przejść do bloku „Nawigacja”. Po wybraniu bloku „Nawigacja” otworzę „Style”, zmienię kolor tekstu, zmienię rodzinę kroju pisma i powiększę menu nawigacyjne, ustawiając niestandardowy rozmiar. Ostatnim krokiem jest dodanie wypełnienia wokół bloku „Wiersz”. Otworzę więc style i wymiary poniżej i dodam więcej wypełnienia, aby stworzyć więcej miejsca wokół tekstu. I gotowe, nasz nowy nagłówek jest gotowy. Następnym krokiem jest zapisanie, a następnie aktualizacja innych szablonów za pomocą nowego nagłówka, który utworzyłem przy użyciu wzorców. Na przykład otwórzmy szablon 404 i zastąpmy nagłówek. Teraz zobaczysz to poniżej „fragmenty szablonu”. Możemy zapisać, a następnie wykonać tę samą procedurę dla wszystkich innych odpowiednich szablonów.
Dostosowywanie wzorca stopki
Teraz możemy wrócić do naszego szablonu strony i przejść do stopki. W tym przypadku nie zamierzam zastępować stopki; zamierzam jedynie zaktualizować istniejący wzorzec, a następnie zostanie on automatycznie zaktualizowany we wszystkich innych szablonach. Najpierw powiększę blok „Logo witryny” i dodam slogan mojej witryny do bloku „Slogan witryny” poniżej tytułu witryny. Teraz możemy przejść do trzech kolumn po prawej stronie. Wybiorę tytuł środkowego bloku i zmienię go na „Szybkie odnośniki”. Następnie wybiorę blok „Nawigacja”, który został dodany z treścią zastępczą. W ustawieniach paska bocznego obok menu kliknę trzy pionowe kropki i wybiorę nawigację nagłówka. Otworzę również zakładkę ustawień i sprawdzę, czy orientacja jest pionowa. Teraz możemy przejść do następnej kolumny; tym razem zastąpię treść zastępczą nowym menu nawigacyjnym. Kliknę więc opcję „Utwórz nowe menu”, a następnie wybiorę stronę z polityką prywatności, którą już utworzyłem, oraz stronę z warunkami użytkowania. W ostatniej kolumnie upewnię się, że zaktualizowałem odnośniki do moich platform społecznościowych. Obecnie znajduje się tam zawartość zastępcza, dlatego zastąpię hashtag prawidłowym odnośnikiem. Teraz moja stopka jest gotowa, ale oczywiście mogę wprowadzić dalsze modyfikacje. Po zapisaniu możemy przejść do innych szablonów, na przykład szablonu 404, i zobaczymy, że stopka została automatycznie zaktualizowana. Oto widok interfejsu użytkownika, gdy odwiedzam moją stronę kontaktową.
Wnioski
Wierzę, że wzorce nagłówków i stopek będą dla ciebie inspiracją i zapewnią solidną podstawę do projektowania nagłówków i stopek.