Jeden z czytelników tego blogu zadał pytanie, jak wykonać rozwijalne menu w WordPressie, które będzie mieć nieklikalnego rodzica. W tym artykule pokażę, w jaki sposób dostosować menu w WordPressie, aby ociągnąć ten cel.
Przy okazji dowiesz się, jak przejąć kontrolę nad generowaniem menu w WordPressie, która pozwoli na bardziej elastyczne dostosowanie go do własnych potrzeb.
Uwaga!
Po opublikowaniu tego artykułu z komentarzy dowiedziałam się, jak to zrobić szybko i prosto:
- Wejdź w Wygląd->Menu
- W obszarze Własne odnośniki w polu Adres URL wpisz (tymczasowo) cokolwiek, w polu Etykieta wpisz tytuł rodzica.
- Kliknij Dodaj do menu.
- Wykasuj zawartość pola Adres URL.
- Zapisz menu
Artykuł mimo wszystko pozostawiam, gdyż pokazuje, jak przejąć zupełną kontrolę nad generowaniem menu. Będzie przydatny dla programistów do wielu innych zastosowań.
Cel:
Wygenerowanie w WordPressie dwupoziomowego menu, którego pozycje-rodzice są nieklikalne.
Dla kogo:
Ten artykuł jest dla Ciebie jeśli:
- implementowałaś/eś już menu w WordPressie za pomocą funkcji wp_nav_menu
- szukasz rozwiązania, które pozwoli na wygenerowanie kodu HTML menu w dowolnej postaci
- rozwiązania tego problemu za pomocą JavaScript i jQuery Cię nie satysfakcjonują
- posiadasz podstawową wiedzę o WordPressie, plikach CSS i php pozwalającą na dokonywane drobnych zmian w kodzie
Opis problemu
Zacznijmy od przykładu. Standardowy motyw WordPressa Twenty Eleven wyświetla strony w postaci eleganckiego menu rozwijalnego, które wygląda mniej więcej tak:
Przykład 1 – menu z rodzicem klikalnym
Zwróćmy uwagę, że wszystkie z tych pozycji są „klikalne”, zarówno pozycje pierwszego poziomu (rodzice) jak i wszystkie pozycje im podrzędne (dzieci). Po najechaniu kursorem myszy nad dowolny z tych elementów pojawia się „łapka”, sugerująca, że pod daną pozycją kryje się przejście do jakiejś podstrony.
Niżej prezentuję menu, które wyglada niemal identycznie jak powyższe, z tą tylko różnicą, że pozycje-rodzice są nieklikalne:
Przykład 2 – menu z rodzicem nieklikalnym
Czym różni się menu z rodzicem klikalnym od nieklikalnego
Dlaczego wykonanie menu z nieklikalnym rodzicem w WordPressie nie jest banalną sprawą? Okazuje się, że ta, z pozoru drobna różnica, nie jest taka prosta do realizacji w WordPressie. Żeby zrozumieć dlaczego, zobaczmy najpierw kod html odpowiadający obu wygenerowanym menu:
Kod HTML generujący menu z rodzicem klikalnym:
<ul> <li><a href="#">rodzic 1</a> <ul class="sub-menu"> <li><a href="#">dziecko 1.1</a></li> <li><a href="#">dziecko 1.2</a></li> </ul></li> <li><a href="#">rodzic 2</a> <ul class="sub-menu"> <li><a href="#">dziecko 2.1</a></li> <li><a href="#">dziecko 2.2</a></li> <li><a href="#">dziecko 2.3</a></li> <li><a href="#">dziecko 2.4</a></li> </ul></li> <li><a href="#">rodzic 3</a> <ul class="sub-menu"> <li><a href="#">dziecko 3.1</a></li> <li><a href="#">dziecko 3.2</a></li> <li><a href="#">dziecko 3.3</a></li> </ul></li> </ul>
Kod HTML generujący menu z rodzicem nieklikalnym:
<ul> <li>rodzic 1 <ul class="sub-menu"> <li><a href="#">dziecko 1.1</a></li> <li><a href="#">dziecko 1.2</a></li> </ul></li> <li>rodzic 2 <ul class="sub-menu"> <li><a href="#">dziecko 2.1</a></li> <li><a href="#">dziecko 2.2</a></li> <li><a href="#">dziecko 2.3</a></li> <li><a href="#">dziecko 2.4</a></li> </ul></li> <li>rodzic 3 <ul class="sub-menu"> <li><a href="#">dziecko 3.1</a></li> <li><a href="#">dziecko 3.2</a></li> <li><a href="#">dziecko 3.3</a></li> </ul></li> </ul>
Przykłady te różnią się tym, że w przypadku menu z rodzicem klikalnym wszystkie pozycje są zaimplementowane za pomocą znaczników <a href=””></a> zagnieżdżonych w znaczniku <li></li>. Obecność znacznika <a> powoduje jego „klikalność” i pojawienie się nad nim znajomej łapki podczas najazdu myszą.
W drugim przykładzie elementy odpowiadające za wyświetlenie rodziców nie zostały zaimplementowane za pomocą znaczników <a href=””></a>, w związku z tym są „nieklikalne”.
WordPress generuje wszystkie pozycje menu jako odnośniki (<a href=””></a>). I w tym tkwi problem. Gdybyśmy w jakiś sposób mogli powiedzieć WordPressowi, żeby w szczególnych przypadkach nie otaczał wybranych pozycji menu znacznikami <a href=””></a>, moglibyśmy osiągnąć zamierzony efekt.
Jak zmusić WordPressa, żeby wygenerował menu z nieklikalnym rodzicem
Okazuje się, że możemy to zrobić, rozszerzając odpowiednią WordPressową klasę Walker. Klasa Walker, mówiąc w uproszczeniu, odpowiada za generowanie wynikowego HTML-a dla różnych obiektów o strukturze drzewa. Nas interesuje „dobranie się” do tej klasy Walker, która kryje się za wyświetlaniem menu. Jest to klasa Walker_Nav_Menu.
Rozwiązanie będzie polegać na tym, że napiszemy własną klasę, która zrobi to wszystko, co standardowa Walker_Nav_Menu i dodatkowo to, co chcemy. Żeby nie wywarzać drzwi już otwartych i nie pisać wszystkiego od początku, wystarczy skopiować tę klasę z core’owego pliku WordPress’a i zmienić tylko te miejsca, które nas interesują.
Tworzenie menu z nieklikalnym rodzicem – kroki
- Krok 0: Rejestracja funkcji wp_nav_menu
- Krok 1: Utworzenie własnej klasy Walker_Nav_Menu
- Krok 2: Znalezienie WordPressowej funkcji generującej odpowiedni fragment menu
- Krok 3: Dostosowanie kodu generującego menu do własnych potrzeb
- Krok 4: Wywołanie menu za pomocą nowej funkcji
- Krok 5: Utworzenie menu z zagnieżdżonymi poziomami w panelu admin.
- Krok 6: Dostosowanie CSS-a
Krok 0. Rejestracja funkcji wp_nav_menu
Najpierw musimy przygotować nasz motyw na obsługę menu za pomocą funkcji wp_nav_menu. Ten krok nie różni się niczym od typowego kroku, który musimy wykonać, chcąc umożliwić użytkownikowi obsługę menu za pomocą panelu Wygląd->Menu.
W tym celu do pliku functions.php w katalogu z naszym motywem dodajemy linie:
add_action( 'init', 'register_my_menus' ); function register_my_menus() { register_nav_menus( array( 'primary-menu' => __( 'Primary Menu' ) ) ); }
Krok 1. Utworzenie własnej klasy Walker_Nav_Menu
Wchodzimy w edycję pliku functions.php w katalogu z naszym motywem. I wpisujemy następujący kod:
class My_Walker extends Walker_Nav_Menu { }
W tym momencie powiedzieliśmy WordPressowi, że nasza klasa odpowiedzialna za wygenerowanie menu (My_Walker) ma się zachowywać tak samo jak standardowa klasa Walker_Nav_Menu.
Krok 2. Znalezienie WordPressowej funkcji generującej odpowiedni fragment menu
![Fragment klasy Walker_Nav_Menu Fragment klasy Walker_Nav_Menu](https://webfaces.pl/blog/wp-content/uploads/2011/10/nav-menu-template2-150x150.jpg)
Teraz spróbujemy wypełnić ciało utworzonej klasy, w celu napisania własnej funkcji wyświetlającej menu. Właściwie nie musimy implementować wszystkich części składających się na całe menu. Interesuje nas tylko część kodu, która wyświetli ten fragment menu, który chcemy zbudować nieco inaczej niż robi to WordPress. Musimy zachować zgodność wygenerowanego kodu z tym, co oferuje WordPress, dlatego najlepiej jest skopiować odpowiednią funkcję z core’owego pliku WordPress’a i zmienić jedynie te miejsca, które nas interesują.
Dlatego otwieramy (tylko do odczytu) plik wp-includes/nav-menu-template.php klasy Walker_Nav_Menu. W ciele tej klasy szukamy funkcji, która odpowiada za generowanie interesującego nas kawałka kodu HTML. W tym przypadku będzie to funkcja start_el (odpowiada za wygenerowanie elementu <li>, a raczej jego początkowej części), zobacz rysunek obok. Zaznaczamy ten fragment kodu i kopiujemy do ciała klasy My_Walker utworzonej w kroku 1.
Na potrzeby tego artykułu wykorzystany został fragment klasy Walker_Nav_Menu w wersji WP 3.2.1 i definicja funkcji start_el (zobacz kod w kroku 3.)
Krok 3. Dostosowanie kodu generującego menu do własnych potrzeb
Zastanówmy się, co mamy zrobić, żeby wyłączyć klikalność niektórych elementów. Wiemy już, że wyłączenie klikalności w naszym przypadku będzie się sprowadzać do pozbycia się znaczników <a href=””></a> dla pozycji najwyższego poziomu.
W celu rozróżnienia, który element jest elementem menu najwyższego poziomu posłużymy się zmienną $depth, która przyjmuje wartość zerową tylko dla stron/kategorii najwyższego poziomu. Zatem modyfikacja standardowej funkcji budującej menu opierać się będzie na tym, że znaczniki <a></a> zastosujemy tylko dla stron dzieci. W naszym przykładzie (dwupoziomowe menu) będą to te, które są niżej w hierarchii stron (mają depth większą od zera). Wprowadzone przez nas modyfikacje podświetlono w poniższym fragmencie kodu:
class My_Walker extends Walker_Nav_Menu { function start_el(&$output, $item, $depth, $args) { global $wp_query; $indent = ( $depth ) ? str_repeat( "t", $depth ) : ''; $class_names = $value = ''; $classes = empty( $item->classes ) ? array() : (array) $item->classes; $classes[] = 'menu-item-' . $item->ID; $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) ); $class_names = ' class="' . esc_attr( $class_names ) . '"'; $id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args ); $id = strlen( $id ) ? ' id="' . esc_attr( $id ) . '"' : ''; $output .= $indent . '<li' . $id . $value . $class_names .'>'; $attributes = ! empty( $item->attr_title ) ? ' title="' . esc_attr( $item->attr_title ) .'"' : ''; $attributes .= ! empty( $item->target ) ? ' target="' . esc_attr( $item->target ) .'"' : ''; $attributes .= ! empty( $item->xfn ) ? ' rel="' . esc_attr( $item->xfn ) .'"' : ''; $attributes .= ! empty( $item->url ) ? ' href="' . esc_attr( $item->url ) .'"' : ''; $item_output = $args->before; if ($depth != 0) $item_output .= '<a'. $attributes .'>'; $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after; if ($depth != 0) $item_output .= '</a>'; $item_output .= $args->after; $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args ); } }
Krok 4. Wywołanie menu za pomocą nowej funkcji
Teraz musimy jeszcze powiedzieć naszemu motywowi, żeby do wyświetlenie menu wykorzystał zmodyfikowaną przez nas klasę. W pliku odpowiedzialnym za wyświetlenie menu (zwykle będzie to header.php) wywołujemy funkcję wp_nav_menu, nieco inaczej niż zrobilibyśmy to standardowo:
<?php $walker = new My_Walker; wp_nav_menu(array('theme_location' => 'primary-menu', 'walker' => $walker)); ?>
Jak widać w powyższym fragmencie kodu funkcja wp_nav_menu przyjęła dodatkowy parametr: walker, który jest obiektem naszej własnej, zdefiniowanej w kroku 3, klasy o nazwie My_Walker.
Krok 5. Utworzenie menu z zagnieżdżonymi poziomami w panelu admin.
![Wykonanie menu hierarchicznego z poziomu panelu administracyjnego Wykonanie menu hierarchicznego z poziomu panelu administracyjnego](https://webfaces.pl/blog/wp-content/uploads/2011/10/menu-w-wordpressie-hierarchia2-150x150.jpg)
Teraz w panelu administracyjnym wystarczy wejść w Wygląd->Menu i ułożyć menu zgodnie z wybraną przez nas hierarchią.
Na obrazku obok pokazano przykładową strukturę dwupoziomowego menu. Elementy z wcięciem (dzieci) zostaną potraktowane przez WordPressa jako pozycje z niezerową głębokością (zmienna depth w kroku 3).
Krok 6: Dostosowanie CSS-a
Gdybyśmy teraz podejrzeli kod HTML wygenerowanego przez nas menu, okaże się, że już spełnia on nasze oczekiwania: pozycje menu najwyższego poziomu są nieklikalne. Pozostaje jedynie odpowiednio doszlifować klasy CSS, pamiętając, że teraz część pozycji w menu nie zawiera już znaczników <a href=””></a>
Fragment pliku style.css z motywu Twenty Eleven zmodyfikowany pod kątem nieklikalnego rodzica. Podświetlono linie, które zmodyfikowane bądź dodano w stosunku do oryginału.
#access ul { font-size: 13px; list-style: none; margin: 0 0 0 0; padding-left: 0; } #access li, #access a { color: #eee; display: block; line-height: 3.333em; padding: 0 10px; text-decoration: none; } #access ul ul li { background: #f9f9f9; } #access li:hover > a, #access ul ul li:hover, #access ul ul :hover > a, #access a:focus { background: #efefef; }
Inne zastosowania budowania menu w oparciu o własną klasę Walker_Nav_Menu
Implementując po swojemu klasę Walker_Nav_Men możemy osiągnąć inne ciekawe efekty w wyświetlaniu menu, np.:
- wykonać menu oparte na obrazkach
- dla każdej z pozycji menu dodać jej dodatkowy opis
Użytkownikowi pozostawimy elastyczność modyfikowania takiego menu na poziomie pracy z ekranem Wygląd->Menu i wykorzystaniu dodatkowych pól takich jak na przykład description. Ale to już temat na osobny artykuł…
Jaki był Twój problem z menu w WordPressie?
A czy Ty też miałaś/-eś jakiś problem z dostosowaniem menu WordPressa do uzyskania określonego efektu? Co to było? A może nie znalazłeś dobrego rozwiązania? Zapraszam do dzielenia się opiniami i pytaniami w komentarzach.
Oj, chyba przykłady się nieco pomyliły 🙂 W przykładzie 1 rodzic jest zdecydowanie klikalny, a w przykładzie 2 nieklikalny 🙂
A poza tym bardzo interesujący artykuł!
O dzięki Ci Czujna Istoto! Już poprawiłam.
Witam, mam takie pytanie. Czy jest możliwe wygenerowanie menu z divami i class’ami takimi jakie podam w tej funkcji Walker_nav_menu? Bo obecnie do całego menu dodaje mi diva o klasie menu, oraz klasy do poszczególnych li oraz ul, a ja chciałbym na sztywno przypisać np. ul swoją klasę.
Ja bym „inwestowała” we własnego walkera w ostateczności.
Możesz najpierw spróbować nadać swoją nazwę klasy na poziomie całego menu, jako jeden z paramentów w funkcji wp_nav_menu: http://codex.wordpress.org/Function_Reference/wp_nav_menu (menu_class)
Możesz też spróbować zrobić tak: wchodzisz w Wygląd->Menu i klikasz na górze w „Opcje ekranu”. Rozwinie Ci się panel, na którym zaznaczasz „Klasy CSS”. Wówczas przy każdej dodanej stronie do menu masz możliwość wpisania własnej klasy.
Nie wiem, na ile te możliwości sprawdzą się w Twoim konkretnym przypadku. Jeśli nie, to pozostaje wgryźć się w walkera.
Bardzo przydatne tutaj jest zapoznanie się ze specyfikacją funkcji na stronie wordpressa – ten link od Agi (http://codex.wordpress.org/Function_Reference/wp_nav_menu) 😉 Tłumaczy podstawowe parametry i możliwości co z kolei ułatwia ogarnięcie całej reszty.
Dziękuję za komentarz. Dzięki niemu dowiedziałam się o istnieniu Twojego bloga, który mnie zaciekawił.
niestety ostatnio przekonałam się, że ten szybki sposób z tymczasowym adresem w odnośniku, nie zawsze działa w menu na mobile, nie we wszystkich motywach.
pozdrawiam i dzięki za artykuł
Hej Aga, dziękuję za link do Twojego bloga po prostu wcieło mi wszystkie nowo zapisane zakładki po formacie 🙂 dla zainteresowanych inny sposób przy użyciu tej klasy http://www.kriesi.at/archives/improve-your-wordpress-navigation-menu-output. Pozdrawiam
Witam ponownie, twoje rady (Aga) pomogły i już sobie z tym menu poradziłem. Mam kolejne pytanie (wiem, że nie w tym wątku powinienem to pisać, ale spróbuję). Czy jest możliwość dodania podpisu pod miniaturką w NexGen Gallery? Starałem się wyszukać takiej możliwości w opcjach, ale niczego takiego nie znalazłem. Z góry przepraszam, że zaśmiecam ten temat ale pilnie potrzebuję tej informacji;)
Fajnie, że z menu dałeś radę.
Jeśli chodzi o NextGen Gallery. Jeżeli trochę orientujesz się w HTML-u, CSS-ie i nawet tylko odrobinę w php, to możesz sobie dostroić templatkę wyświetlającą galerię do własnych potrzeb zupełnie dowolnie. Wchodzisz do katalogu plugins/nextgen-gallery/view/ i albo modyfikujesz plik gallery.php albo tworzysz na jego wzór własny.
Dodajesz w tym pliku, w miejscu gdzie chcesz, kod odpowiedzialny za wyświetlenie description albo alttext, który możesz edytować potem z poziomu panelu.
Nie wiem, jaki jest Twój poziom zaawansowania, więc jeśli te informacje będą niejasne, daj znać, rozwinę temat.
Dzięki za pomoc z tą galerią, udało mi się uzyskać zadowalający efekt. Jednak znów muszę poprosić o pomoc;)
Mam w szablonie 4 bloki i w każdym z tych bloków mam zdjęcie. Czy jest jakaś możliwość dopisania jakiejś funkcji motywu dzięki czemu będę mógł zmieniać te obrazki z poziomu PA? chodzi mi o najzwyklejszą możliwość zmiany obrazków.
Nie jestem pewna czy zrozumiałam pytanie.
Jeśli masz zainstalowany plugin NextGen gallery, to edycję zdjęć (dodawanie, usuwanie, zmiana ich kolejności, dopisywanie tytułów, opisów itd.) zmieniasz z poziomu panelu administracyjnego wchodząc w Galeria->Zarządzaj Galerią, a naste pnie klikając w tytuł odpowiedniej galerii. Oczywiście o ile wcześnie założyłeś te galerie i dodałaś do nich obrazki również poprzez ten plugin (Galeria->Stwórz galerię).
W templatce nie odwołujemy się do konkretnych zdjęć. Jest to jedynie szablon, na poziomie którego można dodać własne klasy CSS, które pomogą nam lepiej zapanować nad własnym formatowaniem galerii i/lub wyświetlić galerię inaczej niż umożliwiają to gotowe templatki dostarczone z pluginem.
Gdyby coś było nie jasne, pytaj śmiało.
nie, nie, nie, nie chodziło mi w tym przypadku o next gen’a. Chodziło mi o coś w stylu zmiany header poprzez funkcję get_header_images (jeśli dobrze pamiętam). czyli jakiś formularzyk, przez którego będę mógł wrzucać grafikę i onośnik do jej wyświetlenia w miejscu templaki, gdzie go ustawię.
No to faktycznie się rozminęliśmy 🙂
Czy to chodzi o to, żeby osoba edytująca treść mogła sobie wejść w edycję strony, z jej poziomu załadować zdjęcie/a z dysku (lub innej lokalizacji), które potem pojawią się w określonych miejscach na stronie? Im bardziej precyzyjnie opiszesz, co chcesz osiągnąć, tym większe szanse, że tym razem się zrozumiemy 🙂
O takie bloki mi chodzi: http://www.bankfotek.pl/image/1115521.jpeg
Dopiero teraz zauważyłam ten komentarz.
To już mi nieco rozjaśniło. Teraz pytanie, czy te obrazki są przypięte do jakiś stron? To znaczy każdy z nich jest skojarzony z jakąś konkretną podstroną (albo wpisem)?
nie, one są dodane „na sztywno” treść poniżej nich generuje się, ale one są na sztywno tzn. <img src…itd.
Widzę na obrazku, który podałeś, że każdy obrazek jest „przypisany” (w sensie logicznym) do jakiejś strony np. ten z wiatrakami do „Rezerwacja”, ten z wybrzeżem do „Region”. Jeśli „Rezerwacja” i „Region” to są u Ciebie strony w WP, to możesz na poziomie każdej z tych stron wstawić te obrazki jako tzw. miniatura wpisu (ang. featured image). To się robi właśnie z poziomie panelu i dzięki temu w dowolnej chwili będziesz mógł podmienić zdjęcie.
Potem w szablonie odpowiadającym za wygenerowanie tej strony z blokami musisz odwołać się do tych stron i za pomocą funkcji get_the_post_thumbnail wyświetlić obrazek.
Jeśli potrzeba będzie więcej szczegółów, daj znać. Teraz chciałam się upewnić, czy takie rozwiązanie jest dla Ciebie OK.
treść tych bloków jest pobierana z odpowiednich wpisów, ale kod zaczyna się od nagłówka z daną kategorią, pokażę Ci przykład jednego bloku, wtedy zobaczysz jak ja to mam:
<img src="” width=”” height=”” alt=”Header Image” />
Gościniec
'gosciniec’, 'posts_per_page’ => -1 ) );
?>
<a style="padding-right:10px;" href="”>>Dowiedz się więcej
Sorka, coś się kod nie wkleił dobrze. Tutaj link do niego:
http://pokazywarka.pl/boxy/
Kurczę, sorki, że tak miotam te komentarze, ale znowu się pewnie nie zrozumiemy. W linku <img src=""… użyłem na próbę get_header_image() ale pierwotnie miałem zwykły odnośnik do pliku ze zdjęciem.
Jeżeli u Ciebie obrazek jest przypisany do kategorii, to najprościej będzie Ci zainstalować wtyczkę Category Icons Lite.
Dzięki niej będziesz mógł uploadować dowolny obrazek przez menu Media w PA i przypisać go do wybranej kategorii. Podczas uploadu zobaczysz dodatkowe pole z listą wszystkich kategorii. Wybierzesz sobie tą którą chcesz mieć przypisaną do danego obrazka.
A następnie w swoim kodzie, w miejscu w którym chcesz wyświetlić ten obrazek odwołasz się do niego za pomocą funkcji:
Jako parametr (w przykładzie wyżej jest 7) podajesz w tej funkcji id wybranej kategorii. Jeśli jesteś w pętli przetwarzającej daną kategorię możesz to zrobić uniwersalnie np. tak:
Jedna uwaga. Ten plugin po instalacji automatycznie wyświetla ten obrazek również dla wszystkich wpisów danej kategorii. Możesz to wyłączyć wchodząc w wp-content/plugins/category-icons-lite/caticonslite.php i zakomentować linie zaczynające się od
add_filter(’the_title’…
add_filter(’wp_list_categories’…
Tak radzi autor plugina, więc nie jest to jakaś ingerencja w kod na żywioł.
Nawet nie wiem jak Ci dziękować. Udało się i teraz wszystko się ładnie wyświetla;) Jestem Ci baaardzo wdzięczny.
A jest jakiś sposób (tak na przyszłość) żeby zrobić tą edycję tych zdjęć tak jak chciałem (tzn. osobna zakładka w PA), pytam z czystej ciekawości;)
Fajnie, że się udało.
Jeśli chodzi o temat własnej zakładki w panelu administracyjnym, to postaram się przygotować na to tutorial, bo już jesteś 3 osobą, która o to mnie pyta, a właściwie nie spotkałam takiego tutoriala na stronach w języku polskim. Niestety nie da się tego wyjaśnić w dwóch zdaniach.
Kolejną kwestią jest dodanie w tej zakładce możliwości uploadu własnych zdjęć, są na to różne sposoby, ale omówienie każdego z nich też wymaga osobnego tutoriala.
Jeśli chcesz osiągnąć ten efekt na zasadzie podmiany zdjęć do headera jak ma to miejsce w Twenty Ten, może ten tutorial będzie dla Ciebie pomocny:
http://www.wpbeginner.com/wp-themes/how-to-enable-custom-header-images-panel-in-wordpress-3-0/.
Jest jeszcze możliwość ugyzienia Twojego konkretnego przypadku od innej strony. Jeśli „Aktualności” „Gościniec” „Region”, oparlibyśmy w WP nie o kategorie, lecz o strony (jako strony rodzice) i resztę podstron ułożyli w hierarchię, to można by wykorzystać ładowanie ikony wpisu dla każdej z tych stron pierwszego poziomu i to byłoby rozwiązanie najprostsze.
Witaj Agnieszko. Mam problem z edytowaniem szablonu, a konkretnie chodzi o to, ze z nagłówka,chciałabym usunąć zakładkę search. W miejscu w którym się ona znajduję, chciałabym umieścić w linii poziomej swoje własne menu z możliwością rozwinięcia zakładek. Jestem totalnym nowicjuszem. Próbowałam dokonać edycji według wskazówek podanych na tej stronie, ale chyba się „rzuciłam z motyką na słońce”. Nie mam już jakiejkolwiek koncepcji jak to zrobić. Szablon jest z WP. I w tym momencie stoję z dalszymi wpisami.
Witaj Bożena,
Nagłówek search jest zwykle wstawiany przez wywołanie funkcji get_search_form(); (najczęściej w pliku header.php).
Jak nazywa się motyw, którego używasz? Czy to jest motyw pobrany gdzieś z sieci, który dostrajasz do własnych potrzeb? Skąd go można pobrać? Gdybym sobie roboczo zainstalowała ten motyw, wówczas więcej będę mogła pomóc.
Witaj Aga. Motyw pobrany został ze strony http://wordpressthemesbase.com/page6.html i nosi nazwę Water Lily
Sama sobie już poradziłam ze zmianą dotyczącą wielkości i stylu czcionki, a to dla mnie osoby nieznającej się, a uczącej się dopiero kodów i ich edytowaniu, kompletnie w tej dziedzinie zielonej, WIELKI SUKCES. Jestem z tego dumna.
Pozdrawiam Bożena
Hej Bożena, cieszę się, że masz taki zapał i pierwsze sukcesy na koncie. Tak trzymać. Zerknęłam na motyw. Nie jest on napisany najlepiej. Dużo rzeczy jest zrobionych niestandardowo, więc nie będzie Ci łatwo. Zakładkę serach usuniesz wchodząc do pliku header.php i usuwając całkiem blok zaczynający się od
do zamykającego go div’a.
Niebieskie okienko do wyszukiwania jest jednocześnie częścią obrazka tła (w katalogu images/header.jpg), więc po usunięciu tego bloku na stronie wciąż będziesz widzieć ramkę z zaokrąglonymi rogami.
Motyw ten niestety nie wspiera tworzenia własnego menu. Czy wiesz jak zrobić, żeby dopisać własne?
Świetny poradnik i świetna autorka, gratuluje talentu i podziwiam chęć niesienia pomocy.
Miło dostawać takie komentarze. Zawsze to dodatkowa motywacja do rozwoju bloga.
Witam ponownie;)
Mam takie pytanko jeszcze:
mam utworzoną stronę główną (to ta z 4 blokami), mam ją wstawioną do index.php, czyli wyświetla się pierwsza, chciałbym jednak zrobić zakładkę w menu, która po kliknięciu będzie przenosić mnie do spisu wszystkich wpisów. Jak poprawnie utworzyć taki odnośnik?
W panelu admin. w Ustawienia->Czytanie możesz przełączyć się na statyczna stronę (zamiast opcji domyślnej „Twoje ostatnie wpisy”) i tam, niżej wybrać stronę (w miejscu Strona z wpisami), z której nastąpi przejście do ostatnich wpisów.
Nie oto mi chodziło.
To znaczy mam zakodowaną strone, dajmy na to w pliku strona.php, i wygląda ona mniejwiecej tak:
TUTAJ KOD HTML KTORY PRZYGOTOWALEM
Jak mam ją wyświetlić w wordpressie?
Ok, już sobie poradziłem:
Wystarczyło utworzyć szablon dla strony, już pokazuję jak się go robi:
Poniżej umieszcza się swój kod strony.
Mam nadzieję, że się komuś przyda;)
//Jeśli kod się nie wyświetli, to proszę o usunięcie tego komentarza lub jego poprawną edycję;)
Przygotowałem nową statyczną stronę w WP, umieściłem w katalogu z motywem, nazwałem w sposób odpowiedni i teraz z tego szablonu nowej strony statycznej chciałem skorzystać. Mimo iż dodałem komentarz w PHP z nazwą szablonu to przy edycji strony nie mam wyboru pomiędzy szablonami. Czy w WordPressie 3.2.1 się coś zmieniło, czy może o czymś zapominam?
Nie, nie zmieniło. Mi się też tak czasami zdarzało, np. kiedy robiłam nowy szablon na kopii innego, który był wcześniej podpięty już do jakiejś strony. Nie koniecznie taka przyczyna może być u Ciebie, ale na pewno coś nie gra.
Może spróbuj zrobić prosty szablon jeszcze raz, upewnij się, że nazwa się nie powtarza i podepnij do zupełnie nowej (nowo utworzonej) strony.
Dziękuję za szybką odpowiedź 🙂
Zrobiłem mały test. Nazwałem plik page-informacje.php i tam umieściłem komentarz:
a następnie stworzyłem nową stronę o tytule Informacje. Dzięki temu wczytując tą stronę WordPress skorzystał z szablonu page-informacje.php zamiast page.php.
Całość więc działa. Pytanie tylko czy na zapleczu przy edytowaniu strony w części „Atrybuty strony” u Ciebie Aga jest oprócz wyboru rodzica i kolejności możliwość wyboru szablonu, z którego będzie korzystać dana strona.
Kurs video z którego się uczę WordPressa podpowiada, że taki element powinien być.
Kamil, chyba wcięło komentarz, który chciałeś wkleić do komentarza.
Jeśli chcesz, żeby w panelu „Atrybuty strony” pojawił się jakiś szablon do wyboru, musisz rozpocząć go od komentarza jak niżej, np:
Wówczas powinieneś zobaczyć we wspomnianym miejscu szablon o nazwie Kamil. Nie ma znaczenia jak nazwiesz potem ten plik.
Właśnie głupieję bo coś takiego dokleiłem na początku szablonu.
A jesteś pewien, że wrzucasz plik we właściwe miejsce docelowe? Odświeżasz stronę w panelu admina po umieszczeniu pliku? Pewnie chodzi o jakiś drobiazg…
Pokazuję jak to robię: http://screenr.com/BAYs 🙂
Kamil, zrobimy test. Wysłałam Ci właśnie na maile pusty plik szablonu, który zawiera jedynie nagłówek. Powinno to wystarczyć, żebyś zobaczył to, czego nie widzisz. Daj znać, jaki jest efekt. U mnie wszystko gra.
Wygląda na to, że to coś poważniejszego. Zrobiłem jak napisałaś. Przeniosłem plik do katalogu z szablonem czyli do /wp-content/themes/nazwaszablonu/ obok plików index.php, page.php, single.php i innych. Wylogowałem się i zalogowałem ponownie. Przy próbie dodawania strony nie pojawia się menu do zmiany szablonu. Testowałem na innej przeglądarce myśląc że to kwestia cache ale też nie pojawia się. 🙁
OK, to przynajmniej mamy pewność, że robiłeś wszystko jak należy.
Masz gdzieś indziej (na innym serwerze) jakiegoś innego WP postawionego, żebyś mógł tam sprawdzić?
A możesz się chwilowo przełączyć na szablon domyślny (np. Twenty Eleven) i sprawdzić, czy tam to działa?
Zainstaluję Twenty Eleven (bo usunąłem pracując na czystym szablonie) i dam znać. Dzięki za sugestię. 🙂
Dla Twenty Eleven powinieneś zobaczyć listę szablonów a w niej dwie pozycje:
Showcasetemplate i Sidebartemplate.
Działa! Dziękuję Ci bardzo 🙂
Testowałem na Twenty Ten. Najwidoczniej w pustym szablonie ktoś się tego elementu pozbył.
Tak swoją drogą, jeśli mogę zapytać to z jakiej metody korzystasz przygotowując stronę w WordPressie? Jakich Blank Theme albo Stalkers Theme używasz?
Fajnie, że się wyjaśniło. Czy dobrze zrozumiałam: w szablonie na którym oparłeś swój motyw był jakiś fragment kodu, który wyłączał całkowicie wyświetlanie się tej części, tak?
Ja piszę wszystko „z palca.” Dostaję projekt graficzny na warstwach, na jego postawie robię stronę statyczną w HTML-u i CSS, a potem, jak już uzyskam zgodność z projektem przekładam to na WP na podobnej zasadzie jak opisałam w tym tutorialu. Nie próbowałam innych metod, nawet nie wiem, że są.
Jadę w tym tygodniu na WordCamp do Poznania, liczę, że tam trochę się nauczę od innych wordpressowców.
Najwidoczniej problem był z szablonem. Napisałem do osoby, która szablon dostarczyła, zobaczymy co odpisze. Jeszcze raz bardzo dziękuję za pomoc 🙂
Ja też do momentu przygotowania HTML i CSS wszystko robię od podstaw. Potem niektórzy korzystają z motywów, które nie zawierają nic w środku, praktycznie żadnych stylów CSS, podstawowe skrypty interpretowane przez WordPressa, które się edytuje, ostylowuje.
Dzięki też za informacje o WordCamp w Poznaniu.
Jeśli chcesz, możesz spróbować samemu poszukać, czy ta część została wyłączona. O tym jak wyłączać poszczególne elementy w panelu admina na poziomie danego motywu, z poziomu functions.php, pisałam w tym artykule. Nie ma tam akurat linijki wyłączającej dokładnie ten element, ale chodzi o ideę, jak to się robi. Może uda Ci się wpaść na trop.
Czy jest jakiś sposób na tymczasowe wyłączenie linka w menu (generowane przez wp_nav_menu), bez jego usuwania z menu? Przypuśćmy, że klient nie ma gotowej strony bloga, ale chce już mieć tą pozycję w menu widoczną.
Marcin, nie znam jakiegoś prostego, intuicyjnego i uniwersalnego rozwiązania, ale do tematu podeszłabym tak:
Sposób 1.
Jeśli pozycje w menu górnym to strony (page) lub wpisy, to menu zostawiamy w spokoju i na poziomie pojedynczej strony lub wpisy decydowałabym, czy już jest gotowa na pokazanie światu, za pomocją statusu „private”. Czyli wchodzimy w edycję strony i oznaczamy ją jako prywatną.
Później, w kodzie odpowiedzialnym za wyświetlenie zawartości sprawdzamy warunek:
i np. nie pokazujemy zawartości strony jeśli jest prywatna.
Wada: jeśli w menu wyświetlamy kategorię to nie zadziała.
Sposób 2.
Z poziomu zarządzaniem menu (Wygląd->Menu) strony które są jeszcze nie gotowe usuwam, jednak, żeby klient mógł je mimo wszystko zobaczyć w menu na swoich miejscach, zastępuję je atrapami korzystając z boksu z lewej strony na tym ekranie pt. „Własne odnośniki” i w miejsce Adresu URL podając znak #, a w miejsce Etykiety nazwę strony, którą chce widzieć klient.
Sposób 3.
Z poziomu zarządzaniem menu (Wygląd->Menu) wcześniej – w opcjach ekranu (na górze) – w części „Pokaż zaawansowane właściwości menu” pole „Opis”, a potem w tych elementach menu, które chcę „ukryć” właśnie w polu Opis daję jakiś umowny znacznik, np. „#”.
Korzystam z własnego walker’a, na zasadzie jak opisany w tym tutorialu i dzięki „dobraniu się” do tego pola na poziomie każdego z elementów menu
mogę zdecydować co z danym odnośnikiem zrobić np. zbudować go tak, aby prowadził donikąd, czyli
Czy której z rozwiązań naprowadziło Cię na rozwiązanie problemu?
P.S. Dzięki za ciekawą prezentację na WordCampie. Jak dla mnie była to jedna z lepszych prezentacji. Było bardzo przejrzyście (co osobiście wysoko cenię) i rzeczowo. Bardzo wartościowy był slajd (i przede wszystkim Twój komentarz do niego) „Kiedy warto” z przykładami (szczególnie tymi wynikłymi z Twojego doświadczenia), kiedy jest sens stosować motywy potomne.
O raju! Ile kodowania aby zmusić WordPress do tak banalnej rzeczy!
A nie prościej w opcjach menu stworzyć własny (custom) link i dać mu pusty URL, a pod nim dodać podstrony?
No racja, WP nie jest doskonały pod każdym względem.
Jasne, że prościej 🙂 Jednak kij ma dwa końce:
1. Link nadal pozostaje klikalny (jest tylko atrapą), a pozostawianie na stronie odnośników prowadzących donikąd nie jest dobrą praktyką.
2. Zależy kto jest odbiorcą strony. Generalnie im bardziej strona jest przystosowana do przeciątnego użytkownika, tym lepiej. Każde dokadanie dodatkowych wskazówek dla usera końcowego, które są niestandardowe to proszenie się o kłopoty. Idealnie jest gdy obsługa strony sprowadza się do standardowych działań.
3. Czasami może zajść potrzeba ograniczenia użytkownikowi roli i uprawnień, przez co dostęp do zarządzania menu będzie dla niego niewidoczny, natomiast możliwość dodawania stron do menu chciałoby się zostawić.
Dzięki za kometarz.
Można też użyć tego pluginu. Dodaje on pole „Point to this URL:” gdzie wpisujemy #
I śmiga jak ta lala:)
Dzięki za wpis i link. WP pozwala już na zrobienie tego samodzielnie z wykorzystaniem pola „Własne odnośniki” na ekranie edycji menu, więc jak kto woli.
O! A w którym konkretnie miejscu to jest? Mam wersję 3.3 angielską. Czym mniej pluginów tym lepiej:)
A ok widzę! Custom Links 🙂
Pozdrawiam
Świetny tutorial! Chciałam się jeszcze zapytać w jaki sposób można zrobić menu oparte na obrazkach?
Nie wiem, czy problem jest jest jeszcze aktualny.
Odpowiem skrótowo, ale jak trzeba będzie, to rozwinę temat. Daj znać, co jest niejasne. Generalnie idea jest ta sama jak opisana wyżej. To znaczy trzeba posłużyć się własnym walkeremi odwołaniem do pola description ($item->description). Wcześniej trzeba nazwę pliku z obrazkiem odpowiadającemu danej pozycji w menu wpisać na poziomie panelu admina właśnie w pole „description” (znajdziesz je w pracy z ekranem menu dla każdej pozycji przeciągniętej do menu).
Witaj Aga. Czy istnieje możliwość aby wpisy były umieszczane na dwóch niezależnych stronach. Motyw który wybrałam nie posiada menu rozwijalnego, a ja bym chciała stworzyć odrębne wpisy dla dla tematów wierszy i wspomnień. Próbowałam stworzyć własne menu aby odpowiednio dodawać wpisy do tych tematów, ale coś mi to nie wychodzi. Czy jeżeli bym chciała aby w menu na górze strony znajdowały się dwie zakładki z odrębnymi wpisami muszę dokonać edycji w szablonie, a jeżeli tak to proszę o Twoje wsparcie jak mam tego dokonać. Wybrany przeze mnie szablon nosi nazwę Aesthete 1.1.4
Pozdrawiam
Bożena, nie wiem, czy o to chodziło, ale może wystarczy założyć dwie kategorie: 1. wiersze i 2. wspomnienia, a potem wpisy przypisywać odpowiednio do jednej lub do drugiej kategorii?
Witam,
ja od dłuższego czasu poszukuje rozwiązania dla custom menu, które umożliwi mi wyświetlenie czegoś takiego:
home
test1 (strona)
-test1.1 (strona)
-test1.2 (kategoria)
-test1.3 (galeria)
test2
test3
-test3.1 (strona)
-test3.2 (strona)
-test3.3 (kategoria)
w header: home | test1 | test2 | test3
w sidebar (dla aktywnego np. test1:
>test1.1 (strona)
>test1.2 (kategoria)
>test1.3 (galeria)
a dla aktywnego test3:
>test3.1 (strona)
>test3.2 (strona)
>test3.3 (kategoria)
Strony są dodawane w stronach i zachowana jest hierarchiczność (zastosowana wtyczka Gecka Submenu). Jak zastosuję wp_list_pages(), to nie wyświetla mi kategorii :|?
Czy jest na to jakiś sposób, by przy pomocy wp_nav_menu(array(’menu’=>’Main Menu’,)); wyświetlić tylko dzieci danego rodzica?
Pozdrawiam
Żeby wyświetlić dzieci danego rodzica, można się pobawić parametrami funkcji get_pages np:
ale to wymaga własnego oprogramowania menu. Nie wiem, czy to co chcesz zrobić, da się jakoś elastycznie uzyskać za pomocą wp_nav_menu. Jak coś mi przyjdzie do głowy, to tu dopiszę.
i Zonk 🙂 ktoś już to dał…
proszę o usunięcie postów, żeby nie mieszać 🙂
pozdrawiam
Witam, a ja mam następujące pytanie. Co trzeba zmienić w tej klasie Walker_Nav_Menu, żeby podzielić zawartość menu rozwijanego na kolumny? I drugie pytanie chciałbym na wysokości całego rozwinięcia dodać zdjęcie i wyrównać je do prawej, jak osiągnąć taki efekt?
Jeśli chodzi o pytanie 1.
Ja bym podeszła do tego następująco: spróbowała najpierw osiągnąć dany efekt w samym HTML/CSSie (jako przykład może posłużyć ta strona: http://www.huffingtonpost.com/, zakładka Culture), a potem dostosować klasę Walker_Nav_Menu do wygenerowania takiego kodu.
Jeśli chodzi o pytanie 2. To nie rozumiem za bardzo o jaki efekt chodzi. Czy możesz podesłać jakąś stronę, gdzie jej podobny efekt?
Dziękuję, za odp. Przykładem takiego rozwiązania może być http://www.starbucks.com.au/Home.php mają jakieś tło po lewej stronie menu rozwijanego, a jak bym chciał w to miejsce wstawić zdjęcie.
oczywiście z każdą zakładką inne 😉
Dziękuję za link. Już teraz wiem, o co chodzi.
1. Trzeba mieć możliwość skojarzenia obrazków z każdą pozycją menu, z która chcemy go skojarzyć.
2. Można w tym celu wykorzystać pole Opis, tak jak opisałam Magdzie w odpowiedzi wcześniej.
Jeśli coś dalej będzie niejasne, pytaj śmiało.
Za dużo komentarzy, ale czy wiesz, że to można zrobić bez żadnych modyfikacji jakiegokolwiek pliku? Wystarczy dodać element do własnego menu z #, a potem jak już zostanie dodany to usunąć # i zapisać. Element przestanie być klikalny 🙂
To jest dla mnie news dnia! W ogóle nie wiedziałam, że zapis
jest poprawnym zapisem w HTML! w3.org pozwala na to: (http://www.w3.org/TR/html40/struct/links.html#adef-href) zakładając, że href będzie uzupełnione np. później przez javascript.
Bardzo dziękuję za ten komentarz! To znacznie upraszcza życie programisty WP.
Czesc. Dopiero ucze się wordpress’a, budujac na nim swoje portfolio fotograficzne. Uzywam themu Expositio i niestety nie moge utworzyc menu z nieklikalnym rodzicem. Nawet po wpisaniu # w pole url moge klikac link i wyswietla mi info o page 404 – jakies pomysly?
Witam
Zastanawiałem się czy można zrobić Waszą metodą, nieklikalną wybiórczą pozycję z menu ?
Powiedzmy mam strona główna| strona 1| strona 2 i chciałbym aby:
strona główna i strona 2 była nieklikalna a strona 1 klikalna.
Tak, sposobem Juliusza (komentarz wyżej) łatwo to osiągniesz.
witam, mam blog na wordpress. Nie rozumiem dlaczego w kategoriach ktore tworze nia da sie umiescic zadnego wpisu, nie da sie ich kliknąć. Jak na zachwalanie super wordpreesa to chyba nie przystanę tragiczny program. Proszę o pomoc.
A jakiego motywu używasz? Czy mogę zobaczyć link do tej strony?
Chyba z dużo zachodu z tym wszystkim zawsze można wstawić do menu link i wstawić jako odnośnik hash # – efekt ten sam 😉 bez roboty!!
PrAli masz całkowitą rację. Dowiedziałam się o tym sposobie od jednego z komentujących wyżej. W wolnej chwili zaktualizuję ten wpis, żeby było czarno na białym, ale nie chcę go całkiem usuwać, bo temat Walkera też jest ciekawy i przydał mi się w różnych innych przypadkach. Dzięki za wpisanie się.
A jak zrobić żeby jeden rodzić był klikalny a drugi rodzic nie?
Herinho, spróbuj sposobem podanym wyżej w komentarzu przez Juliusza.
Eh. A ja się tyle naszukałam w zeszłym tygodniu. A rozwiązanie mojego problemu jest u Ciebie. Chyba zadawałam złe pytanie do google, bo mi Twojego bloga nie wypluł 😛
Ratujesz mi życie 🙂
Super – w końcu ktoś po polsku pisze o 'walkerze’. Odnośnie tego problemu to pamiętam jak powstawiałem href=”#” w linki do nadrzędnych guzików w menu – klientowi to wystarczyło.
A odnośnie tutoriala to rozszerzył bym go o generowanie menu w stopce 'klikalnego dla rodziców’ tylko dla wartości depth=’0′ oraz menu katntekstowego przekazujacego id rodzica i wyswietlającego jego dzieci.
Jeśli te 3 obiekty są oparte o jedno menu to wszystkie sa ze sobą skomunikowane i się bardzo ładnie podkreślają.
Przykład jest na tym wdrożeniu: http://psipolska.pl/
Zagalopowałem się tam tak daleko, że nawet te zajawki na indexsie to tez menu.
Jak chcesz to mogę wysłać kod do tych walkerów.
Pozdrawiam
Grzesiek
Dzięki za komentarz. A wiesz, że nie trzeba praktycznie nic robić, żeby mieć rodzica klikanego? Tego się dowiedziałam z komentarzy, a gdybym wiedziała to wcześniej, artykuł by nie powstał.
I nie jestem jedyną osobą, która pisze o walkerze po polsku. Ola (ta co siedziała obok mnie na WordUpie) też pisała – link w pingbackach.
Menu w stopce to dobra rzecz, dzięki za przykład. Jak będę potrzebować coś więcej, to się zgłoszę 🙂
P.S. Nie sądziłam, że Twój blog jest po angielsku. Podziwiam Cię!
Hmm u mnie zadziałało w ten sposób, że wszystkie elementy pierwszego stopnia są niaktywne, a nie tylko te, które mają „dzieci”
Marcin, ja muszę w końcu w treści artykułu dopisać prosty sposób na to jak osiągnąć ten efekt. Ludzie podali go w komentarzach. Ciągle nie mam kiedy albo zapominam…
Mam bardzo prosty sposób (dla leniwych;) )
Można też tak zrobić, że jako rodzica w menu
wstawić pusty link i dorzucić strony jako „dzieci”
do tego linku.
Strona 1
Link (pole z odnośnikiem puste)
– Strona 1.1
– Strona 1.2
Strona 2
Strona 3
itd.
Masz rację, już chyba 3 osoby wcześniej napisały to w komentarzach. Muszę w końcu napisać to na wstępie artykułu. Jak pisałam ten artykuł nie wiedziałam o tym.
witajcie i wybaczcie pytanie…
ale jak dodac „pusty link” tak aby rodzic byl nieklikalny?
1. W boksie „Własne odnośniki” dajesz w polu Adres URL np. #, w polu etykieta to co chcesz.
2. Klikasz „Dodaj do menu”
3. Usuwasz #
4. Zapisujesz
Piekne dzieki,
Kilka minut temu doczytalem to wsrod komentarzy pod artykulem 😉
Właśnie wstawiłam to na początek artykułu. Twój komentarz mnie do tego zmotywował. Dzięki!
wydaje mi się, że to drugie/prostrze rozwiązanie jest połowiczne (przynajmniej dla mnie).
Zatrzymała mnie przy dodaniu wtyczki qTranslate, gdyż nie widzę możliwości aby dodane wcześniej (nieklikalni rodzice) odnośniki były tłumaczone przy pomocy tejże wtyczki. Może wy macie jakieś sugestie? Zachowując oczywiście nieklikalnych 😉
Łukasz, wtyczkę qTranslate nie jest dobrą wtyczką. Wypróbuj darmową polylang. Lub oczywiście superaśną wtyczkę WPML, która jest płatna.
Dzięki Aga, właśnie testuję wpml, ale utknąłem bo dodaje podwójne /en/en/ przy tłumaczeniu kategorii 🙁
Łukasz, nie jestem w stanie Ci pomóc w szczegółach, ale na pewno WMPL sobie radzi dobrze z kategoriami. To jest super profesjonalna wtyczka. Jak nie dasz rady, to uderz do ich supportu, ani chętnie pomagają.
zwyczajnie w etykiecie przycisku wprowadzasz dla każdego języka kodzikiem np. dla angielskiego angielski itd
<!–:en–> angielski <!–:–>
Dzięki. Będę próbował z tym działać bo ma to znaczenie w przypadku korzystania ze stron na tabletach. Np Ipad nie ma czegoś takiego jak podwójne kliknięcie i często nie można się dostać do kolejnych stron. Szczególnie jak jest sytuacja gdzie menu rozwija się do 3 poziomów.
To się robi tak, że zamienia się zwykłe menu na menu typu dropdown (select options) i wówczas ono ma elegenckie wsparcie na urządzeniach mobilnych.
Poczytaj sobie o tym więcej w necie, np. tu:
http://css-tricks.com/convert-menu-to-dropdown/
Wszystko ładnie pięknie ale mi to menu nie działa na IE i nie wiem jak temu zaradzić… Ktoś miał taki problem?
Zordon, problemy z IE i kompatybilności przeglądarek, to temat na forum CSS.
witam
mam pytanie, a mianowicie menu obrazkowe wyświetla mi sie pionowo a nie poziomo w jednej linii. A zrobiłem wszystko tak ja powinno byc.
Pozdrawiam
Krzysiek, nie wiem, czy to pytanie ma związek z tym artykułem. Napisałam jak prosto wyłączyć „klikalność” rodzica na szarym tle w górnej części artykułu.
Witam. Mam pewien problem ze stroną z którym głowię się już spory czas. Nie dotyczy on tematu wyżej wymienionego lecz widzę, że Pani Aga jest „obcykana” w temacie. mianowicie szablon to tagged. problem tkwi w tym że mam tylko jeden post i chciałbym z niego usunąć datę kiedy został napisany oraz kategorię do jakiej przynależy. Czy mógłbym prosić szanowną Panią Agę o kontakt mailowy aby pomóc mi w tej sprawie?? Byłbym zobowiązany.
Pozdrawiam Sławek
Witam, zrobiłem nieklikalnych rodziców szybkim sposobem i albo to albo aktualizacja wordpressa do najnowszej wersji spowodowało u mnie usunięcie z panelu admina możliwości edycji menu. Po prostu w tej zakładce jest tam pusto! Nie mogę dodać nowych stron do struktury menu. Z menu WP mogę jedynie stworzyć nowe menu. Co się stało i jak temu zaradzić?
Tu jest podgląd:
http://www.sendspace.pl/file/pic/ca5e10e6328a11df933377e
Ja mam może dość nietypowy problem. Od pewnego czasu menu nie pozwala mi dodawać podstron niższego rzędu. Po dodaniu strony jako element niższego rzędu, po zapisaniu zmian, ta strona „przeskakuje” i pojawia się jako element główny Menu czyli głównego rzędu. Proszę o pomoc.
Nie działa mi to… Ten plik css mi nie dziala jak nalezy
Przypominają mi się stare czasy, kiedy siedziało się godzinami nad hakami do misia ( IE 6 ) 😉
Cześć Aga, bardzo pomocy wpis. Chcę nauczyć się dodawać data-toggle do menu w drzewie HTML. Mam nadzieję, że zajarzę!
Mam jeszcze jedną uwagę, spostrzeżenie. Na początku artykułu, w szarej ramce dodałaś informacje „Uwaga!
Po opublikowaniu tego artykułu z komentarzy dowiedziałam się, jak to zrobić szybko i prosto”. Niestety to rozwiązanie „szybko i prosto” nie działa na iPadach. Safari na iPadach nie widzi wtedy „dzieci” i nie uruchamia się/nie rozwija się. Piszę o tym, bo miałam kiedyś z tym trochę zamieszania przy jednej stronie 🙂
$(document).ready(function() {
$(„.menu-item-has-children a”).addClass(„nolink”);
$(„.menu-item-has-children .sub-menu a”).removeClass(„nolink”);
$(„.menu-item-has-children a.nolink”).removeAttr(„href”);
});
Bardzo przydała mi się ta skrócona informacja (w ramce)jak to zrobić….od kilku dni szukałam jakiegoś sposobu, żeby na stronie, którą dopiero tworzę uzyskać taki efekt. Świetnie.
Takie proste do zrobienia, a takie trudne do znalezienia w Google. Ciężko było mi wyszukać czegoś konkretnego w Google, dobrze że trafiłem do Was (nie wiedziałem co wpisać w wyszukiwarce żeby to znaleźć). Dzięki 🙂
Witaj, mam mały problem, wszystko jest ok lecz zależy mi na nieklikalności wybranych elementów jak to ma miejsce na stronie http://www.optimumokna.pl/ bardzo pilnie potrzebuję podpowiedzi jak w wybranych przeze mnie elementach wyłączyć klikalność. Proszę Cię o pomoc.
Nieklikalne menu – przykład. Jednak to nie wordpress.
🙂
witam
Ja mam inny problem z nextgen-gallery prosiłbym o pomoc
Już odinstalowałem i instalowałem ponownie i nic nie dało
Poprostu znikneła mi ikonka w panelu admina do zarządzania galerią wszystkie inne wtyczki są okej a ta jedna znikneła?
chyba nie ten wpis…
Witaj Aga,
masz może pomysł jak usunąć podlinkowane „Obrazek Produktu” do produktów w sklepie. Na stronie edycji samego Produktu jest możliwość tylko dodania/zmiany obrazka i automatycznie jest podlinkowany. W edycji obrazka od strony Mediów nie mam możliwości skasowania URL ponieważ jest nieedytowalny i jakiś URL musi ten obrazek jednak posiadać.
http://www.office365online.pl/produkt/office-365-business-premium/
Pod tym linkiem jest produkt, który chciałabym, żeby pierwszy od góry obrazek na lewo od tytułu był nie klikalny.
Serdecznie Pozdrawiam,
Wspaniałego Nowego Roku 😉
P.S. Fantastyczna strona, mnóstwo ciekawych informacji. Będę tu zaglądać 😉
Już sobie poradziłaś? Bo ten obrazek z linka jest nie klikany
Witam.
A co jeśli próbowałem i namieszałem…. 🙁 próbowałem to zrobić tak jak wyżej ale moje menu chm… rozsypało się. Mimo że mam strony rodzic to podstrony są na tym samym poziomie co strony „rodzic” nie potrafię tego wytłumaczyć , najlepiej zobaczcie sami http://www.budex-pila.com.pl Menu w orginale wyglądało tak : O Nas, Kontakt, Oferta , Wykonane prace. A teraz ….masakra
Super, że zamieściłaś uproszczoną wersję nieklikalnego menu (z oszukanym odnośnikiem)… dla laików, którzy chcą sobie zrobić szybką stronkę idealne rozwiązanie 🙂
Dokładnie to samo chciałem napisać, podziękowania dla Agi i komentującego obeznanego z łatwym obchodzeniem ograniczeń WordPressa.
Świetnie, tego szukałem 😉
Mam tylko ten problem z tą metodą, że nieklikalni są również rodzice bez dzieci (samodzielna pozycja w menu bez submenu). Chyba najlepsze rozwiązanie to gdy nieklikalni są tylko ci rodzice, pod którymi jest submenu.
Wszystko działa świetnie ale są dwa błędy (jeden ważny, drugi to bardziej feature):
1. w tekście do skopiowania jest:
$indent = ( $depth ) ? str_repeat( „t”, $depth )
a powinno być (zgodnie ze screenshot i logiką)
$indent = ( $depth ) ? str_repeat( „\t”, $depth )
2. Gdy część menu ma submenu a część nie to pojawia się problem, bo wszystkie menu najwyższego poziomu stają się nieklikalne, a powinny tylko te, które mają dzieci. Moja modyfikacja, która to rozwiązała:
if ($depth != 0)
na
if ($depth != 0 || !$args->walker->has_children)
pozdrawiam i przepraszam jeśli ktoś już o tym napisał w komentarzach, ale jest ich dosyć dużo i mogłem nie ogarnąć
Po zastosowaniu „skróconej” wersji (na Twenty eleven) kliknięcie na „rodzica” otwiera pustą stronę…
może to zasługa wtyczki Mega Menu?
Dzięki wielkie nieklikalny rodzic tego mi trzeba było.
Zmodyfikowałem tą wersje i zamiast zostawiać puste miejsce WSTAWCIE ZNACZEK # jako LINK RODZICA. Wtedy po najechaniu kursor zamieni się na łapkę nawigacyjną.
Ten artykuł i cała dyskusja przypomina mi tę znaną historię: Kiedyś NASA wydała milion dolarów ma opracowanie długopisu, który będzie pisał w warunkach nieważkości. A ruskie dali swoim kosmonautom ołówki. No więc poniżej podaję wam „ruski” sposób na nieklikalnego rodzica:
Wejdź w Wygląd->Menu
1) W obszarze Własne odnośniki w polu Adres URL wpisz (tymczasowo) cokolwiek, 2) w polu Etykieta wpisz tytuł rodzica.
3) Kliknij Dodaj do menu.
4) Wykasuj zawartość pola Adres URL.
Zapisz menu
he, he, dobre podsumowanie 🙂
Tak jak wspomniałam, stary sposób zostawiłam, bo dla ludzi bardziej zaawansowanych wiedza jak używać class My_Walker extends Walker_Nav_Menu jest mega przydatna do innych zastosowań.
Jak zrobić aby nieklikany rodzic się rozwijał w dół- na telefonie ponieważ zrobiłem całe menu jest wszystko fajnie ale jak klikam w rodzica żeby się rozwinął to automatycznie działa jak zwykłe odświeżenie.. czy da rade jakos temu zaradzić – nie bawiłem się w plikach i wszytsko jest ok ale nei jest responsywne
Najprościej chyba będzie ci zobaczyć jak to zrobili w którymś z domyślnych motywów WordPressa: Twenty Sixteen lub Twenty Fifteen. Możesz nawet skopiować kod, bo one są na licencji GPL.
Zerknij, może pomóc
https://pl.wordpress.org/support/topic/strona-nadrzedna-tylko-rodzicem-dla-stron-nizej-w-hierarchii-bez-tresci/#post-66872
Cześć, dzięki za niezwykle pomocne wpisy!
Chciałabym prosić o pomoc w rozwiązaniu irytującego problemu z menu, dla którego nigdzie w przepastnej otchłani Internetu nie mogę znaleźć żadnych wskazówek.
Dotychczas używałam motywu Mantra, ale chcąc unowocześnić nieco wygląd bloga, przerzuciłam się na zachwalany Enlightenment, i moje menu szlag trafił.
Po pierwsze, pomimo tego że w Wygląd>Menu wszystko jest jak należy, na stronie, gdy kliknę w menu, w elementach submenu powtarza się element menu… W Mantrze tak się nie działo i nie mam pojęcia jak temu zaradzić.
Po drugie, po zmianie motywu moje dotychczas doskonałe menu nagle przestało się rozwijać od trzymania kursora ponad elementem, trzeba za każdym razem klikać.
Mili wordpressoznawcy, czy ktoś byłby w stanie mi coś doradzić, aby to rozwikłać?
Hej Kinga. Czy to jest ten motyw?
https://pl.wordpress.org/themes/enlightenment/
Skąd pobrałaś ten motyw? Patrząc na źródło Twojej strony to używasz właśnie tej wersji (1.1.4). Jak widzisz, to jest bardzo stara wersja i będziesz mieć z nią tylko problemy. Ja ją właśnie zainstalowałam i mi w ogóle nie działa menu rozwijane.
Czym się kierowałaś wybierając ten motyw? Może spróbujemy znaleźć inny, który ma te rzeczy, których potrzebujesz.
Hej, dzięki za odpowiedź! Dopiero teraz ją zauważyłam. Zapisałam się na informowanie o nowych komentarzach, ale dopiero dzisiaj otrzymałam kilka maili naraz, wcześniej nic.
Tak, to ten motyw i cóż, zainstalowałam go po tym jak poczytałam o jego funkcjonalności, ale na datę nie zwróciłam uwagi. Po instalacji spędziłam mnóstwo czasu na dostosowywanie strony, m.in. widgetem custom query. Czy istnieje taki inny motyw, który po instalacji nie zniszczyłby mi tej pracy, a nie zniszczyłby tej pracy, a jedynie uzupełnił braki?
Kinga, a które elementy masz zrobione tym widegtem? Myślę, że na pewno znajdą się jakieś alternatywy.
Wszystkie elementy ze strony głównej. Chciałabym znaleźć taki motyw, który zachowałby te wszystkie ustawienia, nad którymi pracowałam w aktualnym motywie, ale który by mi nie sprawiał żadnych problemów związanych z przedawnieniem aktualizacji. Może mogłabyś mi polecić jakieś rozwiązanie? Byłabym bardzo wdzięczna.
Cześć,
Gugluję i gugluję i spróbuję tutaj spytać. 🙂
Mam problem z menu.
Wszystkie menu na stronie działają za wyjątkiem jednego przypadku. Gdy użytkownik klika w menu strony na której już się znajduje, to do linku dokładana jest jego nazwa użytkownika i ląduje na stronie 404.
Problem niedawno odkryty, zgłaszany przez kilku użytkowników, ale konia z rzędem temu, kto powie czym to jest spowodowane.
Proszę o pomoc w miarę możliwości.
Oczywiście mogę udostępnić więcej danych.
Pozdrawiam
Wyłącz na moment wszystkie wtyczki i zobacz czy problem się powtarza. Jeśli nie, to włączaj po jednej, żeby znaleźć winowajcę. Jeśli to nie wtyczki, to przełącz motyw na inny i też sprawdź. Będziesz bliżej celu.
Tego się właśnie obawiałem. 😉
Dzięki. Powalczę.
Jak nie chcesz tego robić na żywej stronie, to zrób kopię wtyczką Duplicator. To świetna inwestycja (w sensie nauki, bo wtyczka jest darmowa) i w ten sposób będziesz mógł rozwiązywać w bezpieczny sposób inne problemy.
Ooo tego nie znałem. Spróbuję, dzięki.
Bo właśnie wyłączyłem wszystkie wtyczki na żywej stronie i się totalnie wysypała.
Pozdrawiam 🙂
Witaj Agnieszko
Jestem słabo zaawansowany w tym temacie, ale coś niecoś wiem na tyle, że zmieniam stronę mojej żony. Nie znam się na kodach i nie mam do nich dostępu, bo hosting prowadzi firma zewnętrzna.
Ostatnio udało mi się stworzyć wielopoziomowe menu, bardzo złożone. Do każdego elementu podmenu będą wprowadzone zdjęcia, ale na ten moment jest tylko szkielet menu, z podpiętymi tytułami podstron. Szkielet na ten moment wygląda tak:
Rodzic nieklikalny
Dziecko nr 1 z adresem URL
Dziecko nr 2 nie ma URL ani miejsca na ten adres, przy czym to dziecko ma swoje podmenu z czterema elementami, które dzielą się na kolejne elementy.
Problemem jest brak miejsca na adresy URL u Dziecka nr 2 i wszystkich elementów kolejnych podmenu.
Dodam że na tej stronie jest drugi element menu z nieklikalnym rodzicem, do którego podłączone są trzy elementy, w których są miejsca na adresy URL, zatem nie jest to chyba problem braku jakiejś wtyczki.
Jeśli masz jakąś radę będę bardzo wdzięczny
Pozdrawiam
Hej Piotr,
jeśli chcesz mieć zaawansowane menu z obrazkami, to warto spróbować wtyczki typu UberMenu.
Cześć Ola 🙂 ja w nieklikalnym menu wpisuje po prostu javascript:void(0);
Zawsze działa
Witam jak zmienić na urządzeniach mobilnych menu konkretnie standardowo mam „wybierz stronę” i po naciśnięciu rozwija się menu. Potrzebuje żeby przetłumaczył mi na zwykły napis MENU.
Wiem że chodzi o tłumaczenie ale nie wiem gdzie mogę znaleść plik źródłowy. KORZYSTAM Z DIVI na tej stronie jeśli to pomoże.
Zaznaczam że z wordpress dopiero zaczynam przygodę.
DZIĘKUJE ZA EWENTUALNĄ ODPOWIEDŻ.
Dzięki!!!
Jak zrobić aby na jednej podstronie nie wyświetlało się menu?
Ps: Super blog, już kilka razy korzystałem z Twoich porad
Niektóre motywy pozwalają wyłączyć menu na wybranych podstronach. Albo pozwalają zrobić specjalny template bez menu i przypisać go do wskazanej strony (np. Divi). Niektóre motywy mają też szablon, który daje „gołą” stronę, na której budujesz sobie taki a’la landing page. Tak właściwie w różnych miejscach tego trzeba szukać. Sprawdź w edycji stronie przy wyborze szablonu. Jakiego motywu używasz? W niektórych niestety bez ręcznie modyfikacji plików php się nie obejdzie. Nie wiem też do czego to potrzebujesz. Jak do landingu to można też spróbować wtyczką, np. https://pl.wordpress.org/plugins/landing-pages/
Kiedy w menu wordpress Divi tworzę własny odnośnik z ikoną obrazkową i chcę, żeby otwierał się w nowej karcie, to według tutoriala trzeba dodać w Adres URL adres https…, a w Etykiecie
Ale za każdym razem dodaje nie wiem czemu dodatkową pustą linijkę z tym linkiem i niszczy to układ menu. Kiedy usunę z etykiety , dodatkowe puste bezsensowne pole znika, ale nie otwiera w nowej karcie… Da się coś z tym zrobić? Z góry dziękuję za odp. 🙂
A nie ma jakiejś wtyczki?
Dziekuje Agnieszko za opisanie jak przejąć kontrolę nad generowaniem menu , czyli jak ustawić bez odnośnika 🙂
Super i dziekuje
Dziękuję! W moment znalazłem tu to czego szukałem 🙂 WIELKIE dzięki!