Header.php czyli nagłówek naszej strony
autor: Robert
16 listopada 2014
Plik naszego nagłówka będzie wyświetlany na wszystkich podstronach naszej strony. Jego zadaniem jest zaimportowanie wszystkich plików CSS i ewentualnie JS oraz otwarcie struktury dokumentu HTML. Oczywiście w pliku header.php nie tylko otwieramy znacznik <html> ale także możemy umieścić w nim jakiś obraz, slider, menu, cokolwiek co chcemy wyświetlać w obrębie całej witryny.
Zaczniemy od sekcji head umieszczamy w nim sekcję title czyli tytuł naszej strony wyświetlany np jako tytuł karty w przeglądarce oraz sekcję meta <meta name="viewport" content="width=device-width, initial-scale=1.0">, która jest obowiązkowa dla Bootstrapa jeśli chcemy by strona była responsywna. Dodatkowo tuż przed zamknięciem sekcji /head umieszczamy kod <?php wp_head();?>, ta wordpressowa funkcja odpowiada za wczytanie sekcji meta, CSSów, JSów itp, które zdefiniowaliśmy w pliku functions.php oraz które nasz CMS dołącza automatycznie by działać.
Przechodzimy do sekcji body. Otwieramy sobie znacznik header, wewnątrz umieszczamy Bootstrapowy kontener czyli div z klasą .container następnie div z klasą .row wewnątrz znajdzie się div z klasą .col-md-12 jak widzicie, nie różni się to od tworzenia normalnej strony opartej na Bootstrap. Stworzymy sobie teraz górne menu strony. Całość wygląda bardzo podobnie to tworzenia „statycznego” menu w Bootstrapie. do momentu kodu wewnątrz diva z klasą <code>.navbar-collapse</code>.
Wyświetlanie generowanego w panelu menu strony
We wpisie dotyczącym aktywowania menu w motywie pokazałem jak w pliku <code>functions.php</code> poinformować wordpressa, że chcemy mieć na naszej stronie menu. Stworzyłem w tym wpisie menu o nazwie <code>main-nav</code>, które się nam teraz przyda.
Zaczniemy więc od kodu odpowiedzialnego za wyświetlanie naszego menu
Odwołujemy się do funkcji wp_nav_menu( array( ... ) );, której przekazujemy następujące parametry:
manututaj wpisujemy wartość, którą stworzyliśmy w plikufunctions.phpczylimain-menumenu_classpiszemy jaką klasę CSS ma mieć nasze menudepthpodajemy ile poziomów zagłębienia może mieć nasze menu. Nam wystarczą dwalink_before i link_aftermożemy każdy element menu otoczyć kodem HTML i dodać klasęwalkerw plikufunctions.phpmacie już kod funkcji BootstrapNavMenuWalker(), jest to gotowe rozwiązanie, które znalazłem kiedyś w sieci ale świetnie spisuje się do wyświetlania rozwijanego menu.
Powyższy kod umieszczamy wewnątrz diva z klasą .navbar-collapse i cieszymy się generowany z poziomu panelu menu:)
