Jak dodać niestandardowe elementy do konkretnych menu WordPress

Menu WordPress są cholernie niesamowite. Interfejs drag drop sprawia, że jest to naprawdę łatwe dla programistów motywów WordPress i użytkowników. W przeszłości pokazaliśmy, jak dodać niestandardowe menu w WordPress wraz z stylizacją niestandardowego menu. Jedną z rzeczy, która jest ograniczona w wizualnym interfejsie menu, jest to, że możesz dodawać tylko linki (strony, kategorie lub niestandardowe linki). Co zrobić, jeśli chcesz dodać niestandardowy element do menu WordPress? Może chcesz dodać pasek wyszukiwania lub link logowania/wylogowania, dzisiejszą datę lub cokolwiek innego w menu WordPress. Tylko dlatego, że nie ma interfejsu wizualnego, nie oznacza, że nie jest to możliwe. W tym artykule pokażemy, jak można wykorzystać wp_nav_menu_items hook, aby dodać niestandardowe elementy do wszystkich lub konkretnych menu WordPress.

Uwaga: ten poradnik jest przeznaczony dla programistów motywów WordPress, więc oczekuje się, że znasz podstawowy html/css i uczciwe zrozumienie, jak działają motywy WordPress.

Oczywiście musisz mieć włączone niestandardowe menu w swoich motywach, zanim będziesz mógł kontynuować.

Zacznijmy od podstaw. Musimy dodać własny filtr do wp_nav_menu_items hak. Przykład wyglądałby tak:

add_filter ('wp_nav_menu_items', 'your_custom_menu_item', 10, 2 );
function your_custom_menu_item ($items, $args ) {
    if (is_single () & & $args - >theme_location = = 'primary') {
        $ items .= '<li>Pokaż cokolwiek < /li>';
    }
    return $ items;
}

Teraz, jak widzisz, możesz użyć instrukcji warunkowych wraz z argumentem theme_location. Pozwala to na kierowanie określonej lokalizacji menu z dowolnym warunkiem. Jeśli nie chcesz instrukcji warunkowej, nie musisz jej używać. Wystarczy dodać go do określonej lokalizacji menu lub odwrotnie.

Teraz, gdy widzieliście podstawowy przykład, pozwólcie nam pokazać kilka konkretnych przykładów na to, jak to działa.

Dodawanie linków logowania/wylogowywania do określonego Menu WordPress

Jeśli chcesz dać użytkownikom możliwość logowania/wylogowania, to jedno miejsce, w którym możesz dodać linki, znajduje się w niestandardowym menu. Poniższy fragment pokaże linki do logowania / wylogowania użytkowników odpowiednio w menu Lokalizacja: podstawowe. Możesz zmienić lokalizację menu, jeśli chcesz.

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() .'">Wyloguj się</a > < / li>';
    }
    elseif (!is_user_logged_in () & & $args - >theme_location = = 'primary') {
        $ items .= '<li > <a href="'. site_url ('wp-login.php").'">Zaloguj się</a > < / li>';
    }
    return $ items;
}

Dodawanie paska wyszukiwania do określonego Menu

Chcesz dodać pasek wyszukiwania do określonego menu? Nie szukaj dalej. Możesz to zrobić wklejając poniższy fragment:

add_filter ('wp_nav_menu_items', 'add_search_box_to_menu', 10, 2);
function add_search_box_to_menu ($items, $args ) {
    if ($args - >theme_location = = 'primary' )
        return $ items ."<li class = 'menu-header-search' > < form action='http://example.com/'id=' searchform'method='get'><input type=' text'name=' s'id=' s'placeholder='Search' ></form>< / li>";

    return $ items;
}

Dodawanie dzisiejszej daty do konkretnego Menu WordPress

Poniższy fragment doda dzisiejszą datę do twojego menu WordPress. Możesz użyć naszego dzisiejszego podręcznika daty, aby dostosować kod, jeśli chcesz.

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>". $todaysdate .  "</li>";

	}
    return $ items;
}

Mamy nadzieję, że ten artykuł pozwoli programistom rozszerzyć funkcjonalność ich motywów.