Prawa autorskie © 2012 Webfaces blog. Wszelkie prawa zastrzeżone. Motyw Snowblind autor Themes by bavotasan.com.
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.
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
nav-menu-template.php
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.
Budujemy menu w panelu
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.
18-10-2011 at 12:03
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ł!
Ola jest autorem Przycisk Google Plus One – kreatywne zastosowania
18-10-2011 at 17:45
O dzięki Ci Czujna Istoto! Już poprawiłam.
24-10-2011 at 15:40
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ę.
24-10-2011 at 17:30
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.
29-03-2012 at 22:06
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.
31-03-2012 at 12:32
Dziękuję za komentarz. Dzięki niemu dowiedziałam się o istnieniu Twojego bloga, który mnie zaciekawił.
25-10-2011 at 22:52
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
27-10-2011 at 23:35
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;)
28-10-2011 at 19:01
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.
09-11-2011 at 12:27
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.
09-11-2011 at 17:19
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.
09-11-2011 at 18:32
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ę.
10-11-2011 at 19:58
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
09-11-2011 at 12:48
O takie bloki mi chodzi: http://www.bankfotek.pl/image/1115521.jpeg
10-11-2011 at 20:04
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)?
10-11-2011 at 22:33
nie, one są dodane „na sztywno” treść poniżej nich generuje się, ale one są na sztywno tzn. <img src…itd.
11-11-2011 at 11:16
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.
11-11-2011 at 18:05
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
11-11-2011 at 18:06
Sorka, coś się kod nie wkleił dobrze. Tutaj link do niego:
http://pokazywarka.pl/boxy/
11-11-2011 at 18:08
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.
12-11-2011 at 11:09
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:
<?php echo get_cat_icon_lite(get_query_var('cat')); ?>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ł.
12-11-2011 at 17:54
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;)
12-11-2011 at 19:41
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.
11-11-2011 at 1:09
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.
11-11-2011 at 7:28
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.
13-11-2011 at 21:22
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
15-11-2011 at 21:03
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?
16-11-2011 at 1:09
Świetny poradnik i świetna autorka, gratuluje talentu i podziwiam chęć niesienia pomocy.
16-11-2011 at 20:57
Miło dostawać takie komentarze. Zawsze to dodatkowa motywacja do rozwoju bloga.
17-11-2011 at 18:52
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?
18-11-2011 at 17:47
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.
20-11-2011 at 12:24
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?
20-11-2011 at 13:15
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;)
20-11-2011 at 13:16
//Jeśli kod się nie wyświetli, to proszę o usunięcie tego komentarza lub jego poprawną edycję;)
03-12-2011 at 21:13
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?
03-12-2011 at 21:20
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.
03-12-2011 at 21:38
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ć.
04-12-2011 at 20:25
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.
04-12-2011 at 20:32
Właśnie głupieję bo coś takiego dokleiłem na początku szablonu.
04-12-2011 at 20:38
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…
04-12-2011 at 20:54
Pokazuję jak to robię: http://screenr.com/BAYs
04-12-2011 at 21:15
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.
04-12-2011 at 21:23
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ę.
04-12-2011 at 21:25
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ć?
04-12-2011 at 21:30
A możesz się chwilowo przełączyć na szablon domyślny (np. Twenty Eleven) i sprawdzić, czy tam to działa?
04-12-2011 at 21:31
Zainstaluję Twenty Eleven (bo usunąłem pracując na czystym szablonie) i dam znać. Dzięki za sugestię.
04-12-2011 at 21:34
Dla Twenty Eleven powinieneś zobaczyć listę szablonów a w niej dwie pozycje:
Showcasetemplate i Sidebartemplate.
04-12-2011 at 21:36
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?
04-12-2011 at 21:54
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.
04-12-2011 at 23:35
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.
04-12-2011 at 23:48
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.
10-12-2011 at 12:32
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ą.
11-12-2011 at 12:44
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.
27-12-2011 at 20:55
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?
niu tech jest autorem #Cinnamon – #GNOME Shell wyglądający jak GNOME 2, przygotowany przez #Linux Mint, oto screenshot: http://t.co/FCttP8xL
29-12-2011 at 14:08
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.
29-12-2011 at 10:38
Można też użyć tego pluginu. Dodaje on pole „Point to this URL:” gdzie wpisujemy #
I śmiga jak ta lala:)
29-12-2011 at 14:09
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.
29-12-2011 at 19:43
O! A w którym konkretnie miejscu to jest? Mam wersję 3.3 angielską. Czym mniej pluginów tym lepiej:)
29-12-2011 at 19:45
A ok widzę! Custom Links
Pozdrawiam
10-01-2012 at 19:58
Świetny tutorial! Chciałam się jeszcze zapytać w jaki sposób można zrobić menu oparte na obrazkach?
30-01-2012 at 19:42
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).
22-01-2012 at 22:54
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
30-01-2012 at 19:45
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?
25-02-2012 at 22:55
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
26-02-2012 at 14:53
Żeby wyświetlić dzieci danego rodzica, można się pobawić parametrami funkcji get_pages np:
//pobierz wszystkie podstrony bloga, ale bez podstron (parent=0) $pages = get_pages("parent=0&sort_column=menu_order"); //Dla każdej strony poziomu 1 foreach ($pages as $pagg) { //Pobierz podstrony danej strony (2 poziomu) $pagekids = get_pages("child_of=".$pagg->ID."&sort_column=menu_order&parent=".$pagg->ID."&hierarchical=0");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ę.
26-02-2012 at 18:12
i Zonk
ktoś już to dał…
proszę o usunięcie postów, żeby nie mieszać
pozdrawiam
28-03-2012 at 0:07
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?
28-03-2012 at 19:39
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?
29-03-2012 at 11:25
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.
29-03-2012 at 11:25
oczywiście z każdą zakładką inne
31-03-2012 at 12:28
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.
31-03-2012 at 20:06
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
31-03-2012 at 22:02
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.
12-05-2012 at 22:27
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.
13-05-2012 at 9:51
Tak, sposobem Juliusza (komentarz wyżej) łatwo to osiągniesz.