publikacja: 2 sierpnia 2012, autor: , komentarzy 15 https://wpninja.pl/artykuly/menu-wordpress-2-wlasna-struktura-html/

Menu WordPress #2 – własna struktura HTML

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:

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

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

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
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.

span style="color: #3366CC;">".my-menu-class""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:

1
2
3
4
5
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.

Komentarze

  1. Jakub Strawa 5 lat temu:

    Brawo, krótko zwięźle i na temat :D Przydatny wpis. Cieszę się, na sam widok info o nowym wpisie WPninja :D Ciągle głodny informacji :D

    odpowiedz
  2. pibe 5 lat temu:

    Dobry artykuł.

    odpowiedz
  3. SpeX 5 lat temu:

    Przydało by się jakieś demo, jaki finalny wynik dostajemy. A najlepiej dwa menu, jedno pod drugim by można było sobie porównać wyniki.

    odpowiedz
    1. Szymon Skulimowski 5 lat temu:

      http://jsfiddle.net/e9EHq/ – standardowe menu
      http://jsfiddle.net/6uyyW/ – wersja z artykułu

      Dzięki za trafną sugestię!

      odpowiedz
  4. Krzysztof 'raczus' Raczek 5 lat temu:

    Bardzo fajny artykuł. Oby więcej tak użytecznych informacji.

    odpowiedz
    1. Szymon Skulimowski 5 lat temu:

      Oby więcej tak użytecznych informacji

      Może jakieś sugestie co do następnych tematów? :)

      odpowiedz
  5. Gabryjel Jabłoński 5 lat temu:

    Racja że artykuł jest bardzo pomocny. Oby tak dalej :)

    odpowiedz
  6. Damian 5 lat temu:

    Artykuł bardzo fajny – nauczył mnie czegoś nowego. :) Ale przydałoby się opisać jak poradzić sobie z rozwijanym menu.

    odpowiedz
    1. Ola Łączek 5 lat temu:

      A co rozumiesz przez „poradzić sobie z rozwijanym menu”?

      odpowiedz
    2. Damian 5 lat temu:

      Jest menu załóżmy STRONA GŁÓWNA, SAMOCHODY, MOTORY itd., po najechaniu na SAMOCHODY pokażą się opcje BMW, CHEVROLET, … i tak samo po najechaniu na MOTORY, wiadomo o co chozi. :)

      Ale już to rozkminiłem, więc problem nieaktualny.

      odpowiedz
  7. jankow 4 lata temu:

    Jak ograniczyć „na sztywno” pole edycji postów?
    Ograniczyłem komentarze od minimum do maximum ilości znaków i wyrazów.
    Nie wiem jak zmniejszyć pole wpisów. Wpisy są ograniczone do 90 znaków. Jak teraz zmniejszyć pole edycji do dwóch wierszy po 50 znaków? Motyw Twenty Eleven , WP 3.5 .

    odpowiedz
  8. jerry 12 miesięcy temu:

    „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:”
    nie rozumiem tego wpisu. o który plik chodzi i gdzie jest to odpowiednie miejsce

    odpowiedz
    1. Paweł 12 miesięcy temu:

      To już zależy od budowy konkretnego motywu i lokalizacji w której chcesz miec owo menu.
      Najczęściej w nagłówku – plik header.php, może w stopce – footer.php …a może gdzieś indziej.

      odpowiedz
  9. Marcin 11 miesięcy temu:

    Witam,
    Mam pytanie dotyczące drugiego menu.Mam dwa menu jedno pod drugim.
    W pierwszym są odnośniki do stron, a w drugim są kategorie.Dodam ,że tak już było w orginalnym szablonie.Teraz moje putanie brzmi. Jak dodać kolejne kategorie do drugiego menu.
    Tu jest zrzut ekranu http://imgur.com/W1ZZB82
    Proszę o pomoc

    odpowiedz

Dodaj własny komentarz

Odnośniki z innych stron

Lista innych stron, które w jakiś sposób odnoszą się do opublikowanej tutaj treści:

  1. Menu WordPress – zarządzanie identyfikatorami i klasami | WPNinja

    […] potrzeb a przy tym nie wymaga zaawansowanych umiejętności programistycznych.W kolejnym artykule pokażę Wam, w jaki sposób wygenerować menu z własną strukturą kodu HTML, bez […]