MODUŁ 0 - Przygotowanie do startu! 3... 2... 1...
MODUŁ 1 – Czy WordPress jest w ogóle dla mnie?
MODUŁ 2 - MYŚLENIE, czyli szykujemy się do starcia! ;)
MODUŁ 3 – Ogarniamy DZIAŁKĘ i tabliczkę z adresem
MODUŁ 4 – Działka jest. Czas na DOM, drzewo i…
MODUŁ 5 – Dodajemy TREŚCI, czyli niech wreszcie coś zacznie się dziać
MODUŁ 6 - BACKUPUJEMY, ZANIM ZEZPSUJEMY ;)
MODUŁ 7 - MOTYWY, CZYLI PEŁEN MAKE-UP DLA STRONY

5.11. Menu rozklepane na czynniki pierwsze – kilka menu, miejsca na menu i co z telefonami?

Utworzenie pierwszego menu za nami – mamy już na stronie podstawową nawigację, która pozwala doklikać się do utworzonych podstron z kontaktem, informacją o nas, może ofertą albo tym, co zamarzyło nam się czytelnikom przekazać.

To teraz czas nieco pogmatwać sprawę 🙂

Ile menu można mieć na stronie na WordPressie?

Sytuacja, gdy się ma jedno menu na stronie jest prosta do skumania, ale szczerze mówiąc – niezbyt częsta. Czy się to zauważa, czy nie, na stronach internetowych zwykle mamy więcej niż jedno menu.

Dla przykładu, w moim sklepie z zakładkami do książek już na samej stronie głównej mam… sześć różnych menu! Te dwa poniżej – jedno z ogólnymi kategoriami produktów i drugie z kwestiami formalnymi:

Kilka menu na stronie internetowej WordPress - przykład

Jeszcze jedno widoczne dla zalogowanych użytkowników, z podstronami ich konta Klienta:

Kilka menu na stronie internetowej WordPress - przykład menu w koncie klienta

Oraz na dokładkę trzy osobne menu w stopce:

Kilka menu na stronie internetowej WordPress - przykład menu w stopce

Jakby tego było mało, na stronie samego sklepu, w tej części gdzie już zakładki tylko czekają na zakup, mam jeszcze trzy inne menu ze szczegółowymi kategoriami produktów:

Kilka menu na stronie internetowej WordPress - przykład menu z kategoriami w sklepie

Różnych-różniastych informacji na stronie jest tyle do przekazania i uporządkowania, że jedno menu by tego nie ogarnęło! 😉

Na szczęście – nie trzeba się ograniczać, bo WordPress pozwala tych menu utworzyć ile tylko nam się zachce, byle tylko odwiedzającym było dzięki nim wygodnie nawigować po stronie 🙂

W swoim drugim sklepie (z biżuterią) sytuację z menu mam już znacznie prostszą, ale i tak trzy okazały się niezbędne: z kategoriami biżu, z formalnościami i ze skrótami do odpowiednich zakładek na koncie Klienta:

Kilka menu na stronie internetowej WordPress - przykład kilku menu w sklepie internetowym

Czy każda strona na WordPressie może mieć wiele menu?

Raczej tak.

To znaczy technicznie: na każdym WordPressie można sobie utworzyć tyle menu, czyli tyle takich uporządkowanych spisików podstron i innych elementów, ile dusza zapragnie, natomiast osobną sprawą jest ich wyświetlenie na stronie.

Bo strona, a konkretnie motyw, musi mieć przez twórców przygotowane takie specjalne miejsce do podczepienia menu (tak jak podczepialiśmy w poprzedniej lekcji menu główne pod miejsce, które się nazywa Primary menu :))

Ile na stronie jest miejsc do pokazania takich menu – tu już wiele zależy od motywu, ale większość obecnych, w miarę współczesnych i polecanych motywów ma ich przynajmniej kilka, a kilka kolejnych można w nich dodać różnymi metodami okrężnymi 😉

Astra, na której pracujemy w tej chwili, ma przygotowanych pięć miejsc na menu:

Kilka menu na stronie internetowej WordPress - przykładow lokalizacje menu w motywie Astra

Idąc nieco od tyłu: Footer Menu to takie menu, które będziemy mogli wyświetlić w stopce strony, czyli w części na samiutkim dole. O stopce będzie jeszcze osobna lekcja 🙂

Logged In Account Menu to takie menu, które rozwija się zalogowanym użytkownikom po najechaniu na ikonkę ich konta – to te wszystkie Wyloguj, Moje konto, Adresy, czy Moje zamówienia w przypadku sklepów albo Moje kursy w przypadku platform e-learningowych. Nie na każdej stronie takie menu będzie potrzebne, bo nie każda będzie przewidywała rejestrację jakichś użytkowników 🙂

Primary Menu i Secondary Menu to takie miejsca na główne menu nawigacyjne i menu pomocnicze. Oba te menu (jeśli obu będziemy używać, bo przymusu nie ma :)) znajdą się gdzieś w obrębie tak zwanego headera, czyli po prostu górnej części strony, którą widać ponad treścią podstron czy wpisów blokowych:

Kilka menu na stronie internetowej WordPress - miejsce na pierwsze i drugie menu w motywie Astra

A gdzie dokładnie?

W tej chwili menu główne pojawia się domyślnie, czyli po prawej stronie, ale to nie jest jedyna możliwość. Astra jest pod tym względem o tyle świetnym motywem, że daje sporą elastyczność – menu można sobie z tej prawej strony przestawić na lewą, do góry albo właśnie wręcz przeciwnie, w ogóle na dół, pod logo (samym logo też będzie można jeździć po całym headerze i ja Wam to wszystko pokażę w lekcji na temat headera właśnie :))

A co z ostatnim miejscem na menu w AstrzeOff Canvas Menu?

Off Canvas to po prostu menu widoczne na telefonie.

Uhm… No bo są jeszcze telefony, nie zapominajmy! 😁😇

Właściwie ruch w sieci w tej chwili w większości odbywa się już z urządzeń mobilnych, więc na sprawność i wygodę strony na telefonach trzeba patrzeć nawet bardziej, niż na jej działanie na komputerach!

I z tymi telefonami to jest tak, że wygodne skubańce, ale miejsca na ekranach mają mniej. Zwykle wyświetlanie na nich menu w formie takiej samej, jak na kompie, byłoby zupełnie bez sensu, stąd przyjęło się ukrywać menu pod ikonką złożoną z trzech kreseczek, pieszczotliwie zwanych hamburgerkiem:

Kilka menu na stronie internetowej WordPress - miejsce na menu w widoku na telefon w motywie Astra

Na samej stronie zamiast wielkiego menu jest więc zgrabny hamburgerek, a po jego kliknięciu rozwija się (albo w jakikolwiek inny sposób materializuje) menu:

Kilka menu na stronie internetowej WordPress - menu w widoku na telefon w motywie Astra

Kto ultraspostrzegawczy, ten zauważy, że to to na zrzucie powyżej to jednak wcale nie jest to samo menu, które mam w wersji na komputer, tylko… coś innego. Spis wszystkich podstron z WordPressa, ułożonych alfabetycznie.

To jest taka melodia, że już po jednej nutce powinniśmy zgadnąć dlaczego tak jest – bo nie mamy żadnego menu do tej lokalizacji przypisanego 😎

Jak wspominałam w poprzedniej lekcji, jeśli jakaś lokalizacja ma wyświetlać menu, ale go do niej nie dodamy, to będzie pokazywała zamiast menu po prostu wszystkie podstrony.

To co zrobić, żeby pokazywała to, co chcemy tam wrzucić?

Ano trzeba jakieś menu tam zapodać!

Jedno menu w dwóch lokalizacjach w WordPressie

Jeśli mamy chęć, żeby menu wyświetlane na telefonie miało tę samą zawartość, co główne menu w wersji na komputery, to temat jest ultraprosty – wchodzimy w kokpicie w Wygląd -> Menu, i do istniejącego menu głównego w lokalizacjach doklikujemy ptaszka przy Off Canvas Menu:

Kilka menu na stronie internetowej WordPress - dwie lokalizacje dla jednego menu

Dzięki temu to samo menu będzie się pokazywało i jako główne w wersji na komputer, i jako menu mobilne na telefonach.

I robota z głowy!

Tworzenie osobnego menu na telefony

Może jednak się zdarzyć, że będziemy chcieli na telefonach mieć inną zawartość menu niż na komputerach.

W wersji strony na komputer mamy kilka menu, więc możemy nieco porozdzielać różne typy informacji w nawigacji (człowiek nie czuje, jak mu się rymuje 😇). Na przykład na stronie poniżej mam jedno menu główne, pod logo, z kategoriami produktów, a drugie menu w lewym górnym rogu, z formalnościami sklepowymi.

Gdybym tylko jedno z nich miała wybrać jako takie, które pokaże się na telefonach, to niby które? To z produktami czy to z regulaminem i kontaktem? Jak zdecydować, które ważniejsze, a które zawiera informacje dla Klienta zbędne?

Kilka menu na stronie internetowej WordPress - przykładowa strona z menu podzielonym na dwie części

No właśnie nie bardzo się da taką decyzję podjąć i na szczęście nie trzeba – właśnie po to, żebyśmy się nie męczyli rozstrzygając, twórcy Astry przygotowali to całe menu mobilne (Off Canvas Menu) jako całkowicie odrębną lokalizację, w którą możemy wrzucić to samo menu, co na kompy, ale możemy też stworzyć całkiem oddzielne, które będzie zawierało elementy obu tych menu:

Kilka menu na stronie internetowej WordPress - przykładowa strona ze wspólnym menu na telefonie

Jak stworzyć takie odzielne menu na telefon?

Dokładnie tak samo, jak tworzyliśmy pierwsze w poprzedniej lekcji 🙂 Wskakujemy w kokpicie w Wygląd -> Menu i klikamy link utwórz nowe menu:

Kilka menu na stronie internetowej WordPress - tworzenie nowego menu na telefon

Nadajemy mu nazwę (taką dla nas, do pamiętania co to – nie widać jej nigdzie na stronie) i zaznaczamy lokalizację Off Canvas Menu, po czym zatwierdzamy przyciskiem Utwórz menu:

Kilka menu na stronie internetowej WordPress - tworzenie nowego menu na telefon

Dodajemy podstrony i resztę pozycji, które życzymy sobie mieć w menu na telefonie i zapisujemy zmiany:

Kilka menu na stronie internetowej WordPress - tworzenie nowego menu na telefon: struktura menu

Voilà! Menu mobilne gotowe!

U mnie dużych różnic nie ma – względem menu na kompie zmieniłam tylko kolejność elementów i dodałam politykę prywatności (w kompowej wersji strony będę ją miała w stopce).

Kilka menu na stronie internetowej WordPress - tworzenie nowego menu na telefon: wygląd na komórce

Trudne?

No przecież nie, banalne! 🦄

I dokładnie w ten sam sposób tworzymy każde inne menu, podpinając je w tą lokalizację, w której chcemy je wyświetlić 🙂

Trzeba tylko pamiętać o jednym detalu, którego często nie zauważa się za pierwszym razem: jeśli zrobiliśmy jakieś drugie, trzecie, czwarte menu, a chcemy edytować pierwsze, żeby mieć do niego dostęp i widzieć jego zawartość, musimy przejść do niego wybierając je z listy:

Kilka menu na stronie internetowej WordPress - gdzie wybrać menu do edycji

Oczywiście w identyczny sposób przechodzimy potem do każdego innego menu, które mamy chęć podejrzeć lub zmienić 🙂

Piszę o tym, bo niby oczywiste, ale trochę skamuflowane i nie zawsze w gąszczu literek zoczy się od razu 🙂

Masz pytanie do tej lekcji? Kliknij tutaj, aby je zadać :)

Napisz pytanie lub komentarz:

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

Przewiń do góry