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 przyjrzymy się bliżej wykorzystaniu fragmentów szablonów. Po zakończeniu tej lekcji będziesz w stanie opisać, czym są fragmenty szablonu i jak działają, edytować fragment szablonu i zastąpić go w szablonie. Jeśli odwiedzisz dobrze zaprojektowaną witrynę internetową, zauważysz, że jedną z jej mocnych stron jest spójność. Nagłówki, stopki i paski boczne często mają tę samą lub podobną treść, aby ułatwić użytkownikom znalezienie informacji, których szukają, niezależnie od tego, gdzie się znajdują w witrynie.
Czy aby uzyskać ten efekt, projektanci witryn internetowych muszą tworzyć nagłówki, stopki i paski boczne od podstaw na każdej stronie? Krótka odpowiedź brzmi: nie. Dzięki motywom blokowym WordPressa można korzystać z funkcji znanej jako fragment szablonu.
Czym są fragmenty szablonu?
Po pierwsze, czym są fragmenty szablonu? Fragmenty szablonu to grupy bloków, których można używać do tworzenia powtarzających się fragmentów szablonu, takich jak nagłówek, stopka i pasek boczny. Zobaczmy, jak to działa. Gdy jesteś w kokpicie WordPress, przejdź do sekcji „Wygląd”, a następnie kliknij „Edytor”. Spowoduje to przejście do edytora witryny, a następnie otworzymy jeden z naszych szablonów, w tym przypadku szablon strony głównej bloga.
Tworzymy i modyfikujemy nasze szablony nagłówków i stopek w ramach szablonu. Niektóre motywy blokowe oferują więcej lub mniej opcji, ale prawie wszystkie są dostarczane z gotowymi nagłówkami i stopkami, tak jak widać tutaj w ramach motywu Twenty Twenty-Four. WordPress jeszcze bardziej uprościł tę czynność, udostępniając gotowe do użycia i modyfikacji wzorce nagłówków i stopek. Po kliknięciu trzech pionowych kropek szablonu nagłówka i wybraniu opcji „Zastąp nagłówek” najpierw zobaczysz istniejące fragmenty szablonu. Są to fragmenty szablonu, które już utworzyłem. Poniżej znajdują się wzorce szablonów nagłówków. Możesz wybrać dowolny wzorzec dostępny w twoim motywie. Jak wspomniano, niektóre motywy mogą oferować więcej, a inne mniej. Działa to dokładnie tak samo w przypadku stopek.
Edytowanie fragmentu szablonu
Zacznijmy od edycji szablonu nagłówka. Po kliknięciu opcji „Edytuj” na pasku narzędzi bloga możesz pracować nad szablonem nagłówka w trybie edycji bez żadnych innych zakłóceń. Najpierw otwórzmy widok listy. Następnie dodam logo mojej witryny do szablonu nagłówka. Po wybraniu bloku „Logo witryny” mogę przesłać obrazek z biblioteki multimediów lub komputera.
Następnie zaznaczę blok „Tytuł witryny” i dodam tytuł tej witryny. Potem zapiszę fragment szablonu nagłówka i wrócę do szablonu strony głównej bloga. Przypominam: fragmenty szablonu są synchronizowane i będą aktualizowane wszędzie tam, gdzie zostały użyte. Zauważysz, że kolor fioletowy wskazuje, kiedy wzorzec jest zsynchronizowany. Zobaczmy to w praktyce na jednym z naszych innych szablonów. Kiedy otworzymy nasz szablon strony, zobaczymy, że nagłówek jest dokładnie taki sam. Kiedy otworzymy nasz szablon 404, zobaczymy, że zmiany zostały zastosowane również tutaj, ponieważ fragmenty szablonu są synchronizowane.
A co, jeśli chcesz mieć inny nagłówek na stronie głównej, ale reszta witryny ma mieć standardowy nagłówek? W takim przypadku należy utworzyć nowy szablon nagłówka lub zastąpić nagłówek wzorcem i dodać go do szablonu strony głównej bloga lub strony głównej. Zmodyfikuję szablon strony głównej bloga, ponieważ jako stronę główną wybrałem stronę z wpisami. Wybieram więc nagłówek, klikam trzy pionowe kropki, a następnie wybieram opcję „Zastąp nagłówek”. Teraz możesz zastąpić nagłówek strony głównej wzorcem lub istniejącym fragmentem szablonu. Zastąpię nagłówek istniejącym fragmentem szablonu nagłówka, który już utworzyłem i nazwałem „Nagłówek banera”. Teraz moja strona główna będzie miała swój własny, unikalny nagłówek. Po zapisaniu możemy przejrzeć inne szablony, aby sprawdzić, czy nadal mają standardowy nagłówek.
Tworzenie fragmentu szablonu od podstaw
Na koniec omówimy tworzenie fragmentu szablonu od podstaw. Przejdź do sekcji „Wzorce”, a następnie przewiń w dół do fragmentów szablonu. Tutaj możesz wyświetlić wszystkie istniejące nagłówki, stopki i ogólne fragmenty szablonu. Aby utworzyć nowy fragment szablonu, kliknij ikonkę plusa obok wzorców i wybierz opcję „Utwórz fragment szablonu”. W tym miejscu możesz wybrać ogólny fragment szablonu, który nie jest powiązany z żadnym konkretnym obszarem, fragment szablonu nagłówka lub fragment szablonu stopki. W tym przypadku utworzymy fragment szablonu stopki.
Najpierw musimy nadać mu odpowiednią nazwę. W tym przypadku będzie to „Czterokolumnowa stopka”, a następnie możemy kliknąć „Utwórz”. Spowoduje to ponowne przejście do trybu podświetlania; stąd możemy zacząć budować od podstaw. Skorzystam ze skrótu i pobiorę wzorzec z katalogu wzorców. Przejdź do strony wordpress.org, kliknij „Extend” i wybierz „Wzorce”. Stąd możesz wybierać spośród tysięcy wzorców. Wybiorę opcję „Wkład społeczności”, kliknę „Stopki”, a następnie można wyszukać odpowiedni wzorzec. Po znalezieniu wzorca, który ci się podoba, możesz go skopiować, wrócić do swojej witryny i wkleić. Teraz możesz zacząć modyfikować go zgodnie ze swoimi potrzebami. Po aktualizacji możemy wrócić do obszaru wzorców i zauważysz, że nowa stopka jest częścią istniejących elementów szablonu. Możesz dodać go do dowolnego szablonu. Po wybraniu opcji Zarządzaj wszystkimi fragmentami szablonu możesz zmienić nazwę i usunąć niestandardowe fragmenty szablonu lub wyczyścić dostosowania fragmentu szablonu dostarczonych przez motyw. Mam nadzieję, że teraz czujesz się komfortowo, edytując szablony i tworząc nagłówek i stopkę dla swojej witryny.
Practical
Przejdź do WordPress Playground i wykonaj następujące zadania, aby sprawdzić swoją wiedzę:
- Zastąp obecny nagłówek szablonu strony głównej bloga dowolnym wzorcem fragmentu szablonu nagłówka dostarczonym wraz z motywem.
- Zastąp aktualną stopkę szablonu strony głównej bloga nowym wzorcem stopki dostarczonym wraz z motywem.