Transkrypcja
Wprowadzenie
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.
Nawigacja
Zacznijmy od góry, od nawigacji. Tutaj możesz szybko przeglądać i dostosowywać wszystkie swoje menu. To 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ą.
Style
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.
Księga stylów
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.
Wersje stylu
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.
Strony
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.
Szablony
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ń.
Przypisywanie szablonu
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.
Zarządzanie szablonami
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.
Wzorce
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.
Własne wzorce
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”.
Fragmenty szablonu
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.
Paleta poleceń
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.
Wnioski
To kończy nasz krótki przegląd możliwości edytora witryny.
Praktyczne
Przejdź do WordPress Playground i wykonaj poniższe zadania, aby sprawdzić swoją wiedzę.
- Wybierz inną kombinację stylów dostępną w ramach motywu.
- Dodaj Google Font do swojej biblioteki pod menu „Typografia”.
- Przypisz własny szablon do przykładowej strony, np. „Strona z panelem bocznym”. Możesz to zrobić po otwarciu strony z poziomu kokpitu lub edytora witryny.