Ostatnio w komentarzu pod jednym z wpisów dostałem pytanie o wielopoziomowe menu w WordPress. Postanowiłem stworzyć krótki wpis na ten temat i udostępnić proste menu w CSS i HTML do dowolnego zastosowania. Ze względu na tematykę tego bloga podejdę do problemu od strony WordPress, ale samo menu można z powodzeniem wykorzystać przy innych projektach.

Zacznijmy od tego, że pokaże co będziemy tworzyć i do czego może się to przydać:

Do czego może nam się to przydać? Wielopoziomowe menu może okazać się użyteczne w przypadku, gdy na blogu / stronie (nie tylko opartej o WordPress) mamy sporo materiałów pogrupowanych w liczne, zagnieżdżone kategorie. Takie menu pozwoli na utrzymanie porządku, ułatwi nawigację po stronie i znalezienie potrzebnych informacji.

WordPress pozwala nam na łatwe zarządzanie menu z poziomu panelu administracyjnego i dodanie do niego swoich linków, linków do tagów, odnośników do stron. Takie menu w formie wielopoziomowej rozwijalnej listy może pomieścić znaczne ilości odnośników, a oprócz tego może dodać do strony ciekawy efekt.

Demo HTML/CSS.

 HTML CSS dropdown menu

Wielopoziomowe menu w WordPress

Podstawa do zastosowania tego menu w swoim motywie WordPress, to właściwie tylko skopiowanie wszystkiego z tego pliku CSS. Możesz pobrać cały plik i dołączyć go do motywu jak inne pliki w sekcji <head>, albo skopiować całość i wkleić do swojego głównego pliku style.css.

Dołączyć plik ze stylami menu możesz na przykład w ten sposób (zakładając, że plik znajduje się w katalogu głównym aktualnego motywu):

<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css-menu.css" type="text/css" media="screen" />

 

Rejestrowanie menu w kokpicie WordPress

Ponieważ, kiedyś już pisałem jak to się robi i o co w tym chodzi (Dodawanie dynamicznego menu w WordPress), to tutaj tylko podam kroki, które należy wykonać, aby wszystko działało… 🙂

Przejdź do katalogu głównego motywu nad którym pracujesz, otwórz do edycji plik functions.php (jeżeli nie ma, to go utwórz) i header.php (jeżeli nie ma, to otwórz plik w którym znajduje się ‘miejsce’ dla menu).

Na potrzeby tego wpisu przyjąłem, że w motywie będzie tylko jedno menu.

Rejestrowanie menu

Rejestrowanie pojedynczego menu w pliku functions.php możemy zrealizować na przykład tak:

<?php register_nav_menu( 'top-navi', 'Main menu' ); ?>

Jeżeli nasze menu zostało poprawnie zarejestrowanie (wielkiej sztuki właściwie tutaj nie ma 🙂 ), to już można nim zarządzać w kokpicie (Wygląd → Menu). Jeżeli wszystko jest ok, to plik functions.php możesz już zapisać i zamknąć.

 

Wyświetlanie utworzonego menu

Teraz przechodzimy do kodu HTML motywu – należy odnaleźć miejsce w którym menu ma się wyświetlać i skorzystać z funkcji wp_nav_menu():

<?php wp_nav_menu(array('theme_location'=>'top-navi', 'menu_class' => 'nav')); ?>

 

Właściwie wystarczy tylko skopiować ten snippet i wkleić w odpowiednie miejsce motywu. Ważna jest tutaj wartość podana dla klucza theme-location tablicy asocjacyjnej, czyli top-navi – musi być taka sama jak pierwszy argument podany w funkcji przy rejestrowaniu menu.

Dodatkowo chcę, aby do menu była dołączona moja klasa, czyli .nav, w tym przypadku również rzecz obowiązkowa ze względu na to, że korzystałem z tej klasy tworząc reguły CSS.

Zakończenie

I to właściwie wszystko, style podpięte, menu zarejestrowane i powinno się już wyświetlać.

Na zakończenie jeszcze kilka opcji personalizujących kolorystycznie wygląd tego menu. Myślę, że wszystko jest zrobione dosyć elastycznie.

  • Po pierwsze nie ma potrzeby deklarowania klas dla ‘submenów’ – o ile trzymamy się prawidłowo zagnieżdżonych list HTML. Jest to dosyć wygodne i łatwe w użyciu, nie tylko w WordPress.
  • Po drugie możemy utworzyć nieskończoną ilość poziomów zagnieżdżenia list – tutaj należy tylko wziąć pod uwagę użyteczność takiego rozwiązania i zdrowy rozsądek… 🙂
  • Po trzecie menu zostało zbudowane na gradientach CSS, więc nie trzeba ściągać żadnej grafiki.
  • Czwarte – do menu można bardzo łatwo tworzyć własne motywy kolorystyczne na podstawie tych, które ja utworzyłem.
  • I ostatnie. Zmiana motywów, animacji, kolorów samego menu i jego elementów odbywa się wyłącznie poprzez dodanie odpowiednich klas do głównej listy (zaraz pokażę kilka przykładów).

Tutaj znajduje się jeszcze kilka przykładów css menu w różnych opcjach kolorystycznych i z animacjami (CSS transitions).

Teraz tak, aby zmienić kolor głównej belki należy do listy dodać klasę .nav-bar-black (w tej wersji jest tylko kolor srebrny i czarny, jak komuś potrzeba innego, to myślę że może łatwo zmodyfikować CSS).

Aby tego dokonać w WordPressie, trzeba wrócić do pliku w którym wyświetlamy menu, i po spacji dodać kolejną klasę:

<?php wp_nav_menu(array('theme_location'=>'top-navi', 'menu_class' => 'nav nav-bar-black')); ?>

 

Kolory ‘hoverów’ podzielone są na dwie grupy – pierwsza sprawia, że linki w submenu są na białym tle, po najechaniu na item link zmienia się w odpowiednio kolorowy guzik. W drugiej grupie jest odwrotnie, tło pod submenu jest kolorowe, a hover na linku sprawia, że item jest tylko podświetlony. Mamy do wybory takie opcje:

  • .nav-black, .nav-black-buttons
  • .nav-orange, .nav-orange-buttons
  • .nav-blue, .nav-blue-buttons
  • .nav-red, .nav-red-buttons
  • .nav-green, .nav-green-buttons

Jeżeli teraz chcemy wykorzystać którąś z tych opcji, wystarczy znowu po spacji dopisać kolejną nazwę klasy:

<?php wp_nav_menu(array('theme_location'=>'top-navi', 'menu_class' => 'nav nav-bar-black nav-red')); ?>

 

Możemy także dodać jedną z 6 ‘animacji’, dzięki którym submenu będzie się pokazywało w trochę inny sposób.

  • .nav-animation-1
  • .nav-animation-2
  • .nav-animation-3
  • .nav-animation-4
  • .nav-animation-5
  • .nav-animation-6

 

Aby skorzystać z wybranej animacji wystarczy dopisać nazwę klasy, jak wcześniej:

<?php wp_nav_menu(array('theme_location'=>'top-navi', 'menu_class' => 'nav nav-bar-black nav-red nav-animation-5')); ?>

 

I na koniec link do paczki ze wszystkim tutaj. 🙂


Wpis otagowano:

Komentarze do wpisu 3 komentarze

Pomogłem? Dodaj coś od siebie! Skomentuj ten wpis:

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *