W poprzednim odcinku wypełniliśmy naszą stronę tymczasową zawartością. Tym razem stworzymy menu.
W kolejnych odcinkach, mając już zawartość oraz elementy nawigacyjne będziemy mogli zająć się stylizowaniem naszej strony tak, aby odpowiadała naszym wymaganiom.
A więc, do dzieła.
2 Edytory menu
Kiedy przejdziemy na stronę główną naszej witryny, to zobaczymy, że co prawa w kolumnie bocznej znajdują się linki do najnowszych wpisów czy komentarzy, to nie ma tutaj tak naprawdę typowego menu z łączami do strony głównej, bloga, strony z danymi kontaktowymi, polityki prywatności, itd.
WordPress oczywiście umożliwia nam stworzenie takiego menu – i to w dwóch różnych edytorach.
My będziemy korzystali z tego znajdującego się w opcjach personalizacji strony.
Możemy do nich przejść z paska górnego (widocznego kiedy nie jesteśmy w panelu administracyjnym), lub z sekcji „wygląd” w panelu.
Ekran personalizacji
Ekran personalizacji podzielony jest na dwie części:
- opcji – znajdujących się po lewej stronie
- oraz podglądu naszej strony – po prawej.
Taki podział jest potrzebny ponieważ umożliwia nam sprawdzenie jak będą wyglądać wprowadzane przez nas zmiany. Jest to rozwiązanie bardzo wygodne i daje pełną kontrolę nad wprowadzanymi modyfikacjami.
W tym momencie nie będę jednak omawiał każdej z dostępnych tutaj opcji personalizacji – nie jest to w tej chwili potrzebne – i od razu przejdę do sekcji „menu”.
W tym miejscu widzimy 5 już gotowych menu. Są one jednak bezużyteczne, ponieważ nie zawierają żadnych linków. Możemy je więc usunąć. Pojawiły się w naszej witrynie w chwili, kiedy dodaliśmy do niej zawartość tymczasową.
My chcemy stworzyć własne, pełnoprawne menu. W tym celu kliknijmy więc przycisk „stwórz nowe menu”.
Tworzenie menu
Ja nazwę to menu „menu główne” i zaznaczę, że ma się znaleźć w miejscu przeznaczonym dla menu głównego. W tym celu wybiorę takie „położenie” z listy poniżej.
Jak widać, w szablonie tej strony mamy także drugie miejsce przeznaczone dla menu z linkami do serwisów społecznościowych.
Po wpisaniu nazwy menu i określeniu, gdzie ma się znaleźć, musimy dodać do niego linki do jakichś stron. Klikamy więc „dodaj elementy”. Po prawej stronie wysunęła nam się dodatkowa kolumna z listą typów treści, które możemy wyświetlać w naszym menu. Mamy tutaj więc strony informacyjne, wpisy blogowe, kategorie blogowe, tagi wpisów blogowych oraz formaty tych wpisów. Możemy dodać także własny link do całkowicie innej strony, np. ebiznes krok po kroku.
Ja dodam tutaj po prostu kilka stron informacyjnych, które zostały stworzone kiedy zaimportowaliśmy do strony zawartość tymczasową.
Proszę zauważyć, że za każdym razem, kiedy zaznaczam kolejne strony, to pojawiają się one zarówno po lewej jako elementy naszego menu głównego, jak i w podglądzie naszej strony z prawej.
Kiedy wybierzemy już strony, które nam odpowiadają, możemy zmienić im nazwy, kolejność a nawet hierarchię.
Nazwy zmieniamy po prostu klikając na wybranym elemencie menu i wpisując nową.
Kolejność możemy zmienić na dwa sposoby – łapiąc i przeciągając elementy myszką lub strzałkami, które są teraz niewidoczne. Aby je pokazać klikamy „zmień kolejność”.
Korzystając z nich postaram się zmienić kolejność niektórych linków oraz skrócić menu przenosząc część linków do list rozwijanych, czyli tzw. menu niższego poziomu.
Proszę obserwować, jak wprowadzane przeze mnie zmiany wpływają na układ i wygląd menu w podglądzie strony.
Jestem teraz zadowolony z nowego układu, więc klikam link „gotowe”.
W tym momencie mógłbym zakończyć ten filmik. Jednak z racji tego, że mamy jeszcze jedno miejsce w którym możemy dodać menu – chciałbym pokazać Państwu jak dodać do menu własne linki.
Dodawanie własnych linków
Tak jak poprzednio, tworzę nowe menu, wybieram gdzie ma się pojawić oraz je nazywam. W tyn przypadku będzie to „Facebook”.
To menu będzie miało wyłącznie jeden element, a mianowicie własny odnośnik o adresie facebook.com.
W tym celu wpisuję odpowiedni adres i nazwę linku w elemencie „własne odnośniki” i dodaję do menu.
Proszę teraz zauważyć, że pod naszym menu głównym pokazała się ikona do facebooka. To jest właśnie nasze drugie menu, w którym elementy nie są określane tekstem lecz właśnie ikoną.
Jestem zadowolony z naszych obu menu, więc zapisuję zmiany, aby były one widoczne także dla odwiedzających.