5. Menu główne szablonu WordPress

---

Dodano 2016-12-22 22:29:06 przez Daniel

---

Menu główne

W tej części kursu „Własny szablon” dowiesz się jak stworzyć menu główne w części nagłówkowej strony. Jest to standardowa operacja dla każdego szablonu. Później utworzonym menu możesz zarządzać z kokpitu w ustawieniach wyglądu.

Definiowanie menu w functions.php

Pierwszą rzeczą jaką należy zrobić by stworzyć własne menu jest zarejestrowanie go w pliku functions.php. Do rejestracji menu wykorzystujemy funkcję register_nav_menu( $location, $description ); Jest tutaj konieczne podanie dwóch parametrów.

• $location – ten parametr określa nazwę identyfikującą menu, tutaj lepiej nie używać spacji, najwyżej myślniki lub podkreślniki.
• $description – krótki opis określający przeznaczenie tego menu. Na przykład „Menu główne” albo „Menu boczne”

Aby menu zadziałało trzeba jeszcze umieścić rejestrację w funkcję a następnie tę funkcję podczepić, najlepiej przy inicjalizacji tak jak zostało to pokazane w kodzie poniżej.

function zwp_add_menu() {
    register_nav_menu( 'main-menu', 'Menu główne' );
}

add_action('init','zwp_add_menu');

Po zarejestrowaniu menu powinno być ono już dostępne w kokpicie. Aby zarządzać naszym „Menu główne” należy wejść w wygląd > menu, powinien się ukazać panel jak na obrazku poniżej.

Na początku powinna się otworzyć zakładka „Edytuj menu”. Tutaj należy wprowadzić nazwę menu, domyślnie jest to „Menu 1” i w zasadzie można tak zostawić. Warto zwrócić uwagę na ustawienia menu. Jeśli poprawnie zarejestrowaliśmy to jedną z opcji będzie nasze zarejestrowane menu główne. Klikamy niebieski przycisk „Zapisz menu” i już wszystko powinno być skonfigurowane. Jeśli mamy utworzonych wiele menu możemy nimi zarządzać wybierając zakładkę „zarządzaj rozmieszczeniem”. Tam znajduje się panel jak na obrazku poniżej.

W tym miejscu dostępna jest lista wszystkich wszystkich zarejestrowanych w bieżącym szablonie menu. Jeśli masz ich więcej niż jedną możesz w tym miejscu odpowiednio je przypisywać. W kilku miejscach możesz wyświetlić to samo. Teraz pozostało już tylko dodać nasze menu w części nagłówkowej strony.

Dodawanie menu głównego w nagłówku

Aby dodać menu na stronie należy wykorzystać funkcję wp_nav_menu( array $args = array() ), która pobiera tablicę wielu argumentów. Warto tutaj omówić większość z nich ponieważ stanowią one kwestię dość istotną.

• „menu” – tutaj podajemy identyfikator zdefiniowany podczas rejestracji, w tym przypadku będzie to „main-menu”
• „menu_class” – tutaj definiujemy własną klasę css dla elementu <ul> (ponieważ menu tworzy listę) domyślnie jest to „menu”
• „menu_id” – identyfikator znacznika html <ul>, domyślnie jest to ten który podaliśmy przy rejestracji czyli w tym konkretnym przykładzie „main-menu”
• „container” – kontener, w którym zostanie umieszczona lista opcji, domyślnie jest to „div”
• „container_class” – jak sama nazwa mówi jest to klasa css kontenera.
• „container_id” – jak sama nazwa mówi jest to identyfikator.
• „fallback_cb” – Jeśli menu nie istnieje zwraca funkcję, domyślnie wp_page_menu, jeśli ustawisz na false to nic nie zwróci.
• „before” – tekst, który się wyświetli przed każdym linkiem.
• „after” – analogicznie jak wyżej tekst wyświetlany po linku.
• „link_before” – tekst przed tekstem linku.
• „link_after” – analogicznie tekst po tekście linku.
• „echo” – jeśli ustawisz na true to menu zostanie wyświetlone jeśli na false zostanie zwrócone.
• „depth” – określa ile może być poziomów hierarchi, domyślnie jest 0, które oznacza wszystkie jakie są.
• „walker” – instancja własnej klasy, o tej funkcji więcej w drugim kursie z serii „własny szablon”.

Teraz kiedy już wiadomo jakie parametry przyjmuje funkcja warto wprowadzić ją w życie w prezentowanym przykładzie. Umieszczamy poniższy kod w pliku header.php zaraz pod logo:

 

<?php wp_nav_menu( array(
    'menu' => 'main-menu',
    'container' => 'nav',
    'menu_class' => 'menu',
) ); ?>

W tym przypadku podaliśmy tylko, o które menu nam chodzi. Jaki ma być kontener oraz klasa menu. Uzyskaliśmy niezbyt imponujący jednak wystarczający rezultat, czyli dwa odnośniki do stron, które określiliśmy wcześniej w kokpicie. Efekt został przedstawiony na obrazku poniżej.

Obecnie kliknięcie w którykolwiek z odnośników nie przyniesie efektu ponieważ do tego potrzebne są kolejne szablony stron, które utworzymy już w kolejnych częściach tego kursu.

Jak zawsze obecny stan przykładu można pobrać zwp5