Transkrypcja
Wprowadzenie
W tej lekcji wykorzystamy dotychczasową wiedzę, aby skonfigurować nasze strony, wpisy, logo witryny i menu nawigacyjne.
Konfiguracja stron
Najpierw stwórzmy nasze strony. Przejdę do stron, kliknę „Dodaj nową stronę”, a następnie będę mógł dodać lub wybrać szablon dostarczony wraz z moim motywem. Korzystam z domyślnego motywu Twenty Twenty-Four. Wybiorę wzorzec, który mi się podoba, i nazwę go „Strona główna”. Po opublikowaniu wrócę do stron i dodam kolejną stronę. Tym razem nie będę wybierać wzorca i nazwę tę stronę „Blog”. Następnie utworzę stronę „O nas” i wybiorę odpowiedni wzorzec. Na koniec utworzę również stronę „Kontakt” bez wybierania wzorca. Teraz mam już gotowe strony.
Ustawianie wyświetlania strony głównej
Następnie przejdę do sekcji „Ustawienia” i kliknę opcję „Czytanie”. Jako wyświetlanie strony głównej wybieram stronę statyczną i ustawiam stronę główną jako statyczną stronę główną, a stronę bloga jako stronę z wpisami. Przypominam, że jeśli jako wyświetlanie strony głównej wybrano najnowsze wpisy, należy zmodyfikować szablon strony głównej bloga dla tej strony głównej lub strony początkowej, ponieważ żadna strona nie została utworzona. Należy pamiętać, że po otwarciu statycznej strony głównej i paska bocznego ustawień zauważymy, że strona ta została przypisana do szablonu strony lub domyślnego szablonu strony, a moja strona bloga lub strona wpisów została przypisana do szablonu strony głównej bloga i nie można tego zmienić. Następnie zauważymy również, że moje inne strony również zostały przypisane do ogólnego lub domyślnego szablonu strony, tak samo jak moja strona główna.
Konfigurowanie wpisów
Następnie skupmy się na wpisach. Jak widać, utworzyłem już dwa wpisy, a także kategorie i tagi. Przypominam, że kategorie służą do klasyfikowania treści według głównych tematów lub sekcji, a tagi są jak etykiety, które zawierają szczegółowe informacje o treści. Jako przykład dodam nowy wpis. Wpis dotyczy Nowego Jorku i dodam do niego przykładową treść. Następnie otworzę pasek boczny ustawień i wybiorę odpowiednią kategorię, w tym przypadku „Podróże”, i dodam nowy tag, mianowicie „Miasto”. Na koniec ustawię obrazek wyróżniający lub miniaturkę wpisu. Obrazek wyróżniający jest oczywiście reprezentatywnym obrazkiem dla twojego wpisu, po jego ustawieniu możemy kliknąć „Opublikuj”, a następnie wyświetlić nasze trzy wpisy wraz z odpowiednimi kategoriami i tagami.
Konfiguracja menu nawigacyjnego
Następnie przyjrzyjmy się bliżej menu nawigacyjnemu, przejdź do sekcji „Wygląd” i kliknij „Edytor”. Otworzy się edytor witryny, a po prawej stronie zobaczymy naszą stronę główną. Po otwarciu strony głównej zobaczymy przykładową treść lub wzorzec, który dodaliśmy podczas tworzenia strony. U góry widzimy wzorzec nagłówka dostarczony przez nasz motyw. Jeśli spróbujemy edytować ten nagłówek, pojawi się komunikat „Edytuj szablon, aby edytować ten blok”. Kliknijmy „Edytuj szablon”. Teraz możemy edytować nagłówek szablonu strony. Należy pamiętać, że ten nagłówek znajduje się również w szablonie strony głównej bloga. Jeśli więc wprowadzimy zmiany w tym nagłówku w szablonie strony, zostaną one automatycznie zaktualizowane również w szablonie strony głównej bloga. Jak widać, w prawym górnym rogu znajduje się menu nawigacyjne, a jego zaletą jest to, że zostało dodane automatycznie podczas tworzenia stron. Po wybraniu menu nawigacyjnego i otwarciu widoku listy zauważymy, że elementy nawigacyjne nadal są częścią listy stron. Aby to zmienić, kliknij opcję „Edytuj” na pasku bocznym ustawień, aby odłączyć listę stron i móc zarządzać elementami nawigacyjnymi indywidualnie. Po odłączeniu możesz użyć widoku listy, aby zmienić kolejność elementów nawigacyjnych. Możesz też użyć strzałek na pasku narzędzi bloku nawigacyjnego, aby zmienić położenie elementów w wybranym miejscu.
Następnie postanowiłem dodać odnośniki do serwisów społecznościowych do mojego menu nawigacyjnego. Po kliknięciu na wstawianie bloku nawigacyjnego wstawiam blok ikonek społecznościowych, a następnie wybieram odpowiednie platformy społecznościowe. W tym przypadku X i Instagram. Nie zapomnij dodać odpowiednich adresów URL. Po wybraniu bloku nawigacyjnego możesz kliknąć trzy pionowe kropki na pasku bocznym ustawień, aby utworzyć nowe menu lub wybrać jedno z istniejących menu. Po wybraniu opcji „Ustawienia” można zmienić wyrównanie oraz orientację menu nawigacyjnego. Poniżej można również wybrać menu hamburgerowe, które pojawi się podczas przeglądania witryny na mniejszym urządzeniu. Po kliknięciu opcji „Style” dostępnych jest wiele opcji dalszego dostosowywania stylu menu nawigacyjnego.
Konfiguracja logo witryny
Następnie omówimy blok „Logo witryny”. Jak można zauważyć, szablon nagłówka dostarczony przez mój motyw zawiera blok „Logo witryny”. Kliknij blok „Logo witryny”, aby dodać nowy obrazek z biblioteki multimediów lub przesłać go bezpośrednio z komputera. Prześlę logo, które już dodałem do pulpitu. Następnie nieznacznie je powiększę.
Dodawanie menu nawigacyjnego do stopki strony
Następnie chciałbym dodać moje menu nawigacyjne do stopki. Po przewinięciu strony w dół zauważymy, że pod odnośnikami znajduje się przykładowa treść, która była częścią domyślnego wzorca stopki dostarczonego wraz z moim motywem. Po otwarciu widoku listy i wybraniu bloku nawigacyjnego mogę kliknąć trzy pionowe kropki na pasku bocznym ustawień, a następnie wybrać odpowiednie menu nawigacyjne.
Wybór stylu
Teraz moje menu nawigacyjne znajduje się w nagłówku i stopce. Jak wspomniano wcześniej, jeśli przejdziemy do szablonu strony głównej bloga, który jest szablonem mojej strony z wpisami, zobaczymy, że nagłówek i stopka są takie same. Gdy wszystkie te elementy są już na swoim miejscu, musimy zdecydować o ogólnym stylu naszej witryny. Przechodząc do sekcji „Style”, można dostosować typografię, kolory i układ strony. Po kliknięciu opcji „Przeglądaj style” można wyświetlić pomniejszony widok wszystkich kombinacji stylów dostępnych w danym motywie. Wybiorę styl „Rdza” jako przykład.
Dodawanie treści
Teraz, gdy mamy już gotowe strony, wpisy, menu nawigacyjne, logo witryny i style, możemy dodać treść do naszych stron i zmodyfikować niektóre z dodanych wzorców. W przypadku strony takiej jak nasza strona kontaktowa, która nie ma szablonu, możemy zacząć budować ją od podstaw. Aby zmodyfikować sposób wyświetlania naszych wpisów, musimy przejść do szablonu strony głównej bloga. Po otwarciu szablonu strony głównej bloga możemy dostosować naszą stronę bloga, a także blok „Pętla zapytania”, aby zdecydować, w jaki sposób mają być wyświetlane nasze wpisy na blogu lub treści dynamiczne.
Praktyczne
Przejdź do WordPress Playground i wykonaj poniższe zadania, aby sprawdzić swoją wiedzę.
- Utwórz 4 strony: Strona główna, Blog, O nas, Kontakt
- Ustaw statyczną stronę główną i stronę wpisów, a następnie przypisz utworzoną stronę główną i bloga.
- Utwórz wpis i dodaj do niego obrazek wyróżniający. Jeśli nie masz żadnych obrazków na swoim komputerze, możesz skorzystać z serwisu https://unsplash.com/, aby wyszukać darmowe obrazki. Możesz użyć tego samego przykładu, co w filmie.
- Dodaj kategorię i tag, a następnie zastosuj je do wpisu. Możesz skorzystać z tego samego przykładu, co w filmie.
- Przejdź do „Edytora witryny” i otwórz szablon „Strony”. Dodaj logo witryny do nagłówka szablonu strony. Dodane strony pojawią się automatycznie w menu nawigacyjnym.
- Dodaj blok ikonek społecznościowych i odnośniki do serwisów X i Instagram do menu nawigacyjnego, tak jak pokazano na przykładzie. W sekcji adresu URL możesz dodać dowolną wartość zastępczą.