02.06 Budowa nawigacji

Ostatnia modyfikacja: 06.02.2021

Budowa nawigacji za pomocą funkcji WordPress jest bardzo prosta. Zanim przejdziemy do napisania kodu, najpierw należy stworzyć kategorię wpisów. Oczywiście oprócz kategorii, w nawigacji mogą znaleźć się strony (na przykład kontakt) czy nawet pojedyncze wpisy z blogu. Nie ważne, które z tych rzeczy będziemy umieszczać w menu, to budowa nawigacji przebiega dokładnie w ten sam sposób.

Utworzenie kategorii

Najczęściej w nawigacji pojawiają się kategorie wpisów. I tak jest z motywem, na którym pracujemy. Zaloguj się do panelu administratora i stwórz trzy kategorie, na przykład jak te niżej.

Poznajemy HTML-CSS
Programowanie w PHP
Baza danych MySQL

Na zdjęciu niżej utworzone kategorie. Czwartym elementem w nawigacji jest strona Kontakt. Jeżeli nie posiadasz strony Kontakt to ją utwórz.

Panel administracyjny z utworzonymi kategoriami, które posłużą do budowy nawigacji.

Utworzone wcześniej wpisy przypisz do kategorii. Jeżeli utworzyłeś tylko 3 wpisy, jak sugerowałem na początku, to przypisz po jednym wpisie do każdej kategorii.

Rejestracja nawigacji

W WordPress mówi się o rejestracji nawigacji. Znaczy to, że w pliku functions.php musimy poinformować system WordPress, o tworzeniu nawigacji. Służy do tego funkcja register_nav_menus(), która jako argument przyjmuje tablice. Na listingu niżej użycie funkcji wraz z rejestracją nawigacji. Standardowo kod w pliku functions.php opatrzyłem stosownym komentarzem.

functions.php – rejestracja nawigacji – fragment kodu

// Rejestracja Nawigacji
function register_menu() {
    register_nav_menus(array(
        'primary' => 'Nawigacja główna'
    ));
}
add_action('after_setup_theme', 'register_menu');
// ------------------------------------------------------------

Na początku tworzymy funkcję register_menu(), którą dodajemy do zaczepu akcji add_actions() after_setup_theme. Akcja ta jest wywoływana podczas każdego ładowania strony, po zainicjowaniu kompozycji. Wewnątrz register_menu() umieszczamy funkcję WordPress register_nav_menus(), w której tworzymy tablicę array, z wartościami. Słowo primary będzie służyć do identyfikacji nawigacji w motywie. Nazwa to może być dowolna na przykład header-menu. Natomiast Nawigacja główna, będzie nazwą wyświetlaną w panelu administratora WordPress.

Budowa nawigacji w panelu administratora

Po zarejestrowaniu nawigacji w pliku functions.php, możemy ją przygotować w panelu administratora. W tym celu kliknij kolejno Wygląd - Menu. Jeżeli nie widzisz opcji Menu, to odśwież kokpit, aby plik functions.php został załadowany z zajerestrowaną nawigacją. W miejscu Nazwa menu, możesz podać dowolną nazwę. Kategorie oraz stronę Kontakt rozmieść jak na zdjęciu niżej. Następnie kliknij przycisk Utwórz menu. Do nawigacji można również dodać Strona główna.

Panel administracyjny WordPress - budowa nawigacji — Panel administracyjny – ułożenie kategorii oraz strony Kontakt w nawigacji.

Po utworzeniu układu menu, należy je powiązać z rejestracją, którą dokonaliśmy w pliku functions.php. Dlatego należy zaznaczyć opcję Wyświetl lokalizację, jak na zdjęciu niżej. Nazwa opcji pochodzi z rejestracji nawigacji z pliku functions.php – Nawigacja główna. Następnie należy kliknąć Zapisz menu.

Panel administratora WordPress - zapis menu — Powiązanie układu menu z zarejestrowaną opcją.

Wyświetlanie nawigacji

Po dokonanych wszystkich czynnościach wyżej, można wyświetlić nawigację w motywie. Zanim przejdziemy do napisania kodu wyświetlającego menu, zobaczmy jak wygląda budowa nawigacji w pliku header.php. Z poniższego kodu należy usunąć całą listę ul.

Należy pamiętać, że WordPress wyświetla nawigację w postaci listy nieuporządkowanej.

header.php – nawigacja w HTML – fragment kodu

<nav id="nav">
    <div class="center_page">
        <div class="nav_menu">
            <ul>
                <li><a href="#">Poznajemy HTML-CSS</a></li>
                <li><a href="#">Programowanie w PHP</a></li>
                <li><a href="#">Baza danych MySQL</a></li>
                <li><a href="#">Kontakt</a></li>
            </ul>
        </div>
    </div>
</nav>

Do wyświetlenia nawigacji należy użyć funkcji wp_nav_menu(), która jako argument przyjmuje tablicę. W tablicy zdefiniujemy dwa parametry kontener nawigacji oraz lokalizację, jak na listingu niżej. Parametr container domyślnie umieszcza nawigację w elemencie div. Przypisując do niej false pozbywamy się domyślnego elementu div. Następnie parametr theme_location, wskazuje, która zarejestrowana nawigacja ma być umieszczona. Musi to być ta sama nazwa, którą podaliśmy w pliku functions.php – primary. Więcej o parametrach jakie może przyjąć funkcja wp_nav_menu() dowiesz się z artykułu 06.05 Wyświetlanie menu.

header.php – nawigacja generowana przez WordPress – fragment kodu

<nav id="nav">
    <div class="center_page">
        <div class="nav_menu">
        <?php
            wp_nav_menu( array(
                'container'      => false,
                'theme_location' => 'primary'
            ));
        ?>
        </div>
    </div>
</nav>

Po zapisaniu pliku i odświeżeniu strony, nawigacja działa co widać po zmianie adresu w pasku przeglądarki. Przypisane do kategorii artykuły będą wyświetlane jak i również strona Kontakt.

Kilka nawigacji w witrynie

Często zdarza się, że strona posiada więcej niż jedną nawigację. Ta druga często umieszczona jest na przykład w stopce witryny. Budowa drugiej nawigacji wygląda dokładnie tak samo jak pierwszej. Wystarczy ją zarejestrować w pliku functions.php jak na listingu niżej, utworzyć nowy układ w panelu administratora, a następnie powiązać ją z zarejestrowaną nazwą. W ten sposób można tworzyć 3, 4 i kolejną nawigację na stronie.

Przykład rejestracji drugiej nawigacji

function register_menu() {
    register_nav_menus(array(
        'primary' => 'Nawigacja główna',
        'footer'  => 'Nawigacja w stopce'
    ));
}
add_action('after_setup_theme', 'register_menu');

Wyświetlenie kolejnej nawigacji w motywie, wygląda dokładnie tak samo jak pierwszej. Wystarczy zmienić nazwę zarejestrowanej nawigacji, jak na listingu niżej.

Przykład umieszczenia drugiej nawigacji

<div class="footer_menu">
    <?php
        wp_nav_menu(array(
            'container'      => false,
            'theme_location' => 'footer'
        ));
    ?>
</div>

Klasy nawigacji

WordPress, generując nawigację, dodaje klasy każdemu elementowi. Spis oraz opis wszystkich klas w artykule 06.06 Klasy CSS w nawigacji.

Rejestracja jednej nawigacji

Funkcja register_nav_menus(), za pomocą tablicy pozwala na rejestrację kilku nawigacji. Jeżeli jesteśmy pewni, że w motywie będzie utworzona tylko jedna nawigacja to można skorzystać z funkcji register_nav_menu(). Poniżej kod rejestracji za pomocą tej funkcji.

Przykład rejestracji jednej nawigacji

function register_my_menu() {
  register_nav_menu('header-menu', 'Nawigacja Główna');
}
add_action('after_setup_theme', 'register_my_menu');

Umieszczenie nawigacji w motywie, wygląda dokładnie tak samo jak w przypadku rejestracji nawigacji za pomocą funkcji register_nav_menus().

Nawigacja wielopoziomowa

Przy rejestracji nawigacji w pliku functions.php oraz jej wyświetlania za pomocą wp_nav_menu(), nie ma znaczenia czy jest to nawigacja jednopoziomowa czy wielopoziomowa. Decydującym czynnikiem czy nawigacja jest wielopoziomowa, jest jej układ w panelu administratora oraz odpowiednie zaprogramowanie zachowania za pomocą dowolnej metody (CSS, JS lub innej).

Czytaj dalej…

02.07 Hierarchia plików WordPress

WP-DOC