Czasami możesz znaleźć wspaniały motyw tylko po to, aby uświadomić sobie, że byłoby świetnie, gdyby miał dodatkowe menu nawigacyjne z ważnych lub często używanych linków, aby zwiększyć użyteczność witryny WordPress.
Z odrobiną kodowania można mieć podstawy nowego menu skonfigurować szybko, i gotowy do stylu, aby dopasować swój motyw.
Jeśli wolałbyś nie zadzierać z kodem, istnieje wiele wtyczek, które mogą wykonać ciężką pracę za ciebie, a także zapewnić opcje stylizacji.
Niezależnie od tego, którą opcję wybierzesz, poniższy przewodnik pomoże ci ją zrealizować.
Podstawowe porządki
Aby utworzyć nowe menu musisz edytować swoje pliki motywu. Przed dokonaniem zmian w plikach głównych, najlepiej jest wykonać kopię zapasową całej witryny na wypadek, gdyby coś poszło nie tak po drodze. Będziesz mógł szybko przywrócić swoją witrynę i będzie tak, jakby nigdy nic się nie stało.
Możesz ręcznie wykonać kopię zapasową witryny przez FTP lub używając wtyczki, takiej jak nasz własny Snapshot. Tylko upewnij się, aby zapisać kopię zarówno bazy danych jak i plików w miejscu oddzielonym od twojej witryny, aby zminimalizować ryzyko utraty kopii zapasowej.
Konstruowanie motywu dziecka
Aby stworzyć nowe menu z kodem, musisz wprowadzić zmiany, które zostaną utracone podczas aktualizacji twojego motywu. Tworzenie motywu dziecka zajmuje się tym problemem.
Możesz znaleźć szczegóły, których potrzebujesz, aby utworzyć motyw dziecka, sprawdzając kilka naszych innych postów How to Create a WordPress Child Theme i How to Automagically Create Child Themes in WordPress.
Możesz również wybrać utworzenie całego nowego motywu własnego lub wypróbować go na stronie lokalnej lub testowej.
Możesz sprawdzić te posty, aby uzyskać więcej szczegółów na temat tworzenia lokalnej instalacji WordPressa:
- How to Develop WordPress Locally with MAMP
- How to Install XAMPP and WordPress Locally on PC/Windows
- How to Set Up WordPress Locally in 5 Minutes with DesktopServer
- Szybki i łatwy przewodnik po migracji lokalnej instalacji WordPressa do witryny na żywo
- Jak przenieść WordPressa do lokalnego rozwoju za pomocą XAMPP
.
Po skonfigurowaniu jednej z tych opcji, jesteś wolny, aby rozpocząć tworzenie swoich dodatkowych menu nawigacyjnych. Chociaż, jeśli zdecydujesz się na użycie wtyczki lub frameworka motywu, nie musisz tworzyć motywu dziecka.
Tworzenie nowych menu
Aby dodać opcję wyboru lokalizacji menu w pulpicie administratora w Wygląd > Menu, musisz zrobić to, co nazywa się „rejestracją menu”. Wszystko czego potrzeba to dodanie fragmentu kodu do twojego pliku functions.php znajdującego się w wp-content > themes > your-theme.
W cPanelu, kliknij na ikonę Menedżera plików w sekcji Pliki na stronie głównej. Jeśli nie ustawiłeś wcześniej Menedżera plików tak, aby ładował się do głównego katalogu dokumentów witryny, przejdź tam teraz.
W folderze /wp-includes/ znajduje się plik functions.php, ale to nie jest ten, który musisz edytować. Upewnij się, że znalazłeś plik functions.php, który znajduje się w motywie, którego używasz. W przeciwnym razie, skończyłoby się błędami podczas próby dodania kodu znalezionego później.
Znajdź swój plik functions.php i kliknij na niego raz, a następnie kliknij przycisk Edytuj na górze strony.
Jeśli otworzy się wyskakujące okienko, po prostu kliknij przycisk Edytuj na dole, po prawej stronie. Możesz go nie widzieć, jeśli wcześniej go wyłączyłeś.
Przewiń do dołu pliku. Jeśli chcesz dodać tylko jedno menu, dodaj następujący kod w nowej linii:
function register_my_menu() {register_nav_menu('new-menu',__( 'New Menu' ));}add_action( 'init', 'register_my_menu' );
W tym przykładzie, New Menu jest nazwą, która pojawi się na stronie menu pulpitu administratora, aby była zrozumiała dla ludzkich oczu. Nazwa new-menu jest tym, co WordPress zrozumie, aby poprawnie wykonać twój kod.
Możesz nazwać swoje menu jakkolwiek chcesz, ale upewnij się, że tylko czytelna dla człowieka nazwa zawiera spacje i wielkie litery.
Jeśli chcesz dodać wiele menu do swojej witryny, dodaj ten kod w nowej linii zamiast:
Możesz dodać tyle nowych menu, ile chcesz za pomocą tej metody. Te same zasady będą obowiązywać przy nadawaniu im nazw.
Zapisz zmiany wprowadzone do pliku. Teraz wszystko co pozostało to dodanie nowego menu do twojej witryny.
Adding Menu Locations to Your Theme
Tutaj musisz zdecydować gdzie chcesz umieścić swoje menu. Jeśli chciałbyś, aby twoje menu pojawiło się na górze strony, będziesz musiał edytować plik header.php. Możesz również umieścić je w stopce, co oznacza, że będziesz musiał edytować plik footer.php.
Możesz nawet wyświetlić menu na stronie, edytując jej plik szablonu lub na pasku bocznym, edytując jej plik sidebar.php.
Możesz umieścić swoje nowe menu gdziekolwiek zechcesz. Oto minimalna ilość kodu, którą musisz dodać do któregokolwiek z tych miejsc:
<?php wp_nav_menu( array( 'theme_location' => 'new-menu' ) ); ?>
Po prostu zamień new-menu na czytelną dla WordPressa nazwę, którą wybrałeś. Prawdopodobnie chcesz wystylizować swoje menu za pomocą CSS, aby wykraczało poza podstawową funkcjonalność, a także świetnie wyglądało. Aby to zrobić, będziesz musiał stworzyć klasę i dodać ją do swojego motywu za pomocą następującego kodu.
<?php wp_nav_menu( array( 'theme_location' => 'new-menu', 'container_class' => 'new_menu_class' ) ); ?>
Tak jak poprzednio, zastąp new-menu wybraną przez siebie nazwą. W tym przykładzie, nazwałem klasę, którą stworzyłem new_menu_class. Możesz to zmienić, ale po prostu upewnij się, że zaktualizowałeś ten kod, aby odzwierciedlić dostosowanie.
Hit the Save button and head over to Appearance > Menus in your dashboard. Zauważysz, że twoje nowe menu będzie wymienione w sekcji Theme Locations w Ustawieniach Menu.
Będziesz teraz w stanie zobaczyć swoje nowe lokalizacje menu wymienione na liście. Podczas dodawania menu możesz wybrać jedną lub wszystkie lokalizacje.
Aby mieć łącza wyświetlane w nowo utworzonych lokalizacjach menu, kliknij przycisk Utwórz nowe menu u góry strony.
Jeśli nie masz jeszcze menu, możesz wprowadzić jego nazwę w polu na stronie, a następnie kliknąć przycisk Utwórz menu. Jeśli masz już wcześniej utworzone menu, możesz kliknąć łącze Utwórz nowe menu u góry strony.
Po utworzeniu nowego menu możesz również zarządzać lokalizacjami, w których są one wyświetlane w zakładce „Zarządzaj lokalizacjami”.
Stylizacja, wtyczki i menu responsywne
Twoje nowe menu jest teraz gotowe do stylizacji przy użyciu CSS. Wymagane kodowanie jest specyficzne dla motywu, którego używasz, więc nie będę się w to zagłębiać w tym poście, ale mamy inny post, który możesz sprawdzić o nazwie Jak stworzyć świetne responsywne menu dla Twojego motywu WordPress. To również pokazuje, jak tworzyć responsywne menu, które są mobile-ready.
Jeśli chcesz łatwiejszą opcję, istnieje wiele wtyczek, które będą tworzyć responsywne menu w oparciu o style motywu. Jedną z najlepszych jakie znalazłem jest Responsive Menu.
Kilka godnych uwagi wzmianek, które również mogą okazać się pomocne to ShiftNav, WP Responsive Menu i Max Mega Menu.
Źródła do pójścia dalej
Teraz masz solidne podstawy, których potrzebujesz, aby stworzyć dodatkowe menu dla swojego motywu i zasoby, które pomogą Ci pójść dalej. Niezależnie od tego, czy kodujesz go samodzielnie, używasz wtyczki lub frameworka motywu, masz teraz nowe menu w swojej witrynie WordPress.
Jeśli napotkasz problemy, śmiało zapytaj naszych bohaterów pomocy technicznej. Mogą one dać Ci fachową poradę i wsparcie, aby pomóc rozwiązać każdy problem. Możesz otworzyć bilet na naszym forum wsparcia, a my będziemy tuż obok, aby Ci pomóc.
Aby uzyskać więcej informacji o tym, jak stylizować swój nowy motyw, jest wiele zasobów, które możesz sprawdzić i możesz je wszystkie znaleźć w naszym poście A Mega Guide to Learning and Referencing CSS for WordPress: 150+ Resources.
Możesz również sprawdzić niektóre z naszych innych postów 10 Simple Tips for Learning CSS for WordPress, 25 Expert Tips for Cleaner CSS Coding for WordPress, 25 Pro Tips for Improving Your CSS Workflow i 5 Free CSS Plugins for Live Editing Your WordPress Site po więcej szczegółów na temat kodowania CSS dla twojego motywu.
Tagi:
- menus
- nawigacja
.