Konfiguracja wielopoziomowego menu na stronie – lekcja 22
Najpierw musisz utworzyć strony, co da nam plan działania i rozwoju na przyszły kurs. Chciałbym stworzyć z tobą szablon premium i pokazać, że nie jest to takie trudne i całkiem możliwe do zrobienia. Premia będzie, fakt, że na koniec kursu otrzymasz kompletny przewodnik po działaniach dotyczących tworzenia szablonów premium i ich sprzedaż na giełdach, więc obserwujcie nowe posty.
Twórz strony internetowe:
- Dom
- blog
- o
- Kontakt
- skróty
- Błąd 404
- strona 1 kolumna
- strona 2 kolumna
- strona 3 kolumna
- teczka
- Pojedynczy standard
- Pojedyncza galeria
- Pojedyncze wideo
- Pojedynczy dźwięk
- Pojedynczy portfel
- Pojedynczy produkt
- Sklep
- Pojedynczy produkt
Po utworzeniu stron przejdź do elementu Wygląd -> Menu i usuń stare elementy. Po usunięciu nie zapomnij nacisnąć przycisku Zapisz menu.
Dodaj do górnego menu strony, jak pokazano na poniższym obrazku.
Jeśli zostały dodane dodatkowe strony, następnie możesz po prostu usunąć je z list pozycji. Tworząc menu, możesz używać kodów pośredniczących, nie są trudne do wykonania, po prostu dodaj myślnik zamiast linku (#).
Stwórzmy strukturę menu, przeciąganie elementów we właściwe miejsce.
Tworzymy strukturę z załącznikami, jak pokazano poniżej:
- Dom
- blog
- strona ( # )
- o
- skróty
- Kontakt
- pojedynczy ( # )
- Pojedynczy standard
- strona 1 kolumna
- strona 2 kolumna
- strona 3 kolumna
- Pojedyncza galeria
- Pojedyncze wideo
- Pojedynczy dźwięk
- Pojedynczy portfel
- Pojedynczy produkt
- Pojedynczy standard
- Błąd 404
- teczka
- Pojedynczy produkt
- Sklep
Po utworzeniu menu na stronie wszystko się czołgało, ponieważ szablon nie zawierał rozwijanego wielopoziomowego menu.
Tak myślę, poprawne będzie wyczyszczenie szablonu i ustawienie nowego menu.
Usuń dodatkowy javascript w pliku header.php, żeby nam nie przeszkadzał, pozostałości starego menu:
|
1 |
<script src="<?php echo bloginfo('template_url'); ?>/js/init.js"></script> |
W header.php dołączmy style dla nowego menu. Nasze menu będzie działać wyłącznie na css.
|
1 |
<link rel="stylesheet" href="<?php echo bloginfo('template_url'); ?>/css/menu.css" /> |
Do pliku menu.css, dodanie stylów dla przyszłego menu, Daję ci próbkę:
W pliku header.php zamień nasze stare menu na nowe:
|
1 2 3 4 5 6 7 8 9 10 11 |
<!-- Start responcive-menu.com BODY --> <?php $args = array( 'theme_location' => 'header-menu', 'menu_class' => 'topmenu', 'menu_id' => 'responcive-menu1', 'items_wrap' => '<input type="checkbox" id="responcive-menu-switcher" class="resp-menu-switch-input"><ul id="%1$s" class="%2$s"><li class="switch"><label onclick="" for="responcive-menu-switcher"></label></li>%3$s</ul>' ); wp_nav_menu($args); ?> <!-- End responcive-menu.com BODY --> |
Przenieśmy też logo pod menu w kodzie. Tak myślę, nie warto dużo mówić, bardziej poprawne byłoby zlecenie samodzielnego przeanalizowania i przeniesienia nowego kodu z pliku header.php. Po przeniesieniu Twoje menu powinno wyglądać tak:
Źródła szablonów:
Dodatkowe udoskonalenie
Po utworzeniu stron określmy w ustawieniach stronę główną (Ustawienia -> odczyty -> Na ekranie głównym -> Strona statyczna -> Dom) oraz stronę bloga (Ustawienia -> odczyty -> Strona postów -> Blog), wyświetli wszystkie nasze publikacje.
W tej chwili musimy jeszcze sfinalizować szablon strony głównej i bloga, aby posty wyświetlały się poprawnie. W następnych lekcjach omówimy te dwie strony i ogólny rozwój szablonów stron..
- 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.
