15 najlepszych samouczków do opanowania menu nawigacyjnych WordPress

Szukasz najlepszych samouczków do pracy z menu nawigacyjnymi WordPress? Menu nawigacyjne WordPress pozwalają łatwo dostosowywać i zarządzać menu na Twojej stronie internetowej. W tym artykule pokażemy Ci najlepsze samouczki do opanowania menu nawigacyjnych WordPress.

Ponieważ jest to obszerny artykuł, dodaliśmy spis treści, aby ułatwić nawigację.

1. Rozpoczęcie pracy z menu nawigacyjnymi WordPress
2. Dodaj ikony mediów społecznościowych do menu WordPress
3. Pokaż różne menu zalogowanym użytkownikom w WordPress
4. Dodaj logikę warunkową do menu nawigacyjnych
5. Stylizacja menu nawigacyjnych WordPress
6. Dodaj ikony obrazkowe do menu nawigacyjnych w WordPress
7. Dodaj niestandardowe menu nawigacyjne w WordPress
8. Dodaj menu panelu przesuwnego w motywach WordPress
9. Tworzenie responsywnego menu WordPress gotowego na urządzenia mobilne
10. Dodaj pełnoekranowe responsywne menu w WordPress
11. Dodawanie opisów do menu nawigacyjnych w WordPress
12. Jak dodać tematy do menu nawigacyjnych WordPress
13. Jak dodać menu nawigacyjne do paska bocznego WordPress
14. Dodaj menu nawigacyjne WordPress do wpisów i stron
15. Dodaj linki NoFollow do menu nawigacyjnych WordPress

1. Rozpoczęcie pracy z menu nawigacyjnymi WordPress

W projektowaniu stron internetowych menu nawigacyjne to lista linków, która pozwala odwiedzającym Twoją stronę internetową na odwiedzanie różnych stron i sekcji. Pomaga użytkownikom poruszać się po Twojej stronie, stąd nazwa menu nawigacyjne.

WordPress posiada wbudowane narzędzie, które pozwala tworzyć i używać menu na Twojej stronie. Narzędzie to znajduje się na stronie Wygląd » Menu w Twoim obszarze administracyjnym WordPress.

Tutaj możesz tworzyć menu, dodając elementy z lewej kolumny do prawej. Do menu możesz dodać dowolny wpis WordPress, stronę, kategorie i niestandardowe linki.

Szczegółowe instrukcje znajdziesz w naszym przewodniku dla początkujących na temat jak dodawać menu nawigacyjne w WordPress.

2. Dodaj ikony 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 strony internetowej. Pozwala to na łatwe aktualizowanie ikon, ich przesuwanie i dodawanie nowych ikon mediów społecznościowych, kiedy tylko chcesz.

Najprostszym sposobem jest użycie wtyczki Menu Social Icons. Więcej szczegółów znajdziesz w naszym przewodniku krok po kroku na temat jak zainstalować wtyczkę WordPress.

Po aktywacji przejdź do strony Wygląd » Menu. Utwórz nowe menu społecznościowe, a następnie w zakładce niestandardowe linki z lewej kolumny.

Ikony mediów społecznościowych zobaczysz poniżej pól tekstowych i adresów URL. Wystarczy kliknąć ikonę mediów społecznościowych i wprowadzić adres URL swojego 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 lokalizację menu, a następnie kliknij przycisk zapisz menu.

Więcej szczegółowych instrukcji znajdziesz w naszym przewodniku na temat dodawania ikon mediów społecznościowych do menu WordPress.

3. Pokazywanie różnych menu zalogowanym użytkownikom w WordPressie

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

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

Następnie musisz dodać ten kod do pliku functions.php swojego motywu lub do 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ć swoje menu nawigacyjne w akcji.

Więcej szczegółowych instrukcji znajdziesz w naszym poradniku na temat pokazywania różnych menu zalogowanym użytkownikom w WordPressie.

4. Dodawanie logiki warunkowej do menu nawigacyjnych

Chcesz zmieniać menu w zależności od pewnych warunków? Na przykład inne menu na stronie głównej lub ukrywanie elementu na pojedynczych postach. Oto jak możesz to osiągnąć w WordPressie.

Najpierw musisz zainstalować i aktywować wtyczkę If Menu.

Po aktywacji przejdź do ekranu Wygląd » Menu i kliknij element menu, który chcesz edytować. Zauważysz nową opcję „Włącz logikę warunkową”.

Zaznaczenie tej opcji pokaże dwa rozwijane menu. Możesz wybrać opcję „pokaż” lub „ukryj” dla menu, jeśli spełnia ono określone warunki. Na przykład, ukryj element menu, jeśli użytkownik jest administratorem, lub pokaż element menu tylko wtedy, gdy użytkownik przegląda pojedynczy wpis.

Bardziej szczegółowe instrukcje znajdziesz w naszym artykule na temat dodawania logiki warunkowej do menu WordPress.

5. Stylizacja menu nawigacyjnych WordPress

Twój motyw WordPress kontroluje wygląd menu nawigacyjnych na Twojej stronie internetowej. Używając CSS, możesz dostosować wygląd menu nawigacyjnych.

Najprostszym sposobem na zrobienie tego jest użycie wtyczki CSS Hero. Jest to płatna wtyczka WordPress, która pozwala na dostosowanie dowolnego motywu 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ż stylizować swoje menu nawigacyjne, ręcznie pisząc CSS. Szczegółowe instrukcje znajdziesz w naszym przewodniku na temat stylizacji menu nawigacyjnych WordPress.

6. Dodawanie ikon obrazkowych do menu nawigacyjnych w WordPress

Wiele popularnych stron internetowych używa ikon obrazkowych obok swoich menu nawigacyjnych, aby uczynić je bardziej zauważalnymi. Oto jak możesz dodać ikony obrazkowe do menu nawigacyjnych w WordPress.

Najpierw musisz zainstalować i aktywować wtyczkę Menu Image. Po aktywacji przejdź do Wygląd » Menu. Tam zobaczysz opcję dodawania obrazków do każdego elementu w istniejącym menu.

Możesz również użyć CSS, aby dodać ikony obrazkowe. Szczegółowe instrukcje znajdziesz w naszym przewodniku, jak dodać ikony obrazkowe do menu nawigacyjnych w WordPress.

7. Dodaj niestandardowe menu nawigacyjne w WordPress

Większość darmowych i płatnych motywów WordPress zawiera predefiniowane lokalizacje do wyświetlania menu nawigacyjnych. Możesz jednak również dodać niestandardowe menu nawigacyjne do swoich motywów.

Najpierw musisz zarejestrować swoje nowe menu nawigacyjne, dodając ten kod do pliku functions.php swojego motywu. functions.php

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 niestandardowe menu” dla Twojego motywu. Możesz to zobaczyć, edytując menu na stronie Wygląd » Menu.

Aby wyświetlić niestandardowe 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, zapoznaj się z naszym artykułem na temat jak dodać niestandardowe menu nawigacyjne w motywach WordPress.

8. Dodaj menu panelu przesuwnego w motywach WordPress

Chcesz, aby menu nawigacyjne Twojej witryny było w panelu przesuwającym się? Używanie paneli przesuwających się sprawia, że menu są bardziej interaktywne, mniej inwazyjne i zabawne, szczególnie na urządzeniach mobilnych.

Jednak aby je dodać, będziesz potrzebować średniego poziomu zrozumienia JavaScript, motywów WordPress i CSS.

Aby uzyskać instrukcje krok po kroku, zapoznaj się z naszym przewodnikiem na temat dodawania menu panelu przesuwnego w motywach WordPress.

9. Tworzenie responsywnego menu WordPress gotowego na urządzenia mobilne

Większość motywów WordPress jest responsywna i zawiera menu nawigacyjne gotowe na urządzenia mobilne. Jednak jeśli Twój motyw nie obsługuje dobrze menu nawigacyjnych na urządzeniach mobilnych, wpływa to na doświadczenie użytkownika na urządzeniach mobilnych.

Na szczęście istnieją łatwe sposoby na dodanie responsywnych menu gotowych na urządzenia mobilne bez pisania kodu.

Najpierw musisz zainstalować i aktywować wtyczkę Responsive Menu.

Po aktywacji musisz kliknąć „Responsive Menu” na pasku administracyjnym WordPress, aby skonfigurować ustawienia wtyczki.

Po prostu wybierz szerokość, po której menu responsywne dla urządzeń mobilnych powinno być widoczne. Następnie musisz wybrać istniejące menu nawigacyjne.

Nie zapomnij kliknąć przycisku „Zaktualizuj opcje”, aby zapisać swoje ustawienia. To wszystko, możesz teraz odwiedzić swoją stronę internetową i zmienić rozmiar ekranu przeglądarki, aby zobaczyć responsywne menu dla urządzeń mobilnych.

Istnieje wiele innych sposobów dodania responsywnego menu dla urządzeń mobilnych. Takie jak menu, które pojawia się z efektem przełączania, menu wysuwane z boku i responsywne menu wyboru. Dowiedz się więcej o każdym z nich w naszym przewodniku, jak stworzyć responsywne menu WordPress gotowe na urządzenia mobilne.

10. Dodaj pełnoekranowe responsywne menu w WordPress

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

Najpierw musisz zainstalować i aktywować DC – Full Screen Responsive Menu. Po aktywacji musisz odwiedzić stronę Wygląd » DC Fullscreen Menu, aby skonfigurować ustawienia wtyczki.

Tutaj możesz wybrać menu, kolor tła i tekstu oraz czcionkę Google dla swojego pełnoekranowego menu.

Kliknij przycisk wysyłania, aby zapisać swoje ustawienia. Możesz teraz odwiedzić swoją stronę internetową, aby zobaczyć swoje pełnoekranowe responsywne menu w akcji.

Więcej na ten temat znajdziesz w naszym przewodniku, jak dodać pełnoekranowe responsywne menu w WordPress.

11. Dodawanie opisów z menu nawigacyjnymi w WordPress

Menu nawigacyjne WordPress zazwyczaj składają się tylko z linków tekstowych wyświetlających etykietę linku lub tekst kotwicy. Co jeśli chciałbyś dodać mały opis lub slogan do każdego elementu w swoim menu nawigacyjnym?

Na szczęście WordPress posiada wbudowaną funkcjonalność do dodawania opisów do każdego elementu w menu nawigacyjnym.

Najpierw musisz 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żesz włączyć. Musisz zaznaczyć pole obok opisu.

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

Dodaj swój opis i kliknij przycisk zapisz menu.

Jeśli Twój motyw obsługuje opisy menu, zobaczysz je od razu. W przeciwnym razie będziesz musiał edytować pliki swojego motywu, aby wyświetlić opisy.

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

12. Jak dodać tematy do menu nawigacyjnych w WordPressie

Często pytacie nas, jak dodawać tematy blogów do menu nawigacyjnych w WordPressie. Wielu początkujących zakłada, że aby dodać je do menu, muszą utworzyć strony dla każdego tematu.

W rzeczywistości potrzebujesz kategorii. Kategorie i tagi to wbudowane taksonomie WordPressa, które pozwalają sortować treści według odpowiednich tematów.

Dodaj swoje 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świetlić w swoich menu nawigacyjnych.

Więcej szczegółów znajdziesz w naszym artykule na temat dodawania tematów do menu nawigacyjnych w WordPressie.

13. Jak dodać menu nawigacyjne do paska bocznego WordPressa

Motywy WordPressa zazwyczaj mają menu nawigacyjne na górze lub na dole. Możesz jednak również tworzyć i dodawać menu do paska bocznego WordPressa.

Po prostu odwiedź stronę Wygląd » Widżety i dodaj widżet „Niestandardowe menu” do swojego paska bocznego. Szczegółowe instrukcje znajdziesz w naszym przewodniku na temat dodawania i używania widżetów w WordPressie.

Po dodaniu widżetu do paska bocznego możesz wybrać menu z rozwijanej opcji. Nie zapomnij kliknąć przycisku zapisz, aby zachować swoje ustawienia.

14. Dodaj menu nawigacyjne WordPress w postach i stronach

Zazwyczaj menu nawigacyjne są wyświetlane w nagłówku lub pasku bocznym strony internetowej. Czasami jednak możesz chcieć dodać menu wewnątrz posta lub strony WordPress. Oto jak to zrobić.

Najpierw musisz zainstalować i aktywować wtyczkę Menu Shortcode. Po aktywacji edytuj post lub stronę, na której chcesz wyświetlić swoje menu i dodaj ten shortcode:

[listmenu menu="Nazwa Twojego Menu"]

Nie zapomnij zastąpić „Nazwa Twojego Menu” nazwą swojego własnego menu nawigacyjnego. Zapisz lub opublikuj swój post, a następnie kliknij przycisk podglądu.

Więcej szczegółów znajdziesz w naszym przewodniku, jak dodać menu nawigacyjne WordPress w postach lub stronach.

15. Dodaj linki NoFollow w menu nawigacyjnych WordPress

Zazwyczaj menu nawigacyjne Twojej witryny zawiera linki do Twoich własnych postów i stron. Czasami jednak może być konieczne dodanie linku do zewnętrznej witryny.

Wielu ekspertów SEO zaleca dodawanie atrybutu rel=\"nofollow\" do linków zewnętrznych. Oto jak dodać atrybut nofollow do linków w menu nawigacyjnych WordPress.

Najpierw musisz przejść do strony Wygląd » Menu, a następnie kliknąć przycisk Opcje ekranu w prawym górnym rogu ekranu.

Spowoduje to rozwinięcie menu, w którym musisz zaznaczyć pola obok opcji Relacja linku (XFN) i Cel linku.

Teraz kliknij element menu, który chcesz edytować. Zauważysz dwie nowe opcje: Relacja linku i Otwórz link w nowym oknie/karcie.

Musisz wprowadzić nofollow w opcji relacji linku. Możesz również zaznaczyć opcję otwórz link w nowym oknie/karcie, jeśli chcesz.

Kliknij przycisk menu zapisz, aby zachować zmiany. Teraz ten konkretny link w menu nawigacyjnym WordPress otrzyma atrybut rel=”nofollow”.

Aby uzyskać bardziej szczegółowe instrukcje, zapoznaj się z naszym samouczkiem, jak dodać linki nofollow w menu nawigacyjnym WordPress.

Mamy nadzieję, że ten artykuł pomógł znaleźć najlepsze samouczki do opanowania menu nawigacyjnych WordPress. Możesz również zapoznać się z naszą listą 24 niezbędnych wtyczek WordPress dla stron biznesowych.

Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube po samouczki wideo WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.