Jak tworzyć niestandardowe struktury menu w WordPress

WordPress ma wbudowaną automatyczną strukturę nawigacji, która tworzy dla Ciebie menu. Zawiera strony i kategorie. Umieści je w głównym menu bez konieczności robienia czegokolwiek innego niż utworzenie strony lub posta w kategorii. Działa to świetnie, jeśli masz tylko kilka stron i kategorii, ale po pewnym czasie może zacząć wymykać się spod kontroli. Również to, że może obsługiwać nawigację automatycznie, nie oznacza, że ​​powinieneś na to pozwolić.

WordPress będzie obsługiwał menu automatycznie bez żadnego wkładu z Twojej strony, ale jeśli naprawdę chcesz w pełni wykorzystać strukturę menu, możesz stworzyć własne niestandardowe menu. Niestandardowe menu pozwalają przejąć pełną kontrolę nad strukturą nawigacji i mogą nadać witrynie bardziej przejrzysty i profesjonalny wygląd.

Rodzaj menu

Istnieje kilka różnych rodzajów menu. Typy menu, których możesz użyć, zależą od funkcji motywu. Popularne typy menu to:

• Menu główne – to menu pojawia się pod nagłówkiem. Powinien zawierać główną nawigację i strony, których oczekują odwiedzający w zależności od rodzaju posiadanej witryny: strona główna, informacje, kontakt, blog, portfolio itp.
• Secondary Menu – to menu pojawia się nad nagłówkiem. Powinno to obejmować linki i strony, które chcesz udostępnić swoim czytelnikom w dogodnej lokalizacji, ale niekoniecznie w głównej strukturze nawigacji. Mogą to być przedmioty, takie jak samouczki, koszyk na zakupy itp.
• Pasek boczny — niestandardowe menu można umieścić na pasku bocznym za pomocą niestandardowego widżetu menu. Możesz użyć dowolnej liczby widżetów i umieścić w nich dowolne menu.
• Stopka – możesz stworzyć menu tylko dla swojej stopki. To menu zwykle zawiera mniej informacji niż menu główne. W zależności od potrzeb Twojej witryny, zwykle zawiera ona stronę główną, informacje, kontakt, blog itp. Jeśli witryna zawiera oferty pracy, program partnerski i witryny siostrzane, mogą one również zostać tutaj uwzględnione.
• Menu linków społecznościowych — to specjalne menu, które można znaleźć w motywach takich jak Dwadzieścia piętnaście, które umieszcza linki do mediów społecznościowych na pasku bocznym. Jeśli motyw rozpoznaje sieć społecznościową, wyświetli odpowiednią ikonę. Jeśli nie, to pokaże nazwy jako tekst (zgodnie z tym, jak oznaczyłeś link).

Wśród motywów WordPress najpopularniejsze są menu główne i dodatkowe. To, co się w nich znajduje, naprawdę zależy od tego, na czym skupia się Twoja witryna. Główny cel Twojej witryny powinien pojawić się w głównym menu. Powinno to mieć sens dla odwiedzających i być tym, czego oczekują.

Na przykład, jeśli masz sklep, Twój koszyk powinien znajdować się w głównym menu. Jeśli masz witrynę z portfolio, ale sprzedajesz również niektóre rzeczy, Twoje portfolio powinno znajdować się w menu głównym, a koszyk powinien znajdować się w menu dodatkowym. Pomyśl tylko, gdzie pasuje logicznie i odpowiednio go umieść.

Tworzenie własnych niestandardowych menu

WordPress ułatwia ręczne tworzenie własnych niestandardowych menu. Możesz tworzyć, dostosowywać i stosować menu z zaplecza, a także wybierać menu z interfejsu, aby je zobaczyć i przetestować przed opublikowaniem.

Tworzenie menu z zaplecza

Na zapleczu przejdź do Wygląd i wybierz Menu. W interfejsie przejdź do Dostosuj i wybierz Nawigacja.

Na ekranie menu wybierz utwórz nowe menu, nadaj mu nazwę i kliknij przycisk Utwórz menu.

Teraz możesz zacząć dodawać strukturę nawigacji. Po lewej stronie znajdują się pola dla stron, linków niestandardowych i kategorii. Możesz użyć wszystkich z nich jako linków w swoim niestandardowym menu. W środku masz kilka opcji. Możesz zezwolić na automatyczne dodawanie wszystkich nowych stron do struktury menu lub pozostawić tę opcję niezaznaczoną, jeśli chcesz mieć większą kontrolę i samodzielnie wybierać strony i kategorie.

Strony

Wybierz kartę Strony w lewym oknie, jeśli nie jest jeszcze otwarta. Aby dodać strony do menu, wybierz wszystkie żądane strony i kliknij Dodaj do menu.

Jeśli chcesz, aby były ułożone inaczej, po prostu przeciągnij i upuść element menu, który chcesz przenieść do nowej lokalizacji. Możesz nawet ustawić go jako element podrzędny innego elementu menu, przeciągając go i upuszczając po prawej stronie pod elementem, którego ma być elementem podrzędnym.

Możesz wybrać strzałkę po prawej stronie, aby otworzyć element i wprowadzić zmiany, takie jak zmiana nazwy i lokalizacji. Możesz również usunąć pozycję ze struktury menu tutaj.

Linki niestandardowe

Aby dodać niestandardowe łącza, otwórz Własne łącza w lewym oknie, dodaj żądany adres URL i wybierz Dodaj do menu. Możesz utworzyć dowolny rodzaj linku i umieścić go w strukturze menu. W ten sposób tworzysz również linki do menu Linki społecznościowe.

Następnie możesz przeciągnąć i upuścić go w dowolnym miejscu w strukturze menu.

Kategorie

Wybierasz i dodajesz kategorie w ten sam sposób, w jaki wybierasz i dodajesz Strony w lewym oknie. Będą zachowywać się tak samo jak strony i linki w menu.

Zapisz swoje menu

Gdy spodoba Ci się nowa struktura menu, zapisz ją, a następnie możesz z niej korzystać.

Zarządzaj lokalizacjami

Istnieją dwa sposoby korzystania z menu z zaplecza.

Ustawienia menu

Na ekranie, na którym utworzyłeś menu, znajduje się grupa pól wyboru w obszarze Ustawienia menu. Możesz wybrać dowolne menu, a następnie wybrać, gdzie ma być używane. Możesz wybrać tyle, ile chcesz. Nie zapomnij go zapisać.

Zarządzaj lokalizacjami

Wybierz kartę Zarządzaj lokalizacjami. Tutaj możesz wybrać, którego menu chcesz użyć, gdzie w rozwijanych polach. Nie musisz ich wszystkich używać. Jedno, które wybrałeś, które z menu będzie używane, po prostu naciśnij Zapisz i właśnie zaktualizowałeś strukturę menu.

Widżet

WordPress ma również widżet menu niestandardowego, który można przeciągać i upuszczać na paski boczne. Tutaj możesz wybrać swoje menu.

Testowanie

Oto spojrzenie na moje menu testowe i widżet paska bocznego. Następną rzeczą do zrobienia jest przetestowanie każdego elementu, aby upewnić się, że działa płynnie i intuicyjnie. Nie zapomnij o tym kroku. Bardzo ważne jest przetestowanie menu, aby sprawdzić, czy działa zgodnie z zamierzeniami. Oczywiście nie są to tytuły menu, których powinieneś używać w swojej witrynie.

Używanie interfejsu do widoku WYSIWYG

Aby zmodyfikować strukturę menu z poziomu interfejsu, przejdź do Wygląd i wybierz Dostosuj. Gdy dojdziesz do interfejsu, wybierz Nawigacja. Tutaj możesz wybrać swoje menu. Zaletą tego widoku jest to, że możesz zobaczyć zmiany bezpośrednio przed ich zapisaniem. W ten sposób możesz zdecydować, czy ci się to podoba przed podjęciem decyzji. Niestety ten system nie pozwala na ich tworzenie.

Dostosuj wygląd i styl za pomocą motywów takich jak Divi

Niektóre motywy, takie jak Divi 2.4 w eleganckim motywie, udostępniają narzędzia, dzięki którym możesz wprowadzać zmiany w wyglądzie i działaniu menu z poziomu interfejsu i natychmiast zobaczyć ich wpływ. W ten sposób będziesz wiedział, co zobaczą Twoi goście, zanim to zapiszesz.

Oto spojrzenie na dostosowania menu Divi. Możesz dokonać tych samych regulacji, aby zmienić wygląd i styl każdego elementu menu.

Jeszcze większe dostosowywanie – używanie wtyczek do modyfikowania menu

Do WordPressa dostępnych jest wiele wtyczek, które pomagają modyfikować niestandardowe menu za pomocą nowych funkcji, wyglądu i funkcjonalności. Dodają wiele korekt CSS, sprawiają, że reagują, a nawet przyspieszają. Oto spojrzenie na kilka z bardziej popularnych wtyczek.

Widżet kreatora menu niestandardowego

Ta bezpłatna wtyczka dodaje niestandardowy widżet menu, którego można używać na paskach bocznych lub w treści za pomocą skrótów. Zapewnia pełną kontrolę nad parametrami menu i umożliwia korzystanie z określonych części niestandardowych menu. Dodaje również kilka klas niestandardowych.

Możesz wyświetlić określone fragmenty menu lub całe menu. Możesz także uczynić wyjście warunkowym. Będzie wyświetlany jako płaski lub hierarchiczny w zależności od określonej liczby poziomów. Możesz także modyfikować dane wyjściowe za pomocą HTML.

Ustawienia widżetu są łatwe w użyciu. Wybierasz menu z listy rozwijanej i wybierasz filtry, rezerwy, dane wyjściowe, kontener, klasy, łącza i alternatywę (jest to kolejny poziom warunków). Daje również krótki kod, dzięki czemu możesz wkleić menu do treści.

Nextend menu akordeonowe

Ta wtyczka umożliwia tworzenie menu w stylu akordeonu z pełną kontrolą nad poziomami menu, kolorami, animacją itp., z których każdy ma własne ustawienia i skórki. Masz kontrolę nad poziomami i stanami czcionek, tła, kolorów, obrazów itp. Przyspiesza system menu dzięki wykorzystaniu pamięci podręcznej, zapewnia różne typy animacji, ma nieograniczone poziomy menu i zapewnia 30 ustawień.

Podoba mi się sposób działania menu akordeonowych. Możesz je rozwinąć, gdy chcesz ich użyć, a następnie ukryć, aby uzyskać bardziej przejrzysty układ, gdy nie chcesz ich widzieć na ekranie. Wtyczka jest łatwa w użyciu i konfiguracji. Menu tworzy się tak samo, jak niestandardowe typy zawartości. Następnie możesz przeciągnąć widżet na paski boczne i wybrać menu z poziomu widżetu.

Dostępna jest również wersja Pro, która dodaje trzy motywy i obsługę. Ceny zaczynają się od 29 USD.

Responsywne menu

Ta bezpłatna wtyczka ma 70 opcji, aby dostosować wygląd, działanie i działanie menu. Możesz dostosować tytuły, CSS, akcje, rozmiary, animacje, skrypty i wiele więcej. Świetnie sprawdza się na urządzeniach mobilnych i ma funkcje do wyciągania menu z jednej strony i ustawiania lokalizacji menu. To nawet zminimalizuje CSS i JavaScript twojego menu. Możesz także dodać niestandardowy kod HTML i importować/eksportować swoje ustawienia.

Istnieje wiele zmian w ustawieniach, ale wszystkie są łatwe do zrozumienia i dostosowania. Istnieje również zaawansowany poziom ustawień, ale możesz je zignorować, jeśli chcesz. Zawiera skróty, a jeśli wolisz, możesz nawet dodać kod PHP do swojego motywu.

Inne wtyczki do modyfikacji menu

Oto lista innych wtyczek, które mnie zainteresowały. Dodają lub modyfikują funkcje menu i umożliwiają sterowanie nimi na różne sposoby.

• Mega menu WordPress
• CSS3 Mega rozwijane menu
• Menu responsywne WP
• Czcionka Awesome 4 Menu
• Skróty w menu
• Szybszy wygląd – menu
• Menu z jedzeniem i napojami
• Proste menu detaliczne
• Oczyść menu WordPress
• Menuizer widżetów

Wskazówki dotyczące tworzenia wspaniałych struktur menu

• Użyj swoich menu, aby uporządkować strukturę nawigacji.
• Użyj jak najmniejszej liczby poziomów. Myśl w kategoriach podstawowych i drugorzędnych.
• Używaj nazw, które mają sens dla czytelników, bez konieczności rozszyfrowywania Twojego kodu.
• Użyj metody KISS. Pamiętaj – prościej znaczy lepiej. Menu powinno być łatwe w użyciu i intuicyjne.
• Sprawdź strukturę menu swoich ulubionych witryn i zobacz, co lubisz, a co nie. Następnie ulepsz swoje.

Końcowe przemyślenia

Dodanie własnej niestandardowej struktury menu jest łatwe i sprawi, że Twoja witryna WordPress będzie wyglądać i działać bardziej profesjonalnie, a także sprawi, że struktura nie będzie wyglądać losowo. Stworzenie własnego zestawu menu zajmuje tylko kilka minut i możesz je zobaczyć i wypróbować przed uruchomieniem. Twoi goście docenią strukturę menu, która pozwala im poruszać się po witrynie szybciej i intuicyjnie.

Twoja kolej! Czy stworzyłeś własną niestandardową strukturę menu? Masz coś do dodania? Czy używasz wtyczek do modyfikacji menu? Opowiedz nam o tym w komentarzach poniżej.