Przejdź do treści

Jak dodać menu we własnym motywie WordPress?

Własny motyw WordPress otwiera przed nami całkiem nowe możliwości. Dzięki niemu można przygotować motyw w 100% spełniający nasze oczekiwania.

Aby korzystać z menu na stronie z własnym motywem WordPress należy wykonać następujące czynności:

  1. Przygotowanie miejsca na menu,
  2. Dodanie elementów do menu,
  3. Wyświetlenie menu na stronie.

Przygotowanie miejsca na menu

Aby przygotować miejsce na menu należy w pliku functions.php umieścić poniższy fragment kodu:

add_action('init', function () {
    register_nav_menu('menu-glowne', 'Menu główne');
});

Jest on odpowiedzialny za wywołanie akcji pomiędzy załadowaniem się strony a wysłaniem nagłówków. W uproszczeniu można powiedzieć, że akcja wykona się tuż po załadowaniu strony.

W ciele tej akcji znajduje się funkcja register_nav_menu() odpowiedzialna za przygotowanie miejsca dla menu. Przyjmuje ona 2 parametry:

  1. Identyfikator lokalizacji – Należy go zapisać zapisać za pomocą małych liter i łączników. W naszym przypadku jest to menu-glowne.
  2. Opis lokalizacji – Można go zapisać w dowolny sposób. W naszym przypadku jest to Menu główne.

Dodanie elementów do menu

Aby dodać elementy do menu należy w panelu administratora otworzyć Wygląd > Menu, wybrać nowo zarejestrowane menu z listy i dodać do niego elementy, po czym należy wskazać w jakim miejscu na stronie ma pojawić się nowo dodane menu.

Wyświetlenie menu na stronie

Aby wyświetlić menu przypisane do przygotowanego miejsca należy w wybranym miejscu szablonu wywołać funkcję wp_nav_menu() z argumentem zawierającym konfigurację menu. W naszym przypadku będzie to:

wp_nav_menu([
    'theme_location' => 'menu-glowne'
]);

W celu dodania klasy do elementu otaczającego menu do argumentu funkcji wp_nav_menu() należy dodać nową parę klucz=>wartość z kluczem container_class i wartością będącą nazwą klasy:

'container_class' => 'custom-menu-class-name',

Cała funkcja wp_nav_menu() wygląda wtedy następująco:

wp_nav_menu([
    'container_class' => 'custom-menu-class-name',
    'theme_location' => 'menu-glowne',
]);

Po zapisaniu zmian w pliku functions.php i odświeżeniu strony nowe menu powinno być widoczne.

Tagi: