Jak dodać więcej Menu Nawigacji do motywu WordPress

Czasami możesz znaleźć niesamowity motyw, aby zdać sobie sprawę, że byłoby świetnie, gdyby miał dodatkowe menu nawigacyjne z ważnymi lub często używanymi linkami, aby zwiększyć użyteczność witryny WordPress.

Wystarczy trochę kodowania, aby szybko skonfigurować nowe menu i przygotować je do dopasowania do motywu.

Jeśli wolisz nie zadzierać z kodem, istnieje wiele wtyczek, które mogą Ci pomóc, a także zapewnić opcje stylizacji.

Bez względu na to, którą opcję wybierzesz, poniższy przewodnik pomoże Ci to zrealizować.

Jak dodać menu do motywu WordPress:

  1. Stwórz motyw potomny
  2. Tworzenie Nowych Menu
  3. Dodawanie lokalizacji Menu do motywu
  4. Stylizacja menu nawigacyjnego

Podstawowe Sprzątanie

Aby utworzyć nowe menu, musisz edytować pliki motywów. Przed wprowadzeniem zmian w którymkolwiek z podstawowych plików najlepiej wykonać kopię zapasową całej witryny na wypadek, gdyby coś poszło nie tak. Będziesz w stanie szybko przywrócić witrynę i będzie tak, jakby nigdy nic się nie stało.

Możesz ręcznie wykonać kopię zapasową witryny przez FTP lub za pomocą wtyczki, takiej jak nasza własna Migawka. Pamiętaj tylko, aby zapisać kopię zarówno bazy danych, jak i plików w lokalizacji oddzielonej od witryny, aby zminimalizować ryzyko utraty kopii zapasowej.

Konstruowanie motywu potomnego

Aby utworzyć nowe menu z kodem, musisz wprowadzić zmiany, które zostaną utracone podczas aktualizacji szablonu. Tworzenie motywu potomnego zajmuje się tym problemem.

Możesz znaleźć szczegóły, których potrzebujesz, aby utworzyć motyw potomny, sprawdzając kilka naszych innych postów, jak utworzyć motyw potomny WordPress i jak automatycznie tworzyć motywy potomne w WordPress.

Możesz również stworzyć zupełnie nowy motyw lub wypróbować go na lokalnej lub testowej stronie.

Możesz sprawdzić te posty, aby uzyskać więcej informacji na temat tworzenia lokalnej instalacji WordPress:

Po skonfigurowaniu jednej z tych opcji możesz zacząć tworzyć dodatkowe menu nawigacyjne. Jeśli jednak zdecydujesz się użyć wtyczki lub ramy motywu, nie musisz tworzyć motywu podrzędnego.

Aby dodać opcję wyboru lokalizacji menu na pulpicie administratora w obszarze Wygląd > menu, musisz zrobić tak zwane ” zarejestruj menu.”Wystarczy dodać fragment kodu do swojego funkcje.php plik znajduje się w wp-content > themes > your-theme.

W cPanel kliknij ikonę menedżera plików w sekcji Pliki na stronie głównej. Jeśli wcześniej nie ustawiono menedżera plików, aby ładował się do katalogu głównego dokumentu witryny, przejdź tam teraz.

Jest funkcje.php plik w Twoim / wp-zawiera/ folder, ale to nie jest ten, który musisz edytować. Upewnij się, że znajdziesz funkcje.php plik, który znajduje się w używanym szablonie. W przeciwnym razie pojawią się błędy podczas próby dodania kodu znalezionego później.

Zlokalizuj swój funkcje.php plik i kliknij na niego raz, a następnie kliknij przycisk Edytuj u góry strony.

The File Manager in cPanel. The functions.php file has been selected.
Możesz edytować swój motyw funkcje.php plik bezpośrednio w cPanel.

Jeśli otworzy się wyskakujące okienko, po prostu kliknij przycisk Edytujna dole, po prawej stronie. Możesz go nie zobaczyć, jeśli wcześniej go wyłączyłeś.

Przewiń na dół pliku. Jeśli chcesz dodać tylko jedno menu, Dodaj następujący kod w nowej linii:

function register_my_menu () {register_nav_menu (‘nowe-menu’,__ (‘Nowe Menu’));} add_action (‘init’, ‘register_my_menu’);

W tym przykładzie nowe Menu to nazwa, która pojawi się na stronie menu panelu administracyjnego, aby była zrozumiała dla ludzkich oczu. Nazwa nowego menu jest tym, co WordPress zrozumie, aby poprawnie wykonać kod.

Możesz nazywać swoje menu, jak chcesz, ale upewnij się, że tylko nazwa czytelna dla człowieka zawiera spacje i duże litery.

Jeśli chcesz dodać wiele menu do swojej witryny, dodaj ten kod w nowej linii:

function register_my_menus() { register_nav_menus( array( ‘new-menu’ => __( ‘Nowe Menu’ ), ‘another-menu’ => __( ‘Another-Menu’ ), ‘an-extra-menu’ => __( ‘an Extra-Menu’)));} add_action (‘init’, ‘register_my_menus’);

Za pomocą tej metody możesz dodać dowolną liczbę nowych menu. Te same zasady będą miały zastosowanie przy nazywaniu ich.

Zapisz wprowadzone zmiany do pliku. Teraz wszystko, co pozostało, to dodanie nowego menu do twojej witryny.

To tutaj musisz zdecydować, gdzie chcesz umieścić swoje menu. Jeśli chcesz, aby twoje menu pojawiało się u góry strony, musisz edytować nagłówek.php plik. Możesz również umieścić go w stopce, co oznacza, że edytujesz stopka.php plik.

Możesz nawet wyświetlić menu na stronie, edytując jego plik szablonu lub na pasku bocznym, edytując jego pasek boczny.php plik.

Możesz umieścić swoje nowe menu w dowolnym miejscu. Oto minimalna ilość kodu, którą musisz dodać do dowolnej z tych lokalizacji:

‘nowe-menu’));?>

Po prostu zastąp nowe menu wybraną nazwą czytelną dla WordPressa. Prawdopodobnie chcesz stylizować swoje menu za pomocą CSS, aby wykraczało poza podstawową funkcjonalność, a także wyglądało świetnie. Aby to zrobić, musisz utworzyć klasę i dodać ją do motywu za pomocą następującego kodu.

‘new-menu’,’ container_class ‘= > ‘new_menu_class’));?>

Tak jak poprzednio, zastąp new-menu wybraną nazwą. W tym przykładzie nazwałem klasę, którą utworzyłem new_menu_class. Możesz to zmienić, ale pamiętaj, aby zaktualizować ten kod, aby odzwierciedlić dopasowanie.

Naciśnij przycisk Zapisz i przejdź do Wygląd > menu na pulpicie nawigacyjnym. Zauważysz, że nowe menu będzie wyświetlane w sekcji lokalizacje motywów w ustawieniach Menu.

The Menu Settings section.
Nowo zarejestrowane pozycje menu wymienione w ustawieniach Menu.

Teraz będziesz mógł zobaczyć swoje nowe lokalizacje menu na liście. Po dodaniu menu możesz wybrać jedną lub wszystkie lokalizacje.

Aby linki były wyświetlane w nowo utworzonych lokalizacjach menu, kliknij Utwórz nowe menu u góry strony.

The Menu page in the admin dashboard.
Możesz kliknąć łącze Utwórz nowe menu lub wprowadzić nową nazwę dla swojego menu.

Jeśli nie masz jeszcze menu, możesz wprowadzić nazwę swojego menu w polu na stronie, a następnie kliknąć Utwórz Menu. Jeśli masz już menu wcześniej utworzone, można kliknąć link Utwórz nowe menu u góry strony.

Po utworzeniu nowego menu możesz również zarządzać lokalizacjami, w których są wyświetlane w zakładce” Zarządzaj lokalizacjami”.

Twoje nowe menu jest teraz gotowe do stylizacji za pomocą CSS. Wymagane kodowanie jest specyficzne dla motywu, którego używasz, więc nie będę wchodzić w to w tym poście, ale mamy inny post, który możesz sprawdzić, o nazwie Jak stworzyć niesamowite responsywne Menu dla Twojego motywu WordPress. Pokazuje również, jak tworzyć responsywne menu gotowe do pracy na urządzeniach mobilnych.

Jeśli chcesz łatwiejszej opcji, istnieje wiele wtyczek, które stworzą responsywne menu w oparciu o style Twojego motywu. Jednym z najlepszych, jakie znalazłem, jest Responsive Menu.

Niektóre godne uwagi wzmianki mogą również okazać się pomocne to ShiftNav, WP Responsive Menu i Max Mega Menu.

Środki na dalsze działania

Masz teraz solidne podstawy, których potrzebujesz, aby stworzyć dodatkowe menu dla swojego motywu i zasobów, które pomogą Ci pójść dalej. Niezależnie od tego, czy sam kodujesz, używasz wtyczki, czy ramy motywu, masz teraz nowe menu w swojej witrynie WordPress.

Jeśli napotkasz problemy, śmiało zapytaj naszych bohaterów wsparcia. Mogą udzielić ci fachowych porad i wsparcia, aby pomóc rozwiązać prawie każdy problem. Możesz otworzyć zgłoszenie na naszym forum Pomocy Technicznej, a my zaraz Ci pomożemy.

Aby uzyskać więcej informacji na temat stylu nowego motywu, istnieje wiele zasobów, które możesz sprawdzić i możesz je znaleźć w naszym poście Mega Przewodnik po nauce i odwołaniach do CSS dla WordPress: zasoby 150+.

Możesz również sprawdzić niektóre z naszych innych postów 10 prostych wskazówek dotyczących nauki CSS dla WordPress, 25 porad ekspertów dotyczących czystszego kodowania CSS dla WordPress, 25 Pro wskazówek dotyczących poprawy przepływu pracy CSS i 5 darmowych wtyczek CSS do edycji na żywo witryny WordPress, aby uzyskać więcej informacji na temat kodowania CSS dla Twojego motywu.

Tagi: