Menu WordPress #2 – własna struktura HTML

Niektóre projekty wymagają pełnej kontroli nad kodem HTML menu. Najczęściej spotykanym rozwiązaniem w takiej sytuacji jest napisanie własnego rozszerzenia klasy Walker. Istnieje również mniej skomplikowana metoda, która polega na wykorzystaniu funkcji wp_get_nav_menu_items. W tym artykule z jej pomocą stworzymy menu w postaci listy rozwijanej <select>.

Przygotowania

Docelowo chcemy otrzymać menu o następującej strukturze kodu HTML:

<select id="menu-my-select-menu" class="my-menu-class">
   <option value="">Przejdź do:</option>
   <option value="http://mojastrona.pl/">Strona główna</option>
   <option value="http://mojastrona.pl/oferta">Oferta</option>
   <option value="http://mojastrona.pl/portfolio">Portfolio</option>
   <option value="http://mojastrona.pl/kontakt">Kontakt</option>
</select>

Zanim przejdziemy do pisania właściwej funkcji, musimy najpierw zarejestrować nowe menu. W pliku functions.php powinien się znaleźć następujący fragment kodu:

register_nav_menus( array(
   'my-select-menu' => 'Menu w postaci listy rozwijanej',
) );

Kolejny krok polega na stworzeniu odpowiedniego menu w panelu administratora. W tym celu należy przejść do zakładki „Wygląd / Menu”.

Przypisywanie menu do lokalizacji

Po zapisaniu menu musimy pamiętać o przypisaniu go do właściwego obszaru w szablonie.

Generowanie kodu menu za pomocą własnej funkcji

Kolejny krok polega na stworzeniu funkcji, która wygeneruje menu z pożądaną przez nas strukturą HTML.

function my_custom_menu( $menu_name = null ) {

   if ( ( $locations = get_nav_menu_locations() ) && isset( $locations[ $menu_name ] ) ) {

      $menu = wp_get_nav_menu_object( $locations[$menu_name] );
      $menu_items = wp_get_nav_menu_items( $menu->term_id );

      ?>

      <select id="menu-<?php echo $menu_name ?>" class="my-menu-class">
         <option value=""><?php _e( 'Przejdź do:' ); ?></option>
         <?php foreach ( (array) $menu_items as $key => $menu_item ) : ?>
         <?php if($menu_item->menu_item_parent != "0") : ?>
         <option value="<?php echo $menu_item->url ?>"><?php echo '- '.$menu_item->title ?></option>
         <?php else : ?>
         <option value="<?php echo $menu_item->url ?>"><?php echo $menu_item->title ?></option>
         <?php endif; ?>
         <?php endforeach; ?>
      </select>

   <?php } else { ?>

      <select class="menu-not-found">
         <option value=""><?php _e( 'Menu "' . $menu_name . '" nie istnieje.' ); ?></option>
      </select>

   <?php }

}

Cały powyższy fragment kodu powinien się znaleźć w pliku functions.php.

Najpierw sprawdzamy czy istnieje przekazana do funkcji lokalizacja menu oraz czy przypisano do niej menu. Jeśli tak, wszystkie pozycje menu zapisywane są w zmiennej $menu_items a następnie wyświetlane kolejno jako elementy listy. W wierszach 21-27 mamy możliwość zdefiniowania akcji na wypadek, gdyby menu które staramy się wyświetlić nie zostało wcześniej prawidłowo zdefiniowane. W tym wypadku zamiast menu zostanie wyświetlona lista z jedną pozycją – komunikatem o błędzie.

Należy zwrócić uwagę, że funkcja w tej postaci pozwala na wyróżnienie elementów podrzędnych – przed ich nazwą wyświetlany jest myślnik i spacja. Jeśli projekt wymaga menu z kilkoma poziomami zagłębienia, należało by odpowiednio zmodyfikować podany kod. W takich przypadkach bardziej uzasadnione wydaje się jednak napisanie własnego rozszerzenia klasy Walker, która będzie tematem kolejnego artykułu.

Wyświetlanie menu

Po wykonaniu tego kroku możemy już wyświetlić nasze menu, wywołując funkcję my_custom_menu w odpowiednim miejscu w szablonie, za pomocą następującego fragmentu kodu:

<?php my_custom_menu('menu_id'); ?>

Funkcja my_custom_menu przyjmuje jeden parametr – identfikator lokalizacji menu które chcemy wyświetlić. Jest to ta sama wartość, której użyliśmy przy rejestrowaniu menu. W tym przykładzie będzie to 'my-slelect-menu’.

Jeśli teraz przeładujesz stronę zobaczysz że teraz w miejscu menu wyświetlana jest lista rozwijana, a kod źródłowy menu jest zgodny z naszymi początkowymi założeniami.

Aktywacja menu z pomocą JavaScript

Naszym celem jest przejście do określonej strony po wybraniu odpowiadającej jej pozycji w menu. Menu które stworzyliśmy, mimo iż wyświetla się poprawnie, nie działa jeszcze zgodnie z naszymi oczekiwaniami. Jeśli teraz wybierzesz którąś z pozycji, nic się nie stanie. Musimy jeszcze „ożywić” menu, za pomocą kilku linijek JavaScript.

jQuery(function($){

   $(".my-menu-class").change(
      function(){
         window.location = $(this).find("option:selected").val();
      }
   );

});

W tym fragmencie kodu znajdujemy nasze menu po klasie którą mu przypisaliśmy tworząc je w funkcji głównej (wiersz nr 10 funkcji my_custom_menu). Jeśli na własne potrzeby zmienisz nazwę tej klasy, musisz pamiętać, aby wprowadzić zmiany również tutaj.

Powyższy fragment powinien znaleźć się w osobnym pliku, który najlepiej umieścić w katalogu o nazwie „js”. Po zapisaniu pliku, musimy go jeszcze prawidłowo załadować w motywie. Pliki JavaScript dołączamy za pomocą funkcji wp_enqueue_script, wywołanej z pliku functions.php:

add_action( 'wp_enqueue_scripts', 'my_custom_menu_script' );

function my_custom_menu_script() {
   wp_enqueue_script( 'my-select-menu', get_template_directory_uri() . '/js/my-select-menu.js', array( 'jquery' ), false, true );
}

W wierszu nr 4 należy podać prawidłową ścieżkę do pliku z naszym skryptem. W tym przykładzie jest to plik o nazwie my-select-menu.js, który znajduje się w katalogu 'js’ motywu.

Teraz już pozostaje Ci już tylko nadanie menu pożądanego wyglądu za pomocą odpowiednich reguł CSS.

Podsumowanie

Podany przykład to tylko jeden z pomysłów na wykorzystanie funkcji wp_get_nav_menu_items. Z jej pomocą można stworzyć menu o dowolnej strukturze HTML, zupełnie rezygnując z tradycyjnego sposobu budowy menu w oparciu o listę nieuporządkowaną <ul>.

W kolejnym artykule przedstawię Wam klasę Walker oraz pokażę jej zastosowanie w praktyce.