Dodanie wielu menu do stopki witryny – lekcja 19
Jeśli spojrzymy na dół strony, wtedy zobaczymy, że po lewej stronie znajduje się kilka bloków z linkami (Linki do ważnych rzeczy), Myślę, że właściwe będzie dalsze zajmowanie się nimi.
Najpierw stwórzmy 4 menu w panelu administratora Wygląd -> Menu (Wygląd -> Menu).
Po utworzeniu czterech menu musisz wypełnić każde menu linkami, które znajdują się obecnie w szablonie. Nigdy nie zostawiaj witryny pustej, zawsze wypełniaj go danymi testowymi.
Wypełniając menu, zrób wszystko po kolei:
- Wybierz typ linku do treści (połączyć);
- W polu Adres URL dodaj kratkę, za pomocą siatki możesz wypełnić atrybut href linku, ale sam link donikąd nie doprowadzi. W polu tekst linku (tekst linku) musisz wprowadzić tekst linku (Kotwica);
- Po wypełnieniu adresu URL i tekstu linku kliknij przycisk Dodaj do menu (Dodaj do menu);
- Gdy wszystkie potrzebne elementy pojawią się w prawej części obszaru roboczego, kliknij zapisz menu (Zapisz menu).
Dodaj elementy samodzielnie i kontynuuj.
Aby wyświetlić menu, musimy utworzyć obszar wstawiania menu, obszary te są tworzone w pliku functions.php.
|
1 2 3 4 5 6 7 8 9 10 11 |
function register_my_menus() { register_nav_menus( array( 'footer-menu-1' => __( 'Footer Menu 1' ), 'footer-menu-2' => __( 'Footer Menu 2' ), 'footer-menu-3' => __( 'Footer Menu 3' ), 'footer-menu-4' => __( 'Footer Menu 4' ) ) ); } add_action( 'init', 'register_my_menus' ); |
Po zarejestrowaniu obszarów dla menu należy wybrać żądane menu w panelu administracyjnym i określić żądany obszar umieszczenia.
Do wybranego menu należy określić obszar umieszczenia [1] i zapisz [2].
Aby wyświetlić menu w WordPress, potrzebujemy funkcji wp_nav_menu() do którego wkładamy zawartość-bottom.php jak pokazano niżej.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!-- Links --> <section> <h2>Links to Important Stuff</h2> <div> <div class="row"> <div class="3u"> <?php wp_nav_menu(array( 'theme_location' => 'footer-menu-1', 'menu_class' => 'link-list last-child' )); ?> </div> <div class="3u"> <?php wp_nav_menu(array( 'theme_location' => 'footer-menu-2', 'menu_class' => 'link-list last-child' )); ?> </div> <div class="3u"> <?php wp_nav_menu(array( 'theme_location' => 'footer-menu-3', 'menu_class' => 'link-list last-child' )); ?> </div> <div class="3u"> <?php wp_nav_menu(array( 'theme_location' => 'footer-menu-4', 'menu_class' => 'link-list last-child' )); ?> </div> </div> </div> </section> |
Więcej o funkcji wp_nav_menu() Radzę przeczytać oficjalna strona internetowa.
Jeśli zrobiłeś wszystko dobrze, wtedy twój szablon pokaże menu, utworzone w panelu administratora. Aby to sprawdzić, możesz zmienić kolejność elementów menu w panelu administracyjnym i zobaczyć wynik na stronie.
Drobne modyfikacje szablonu
W pliku zawartość-top.php dodaj nazwę strony za pomocą funkcji
|
1 |
<?php bloginfo('name'); ?> |
Pełny kod nagłówka
|
1 |
<h1><a href="#" id="logo"><?php bloginfo('name'); ?></a></h1> |
Menu wyświetlamy w nagłówku strony
W pliku functions.php dodaj obszar do wyświetlania menu, zmodyfikowany kod będzie wyglądał tak.
Utwórz nowe menu w panelu administracyjnym o nazwie „Menu nagłówka” i dodaj do niego elementy z naszego szablonu, określić położenie menu i pamiętać o zapisaniu menu po ustawieniu.
W pliku content-top.php tworzymy funkcję wyświetlającą górne menu. Ponieważ nasz układ ma niestandardową strukturę (bez tagów ul i li), następnie musimy nieco zmodyfikować funkcję wp_nav_menu().
|
1 2 3 4 5 6 7 8 9 10 |
<?php $args = array( 'theme_location' => 'header-menu', 'menu_id' => 'nav', 'echo' => false, 'items_wrap' => '<nav id="%1$s" class="%2$s">%3$s</nav>' ); $header_menu = wp_nav_menu($args); echo strip_tags($header_menu, '<a><nav>'); ?> |
Przeanalizujmy wynikowy kod w kolejności:
- Tablica $args zawiera wszystkie atrybuty funkcji.
- lokalizacja_motywu - obszar umieszczenia motywu, omówione powyżej;
- „identyfikator_menu” => „nawigacja” – dodaje id = „nav” do opakowania menu, w naszym przypadku opakowanie jest tagiem <identyfikator nawigacji = „nawigacja”></nawigacja>.
- „echo” => fałszywe, - domyślna funkcja wp_nav_menu() generuje menu i wyświetla je na ekranie, gdy ustawione na fałsz, funkcja nie wyświetli danych, a wygenerowane menu można zapisać do zmiennej, w naszym przypadku zmienna $menu_nagłówka.
- „opakowanie_przedmiotów” => „<nav id=”%1$s” class=”%2$s”>%3$s</nawigacja>' - generuje szablon opakowania menu.
- W zmiennej $menu_nagłówka wygenerowane menu zostaje zapisane, w którym znajduje się jeszcze dodatkowy tag <li>, musimy go usunąć.
- Budowa echo strip_tags($menu_nagłówka, „<a><nawigacja>') usuwa wszystkie niepotrzebne tagi, inne niż te w cudzysłowie.
Po tych manipulacjach nasze menu powinno pojawić się w formularzu, w którym pierwotnie znajdował się w układzie i nie będzie go zawierał <ul> i <li>.
Chociaż przeanalizowaliśmy ten przykład, ale lepiej byłoby poprawić układ strony, niż robić takie manipulacje.
Jak włączyć pasek administratora na stronie
Dla wygody WordPress ma specjalny pasek administratora po stronie użytkownika.. Aby włączyć pasek administratora, potrzebne w pliku footer.php, przed tagiem zamykającym </ciało> wprowadź funkcję <?php wp_footer(); ?>
|
1 2 3 4 5 6 7 |
<!-- Copyright --> <div id="copyright"> © Untitled. All rights reserved. | Design: HTML5 UP </div> <?php wp_footer(); ?> </body> </html> |
Moje pliki źródłowe motywu
Wszystko na dziś, W następnym samouczku przyjrzymy się, jak zrobić nawigację w WordPressie bez dodatkowych wtyczek., ponieważ podczas tworzenia motywów premium musisz używać jak najmniejszej liczby wtyczek.
/*
- Podstawowy kurs projektowania stron internetowych;
- Układ stron;
- Ogólny kurs CMS WordPress oraz kontynuacja kursu dotyczącego tworzenia szablonów;
- Tworzenie stron internetowych w PHP.
