Własne menu

Własne menu

Z tego wpisu dowiesz się, jak utworzyć własne menu i umieścić je w dowolnym miejscu na stronie.

Załóżmy, że z pewnych powodów chcesz umieścić na każdej podstronie z wpisami przyciski. Zauważyłeś również, że używany przez Ciebie szablon nie posiada funkcjonalności, która w łatwy sposób dodałaby taką funkcjonalność.

WordPress jest bardzo elastyczny i łatwy w rozbudowie, dlatego pokażę Ci jak dodać taką funkcjonalność samemu. Będzie ona składała się z kilku etapów:

  1. Utworzenie motywu potomnego
  2. Dodanie własnego menu do kokpitu
  3. Wyświetlenie menu we własnych plikach szablonowych
  4. Ostylowanie

Naszym motywem bazowym będzie Twenty Sixteen.

1. Tworzenie motywu potomnego

Jeżeli jesteś na bieżąco z wpisami, to zapewne czytałeś artykuł Stwórz sobie potomka. Opisuję w nim szczegółowo jak utworzyć motyw potomny.

Motyw potomny to taki motyw, który bazuje na wcześniej przygotowanym motywie. Naszym zadaniem będzie nadpisanie pewnych elementów szablonu bazowego, kopiując odpowiednie pliki szablonowe z motywu bazowego do potomnego.

Przejdź do katalogu /wp-content/themes/, utwórz katalog twentysixteen_child i a w nim plik style.css z poniższą zawartością.

Aby nasz motyw potomny w kokpicie posiadał obrazek miniaturkę, skopiuj /wp-content/themes/screenshot.png do /wp-content/themes/twentysixteen_child/.

Motyw potomny gotowy, możemy go teraz aktywować w wygląd->motywy. 

wlasne_menu-motyw_potomny

2. Dodanie własnego menu do kokpitu

Domyślnie po zainstalowaniu WordPresssa nie mamy dodanego menu, możemy zrobić to w Wygląd->Menu wpisując jako nazwę menu np. Menu w nagłówku.

wlasne_menu-menu_w_naglowku

Po kliknięciu w przycisk Utwórz menu musimy dodać jeszcze do niego kilka odnośników. Utwórz kilka własnych odnośników tak jak to przedstawiłem na zrzucie ekranu poniżej i kliknij Zapisz menu.

wlasne_menu-menu_w_naglowku2

W identyczny sposób utwórz drugie menu nazywając go np. Menu we wpisach po czym przejdź do zakładki Zarządzaj rozmieszczeniem.

wlasne_menu-zarzadzaj_rozmieszczeniem

Teraz gdy przejdziesz do zakładki Zarządzaj rozmieszczeniem, zauważysz, że do wyboru mamy tylko dwie opcje umieszczenia wcześniej utworzonego menu – Menu główne i Menu odnośników serwisów społecznościowych.

wlasne_menu-zarzadzaj_rozmieszczeniem2

Naszym celem będzie dodanie trzeciego położenia menu.

Przejdź do katalogu /wp-content/themes/twentysixteen_child/ i utwórz w nim plik functions,php z poniższą zawartością.

Jest to prosta funkcja, która rejestruje nasze nowe menu. Pierwszy parametr funkcji register_nav_menu, custom-menu to ID, które będzie nam potrzebne aby umieścić menu w dowolnym miejscu na stronie (w naszym przypadku pod koniec każdego wpisu), a drugi to nazwa, pod jaką widoczny będzie w kokpicie.

wlasne_menu-rejestracja_menu

Jak możesz zobaczyć na zrzucie powyżej, w zarządzaj rozmieszczeniami pojawił się nowy rekord z nazwą Dodatkowe menu. Być może przydałoby się zmienić nazwę, aby odzwierciedlała w jakim miejscu zostanie menu umiejscowione ale to w końcu tylko przykład więc niech tak zostanie. Jednak warto o tym pamiętać, aby opisy nazw w kokpicie jak i funkcji w kodzie odzwierciedlały to, do czego służą.

3. Wyświetlamy własne menu na stronie

Mamy dodane menu w kokpicie, teraz najtrudniejsza część. Musimy odnaleźć szablon, który potrzebujemy zmodyfikować aby dodać kolejną funkcję wyświetlającą nasze menu. W motywie Twenty Sixteen będzie to /wp-content/themes/twentysixteen/template-parts/content-single.php. Aby nie modyfikować oryginalnych plików szablonu bazowego, skopiujmy powyższy plik do motywy potomnego /wp-content/themes/twentysixteen_child/template-parts/content-single.php.

Dodaj diva z klasą .custom-menu-pages  do  diva z klasą .entry-content tak jak jest to przedstawione w kodzie poniżej.

W tablicy array dla klucza theme_location podajemy identyfikator wcześniej utworzonego menu, w naszym przypadku custom-menu.

Jeżeli nie wiesz do jakiego pliku należy dodać kod, polecam zapoznanie się z https://wphierarchy.com. Na stronie w wizualny sposób przedstawione jest, w jakiej kolejności ładowane są pliki.

Po dodaniu powyższego kodu, nasze menu wyświetla się już na stronie.

wlasne_menu-menu_we_wpisie

4. Ostylowanie

Na koniec wystarczy ostylować menu aby wyglądały jak przyciski, dodając poniższy kod CSS do wcześniej utworzonego pliku style.css w motywie potomnym.

Od tego momentu, pod każdym wpisem będą znajdywały się nasze przyciski.

wlasne_menu-przyciski_pod_wpisem

Modyfikacja takich przycisków jest łatwa, wystarczy dodać lub usunąć odnośnik w Wygląd->Menu.

Zapraszam do podzielenia spostrzeżeniami w komentarzu.

Kamil Laskowski

Sympatyk systemów otwartoźródłowych. Człowiek z zapałem, doskonale wiedzący, czego chce od życia. W wolnych chwilach uwielbia tańczyć oraz grać na gitarze.