Jak już wiesz, menu nawigacyjne jest kluczowym elementem tego, jak dobrze działa Twoja witryna i jak ludzie lubią z niej korzystać. Menu witryny powinno być łatwe w użyciu i spójne na wszystkich stronach, aby pomóc odwiedzającym łatwo znaleźć i uzyskać dostęp do treści, których potrzebują. W przeciwnym razie prawdopodobnie odrzucą witrynę i poszukają innych witryn.
W tym artykule przyjrzymy się, jak WordPress obsługuje menu z perspektywy programisty.
Dodaj menu WordPress
Załóżmy, że utworzyłeś strony „Przykładowa strona 1” i „Przykładowa strona 2” w obszarze administracyjnym swojej witryny WordPress. Jeśli na ekranie menu administratora nie utworzono żadnych menu, prawdopodobnie zobaczysz domyślne menu w widoku z przodu ze wszystkimi dostępnymi stronami.
Po dodaniu menu w obszarze Wygląd -> Menu i wybraniu jednej z domyślnych lokalizacji (Podstawowa lub Pomocnicza) obok karty „Edytuj menu” pojawi się nowa zakładka „Lokalizacja”.
Za pomocą lewego paska bocznego możesz dodać wybrane pozycje menu, wybierając je z dostępnej zawartości.
Jeśli dodasz niestandardowe menu z poziomu ekranu menu administratora, zostanie ono wyświetlone zamiast menu domyślnego.
Jeśli aktywowałeś motyw blokowy Podobnie jak w przypadku witryny Twenty Twenty-Three, która posiada pełny edytor witryny, można łatwo dodać nawigację do układu witryny, przechodząc do edytora w menu administracyjnym Wygląd -> Edytor.
Funkcja register_nav_menus służy do rejestrowania menu nawigacyjnych w motywie WordPress. Akceptuje ona tablicę lokalizacji menu jako argument, a każda lokalizacja jest powiązana z unikalnym identyfikatorem lub nazwą lokalizacji motywu.
register_nav_menus( string[] $locations = array() )
Na przykład:
function my_theme_register_menus() {
register_nav_menus( array(
'primary-menu' => __( 'Primary Menu', 'my-theme' ),
'footer-menu' => __( 'Footer Menu', 'my-theme' ),
) );
}
add_action( 'after_setup_theme', 'my_theme_register_menus' );
W pliku functions.php Twojego aktywowanego motywu możesz zobaczyć slugi dla lokalizacji menu. W motywie GeneratePress, na przykład, w okolicach linii 57 w pliku functions.php:
// Register primary menu.
register_nav_menus(
array(
'primary' => __( 'Primary Menu', 'generatepress' ),
)
);
Oto nazwa menu, z którą możesz pracować w argumentach funkcji wp_nav_menu, które omówimy dalej.
W witrynach WordPress sposobem na zachowanie odpowiedniej elastyczności menu i ich personalizację w sposób odpowiadający potrzebom danego projektu jest wykorzystanie wbudowanej funkcji WordPress — wp_nav_menu.
Funkcja register_nav_menus współpracuje z funkcją wp_nav_menu w celu wyświetlania menu nawigacyjnych.
Celem tej funkcji jest umożliwienie tworzenia linków menu na stronach WordPress, które będą wyglądać i działać w spersonalizowany sposób.
Struktura
Argumenty funkcji wp_nav_menu kontrolujące jej wygląd i zachowanie są następujące:
wp_nav_menu( array $args = array(
'menu' => "", // (int|string|WP_Term) Desired menu. Accepts a menu ID, slug, name, or object.
'menu_class' => "", // (string) CSS class to use for the ul element which forms the menu. Default 'menu'.
'menu_id' => "", // (string) The ID that is applied to the ul element which forms the menu. Default is the menu slug, incremented.
'container' => "", // (string) Whether to wrap the ul, and what to wrap it with. Default 'div'.
'container_class' => "", // (string) Class that is applied to the container. Default 'menu-{menu slug}-container'.
'container_id' => "", // (string) The ID that is applied to the container.
'fallback_cb' => "", // (callable|bool) If the menu doesn't exists, a callback function will fire. Default is 'wp_page_menu'. Set to false for no fallback.
'before' => "", // (string) Text before the link markup.
'after' => "", // (string) Text after the link markup.
'link_before' => "", // (string) Text before the link text.
'link_after' => "", // (string) Text after the link text.
'echo' => "", // (bool) Whether to echo the menu or return it. Default true.
'depth' => "", // (int) How many levels of the hierarchy are to be included. 0 means all. Default 0.
'walker' => "", // (object) Instance of a custom walker class.
'theme_location' => "", // (string) Theme location to be used. Must be registered with register_nav_menu() in order to be selectable by the user.
'items_wrap' => "", // (string) How the list items should be wrapped. Default is a ul with an id and class. Uses printf() format with numbered placeholders.
'item_spacing' => "", // (string) Whether to preserve whitespace within the menu's HTML. Accepts 'preserve' or 'discard'. Default 'preserve'.
) );
UWAGA: Jeśli chcesz znaleźć i przestudiować oryginalny kod wp_nav_menu, możesz otworzyć plik wp-includes/nav-menu-template.php i przejść do linia 57.
Modyfikować
Zobaczmy zatem kilka przypadków, co można osiągnąć, modyfikując te argumenty. Wartości domyślne to:
$defaults = array(
'menu' => '',
'container' => 'div',
'container_class' => 'menu-{menu slug}-container',
'container_id' => '',
'menu_class' => 'menu',
'menu_id' => '',
'echo' => true,
'fallback_cb' => 'wp_page_menu',
'before' => '',
'after' => '',
'link_before' => '',
'link_after' => '',
'items_wrap' => '',
'depth' => 0,
'walker' => '',
'theme_location' => ''
);
UWAGA: Aby śledzić, co będzie dalej i móc to odtworzyć, potrzebujesz dostępu FTP do instalacji WordPress. W folderze aktywnego motywu na swojej stronie internetowej znajdź plik functions.php i otwórz go za pomocą swojego ulubionego edytora.
Ponadto, w celu sprawdzenia bezpieczeństwa, upewnij się, że wiesz, jak utworzyć motyw potomny.
Przykłady
Przyjrzyjmy się kilku przykładom.
Pokaż menu tylko zalogowanym użytkownikom
wp_nav_menu( array(
'theme_location' => is_user_logged_in() ? 'logged-in-menu' : 'logged-out-menu'
) );
Tutaj użyliśmy jest_użytkownikiem_zalogowanym funkcja w połączeniu z funkcją wp_nav_menu. Funkcja is_user_logged_in zwraca true lub false i ustala, czy bieżący użytkownik jest zalogowanym użytkownikiem.
Dostosuj CSS menu
wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'custom-menu-class', ) );
‘menu_class’ jest ustawione na ‘custom-menu-class’, co ustawia klasę CSS dla elementu kontenera menu. Pozwala to na dodanie własnego CSS do menu poprzez edycję CSS motywu potomnego w następujący sposób:
// container class
header .my-menu-class{}
// container class first unordered lists
header .my-menu-class ul {}
header .my-menu-class ul ul {}
// navigation items
header .my-menu-class li {}
i tak dalej.
Zawinąć menu?
wp_nav_menu( array( 'container' => false, ) );
Argument container jest używany do kontrolowania, czy menu powinno być owinięte w element container. Czy owinąć ul i czym to owinąć.
W ten sam sposób możesz zastąpić container_class i container_id:
wp_nav_menu( array( 'theme_location' => 'primary', 'container' => 'nav', 'container_class'=> 'custom-container-class', 'container_id' => 'custom-container-id', ) );
Zawijanie przedmiotów
Możesz zrobić to samo, aby zmienić strukturę HTML otaczającą listę pozycji menu, korzystając z tego przykładu:
wp_nav_menu( array( 'theme_location' => 'primary', 'items_wrap' => '', ) );
Tekst przed lub po tekście linku
Może Ci się to przydać, jeśli chcesz dodać tylko tekst lub nawet owinąć link elementem HTML, takim jak span:
wp_nav_menu( array( 'theme_location' => 'primary', 'link_before' => '', 'link_after' => '', ) );
Klasa Walkera
W WordPress 2.1 dodano klasę Walker WordPress, aby dać programistom możliwość przechodzenia przez struktury danych przypominające drzewa w celu renderowania HTML. Od tego czasu okazała się ona świetną funkcją dostosowywania menu. Na szczęście mamy świetny artykuł poświęcony temu tematowi, który zalecamy poświęcić na przestudiowanie. W naszym artykule o klasie Walker zapoznasz się z działaniem parametru walker i sposobem dostosowywania wyników na swój własny sposób.
Wniosek
Funkcja wp_nav_menu umożliwia modyfikację i personalizację zachowania domyślnego menu poprzez nadpisanie jego argumentów. Studiując kod i konsultując podane przez nas przykłady, możesz poeksperymentować i ostatecznie stworzyć unikalne menu, które będą pasować do Twojej witryny WordPress i zapewnią użytkownikom przyjazne dla użytkownika doświadczenie nawigacyjne.
Rozpocznij 14-dniowy bezpłatny okres próbny
Wypróbuj nasz nagradzany hosting WordPress!
