Jak dodać własne elementy do określonych menu WordPressa

Czy chcesz dodać własne elementy do określonych menu WordPress?

Menu WordPress to menu nawigacyjne wyświetlane w górnej części większości witryn internetowych. Czasami możesz chcieć wyświetlać własne elementy inne niż zwykłe odnośniki w menu nawigacyjnym.

W tym artykule pokażemy, jak łatwo dodawać własne elementy do określonych menu WordPress.

Dlaczego warto dodawać własne elementy do menu WordPress?

Menu WordPress to odnośniki nawigacyjne wyświetlane zazwyczaj w górnej części witryny internetowej. Na urządzeniach mobilnych są one często wyświetlane po dotknięciu ikonki menu.

Ponieważ jest to widoczne położenie w typowym układzie witryny internetowej WordPress, warto je wykorzystać, umieszczając w menu konfiguratory inne niż zwykłe odnośniki.

Na przykład niektórzy użytkownicy mogą chcieć wyświetlać formularz wyszukiwania, tak jak robimy to w WPBeginner. Witryna internetowa z członkostwem może chcieć wyświetlać odnośniki do logowania i wylogowania, lub możesz chcieć dodać ikonki lub obrazki do twojego menu.

Domyślnie menu nawigacyjne są zaprojektowane do wyświetlania zwykłych odnośników tekstowych. Nadal jednak można umieszczać własne elementy w menu WordPress.

Biorąc to pod uwagę, przyjrzyjmy się, jak można dodawać własne elementy do określonych menu w WordPressie, zachowując resztę twojego menu nawigacyjnego w nienaruszonym stanie.

Dodawanie własnych elementów do określonych menu nawigacyjnych w WordPressie

Istnieją różne sposoby dodawania własnych elementów do menu nawigacyjnego w WordPress. Zależy to od rodzaju elementu własnego, który próbujesz dodać.

Pokażemy Ci kilka najpopularniejszych przykładów. Do niektórych z nich będziesz musiał użyć wtyczek, podczas gdy inne będą wymagały dodania kodu.

Jeśli chcesz przejść do określonej sekcji, możesz skorzystać ze spisu treści:

• Dodaj wyskakujące okienko wyszukiwania do twojego menu WordPress
• Dodawanie ikonek lub obrazków do twojego menu
• Dodaj odnośniki logowania/wylogowania do twojego menu
• Dodawanie własnego tekstu do menu WordPress
• Dodawanie obecnej, aktualnej daty do menu
• Wyświetlanie nazw użytkowników w twoim menu
• Wyświetlanie różnych menu na różnych stronach

Zaczynajmy.

1. Dodawanie wyskakującego okienka wyszukiwania w menu WordPress

Zwykle możesz dodać formularz wyszukiwania do twojego panelu bocznego WordPress za pomocą domyślnego widżetu lub bloku Szukaj. Nie ma jednak możliwości domyślnego dodania wyszukiwania do menu nawigacyjnego.

Niektóre motywy WordPress mają opcję dodania pola wyszukiwania do twojego głównego obszaru menu. Ale jeśli twój tego nie robi, możesz skorzystać z poniższej metody.

W tym celu należy zainstalować i włączyć wtyczkę SearchWP Modal Search Form. Aby uzyskać więcej informacji, zobacz nasz przewodnik krok po kroku, jak zainstalować wtyczkę WordPress.

Ta wtyczka jest dodatkiem do SearchWP, który jest najlepszą wtyczką wyszukiwania WordPress na rynku.

Dodatek jest darmowy i działa również z domyślną wyszukiwarką WordPress. Zalecamy jednak używanie go z SearchWP, jeśli chcesz ulepszyć twoje wyszukiwanie WordPress.

Po zainstalowaniu dodatku wystarczy przejść do strony Wygląd ” Menu. W kolumnie „Dodaj elementy menu” kliknij kartę „SearchWP Modal Search Forms”, aby ją rozwinąć.

Wybierz twoją wyszukiwarkę, a następnie kliknij przycisk Dodaj do menu.

Wtyczka doda wyszukiwanie do twojego menu nawigacyjnego. Kliknij „Modalny formularz wyszukiwania” pod twoimi pozycjami menu, aby go rozwinąć i zmienić etykietę na Szukaj lub cokolwiek innego, co chcesz.

Nie zapomnij kliknąć przycisku Zapisz menu, aby zapisać twoje zmiany.

Możesz teraz przejść na twoją witrynę internetową, aby zobaczyć Wyszukiwanie dodane do menu nawigacyjnego. Kliknięcie go spowoduje otwarcie formularza wyszukiwania w wyskakującym okienku (okno) lightbox.

Więcej szczegółów można znaleźć w naszym przewodniku na temat dodawania przycisku wyszukiwania do menu WordPress.

2. Dodawanie ikonek i własnych obrazków do określonych menu

Innym popularnym elementem własnym, który klienci często chcą dodać do określonego menu, jest obrazek lub ikonka.

W tym celu należy zainstalować i włączyć wtyczkę Menu Image Imagely. Aby uzyskać więcej informacji, zobacz nasz przewodnik krok po kroku, jak zainstalować wtyczkę WordPress.

Po włączaniu przejdź do strony Wygląd ” Menu i najedź myszką na pozycję menu, w której chcesz wyświetlić ikonkę lub obrazek.

Kliknij niebieski przycisk Obrazek menu, aby kontynuować.

Spowoduje to wyświetlenie wyskakującego okienka. W tym miejscu można wybrać obrazek lub ikonkę, która będzie wyświetlana z daną pozycją menu.

Można również wybrać pozycję obrazka lub ikonki względem pozycji menu. Na przykład, możesz wyświetlić ikonkę tuż przed pozycją menu, jak w naszym przykładzie poniżej, lub nawet ukryć tytuł menu, aby wyświetlana była tylko ikonka.

Nie zapomnij kliknąć przycisku Zapisz zmiany, aby zapisać twoje ustawienia. Powtórz ten proces, jeśli chcesz dodać ikonki lub obrazki do innych pozycji menu.

Następnie można przejść na twoją witrynę internetową, aby zobaczyć własny obrazek lub ikonkę w określonych pozycjach menu.

Aby uzyskać bardziej szczegółowe instrukcje, zapoznaj się z naszym poradnikiem na temat dodawania obrazków w menu WordPress.

3. Dodawanie odnośników logowania/wylogowania do określonego menu WordPress

Jeśli korzystasz z wtyczki członkostwa WordPress lub prowadzisz sklep internetowy, możesz chcieć umożliwić użytkownikom łatwe logowanie się na ich konta.

Domyślnie WordPress nie oferuje łatwego sposobu wyświetlania odnośników do logowania i wylogowania w menu nawigacyjnym.

Pokażemy ci, jak dodać je za pomocą wtyczki lub fragmentu kodu.

1. Dodawanie odnośników logowania/wylogowania do menu za pomocą wtyczki

Ta metoda jest łatwiejsza i zalecana dla wszystkich użytkowników.

Najpierw należy zainstalować i włączyć wtyczkę Login or Logout Menu Item. Następnie należy przejść na stronę Wygląd ” Menu i kliknąć kartę Logowanie/Wylogowanie, aby ją rozwinąć.

W tym miejscu należy wybrać pozycję „Loguj się|Wyloguj się” i kliknąć przycisk Dodaj do menu.

Nie zapomnij kliknąć przycisku Zapisz menu, aby zapisać twoje zmiany. Możesz teraz przejść na swoją witrynę internetową, aby zobaczyć własny odnośnik logowania w działaniu.

Odnośnik będzie dynamicznie zmieniał się na logowanie lub wylogowanie w zależności od statusu logowania użytkownika.

Dowiedz się więcej w naszym poradniku na temat dodawania odnośników logowania i wylogowania w menu WordPress.

2. Dodawanie odnośników logowania/wylogowania za pomocą własnego kodu

Ta metoda wymaga dodania kodu do twojej witryny internetowej WordPress. Jeśli nie robiłeś tego wcześniej, zapoznaj się z naszym przewodnikiem na temat dodawania własnego kodu w WordPress.

Po pierwsze, musisz znaleźć nazwę, której twój motyw WordPress używa dla określonego położenia menu nawigacji.

Najprostszym sposobem na znalezienie tego jest przejście na stronę Wygląd ” Menu i najechanie myszką na obszar położenia menu.

Kliknij prawym przyciskiem myszy, aby wybrać narzędzie Inspect, a następnie zobaczysz nazwę lokalizacji w kodzie źródłowym poniżej. Dla przykładu, nasz motyw demonstracyjny używa primary, footer i top-bar-menu.

Zwróć uwagę na nazwę używaną dla twojej lokalizacji docelowej, w której chcesz wyświetlić odnośnik logowania/wylogowania.

Następnie musisz dodać następujący kod do pliku functions. php twojego motywu lub wtyczki specyficznej dla witryny.

add_filter( 'wp_nav_menu_items', 'add_loginout_link', 10, 2 );
function add_loginout_link( $items, $args ) {
    if (is_user_logged_in() && $args->theme_location == 'primary') {
        $items .= '<li><a href="'. wp_logout_url() .'">Log Out</a></li>';
    }
    elseif (!is_user_logged_in() && $args->theme_location == 'primary') {
        $items .= '<li><a href="'. site_url('wp-login.php') .'">Log In</a></li>';
    }
    return $items;
}

Następnie możesz przejść na twoją witrynę internetową i zobaczysz odnośnik zaloguj się lub wyloguj się w menu nawigacyjnym.

Ten dynamiczny odnośnik automatycznie przełączy się na logowanie lub wylogowanie w oparciu o status logowania użytkownika.

4. Dodawanie własnego tekstu do menu nawigacyjnego WordPressa

Co jeśli chcesz dodać tylko tekst, a nie odnośnik do twojego menu nawigacyjnego?

Można to zrobić na dwa sposoby.

1. Dodawanie własnego tekstu do określonego menu (prosty sposób)

Wystarczy przejść do strony Wygląd ” Menu i dodać własny odnośnik ze znakiem # jako adresem URL oraz tekstem, który chcesz wyświetlać jako Twój tekst odnośnika.

Kliknij przycisk Dodaj do menu, aby kontynuować.

WordPress doda twój własny tekst jako pozycję menu w lewej kolumnie. Teraz kliknij, aby go rozwinąć i usunąć znak #.

Nie zapomnij kliknąć przycisku Zapisz menu i wyświetlić podgląd twojej witryny internetowej. Zauważysz, że twój własny tekst pojawi się w menu nawigacyjnym.

Nadal jest to odnośnik, ale kliknięcie na niego nic nie daje użytkownikowi.

2. Dodawanie własnego tekstu do menu nawigacji za pomocą kodu

W przypadku tej metody dodasz fragment kodu do swojej witryny internetowej. Najpierw musisz znaleźć nazwę lokalizacji twojego motywu, jak opisano powyżej w sekcji odnośnika logowania/wylogowania.

Następnie należy dodać następujący kod do pliku functions. php motywu lub wtyczki specyficznej dla witryny.

add_filter( 'wp_nav_menu_items', 'your_custom_menu_item', 10, 2 );
function your_custom_menu_item ( $items, $args ) {
    if ( $args->theme_location == 'primary') {
        $items .= '<li><a title="">Custom Text</a></li>';
    }
    return $items;
}

Wystarczy zastąpić miejsce, w którym znajduje się napis „Tekst własny”, twoim własnym tekstem.

Możesz teraz zapisać zmiany i przejść na swoją witrynę internetową, aby zobaczyć własny tekst dodany na końcu menu nawigacyjnego.

Ta metoda kodu może się przydać, jeśli chcesz programowo dodać dynamiczne elementy do określonego menu WordPress.

5. Dodawanie bieżącej daty w menu WordPress

Czy chcesz wyświetlać obecną, aktualną datę wewnątrz menu nawigacyjnego w WordPress? Ta sztuczka przydaje się, jeśli prowadzisz często aktualizowany blog lub witrynę internetową z wiadomościami.

Wystarczy dodać poniższy kod do pliku functions. php twojego motywu lub wtyczki witryny.

add_filter('wp_nav_menu_items','add_todaysdate_in_menu', 10, 2);
function add_todaysdate_in_menu( $items, $args ) {
    if( $args->theme_location == 'primary')  {
         
        $todaysdate = date('l jS F Y');
        $items .=  '<li><a>' . $todaysdate .  '</a></li>';
 
    }
    return $items;
}

Nie zapomnij zastąpić słowa „primary” położeniem twojego menu.

Możesz teraz przejść na swoją witrynę internetową, aby zobaczyć obecną, aktualną datę w menu WordPress.

Możesz również zmienić format daty według własnych upodobań. Zobacz nasz poradnik jak zmienić format daty i godziny w WordPress.

6. Wyświetlanie nazwy użytkownika w menu WordPress

Chcesz dodać trochę więcej personalizacji do twojego menu nawigacyjnego? Możesz powitać logujących się użytkowników Twoim imieniem w menu nawigacyjnym.

Po pierwsze, musisz dodać poniższy kod do pliku functions. php twojego motywu lub wtyczki specyficznej dla witryny.

add_filter( 'wp_nav_menu_objects', 'username_in_menu_items' );
function username_in_menu_items( $menu_items ) {
    foreach ( $menu_items as $menu_item ) {
        if ( strpos($menu_item->title, '#profile_name#') !== false) {
			 if ( is_user_logged_in() )     {
				$current_user = wp_get_current_user();
				 $user_public_name = $current_user->display_name;
                $menu_item->title =  str_replace("#profile_name#",  " Hey, ". $user_public_name, $menu_item->title . "!");
			 } else { 
			 $menu_item->title =  str_replace("#profile_name#",  " Welcome!", $menu_item->title . "!");
			 }
        }
    }

    return $menu_items;
} 

Ten kod najpierw sprawdza, czy dodano pozycję menu z #profile_name# jako tekst odnośnika. Następnie zastępuje ten element menu nazwą zalogowanego użytkownika lub ogólnym powitaniem dla niezalogowanych użytkowników.

Następnie należy przejść do strony Wygląd ” Menu i utworzyć nowy konfigurator z #profile_name# jako tekstem odnośnika.

Nie zapomnij kliknąć przycisku Zapisz menu, aby zapisać twoje zmiany. Następnie możesz przejść na twoją witrynę internetową, aby zobaczyć nazwę zalogowanego użytkownika w menu WordPress.

7. Dynamiczne wyświetlanie menu warunkowych w WordPress

Do tej pory pokazaliśmy, jak dodawać różne rodzaje własnych elementów do określonych menu WordPress. Czasami jednak może zajść potrzeba dynamicznego wyświetlania różnych pozycji menu użytkownikom.

Instancja może chcieć wyświetlać menu tylko zalogowanym użytkownikom. Innym scenariuszem jest sytuacja, w której menu ma się zmieniać w zależności od strony, którą zobaczy użytkownik.

Ta metoda umożliwia utworzenie kilku menu i wyświetlanie ich tylko wtedy, gdy spełnione są określone warunki.

Najpierw należy zainstalować i włączyć wtyczkę Conditional Menus. Aby uzyskać więcej informacji, zobacz nasz przewodnik krok po kroku, jak zainstalować wtyczkę WordPress.

Po włączaniu należy przejść na stronę Wygląd ” Menu. W tym miejscu należy utworzyć nowe menu, które ma być wyświetlane. Na przykład, w tym przykładzie utworzyliśmy nowe menu tylko dla zalogowanych użytkowników.

Po utworzeniu menu przejdź do karty Zarządzaj położeniami.

Następnie należy kliknąć odnośnik Menu warunkowe obok położenia menu.

Następnie z rozwijanego menu należy wybrać utworzone wcześniej menu.

Następnie kliknij przycisk „+ Warunki”, aby kontynuować.

Spowoduje to wyświetlenie okna podręcznego.

W tym miejscu można wybrać warunki, które muszą być spełnione, aby wyświetlić to menu.

Wtyczka oferuje szereg warunków do wyboru. Można na przykład wyświetlać menu na podstawie określonej strony, kategorii, typu treści, taksonomii i innych.

Można również wyświetlać różne menu na podstawie ról użytkowników i statusu logowania się. Można na przykład wyświetlać różne menu istniejącym członkom witryny internetowej.

Mamy nadzieję, że ten artykuł pomógł ci dowiedzieć się, jak dodawać własne elementy do określonych menu WordPress. Możesz również zapoznać się z naszym przewodnikiem na temat wyboru najlepszego oprogramowania do projektowania stron internetowych lub naszym eksperckim porównaniem najlepszego oprogramowania do czatu na żywo dla małych firm.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.