Transkrypcja
Efekty kształcenia
W tej lekcji zajmiemy się bardziej szczegółowo szablonami. Po zakończeniu tej lekcji będziemy umieli odróżnić strony od szablonów, wiedzieć, jak modyfikować jeden z naszych podstawowych szablonów, jak dodać nowy szablon, a na koniec, jak przypisać własny szablon do strony lub wpisu.
Definicja
Szablon określa strukturę wyświetlania strony. Zazwyczaj obejmuje on fragment szablonu nagłówka, obszar treści oraz fragment szablonu stopki. Uważam, że ważne jest, aby od samego początku wyjaśnić następujące kwestie. Szablony nie służą do publikowania treści; szablony wpisów lub stron wyświetlają treść za pomocą bloku treści wpisu. Szablony, jak sama nazwa wskazuje, są szablonami projektowymi, które można zastosować do pojedynczych lub wielu stron i wpisów.
Odkrywanie szablonów
Aby uzyskać dostęp do szablonów, przejdź do sekcji „Wygląd” i kliknij „Edytor”. Spowoduje to przejście do edytora witryny. Edytor służy do dostosowywania stylów całej witryny, edytowania stron, modyfikowania szablonów, a także zarządzania wszystkimi różnymi wzorcami w witrynie. Rozpoczynając tworzenie nowej witryny internetowej, możesz edytować istniejące szablony lub dodawać nowe, a motyw, którego używasz, określi, które istniejące lub wbudowane szablony są dostępne do użycia.
Pierwszym z nich jest szablon strony, który tworzy strukturę wyświetlania poszczególnych stron. Następnym jest szablon pojedynczego wpisu, który wyświetla pojedynczy wpis na blogu. Szablon indeksu wyświetla wpisy, a szablon 404 wyświetla się, gdy nie znaleziono żadnej treści. Wszystkie te szablony można oczywiście modyfikować według własnego uznania. Istnieją również inne wbudowane szablony, które warto poznać, na przykład szablon pusty. Aby dodać nowy szablon, kliknij ikonkę „Wybieraka” lub plusa obok szablonów. Pojawi się okno modalne, w którym można wybrać jedną z różnych opcji szablonów. Możesz na przykład utworzyć szablon dla konkretnej strony, szablon dla wszystkich kategorii wpisów lub dla pojedynczej kategorii. Możesz nawet utworzyć własny szablon, który można zastosować do dowolnego wpisu lub strony. Po utworzeniu nowego szablonu, w tym przypadku własnego szablonu i nadaniu mu nazwy, zostaniesz zapytany, czy chcesz wybrać wzorzec, a jeśli chcesz zacząć od pustego szablonu, po prostu wybierz opcję „Pomiń”.
Edytowanie szablonów
Jak edytować szablony? Po wybraniu odpowiedniego szablonu możesz kliknąć ikonkę „Edytuj” na pasku bocznym obok opcji „Strony” lub na ekranie szablonu po prawej stronie. Po otwarciu szablonu możesz rozpocząć edycję fragmentu szablonu nagłówka i stopki.
Zatrzymajmy się na chwilę, aby zastanowić się nad tym. Podczas edycji szablonu należy pamiętać o rozdzieleniu części dynamicznych i statycznych. Część dynamiczna to część treści, która będzie się zmieniać dla każdej strony lub wpisu korzystającego z szablonu. Jak widać na tym przykładzie, treść ze strony lub wpisu będzie wyświetlana w miejscu, w którym do szablonu dodano blok treści wpisu. Części statyczne to części szablonu, które pozostają niezmienne, takie jak nagłówek i stopka. Dlatego nie dodajemy żadnej treści do szablonu. Edytor witryny wyraźnie rozróżnia edycję treści strony i jej szablonu, ułatwiając przełączanie się między tymi dwoma trybami i wyświetlanie ich w odpowiednim kontekście.
Zobaczmy, jak to działa. Otwórzmy jedną z naszych stron. W tym przypadku moją przykładową stronę. Po otwarciu strony możemy również otworzyć widok listy. Po wybraniu bloku „Treść wpisu” zauważymy, że cała dodana przez nas treść została dodana do bloku „Treść wpisu”. Zobaczymy to również w pasku bocznym ustawień po prawej stronie.
Ale co się stanie, jeśli spróbuję edytować nagłówek i stopkę? Kliknijmy na nagłówek, aby spróbować go zmodyfikować. Pojawi się komunikat z informacją, że aby edytować ten blok, należy edytować szablon. To samo dotyczy stopki. Jeśli spróbujemy edytować stopkę, zostaniemy poproszeni o przejście do szablonu. Aby to zrobić, możemy kliknąć opcję „Edytuj szablon” w pasku bocznym ustawień po prawej stronie u dołu. Spowoduje to przejście do szablonu przypisanego do odpowiedniej strony. Teraz możemy przejść do aktualizacji nagłówka i stopki. Zauważymy również, że blok „Treść wpisu” jest tylko symbolem zastępczym. Nie możemy tutaj dodawać żadnej treści.
Następnie zaznaczę stopkę, kliknę trzy pionowe kropki, a następnie zastąpię tę stopkę jednym z moich istniejących fragmentów szablonu stopki. Po zakończeniu kliknę przycisk „Zapisz”. Zaktualizowałem szablon strony. Jeśli chcesz powrócić do strony, kliknij przycisk „Wstecz” na pasku narzędzi. Spowoduje to powrót do strony, gdzie możesz modyfikować zawartość. Szablon można edytować osobno. Po powrocie do szablonów w pasku bocznym zauważysz, że na samym dole znajduje się opcja zarządzania wszystkimi szablonami. Po jej wybraniu będziesz mógł zmienić nazwę i usunąć utworzone własne szablony lub wyczyścić dostosowania wbudowanych szablonów, które zmodyfikowałeś.
Przypisywanie szablonów
W następnej sekcji omówimy przypisywanie różnych szablonów do stron lub wpisów. Obecnie znajdujemy się na stronie głównej mojej przykładowej witryny i przypisaliśmy tę stronę do szablonu strony. Stworzyłem własny szablon z nowym nagłówkiem i stopką.
Aby przypisać nowy własny szablon, możemy kliknąć opcję „Edytuj stronę” u góry lub przejść do kokpitu, otworzyć strony, wybrać odpowiednią stronę, w tym przypadku stronę przykładową. Po otwarciu strony zobaczymy naszą treść, ale po otwarciu ustawień paska bocznego po prawej stronie zobaczymy, że ta strona została przypisana do szablonu strony, szablonu domyślnego. Po kliknięciu nazwy zauważysz, że możesz dodać nowy szablon z tego miejsca. Możesz edytować szablon przypisany do strony lub, po kliknięciu menu rozwijanego, wybrać lub przypisać nowy szablon do tej strony. Wybiorę teraz własny szablon, który stworzyłem. Po wykonaniu tej czynności zaktualizuję stronę. Możemy wyświetlić podgląd strony w nowej karcie i teraz zobaczymy, że ta strona ma nowy nagłówek i stopkę dzięki własnemu szablonowi, który przypisałem do tej strony.
Elementy szablonu nagłówka i stopki
Na koniec omówimy pokrótce elementy szablonu nagłówka i stopki, których używamy do konfiguracji naszych szablonów. Element szablonu nagłówka lub stopki można edytować bezpośrednio w szablonie. W tym przykładzie edytuję element szablonu nagłówka i umieszczam blok tytułu witryny oraz blok sloganu witryny w ułożonym w stosie bloku grupy. Następnie otwieram pasek boczny ustawień i usuwam odstępy między dwoma blokami. Po wybraniu fragmentu szablonu nagłówka lub stopki pojawi się opcja „Edytuj”. Po wybraniu opcji „Edytuj” można edytować fragment szablonu w trybie edycji szablonu bez żadnych zakłóceń.
Inną opcją jest przejście do sekcji „Wzorce” w pasku bocznym widoku witryny. Po wybraniu sekcji „Wzorce” można przewinąć stronę do dołu, gdzie można wyświetlić i modyfikować nagłówek, stopkę oraz ogólne fragmenty szablonu. Aby dodać nowy fragment szablonu, kliknij ikonkę plusa obok sekcji „Wzorce” i wybierz opcję „Utwórz fragment szablonu”. Możesz wybrać między ogólnymi, nagłówkowymi i stopkowymi fragmentami szablonu. Ogólne fragmenty szablonu nie są powiązane z żadnym konkretnym obszarem; pamiętaj, aby nadać fragmentowi szablonu opisową nazwę. Po kliknięciu trzech poziomych kropek poniżej fragmentu szablonu możesz zmienić nazwę, powielić go lub usunąć. Po wybraniu fragmentu szablonu możesz go modyfikować w trybie edycji bez żadnych zakłóceń, jak pokazano wcześniej.
Wnioski
Mamy nadzieję, że teraz lepiej rozumiesz, jak działają szablony. Podsumowując, szablon określa strukturę wyświetlania treści, co zazwyczaj odbywa się za pomocą fragmentu szablonu nagłówka i stopki. Szablony można przypisywać do pojedynczych lub wielu stron.