-
data publikacji: 05.06.2010
WP 3.0 – w końcu porządnie rozwiązane menu
kategoria: Wordpress autor: palmiak
Jednym z mankamentów WP było od zawsze tworzenie menu. Tzn nie było problemu jeżeli menu składało się tylko z kategorii lub tylko ze stron. Najczęściej jednak łączyło w sobie jedno i drugie. W sumie sposobów na rozwiązanie(lub bardziej ominięcie) tego problemu było sporo, jednak ciężko powiedzieć, żeby kipiały one prostotą. Ja najczęściej stosowałem "sztywne" menu, a podstrony i podkategorie przypinałem w odpowiednich miejscach.
Na szczęście od wersji 3.0 będę sobie mógł to wyklikać i poprzeciągać. I to bez żadnych wtyczek.
Wygląd i obsługa
Wchodzimy sobie w Wygląd(Apperance)>Menus. Osoby, których skóra nie obsługuje jeszcze tych dynamicznie tworzonych menu przywita komunikat "The current theme does not natively support menus, but you can use the “Custom Menu” widget to add any menus you create here to the theme’s sidebar.". Nie martwcie się jednak - w następnym rozdziale to wyelminujemy.
W sekcji 1. mamy wypisane jakie menu już potworzyliśmy, w 2. przyporządkowujemy menu do slotu na takowe, 3. sekcja to klocki z których tworzymy menu, a w 4. wszystko sobie układamy metodą przeciągania.
Dziecinnie proste czyż nie?
Najpierw tworzymy sobie puste menu, a następnie dodajemy kolejne elementy. Jeśli chcemy dodać link do vivee.info to wybieramy sobie Custom links wpisujemy url, etykietkę i klikamy na Add to menu. Jeżeli chcemy je przenieść na inną pozycję po prostu chwytamy i przeciągamy. Z kategoriami i stronami jest nawet prościej bo tylko zaptaszkowujemy co chcemy dodać do menu i po sprawie.
Kiedy już przygotujemy sobie menu, w Theme Locations przypisujemy je do odpowiedniej lokalizacji.
Instalacja
Jako, że już wiemy jakie te menu są fajne, super etc to warto by się nauczyć je uruchamiać.Zacznijmy od sprawdzenia czy w naszej skórze znajduje się plik
functions.php, jeżeli go nie ma należy go utworzyć.W tymże
functions.phppiszemy:Czymś takim deklarujemy, że w naszej skórze będą dwa menu - main_menu i sidebar_menu.
Teraz trzeba te menu przypisać gdzieś w skórze. W odpowiednich miejscach dopisujemy:
oraz
Od tej chwili mamy już wszystko naszykowane i możemy w pełni cieszyć z nowej funkcjonalności WP 3.0.
Jak przypisać na stałe menu do slotu
Są sytuacje kiedy byśmy chcieli przypisać dane menu do slotu, tak żeby za pomocą panelu nie dało się tego zmienić.
Jest na to bardzo proste wyjście:<?php wp_nav_menu( array( 'sort_column' => 'menu_order', 'menu'='glowne', 'theme_location'=>'main_menu' ) ); ?>Spowoduje to, że naszym głównym menu zawsze będzie menu o nazwie 'glowne'.
Jak stylować
Funkcja wp_nav_menu generując menu dodaje od siebie troszkę id'ów i klas. Jeżeli wywołamy:
to otrzymamy (tak w zarysie) takie coś:
<div class="menu-nazwa_menu-container">
<ul id="menu-nazwa_menu" class="menu">
<li><a href="#"></a></li>
...
</ul>
</div>
Poza tym znaczniki otrzymają kilka klas, ale nie interesują one nas zbytnio.
Pierwsze co możemy zmienić to kontener - może być on albo jako
divalbo jakonav. Jeżeli wpiszemy inną wartość to kontener zniknie. Tak więc w zależności od tego co chcemy otrzymać dopisujemy np.'container'=>'nav'.Jeżeli byśmy chcieli nadać kontenerowi jakąś inną klasę czy id wystarczy dopisać
'container_class'=>'nazwa_klasy'lub'container_id'=>'id_kontenera'. W wersji RC1 container_id jeszcze nie działa (patrząc jednak po tym co jest w repozytorium to kolejna wersja wspiera już wszystko poprawnie).Możemy też użyć 'menu_class'=>'nazwa_klasy', gdyby ktoś chciał zmienić klasę samego menu (czyli
ul).Kolejne co możemy zmodyfikować to zawartość linków w menu. Wszystko to za pomocą
link_beforeilink_after.Jeżeli zaś chcemy coś umieścić przed lub za linkiem to używamy
beforelubafter.Nasze menu ze wszystkimi parametrami wygląda tak:
<div class="container_class" id="container_id">
<ul id="menu-nazwa_menu" class="menu_class">
<li>before<a href="#">link_before jakiś tekst link_after</a>after</li>
...
</ul>
</div>
Podsumowanie
Ciężko jest cokolwiek zarzucić temu rozwiązaniu. Jest to funkcjonlaność, której brakowało, ale sposób w jaki ten brak naprawiono wynagradza tak długie oczekiwanie.
Niebawem kolejne wpisy opisujące nowe funkcje w WordPress 3.0.
-
Zobacz podobne wpisy:
- None Found
-
26 Responses to “WP 3.0 – w końcu porządnie rozwiązane menu”
Leave a Reply
Komentarze
Kategorie
Top 10
bal intermobil: Jak stworzyć stronę za pomocą xhtml oraz css
alan27pbll: Query_posts, czyli jak ujarzmić loopa część 1.
Michał: Inspirujące strony www: wrzesień 2010
czi: Gravatar, czyli jak mieć globalnego avatara
learn italian online: Query_posts, czyli jak ujarzmić loopa część 1.
hotelpalermo: Jak poprawnie osadzić Flasha w kodzie (X)HTML strony?
Windscreen: Inspirujące strony www: wrzesień 2010
EMAAR MGF GURGAON: Query_posts, czyli jak ujarzmić loopa część 1.
- CMSy Artykuły dotyczące różnego rodzaju systemów zarządzania treścią CMS.
- Flash Podstawowe informacje pomocne przy tworzeniu animacji w Adobe Flash.
- Fotografia Samouczki dotyczące nie tylko robienia zdjęć ale też ich cyfrowej obróbki.
- Grafika Ogólnie pojęta grafika komputerowa, od inspiracji, po tworzenie layoutów oraz mniejszych form graficznych.
- Inne tutoriale wordpressowe Wszystkie inne zagadnienia dotyczące WordPressa.
- Inspiracje Inspirujące materiały graficzne z dziedziny projektowania stron www, projektów DTP, digital painting, itp.
- Obróbka zdjęć Techniki retuszu fotografii cyfrowych.
- Rysunek Tworzenie rysowanych ilustracji w Adobe Photoshop.
- Skóry do Wordpressa Darmowe oraz płatne – najlepsze skóry do WordPressa.
- Skrypty client-side
- Skrypty server-side
- Tutoriale
- Webdesign Tutoriale z zakresu projektowania stron www i grafiki użytkowej na rzecz internetu.
- Wieczór z Open Source
- Wordpress Ulubieniec naszej publiczności CMS WordPress: nowości, tricki, wtyczki, skóry i wszystko to co może przydać się przy korzystaniu z tego systemu.
- Wtyczki do Wordpressa Recenzje oraz instrukcje najbardziej popularnych i najbardziej niezbędnych pluginów do WordPressa.
- XHTML/CSS Ciekawostki z dziedziny kodowania stron www: XHTML, CSS, jQuery.
Najnowsze newsy
Wieczór z Open Source 2010
Jak co roku WSINF organizuje konferencję Wieczór z Open Source.
Chciałbym zaprosić was na tegoroczna konferencję Wieczór z Open Source 2010! Czytaj dalej
Grafart.org i WACOM zapraszają na konkursy!
Witam!
Myślę, że czas najwyższy nadmienić, że za niedługi czas zostanie zorganizowany pierwszy z trzech konkursów, w których główną nagrodą będą tablety firmy WACOM!
Za miejsca drugie oraz trzecie nagrodami będą kubki i koszulki firmy WACOM oraz magazyny graficzne PSD PHOTOSHOP oraz COMPUTERARTS.
Czytaj dalej
Zapraszamy na forum graficzne Graffika.pl
Każda osoba interesująca się grafiką komputerową ma czasami ochotę porozmawiać o swoich pracach, posłuchać rad, krytyki i pochwał innych osób. Idealnym miejscem na realizowanie takich potrzeb jest forum graficzne Graffika.pl.
Czytaj dalej
Polecane strony
- No bookmarks avaliable.
A kiedy można się spodziewać 3.0?
Zapewne niebawem. Oficjalnej daty nie znalazłem, ale patrząc po ilości bugów ( https://core.trac.wordpress.org/query?status=reop... ) można odnieść wrażenie, że lada dzień możemy się spodziewać pełnej wersji.
W sumie to już jest dostępna 3.0 RC: http://wordpress.praktycznie.net/wordpress-3-0-re...
można spokojnie pobrać i testować
To prawie jak wersja finalna.
Wersja RC nie jest do końca dopracowana, co widać choćby po container_id. Do zastosowań produkcyjnych lepiej sobie poczekać na pełną wersją.
Spójrz na wygląd RSSów – powtarza się w nich tytuł posta, co może być nieco mylące – nie sądzę, żeby to było zamierzone.
Co do samego wpisu – ja też czekam z niecierpliwością na WP 3.0, miało być pod koniec maja, aktualnie mam nadzieję, że się wyrobią do wakacji. ;]
Dzięki – w sumie nie zwróciłem uwagi – już poprawiłem.
Wersja RC jest przeznaczona do testów pluginów/wtyczek/skórek, które powinny być dopasowane i działające przy wersji finalnej. Można śmiało powiedzieć, że RC jest od strony wizualnej oraz administracyjnej tym, co będzie w 3.0.
O ile mi wiadomo, bugów jest już naprawdę niewiele i na dniach będzie wersja finalna.
(na wp-testers cały czas toczą się zażarte dyskusje).
Przydał mi się ten wpis, dzięki
Jest tylko malutki błądzik w kodzie w akapicie "Jak przypisać na stałe menu do slotu".
Jest 'menu'='glowne' a powinno być 'menu'=>'glowne'.
Dzięki wielkie, właśnie zakończyłem wdrażanie w szablonie menu dzięki temu wpisowi.
PS: Jeśli ktoś jeszcze nie wiem, to wersja 3.0 wyszła już parę dni temu…
W finalnej 3.0 jak widać też nie działa – przynajmniej mi. No trudno, przerobi się style na klasy…
dodałem menu wg. zaleceń czyli w function.php oraz w themie niby wszystko ok ale w zakładce wygląd>menu "menu" nie istnieje na tym themie jeżeli przełączam na inny jest zakłdka "menu"
Wszystko ładnie pięknie opisane dobra robota. Korzystam z samego wordpressa 3.0 jak i z menu na moim nowym blogu (zarabianie-przez-internet.com). Co do moich starszych blogów jeszcze nie aktualizowałem
Rozwiązanie świetne! Ale w jaki sposób pozbyć się niepotrzebnych KB w postaci ID i klas typu <ul id="menu-nazwa_menu" class="menu_class">< li id="menu-item-1" class="menu-item menu-item-type-post_type"> itd. Jest mi to zbędne i tylko niepotrzebnie zaśmieca kod (ostylowanie uzyskuję przez zwykłe dziedziczenie). Czy ktoś zna rozwiązanie?
Wszystko pięknie tworzę menu własne wstawiam je do widgety i co z tego jak mi powiela wpisy w Kategoriach. Może mi ktoś pomoże i napisze jak rozdzielić wpisy tak aby pojawiały się tylko w menu własnym.
"Teraz trzeba te menu przypisać gdzieś w skórze. W odpowiednich miejscach dopisujemy:"
Gdzie jest to odpowiednie miejsce? Co to za tutorial z takim ogólnikami????
Do Zibi:
Jak sobie poradziłeś z tym powielaniem wpisów? Mam ten sam problem.
"gdzieś" oznacza "w wyznaczonym przez ciebie jako autora lub modyfikatora skóry miejscu w kodzie html". Tam gdzie masz wyznaczone miejsce na menu i ono jest do tego celu ostylowane tam podajesz funkcje. Ogólnik jak najbardziej poprawie uzyty – każda skora do WP jest inna.
Hmm… a jak zrobić, aby była możliwość zarządzania menu z poziomu innego niż admina, np. redaktora? Nie widać tego. Czy ktoś może mi pomóc?
no no no , ciekawy artykul
Pozdrawiam 
jak ustawiać klasy dla linków? zależy mi na tym aby link aktywny miał inną klasę, jak to zrobić??
mam ten sam problem, [code]<?php if($_SERVER['REQUEST_URI']=="/jakas_tam strona") echo 'class="active"' ?>[/code] nie mam pojęcia o php ale domyślam się że trzeba by to jakoś połączyć z tym [code]wp_nav_menu(array('link_before'=>'<span>','link_after'=>'</span>'));[/code] żeby wygenerowany link miał taka postać [code]<span>text</span> ktoś wie jak to zrobić?
Tez zastanawiam się jak to zrobić? Jest ktoś w stanie pomóc?
Fajny bajer z tym znikaniem diva kontenera – szukałem godzinę jak się go pozbyć a wystarczyło zrobić dać jakąś inną nazwę. Swoją drogą chętnie też bym się pozbył elementu UL (przydatne, jeśli chcę jakieś ul-e dorzucić z customizowanego kodu php). Czyli moim zdaniem powinni dać jakiś mechanizm w stylu 'nav_ul' => 'none' – tego mi brakuje chyba, że coś przeoczyłem. Ogólnie fajnie to zrobili.
[...] WP 3.0 – w końcu porządnie rozwiązane menu- vivee.info [...]
Witam.
Dla świeżaka stawiającego pierwsze kroki w wordpress artykuł mało przydatny. Podobnie jak dziesiątki innych, jakie przeczytałam przez ostatnie 3 dni. W każdym nic tylko "wstawić w odpowiednim miejscu"…szkoda, że tak ogólnie.
Potrzebuję pilnie stworzyć sensowną stronkę dla mojej niepełnosprawnej córeczki (zbieramy 1%). Póki co mam blogspota, ale kusi mnie wordpress z o niebo większymi możliwościami, postawiony na własnym serwerze. Gdyby ktoś mógł i chciał mi bezinteresownie pomóc rozwiązać problem ze stworzeniem menu bardzo proszę o e-maila.
Pozdrawiam serdecznie.
Marto dobrze zauważyłaś – artykuł ten nie jest dla "świeżaka", czyli osoby która nie zna struktury budowania skór do WP oraz ich "oprogramowywania". Nie jest skierowanych do takich osób. Aby dojść do tego powziomu należy zagłębić się w wiedzę na temat template tagów, możliwości jakie daje plik functions.php, etc etc.
Artykuł dla osób zajmujących się na co dzień WordPressem jest jak najbardziej pożyteczny.
A ja szukam metodu na zrobienie highlight/podświetlenie/inny kolor czcionki dla jednej z wielu kategorii, która chce wyróżnić na mojej stronie..
to jest zupełnie nowa kategoria i chciałabym ją jakoś oznaczyć graficznie…
ewentualnie mogłabym zmienic ją na stronę, jeśli taka opcja (podświetlenie itp) jest dostępna tylko dla "nazwy strony"…
przekopałam pół netu i nic nie znalazłam, ma ktoś jakies rozwiązanie mojego problemu???