Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Puchar WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

15 najlepszych poradników do opanowania menu nawigacji WordPress

Uwaga redakcyjna: Otrzymujemy prowizję z linków partnerskich na WPBeginner. Prowizje nie mają wpływu na opinie i oceny naszych redaktorów. Dowiedz się więcej o Proces redakcyjny.

Szukasz najlepszych poradników do pracy z menu nawigacyjnym WordPress? Menu nawigacyjne WordPress umożliwiają łatwe dostosowanie i zarządzanie menu na twojej witrynie internetowej. W tym artykule pokażemy najlepsze poradniki do opanowania menu nawigacyjnych WordPress.

Best tutorials to master WordPress navigation menus

Ponieważ jest to długi artykuł, dodaliśmy spis treści dla łatwiejszej nawigacji.

  1. Pierwsze kroki z menu nawigacyjnym WordPress
  2. Dodawanie ikonek mediów społecznościowych do menu WordPress
  3. Pokazywanie różnych menu zalogowanym użytkownikom WordPressa
  4. Dodawanie logiki warunkowej do menu nawigacji
  5. Stylizacja menu nawigacyjnych WordPress
  6. Dodawanie ikonek z obrazkami do menu nawigacji w WordPress
  7. Dodawanie własnych menu nawigacji w WordPress
  8. Dodawanie menu panelu slajdów w motywach WordPress
  9. Tworzenie responsywnego menu WordPress na urządzenia mobilne
  10. Dodawanie responsywnego menu w trybie pełnoekranowym w WordPress
  11. Dodawanie opisu do menu nawigacji w WordPress
  12. Jak dodać tematy w menu nawigacji WordPress
  13. Jak dodać menu nawigacyjne w panelu bocznym WordPress?
  14. Dodawanie menu nawigacji WordPress we wpisach i na stronach
  15. Dodawanie odnośników NoFollow w menu nawigacji WordPress

1. Pierwsze kroki z menu nawigacyjnym WordPress

W projektowaniu stron internetowych menu nawigacyjne to lista dozwolonych odnośników, które pozwalają odwiedzającym twoją witrynę internetową przejść na różne strony i sekcje. Pomaga użytkownikom poruszać się po twojej witrynie internetowej, stąd nazwa menu nawigacyjnego.

Navigation menu

WordPress posiada wbudowane narzędzie, które umożliwia tworzenie i używanie menu na twojej witrynie internetowej. Narzędzie to znajduje się na stronie Wygląd ” Menu w twoim obszarze administracyjnym WordPress.

Creating and managing navigation menus in WordPress

Tutaj można tworzyć menu, dodając elementy z lewej kolumny do prawej. Możesz dodać dowolny wpis WordPress, stronę, kategorie i własne odnośniki do menu.

Szczegółowe instrukcje można znaleźć w naszym przewodniku dla początkujących na temat dodawania menu nawigacyjnych w WordPress.

2. Dodawanie ikonek mediów społecznościowych do menu WordPress

Menu WordPress mogą być również używane do dodawania przycisków mediów społecznościowych do twojej witryny internetowej. Pozwala to łatwo aktualizować ikonki, zmieniać ich kolejność i utwórz nowe ikony mediów społecznościowych, kiedy tylko chcesz.

Najprostszym sposobem na to jest użycie wtyczki Menu Social Icons. Aby uzyskać więcej informacji, zobacz nasz przewodnik krok po kroku, jak zainstalować wtyczkę WordPress.

Po włączaniu, przejdź do strony Wygląd ” Menu. Utwórz nowe menu społecznościowe, a następnie wybierz kartę własnych odnośników z lewej kolumny.

Adding social menus

Zobaczysz ikonki mediów społecznościowych poniżej pól tekstu odnośnika i adresu URL. Wszystko, co musisz zrobić, to kliknąć ikonkę mediów społecznościowych i wpisz adres URL twojego profilu społecznościowego. Po zakończeniu kliknij przycisk Dodaj do menu.

Powtórz ten proces dla wszystkich profili mediów społecznościowych, które chcesz dodać. Po zakończeniu wybierz położenie menu, a następnie kliknij przycisk Zapisz menu.

Aby uzyskać bardziej szczegółowe instrukcje, zobacz nasz przewodnik na temat dodawania ikonek mediów społecznościowych do menu WordPress.

3. Wyświetlanie różnych menu zalogowanym użytkownikom WordPressa

Jeśli prowadzisz witrynę członkowską WordPress, możesz chcieć wyświetlać różne menu swoim zalogowanym użytkownikom. Oto jak można to łatwo osiągnąć.

Najpierw musisz utworzyć dwa różne menu. Jedno dla twoich zalogowanych użytkowników i jedno dla użytkowników, którzy nie są zalogowani. Możesz nazwać te menu zalogowany i wylogowany.

Następnie musisz dodać ten kod do pliku functions. php twojego motywu lub wtyczki specyficznej dla witryny.

function my_wp_nav_menu_args( $args = '' ) {

if( is_user_logged_in() ) { 
	$args['menu'] = 'logged-in';
} else { 
	$args['menu'] = 'logged-out';
} 
	return $args;
}
add_filter( 'wp_nav_menu_args', 'my_wp_nav_menu_args' );

.

To wszystko. Możesz teraz przetestować twoje menu nawigacyjne w działaniu.

Aby uzyskać bardziej szczegółowe instrukcje, zobacz nasz poradnik, jak pokazać różne menu zalogowanym użytkownikom w WordPress.

4. Dodawanie logiki warunkowej do menu nawigacji

Chcesz zmieniać menu na podstawie określonych warunków? Na przykład inne menu na stronie głównej lub ukrywanie wpisu w pojedynczych wpisach. Oto jak można to osiągnąć w WordPress.

Najpierw musisz zainstalować i włączyć wtyczkę If Menu.

Po włączaniu przejdź na ekran Appearabnce ” Menus i kliknij pozycję menu, którą chcesz edytować. Zauważysz nową opcję „Włącz logikę warunkową”.

Conditional logic option for a menu item

Zaznaczenie tej opcji spowoduje wyświetlenie dwóch rozwijanych opcji. Możesz wybrać pokazywanie lub ukrywanie menu, jeśli spełnia ono określone warunki. Na przykład, ukryj pozycję menu, jeśli użytkownik jest administratorem lub pokaż pozycję menu tylko wtedy, gdy użytkownik przegląda pojedynczy wpis.

Aby uzyskać bardziej szczegółowe instrukcje, zobacz nasz artykuł na temat dodawania logiki warunkowej do menu WordPress.

5. Stylizacja menu nawigacyjnych WordPress

Twój motyw WordPress kontroluje wygląd menu nawigacyjnych w witrynie internetowej. Za pomocą CSS można dostosować wygląd menu nawigacji.

Najprostszym sposobem na to jest użycie wtyczki CSS Hero. Jest to wysokiej jakości wtyczka WordPress, która pozwala dostosować własny motyw WordPress bez pisania ani jednej linii kodu (nie wymaga HTML ani CSS). Zobacz naszą recenzję CSS Hero, aby dowiedzieć się więcej.

Możesz również nadać styl twojemu menu nawigacyjnemu, ręcznie pisząc CSS. Szczegółowe instrukcje można znaleźć w naszym przewodniku na temat stylizacji menu nawigacyjnych WordPress.

6. Dodawanie ikonek z obrazkami do menu nawigacji w WordPressie

Image icons in navigation menus

Wiele popularnych witryn internetowych używa ikonek z obrazkami obok swoich menu nawigacyjnych, aby uczynić je bardziej powiadomionymi. Oto jak dodać ikonki obrazków do menu nawigacyjnego w WordPress.

Najpierw należy zainstalować i włączyć wtyczkę Menu Image. Po włączaniu, przejdź do Wygląd ” Menu. Tam zobaczysz opcję dodawania obrazków do każdej pozycji w twoim istniejącym menu.

Adding image to a menu item in WordPress

Możesz również użyć CSS, aby dodać ikonki obrazków. Szczegółowe instrukcje można znaleźć w naszym przewodniku na temat dodawania ikonek z obrazkami do menu nawigacyjnego w WordPress.

7. Dodawanie własnych menu nawigacyjnych w WordPressie

Większość darmowych i premium motywów WordPress zawiera wstępnie zdefiniowane lokalizacje do wyświetlania twojego menu nawigacyjnego. Możesz jednak również dodać własne menu nawigacyjne do swojego motywu.

Najpierw musisz zarejestrować nowe menu nawigacyjne, dodając ten kod 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' );

.

Ten kod utworzy „Moje własne menu” dla twojego motywu. Możesz to zobaczyć edytując menu na stronie Wygląd ” Menu.

Theme location for your custom menu

Aby wyświetlić własne menu, musisz dodać ten kod do swojego motywu w miejscu, w którym chcesz wyświetlić menu.

<?php
wp_nav_menu( array( 
    'theme_location' => 'my-custom-menu', 
    'container_class' => 'custom-menu-class' ) ); 
?>

.

Aby uzyskać bardziej szczegółowe instrukcje, zobacz nasz artykuł na temat dodawania własnych menu nawigacyjnych w motywach WordPress.

8. Dodawanie menu panelu slajdów w motywach WordPress

A slide panel navigation menu in WordPress

Chcesz wyświetlić menu nawigacyjne twojej witryny w formie wsuwanego panelu? Korzystanie z wsuwanych paneli sprawia, że twoje menu jest bardziej interaktywne, mniej inwazyjne i przyjemne specjalnie na urządzeniach mobilnych.

Jednak, aby je dodać, będziesz potrzebował zrozumienia JavaScript, motywów WordPress i CSS na średnim poziomie.

Aby uzyskać instrukcje krok po kroku, zobacz nasz przewodnik na temat dodawania menu panelu slajdów w motywach WordPress.

9. Tworzenie responsywnego menu WordPress na urządzenia mobilne

Mobile responsive navigation menu in WordPress

Większość motywów WordPress jest responsywna i posiada menu nawigacyjne przystosowane do urządzeń mobilnych. Jeśli jednak twój motyw nie obsługuje dobrze menu nawigacyjnych na urządzeniach mobilnych, ma to wpływ na wrażenia użytkownika na urządzeniach mobilnych.

Na szczęście istnieje kilka łatwych sposobów na dodanie responsywnych menu dostosowanych do urządzeń mobilnych bez pisania kodu.

Po pierwsze, należy zainstalować i włączać wtyczkę Responsive Menu.

Po włączaniu należy kliknąć „Responsive Menu” na pasku administratora WordPress, aby skonfigurować ustawienia wtyczki.

Wystarczy wybrać szerokość, po której mobilne menu responsywne powinno być widoczne. Następnie należy wybrać istniejące menu nawigacyjne.

Nie zapomnij kliknąć przycisku „Update Options”, aby zapisać twoje ustawienia. To wszystko, możesz teraz przejść na twoją witrynę internetową i zmienić rozmiar ekranu przeglądarki, aby zobaczyć mobilne menu responsywne.

Istnieje wiele innych sposobów na dodanie mobilnego menu responsywnego. Na przykład menu wyświetlane z efektem przełączania, menu wsuwane i responsywne menu wyboru. Dowiedz się więcej o nich wszystkich w naszym przewodniku na temat tworzenia mobilnego responsywnego menu WordPress.

10. Dodaj pełnoekranowe menu responsywne w WordPress

Fullscreen responsive menu in WordPress

Czy zauważyłeś, jak niektóre popularne witryny internetowe używają pełnoekranowego menu nawigacyjnego? Zazwyczaj wymaga to kreatywnego wykorzystania JavaScript i CSS. Na szczęście można to zrobić w WordPress bez pisania jakiegokolwiek kodu.

Najpierw należy zainstalować i włączyć DC – Full Screen Responsive Menu. Po włączaniu należy przejść na stronę Wygląd ” DC – Menu pełnoekranowe, aby skonfigurować ustawienia wtyczki.

Fullscreen menu settings

Tutaj możesz wybrać menu, kolor tła i tekstu oraz krój pisma Google dla twojego menu w trybie pełnoekranowym.

Kliknij przycisk przesyłania, aby zapisać twoje ustawienia. Możesz teraz przejść na twoją witrynę internetową, aby zobaczyć responsywne menu w trybie pełnoekranowym w działaniu.

Więcej informacji na ten temat można znaleźć w naszym przewodniku na temat dodawania responsywnego menu w trybie pełnoekranowym w WordPress.

Menu nawigacyjne WordPress to zwykle tylko odnośniki tekstowe wyświetlające etykietę linku lub tekst kotwicy. A co jeśli chciałbyś dodać mały opis lub tag dla każdej pozycji w twoim menu nawigacyjnym?

Na szczęście WordPress ma wbudowaną funkcję dodawania opisu do każdej pozycji w twoim menu nawigacyjnym.

Najpierw należy włączyć opcję opisów. Kliknij przycisk Opcje ekranu w prawym górnym rogu ekranu.

Spowoduje to wyświetlenie listy pól i opcji, które można włączać. Musisz zaznaczyć pole obok pozycji Opis.

Enabling description field for navigation menus in WordPress

Teraz przewiń w dół i kliknij pozycję menu, aby ją edytować, a zobaczysz opcję dodania opisu.

Description field added to menu items

Dodaj swój opis i kliknij przycisk Zapisz menu.

Jeśli twój motyw obsługuje opisy menu, będziesz mógł je od razu zobaczyć. W przeciwnym razie będziesz musiał edytować pliki twojego motywu, aby wyświetlać opisy.

Aby uzyskać szczegółowe instrukcje, zapoznaj się z naszym przewodnikiem na temat dodawania opisów menu w twoim motywie WordPress.

Displaying blog topics in WordPress navigation menu

Często jesteśmy pytani o to, jak dodać tematy blogów do menu nawigacji w WordPress. Wielu początkujących zakłada, że muszą utworzyć strony dla każdego tematu, aby dodać je do menu.

W rzeczywistości potrzebne są kategorie. Kategorie i tagi są wbudowanymi w WordPress taksonomiami, które umożliwiają sortowanie treści na odpowiednie tematy.

Dodaj twoje artykuły do odpowiednich kategorii, a następnie przejdź do strony Wygląd ” Menu. Kliknij kartę Kategorie, aby ją rozwinąć, a następnie wybierz kategorie, które chcesz wyświetlać w menu nawigacyjnym.

Adding categories to navigation menus in WordPress

Aby uzyskać więcej informacji, zapoznaj się z naszym artykułem na temat dodawania tematów w menu nawigacyjnym WordPress.

13. Jak dodać menu nawigacyjne w panelu bocznym WordPressa

Motywy WordPress mają zwykle menu nawigacyjne na górze lub na dole. Możesz jednak również tworzyć i dodawać menu do twojego panelu bocznego WordPress.

Wystarczy przejść na stronę Wygląd ” Widżety i dodać widżet „Własne menu” do twojego panelu bocznego. Szczegółowe instrukcje można znaleźć w naszym przewodniku na temat dodawania i używania widżetów w WordPress.

Adding navigation menu to sidebar widget

Po dodaniu widżetu do panelu bocznego możesz wybrać menu z rozwijanej opcji. Nie zapomnij kliknąć przycisku Zapisz, aby zapisać twoje ustawienia.

Zazwyczaj menu nawigacyjne są wyświetlane w nagłówku lub panelu bocznym witryny internetowej. Czasami jednak warto dodać menu wewnątrz wpisu lub strony WordPress. Oto jak to zrobić.

Najpierw należy zainstalować i włączyć wtyczkę Menu Shortcode. Po włączaniu edytuj wpis lub stronę, na której chcesz wyświetlić twoje menu i dodaj ten krótki kod:

[listmenu menu="Your Menu Name"].

Nie zapomnij zastąpić „Your Menu Name” nazwą twojego własnego menu nawigacyjnego. Zapisz lub opublikuj swój wpis, a następnie kliknij przycisk podglądu.

Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem na temat dodawania menu nawigacyjnego WordPress we wpisach lub na stronach.

Zazwyczaj menu nawigacyjne twojej witryny zawiera odnośniki do twoich wpisów i stron. Czasami jednak może zajść potrzeba dodania odnośnika do zewnętrznej witryny.

Wielu ekspertów SEO zaleca dodanie atrybutu rel=”nofollow” do odnośników zewnętrznych. Oto jak dodać atrybut nofollow do odnośników w menu nawigacyjnym WordPress.

Najpierw przejdź na stronę Wygląd ” Menu, a następnie kliknij przycisk Opcje ekranu w prawym górnym rogu ekranu.

Check target and link relationship boxes in Screen Options

Spowoduje to wyświetlenie menu, w którym należy zaznaczyć pola obok opcji Link Relationship (XFN) i Link Target.

Teraz kliknij pozycję menu, którą chcesz edytować. Zostaną powiadomione dwie nowe opcje: Link Relationship i Open odnośnik w nowym oknie/zakładce.

Adding nofollow to a menu item

Musisz wpisz nofollow w opcji relacji odnośnika. Jeśli chcesz, możesz również zaznaczyć opcję Otwórz odnośnik w nowym oknie/zakładce.

Kliknij przycisk Zapisz menu, aby zapisać twoje zmiany. Teraz ten konkretny odnośnik w twoim menu nawigacyjnym WordPress będzie miał dodany atrybut rel=”nofollow”.

Aby uzyskać bardziej szczegółowe instrukcje, zobacz nasz poradnik dotyczący dodawania odnośników nofollow w menu nawigacyjnym WordPress.

Mamy nadzieję, że ten artykuł pomógł znaleźć najlepsze poradniki do opanowania menu nawigacji WordPress. Warto również zapoznać się z naszą listą 24 niezbędnych wtyczek WordPress dla witryn internetowych dla firm.

Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube, aby zobaczyć poradniki dotyczące filmów WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.

Ujawnienie: Nasze treści są wspierane przez czytelników. Oznacza to, że jeśli klikniesz na niektóre z naszych linków, możemy otrzymać prowizję. Zobacz jak WPBeginner jest finansowany, dlaczego to ma znaczenie i jak możesz nas wspierać. Oto nasz proces redakcyjny.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Najlepszy zestaw narzędzi WordPress

Uzyskaj BEZPŁATNY dostęp do naszego zestawu narzędzi - zbiór produktów i zasobów związanych z WordPressem, które każdy profesjonalista powinien mieć!

Reader Interactions

2 komentarzeZostaw odpowiedź

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

Zostaw odpowiedź

Dziękujemy za pozostawienie komentarza. Pamiętaj, że wszystkie komentarze są moderowane zgodnie z naszymi polityka komentarzy, a Twój adres e-mail NIE zostanie opublikowany. NIE używaj słów kluczowych w polu nazwy. Przeprowadźmy osobistą i konstruktywną rozmowę.