Czy chcesz dodać niestandardowe menu nawigacyjne w swoim motywie WordPress? Menu nawigacyjne to pozioma lista linków wyświetlana na górze większości stron internetowych.
Domyślnie, motywy WordPress pochodzą z predefiniowanymi lokalizacjami menu i układami, ale co jeśli chciałbyś dodać własne niestandardowe menu nawigacyjne?
W tym artykule pokażemy Ci, jak łatwo tworzyć i dodawać niestandardowe menu nawigacyjne w WordPressie, dzięki czemu możesz je wyświetlać w dowolnym miejscu swojego motywu.
- Kiedy potrzebujesz tego samouczka menu nawigacyjnego WordPress?
- Tworzenie niestandardowych menu nawigacyjnych w motywach WordPress
- Wyświetlanie niestandardowych menu nawigacyjnych w motywach WordPress
- Adding a Custom Navigation Menu in WordPress Using Page Builder
- Tworzenie przyjaznych dla urządzeń mobilnych responsywnych menu w WordPress
- Do More With WordPress Navigation Menus
Większość motywów WordPress pochodzi z co najmniej jednym miejscem, w którym możesz wyświetlać linki nawigacyjne swojej witryny w menu.
Możesz zarządzać elementami menu z łatwego w użyciu interfejsu wewnątrz swojego obszaru administracyjnego WordPress.
Jeśli po prostu chcesz dodać menu nawigacyjne na swojej stronie internetowej, to po prostu postępuj zgodnie z naszym przewodnikiem dla początkujących, jak dodać menu nawigacyjne w WordPress.
Celem tego poradnika jest pomoc użytkownikom DIY / średnio zaawansowanym w dodawaniu niestandardowych menu nawigacyjnych w ich motywach WordPress.
W tym artykule zajmiemy się następującymi tematami:
- Tworzenie niestandardowego menu nawigacyjnego w motywach WordPress
- Wyświetlanie niestandardowego menu nawigacyjnego w motywie WordPress
- Dodawanie niestandardowego menu nawigacyjnego w WordPress przy użyciu page builder
- Tworzenie przyjaznych dla urządzeń mobilnych responsywnych menu w WordPress
- Więcej rzeczy, które możesz zrobić z menu nawigacyjnym WordPress
Powiedziawszy to, spójrzmy na to, jak dodać niestandardowe menu nawigacyjne WordPress w swoim motywie.
Menu nawigacyjne są cechą motywów WordPress. Każdy motyw może zdefiniować swoje własne lokalizacje menu i obsługę menu.
Aby dodać niestandardowe menu nawigacyjne, pierwszą rzeczą, którą musisz zrobić, jest zarejestrowanie nowego menu nawigacyjnego przez dodanie tego kodu do pliku functions.php twojego motywu.
function wpb_custom_new_menu() { register_nav_menu('my-custom-menu',__( 'My Custom Menu' ));}add_action( 'init', 'wpb_custom_new_menu' );
Możesz teraz przejść do Wygląd ” Strona menu w swoim administratorze WordPress i spróbować utworzyć lub edytować nowe menu. Zobaczysz 'Moje niestandardowe menu’ jako opcję lokalizacji motywu.
Jeśli chcesz dodać więcej niż jedną nową lokalizację menu nawigacyjnego, to musiałbyś użyć kodu takiego jak ten:
function wpb_custom_new_menu() { register_nav_menus( array( 'my-custom-menu' => __( 'My Custom Menu' ), 'extra-menu' => __( 'Extra Menu' ) ) );}add_action( 'init', 'wpb_custom_new_menu' );
Po dodaniu lokalizacji menu, przejdź dalej i dodaj kilka pozycji menu w administracji WordPress, postępując zgodnie z naszym samouczkiem, jak dodać menu nawigacyjne dla początkujących.
To pozwoli nam przejść do następnego kroku, którym jest wyświetlanie menu w twoim motywie.
Następnie musimy wyświetlić nowe menu nawigacyjne w twoim motywie WordPress. Najczęstszym miejscem, w którym zwykle umieszcza się menu nawigacyjne, jest sekcja nagłówka witryny zaraz po tytule witryny lub logo.
Jednakże możesz dodać swoje menu nawigacyjne w dowolnym miejscu, które chcesz.
Będziesz musiał dodać ten kod w pliku szablonu twojego motywu, gdzie chcesz wyświetlić swoje menu.
<?phpwp_nav_menu( array( 'theme_location' => 'my-custom-menu', 'container_class' => 'custom-menu-class' ) ); ?>
Lokalizacja motywu jest nazwą, którą wybraliśmy w poprzednim kroku.
Klasa kontenera jest klasą CSS, która zostanie dodana do twojego menu nawigacyjnego. Twoje menu pojawi się jako zwykła lista wypunktowana na twojej stronie.
Możesz użyć klasy CSS .custom_menu_class do stylizacji swojego menu. Oto przykładowy CSS, który pomoże Ci zacząć:
div.custom-menu-class ul { margin:20px 0px 20px 0px; list-style-type: none; list-style: none; list-style-image: none; text-align:right;}div.custom-menu-class li { padding: 0px 20px 0px 0px; display: inline;} div.custom-menu-class a { color:#FFFFFF;}
Aby dowiedzieć się więcej o stylizacji menu nawigacyjnego, zobacz nasz szczegółowy samouczek na temat stylizacji menu nawigacyjnego WordPress
Jeśli tworzysz niestandardowy układ strony docelowej lub strony głównej, to użycie wtyczki WordPress page builder znacznie ułatwiłoby całą sprawę.
Zalecamy użycie Beaver Builder, który jest najlepszym konstruktorem stron WordPress na rynku. Pozwala on na tworzenie dowolnych układów stron za pomocą prostych narzędzi typu „przeciągnij i upuść” (bez konieczności kodowania).
Obejmuje to również dodanie niestandardowego menu nawigacyjnego do układu strony.
Po pierwsze, musisz zainstalować i aktywować wtyczkę Beaver Builder. Aby uzyskać więcej szczegółów, zobacz nasz przewodnik krok po kroku, jak zainstalować wtyczkę WordPress.
Po aktywacji musisz utworzyć nową stronę lub edytować istniejącą, na której chciałbyś dodać menu nawigacyjne. Na ekranie edytora postów kliknij przycisk „Uruchom Beaver Builder”.
Jeśli jest to nowa strona, możesz użyć jednego z gotowych szablonów, które są dostarczane z Beaver Builder. Możesz również od razu edytować swoją wychodzącą stronę.
Następnie musisz dodać moduł Menus i przeciągnąć go na swoją stronę w miejsce, gdzie chcesz wyświetlić menu.
To spowoduje pojawienie się ustawień modułu Menu w popupie. Po pierwsze, musisz wybrać menu nawigacyjne, którego chcesz użyć. Zawsze możesz tworzyć nowe menu lub edytować istniejące menu, odwiedzając Wygląd ” Menu strona w obszarze administracyjnym WordPress.
Możesz również przejrzeć inne ustawienia. Beaver Builder pozwala wybrać niestandardowe kolory, tło i inne właściwości stylu dla Twojego menu.
Gdy skończysz, możesz kliknąć przycisk Zapisz i wyświetlić podgląd swojego menu.
Z uwagi na wzrost wykorzystania urządzeń mobilnych, możesz chcieć uczynić swoje menu przyjaznym dla urządzeń mobilnych, dodając jeden z wielu popularnych efektów.
Możesz dodać efekt wysuwania (powyżej), efekt rozwijania, a nawet efekt przełączania dla menu mobilnych.
Mamy szczegółowy przewodnik krok po kroku, jak zrobić mobilne responsywne menu WordPress.
Menu nawigacyjne są potężnym narzędziem do projektowania stron internetowych. Pozwalają one skierować użytkowników do najważniejszych sekcji Twojej witryny.
WordPress pozwala ci zrobić o wiele więcej niż tylko wyświetlanie linków w swoim menu. Wypróbuj te przydatne samouczki, aby rozszerzyć funkcjonalność menu nawigacyjnych w swojej witrynie WordPress.
- Jak dodać ikony obrazów z menu nawigacyjnym w WordPress
- Jak dodać logikę warunkową do menu w WordPress
- Jak dodać opisy menu w swoim motywie WordPress
- Jak dodać pełnoekranowe responsywne menu w WordPress
- Jak dodać mega menu do swojej witryny WordPress
To wszystko, mamy nadzieję, że ten ostateczny przewodnik pomógł Ci dowiedzieć się, jak dodać menu nawigacyjne w WordPress. Możesz również zobaczyć naszą listę 25 najbardziej przydatnych widżetów WordPress, a nasza lista musi mieć wtyczki WordPress.
Jeśli podobał Ci się ten artykuł, to proszę zasubskrybować nasz kanał YouTube dla samouczków wideo WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.