Zapoznajmy się z edytorem witryny, który umożliwia projektowanie wszystkich elementów witryny
za pomocą bloków, od nagłówka po stopkę i wszystko pomiędzy.
Przejdźmy do sekcji „Wygląd” i kliknijmy „Edytor”.
Otworzy się edytor witryny.
Po lewej stronie znajduje się pasek boczny widoku witryny, to sprytne narzędzie pozwala zagłębić się
w kluczowe elementy witryny, w tym nawigację, style, strony, szablony i wzorce.
Celem tej lekcji jest dogłębne zrozumienie tych elementów.
Zacznijmy od góry, od nawigacji.
Tutaj możesz szybko przeglądać i dostosowywać wszystkie swoje menu.
o twoje centrum dowodzenia do zarządzania menu.
Możesz bezpośrednio wprowadzać proste zmiany,
takie jak zmiana kolejności.
Po kliknięciu trzech pionowych kropek obok nazwy pozycji menu możesz
zmienić nazwę, powielić lub usunąć pozycję zgodnie z potrzebami.
Po otwarciu w trybie edycji możesz wprowadzać pewne zmiany bez rozpraszania uwagi.
Aktualizacje zostaną zsynchronizowane w całej witrynie.
Możesz dodać nowe strony lub inne pozycje menu, klikając ikonkę plusa.
Zauważysz, że blok nawigacji jest zablokowany w tym obszarze.
Jeśli chcesz zmienić styl menu nawigacyjnego, musisz otworzyć szablon
lub część szablonu, której jest on częścią.
Następnie porozmawiajmy o stylach.
Po wybraniu opcji „Style” będziesz mógł przeglądać różne kombinacje stylów
dostępne w ramach wybranego motywu.
Po kliknięciu opcji „Edytuj style” możesz przeglądać style i zmieniać
typografię, kolory oraz układ swojej witryny.
Zobaczmy, jak to działa.
Po kliknięciu opcji „Typografia” możesz zarządzać ustawieniami typograficznymi tekstu,
odnośników, nagłówków, podpisów i przycisków.
Wspaniałą nowością jest to, że masz teraz dostęp do biblioteki krojów pisma.
W sekcji „Fonty” zobaczymy kroje pisma dodane do naszego motywu.
Po kliknięciu opcji „Zarządzaj krojem pisma” możemy instalować, usuwać i włączać lokalne kroje pisma
oraz Google Fonts w całej witrynie z dowolnym motywem blokowym.
Po kliknięciu opcji „Instaluj kroje pisma” można zainstalować dowolny font Google
w witrynie internetowej, a po kliknięciu opcji „Prześlij” można przesłać krój pisma z komputera.
Należy upewnić się, że ma się prawo do używania przesyłanych krojów pisma.
Pod opcją „Typografia” widoczne są kolory.
W tym miejscu można również zmienić kolory różnych globalnych elementów witryny.
Po przejściu do opcji „Układ” można zauważyć, że można nawet kontrolować elementy,
takie jak wypełnienie i odstępy między blokami.
Jeśli spojrzysz dalej w dół, możesz dostosować wygląd
poszczególnych bloków dla całej witryny.
Aby zobaczyć, jak te bloki zmienią się po edycji, przejdź do „Księga stylów” swojej witryny.
Zauważysz małe oko u góry.
Księga stylów pozwala użytkownikowi wyświetlić podgląd każdego bloku, który można wstawić do witryny.
Daje to możliwość podglądu tego, jak style globalne wpłyną na wyświetlane bloki,
bez konieczności wstawiania tych bloków do szablonu przez użytkownika.
Należy również pamiętać, że styl bloków można dostosować w księdze stylów.
Zaktualizujmy na przykład blok „Przyciski”,
zmieniając kolor tła i wielkość liter na wielkie.
Jeśli podoba ci się efekt, możesz kliknąć „Zapisz”.
Należy również pamiętać, że zmiana pojedynczego bloku w księdze stylów ma pierwszeństwo
przed globalnymi stylami, które zostały ustawione.
Skoro już tu jesteśmy, musimy również porozmawiać o zmianach stylów.
Kliknijmy na opcję „Wersje stylu” obok ikonki „Księga stylów”.
Zmiany stylów otworzą się podczas edycji szablonu w księdze stylów.
Funkcja zmian stylów umożliwia przeglądanie zmian stylów w czasie w sposób wizualny
i pozwala łatwo przywrócić poprzedni stan, jeśli znajdziesz styl, który bardziej ci odpowiada
lub chcesz przywrócić poprzednią wersję.
Wystarczy wybrać wersję, a następnie kliknąć „Zastosuj”.
W tym przykładzie edytuję szablon i postępuję zgodnie z tą samą procedurą.
Otwieram zmiany stylów, wybieram poprzedni styl, a następnie klikam „Zastosuj”, aby przywrócić poprzednią wersję.
Po kliknięciu trzech pionowych kropek obok stylów można zresetować
style i dodać dodatkowy kod CSS.
W sekcji „Style” możemy przejść do „Strony”, aby tworzyć i publikować strony.
Aby dodać nową stronę, kliknij ikonkę plusa obok stron i utwórz wersję roboczą.
Możesz oczywiście utworzyć nową stronę również w kokpicie, WP Admin.
Następnie otwórzmy jedną z naszych istniejących stron, moją stronę „O mnie”.
Po otwarciu strony należy pamiętać o dodaniu treści do bloku „Treść”.
Innymi słowy, blok „Treść” jest domem lub kontenerem dla wszystkich
treści.
Drugą rzeczą, o której należy pamiętać, jest to, że podczas edycji strony nie można
dostosowywać nagłówka i stopki.
Wszystko to jest częścią zarządzania szablonami.
Po kliknięciu nagłówka pojawi się komunikat „Edytuj szablon,
aby edytować ten blok”.
Jeśli chcesz zmodyfikować szablon przypisany do tej strony, możesz kliknąć opcję
„Edytuj szablon”.
W tym przykładzie spowoduje to przejście do szablonu strony.
Tutaj możesz zmodyfikować nagłówek i stopkę.
Nie będzie można dodawać treści do szablonu.
Treść jest oczywiście dodawana do wpisów i stron.
Blok treści jest w tym kontekście jedynie symbolem zastępczym.
To prowadzi nas do kolejnego tematu, a mianowicie szablonów.
Szablony określają strukturę wyświetlania treści.
Po wybraniu opcji szablonów zobaczysz szereg szablonów dostępnych w ramach motywu,
czyli szablonów wbudowanych.
Na przykład szablon strony wyświetlający pojedynczą stronę, szablon indeksu,
który jest szablonem rezerwowym, lub szablon pojedynczego wpisu wyświetlający układ pojedynczych wpisów.
Na samym dole zobaczymy wszystkie szablony niestandardowe.
Po kliknięciu ikonki plusa obok szablonów można dodać różne nowe szablony, nawet szablon niestandardowy,
który można zastosować do dowolnego wpisu lub strony.
Otwórzmy szablon strony, aby lepiej zrozumieć, jak działa szablon.
Szablon zapewnia strukturę.
Szablon zazwyczaj zawiera część szablonu nagłówka i część szablonu stopki.
Blok „Treść wpisu” pobiera treść ze strony lub wpisu przypisanego do szablonu.
Szablon służy więc wyłącznie do modyfikacji układu lub wyglądu strony, a mianowicie nagłówka, stopki,
a nawet paska bocznego.
Edytor witryny wprowadza zatem wyraźne rozróżnienie między edycją szablonu a edycją strony.
Możesz modyfikować nagłówek i stopkę w szablonie.
Jedną z dostępnych opcji jest kliknięcie trzech pionowych kropek i wybranie opcji
„Zastąp nagłówek”.
Następnie możesz zastąpić bieżący nagłówek jednym z istniejących elementów szablonu
nagłówka lub wzorców nagłówka dostarczonych wraz z motywem.
Inną opcją jest wybranie nagłówka, a następnie kliknięcie przycisku „Edytuj”.
Umożliwi to modyfikowanie nagłówka lub stopki w trybie edycji szablonu
bez żadnych innych zakłóceń.
Aby przypisać nowy szablon do strony lub wpisu, otwórz odpowiednią treść, w tym przypadku
moją stronę „O mnie”, a następnie otwórz ustawienia paska bocznego po prawej stronie.
Obok opcji „Szablon” kliknij nazwę szablonu, wybierz opcję „Zamień szablon”, a następnie
wybierz własny szablon, który chcesz przypisać do swojej strony lub wpisu.
Warto również wspomnieć, że po kliknięciu opcji „Zarządzaj wszystkimi szablonami”, a następnie
wybraniu opcji „Edycja zbiorcza”, można przeglądać i filtrować szablony w widoku tabeli
lub siatki.
Po ponownym wybraniu opcji „Edycja zbiorcza” dostępnych jest więcej opcji filtrowania.
Należy pamiętać, że w ten sam sposób można przeglądać i filtrować strony oraz części szablonów.
Na koniec porozmawiajmy o wzorcach.
W górnej części ekranu można wyświetlić wszystkie dostępne wzorce.
Po wybraniu opcji „Moje wzorce” można tworzyć własne wzorce zsynchronizowane i niezsynchronizowane
oraz zarządzać nimi.
Pod sekcją „Moje wzorce” możemy wyświetlić wszystkie nasze własne wzorce oraz wzorce dostarczane
wraz z naszym motywem w odpowiednich kategoriach.
Pod sekcją „Części szablonu” możemy również tworzyć nagłówki, stopki i ogólne części szablonu
oraz zarządzać nimi.
Części szablonu są zasadniczo wzorcami.
Są to zsynchronizowane komponenty wielokrotnego użytku, które można wykorzystać w całej witrynie.
Zacznijmy od sekcji „Moje wzorce”.
Aby utworzyć własny wzorzec, kliknij przycisk „Wstaw” obok wzorców, a następnie wybierz opcję
„Utwórz wzorzec”.
Po nadaniu nazwy możesz dodać wzorzec do odpowiedniej kategorii, a następnie zdecydować,
czy chcesz go zsynchronizować.
Zsynchronizowany wzorzec zostanie zsynchronizowany w całej witrynie, co oznacza, że jeśli zmienisz wzorzec
w jednym miejscu, zostanie on zaktualizowany wszędzie tam, gdzie jest używany.
Możesz również wyłączyć tę opcję, jeśli wolisz mieć wzorzec niesynchronizowany.
Wzorce niesynchronizowane to zwykłe wzorce, które można edytować niezależnie.
Po powrocie do obszaru własnych wzorców zauważysz, że wzorce zsynchronizowane mają
fioletową ikonę, a wzorce niesynchronizowane nie.
Następnie zauważysz, że wzorce dołączone do motywu są zablokowane
i nie można ich edytować.
Jednak po kliknięciu trzech pionowych kropek pod wzorcem można go
skopiować do obszaru „Moje wzorce”.
W dolnej części możemy tworzyć nagłówki, stopki i ogólne elementy szablonu oraz zarządzać nimi.
Masz tu dwie opcje.
Możesz tworzyć własne nagłówki i stopki lub dostosowywać wzorce fragmentu szablonu, które są dostarczane
wraz z motywem.
Aby utworzyć własny fragment szablonu, kliknij ikonkę plusa u góry obok wzorców
i wybierz opcję „Utwórz fragment szablonu”.
Dodając nowy fragment szablonu, możesz wybrać między ogólnymi fragmentami szablonu
nagłówka i stopki.
Ogólne fragmenty szablonu nie są powiązane z żadnym konkretnym obszarem,
więc pamiętaj, aby nadać im opisową nazwę.
Po otwarciu fragmentu szablonu w tym miejscu będziesz mógł modyfikować i edytować swój
fragment szablonu w trybie edycji szablonu bez żadnych zakłóceń.
Możesz również otworzyć odpowiedni szablon, w tym przypadku mój własny szablon,
a następnie zmodyfikować fragment szablonu nagłówka lub stopki z poziomu szablonu.
Jak pokazano wcześniej, możesz łatwo zastąpić jeden ze swoich nagłówków lub stopek wzorcem
lub istniejącym fragmentem szablonu z biblioteki.
Na koniec chciałbym również zwrócić uwagę na niezwykle pomocną funkcję o nazwie paleta poleceń,
która pozwoli ci zaoszczędzić mnóstwo czasu i pomoże ci efektywniej poruszać się po edytorze witryny.
Paleta poleceń umożliwia szybkie wykonywanie zadań i poruszanie się po edytorze
witryny.
Możesz na przykład wpisać „new”, aby utworzyć stronę lub szablon, lub po prostu nazwę obszaru,
do którego chcesz przejść.
Na przykład „pattern”, aby zarządzać wszystkimi moimi wzorcami.
Dostęp do palety poleceń można uzyskać za pomocą skrótu klawiszowego command+k na komputerze Mac
lub control+k w systemie Windows.
Znajdziesz ją również na pasku bocznym widoku witryny, klikając ikonkę wyszukiwania.
Możesz też po prostu kliknąć pasek tytułu.
To kończy nasz krótki przegląd możliwości edytora witryny.