Jak zrobić menu obrazkowe w WordPressie – tutorial

77 komentarzy do “Jak zrobić menu obrazkowe w WordPressie – tutorial”

1. Moim zdaniem zdecydowanie warto stosować menu obrazkowe (sam mam obrazkowe z połączonymi tekstami). Dzięki menu obrazkowym użytkownicy łatwiej zapamiętują nawigację na stronie. Nie wyobrażam sobie menu tekstowego na takich portalach jak wp czy onet.

   Odpowiedz

   1. Paweł, dzięki za komentarz. Właśnie go wydobyłam ze spamu. Zupełnie nie wiem dlaczego akismet go zakwalifikował jako spam.

      Odpowiedz

2. Czy, aby na pewno na wspomnianej stronie została użyta ta metoda ?
   jak obrazek jest podmieniany gdy strona jest aktywna (current_page_item) lub efekt hover ?
   ogólnie bardzo fajne rozwiązanie 🙂

   Odpowiedz

   1. Czy, aby na pewno na wspomnianej stronie została użyta ta metoda ?

      Na pewno, sama to robiłam 🙂

      jak obrazek jest podmieniany gdy strona jest aktywna (current_page_item) lub efekt hover ?

      Do podmiany obrazków (efekt hover oraz strona bieżąca) użyłam CSS-a i techniki rollover, która opiera się na założeniu, że przygotowujemy podwójny obrazek. Podejrzyj sobie jak wyglądają obrazki w menu, np:
      http://bluepapaya.pl/wp-content/themes/bluepapaya/images/menu-internet.png

      Odpowiedz

      1. Przy założeniu, że każdy obrazek ma tą samą wysokość nie ma z tym problemu.
         fajnie to wyszło 🙂
         na podstronie http://bluepapaya.pl/publikacje-drukowane/ suwak poziomy to specjalny zamysł?

         Robiąc takie menu wrzuciłbym całe menu w 1 plik i zastosował css sprites.
         Zamyka to nam drogę do dodawania kolejnych pozycji w menu, w łatwy sposób przez klienta.

         Odpowiedz

         1. Dzięki za poruszenie tematu css sprites. Nie kojarzyłam tego terminu, wrzuciłam w google i trafiłam na ciekawy artykuł http://css-tricks.com/css-sprites/.

            Twoja technika jest jak najbardziej ok, zależy od potrzeb. W moim przypadku zależało mi dać userowi (adminowi, nie każdemu) możliwość manipulacji menu, właśnie po to, żeby było elastycznie. Np. klienta w pewnym momencie zrezygnuje z jakiejś zakładki, albo będzie chciał zmienić ich kolejność.

            A tym suwakiem poziomym, to chodzi Ci o możliwość przesuwania ekranu za pomocą suwaka?

            Odpowiedz

            1. przy dużym ruchu na stronie każdy kb się liczy
               pełno tego w sieci np. onet http://www.onet.pl/_d/e7b05660b1d19a7b4627012892225859,plachta01.png
               Swoich nie będę pokazywał 🙂

               Odnośnie suwaka to tak, skoro jest strzałka umożliwiająca przewijanie pozycji to suwak mnie razi po oczach. Ogólnie nie lubię go 😉
               Zadałbym tam konkretną szerokość, resztę ukrył. Przewijanie odbywałoby się w obrębie bloku z tą szerokością.
               Nie chce się wdawać tuta w szczegóły techniczne, na pewno wiesz o czym piszę.

            2. nie szczególnie przepadam za onetem 😛
               gazeta wpakowała więcej elementów http://bi.gazeta.pl/i/obrazki/hp2009/sprite.4.16.png

            3. Podobny obrazek łączony widziałam kiedyś na stronie amazona zdaje się. Technikę znam, tylko nie wiedziałam, że to się nazywa „css sprites”. Ale szczerze, to jeszcze jej nie stosowałam do sklejenia wszystkich obrazków tła, co najwyżej jednego menu.

               Jeśli chodzi o suwak, to właściwie masz sporo racji, nawet w którejś wersji beta zrobiłam dokładnie to o czym piszesz, ale niektórzy twierdzą, że suwak daje większą elastyczność i np. szybki powrót w dowolne miejsce przy dużej liczbie obrazków, gdzie klikanie „po jednym” staje się irytujące.

            4. suwak kojarzy mi się tylko z rozpoznanie czy np strona jest dostosowana do rozdzielczości 1024 czy 800px – stare dzieje 🙂

               suwak zastąpiłbym np małymi kropkami (typowe rozwiązania dla slidershow), które dają możliwość przeskoczenia w dowolne miejsce.

               dalsza rozmowa nad wyborem odpowiedniego rozwiązania nie mam chyba większego sensu.
               Ciekawe jaki to ma wpływ na użyteczność.

            5. Cenne uwagi, dziękuję.

3. właśnie wdrażam twoje rozwiązanie i znalazłem mały błąd,
   w kroku 6 przy wyświetlaniu menu parametr walker ma być zmienną czyli zamiast 'walker’ => walker, ma być 'walker’ => $walker

   dzięki za tutka

   Odpowiedz

   1. Racja. Dzięki za czujność. Cieszę się, że tutek się komuś przydał, super.

      Odpowiedz

4. Bardzo interesujący tutorial. Przyznam się, że sama się zastanawiałam nad takim rozwiązaniem, ale wydawało mi się to niemożliwe i się poddałam 🙂

   Odpowiedz

5. No i patrz! A ja się kiedyś zastanawiałem jak by to zrobić 😀 Tylko, że widzę, że są to same obrazki nie tekst z menu + obrazek. Bo już miałem Cie pytać o style. Ok. Super. W tych opcjach menu jest też pole dla klasy CSS – może by tak wykorzystać to pole i nadać każdemu elementowi osobną klase i dorobić mu ten obrazek używając styli?

   Pozdrawiam Serdecznie 😉

   Odpowiedz

   1. Hej Paweł. Dzięki za konstruktywny komentarz. Tak, w podanym przykładzie rzeczywiście są tylko obrazki, a nie obrazki plus tekst (nie będący częścią obrazka), bo tak łatwiej mi było zrobić efekt rollover podmiany po najechaniu myszą. Ale nie ma problemu z wykorzystaniem tekstu w formie czysto tekstowej. Zresztą, jak podejrzysz źródło tego menu to zobaczysz, że tekst jest, ale ukywam go CSS-em.

      Twój pomysł – z wykorzystaniem klas – jest również ciekawy. Ale chyba wówczas obrazki zaszywamy w pliku CSS i ustawiamy jako background, tak?

      Odpowiedz

   2. Właśnie weszłam na Twoją stronę, widzę, że też piszesz o WordPressie. Super!

      Odpowiedz

      1. Tak. Zgadza się 🙂 Pisze co nieco WP 😛
         Z tym menu to właśnie tak to rozważałem, żeby w background umieścić obrazek. Zawsze jest jakaś opcja – nawet teraz przyszło mi do głowy, że można użyć miniaturki wpisu… albo.. Ale ta Twoja opcja jest chyba najprościejsza 🙂

         Pozdrawiam Serdecznie 😉

         Odpowiedz

6. Witam, fajny opis, gratulacje.
   Dodam tylko linka do informacji jak to można jeszcze usprawnić
   http://wordpress.stackexchange.com/questions/33342/how-to-add-a-custom-field-in-the-advanced-menu-properties

   dzięki temu możemy dodać jakie chcemy pole do menu,
   a idąc dalej, możemy dodać link do biblioteki mediów i nam się link do obrazka sam uzupelni 🙂

   Odpowiedz

   1. Dziękuję za konstruktywny komentarz. Lubię takie. Faktycznie za pomocą filtrów można to zrobić nawet jeszcze bardziej elegancko.

      Odpowiedz

7. A jak wygląda kod w html ? bo mam problem z tym menu. Pozdrawiam

   Odpowiedz

   1. Kod html można podejrzeć na stronie z przykładem (jako podgląd źródła HTML) – czy to wystarczy? Czego konkretnie dotyczy Twój problem?

      Odpowiedz

      1. Wczoraj zrobiłem menu wszystko było pięknie ładnie śmigało jak należy. Dzisiaj usunąłem sobie menu z wordpress’a i wyskoczyło takie coś:

         „Warning: Attempt to assign property of non-object in C:Program Files (x86)VertrigoServwwwwordpresswp-contentthemespolanskiaudytfunctions.php on line 34
         Call Stack”

         Stawiam wordpress’a jak widać na virtualu.

         CSS i HTML już mam. Użyłem też tego rollover’a ponieważ mam podobnie skonstruowane menu.

         Czepia się o tą linie:

         $args->link_before = ”;
         $args->link_after = ”;

         I nie wiem o co mu chodzi 🙂 Wczoraj śmigał aż miło a dzisiaj już nie 🙂
         Pozdrawiam

         Odpowiedz

         1. Juz sobie sam odpowiem bo wiem o co chodzi 🙂 sorry za zamieszanie ale dzięki temu tutorialowi wiem jak robić menu obrazkowe w wordpress’ie. Jeszcze raz sorry 🙂

            Odpowiedz

8. Cześć, dzięki za tutorial. Właśnie się biorę za tworzenie menu w oparciu o niego. Mam tylko jeszcze pytanie o klasę rollover, w jaki sposób ją dodać do poszczególnych punktów menu??
   Pozdrawiam 🙂

   Odpowiedz

   1. Cześć, w kodzie do kroku 6 zobaczysz parametr dla wp_nav_menu o nazwie 'menu_class’ ustawiony na 'rollover’, to właśnie to miejsce.

      Odpowiedz
9. Pingback: Menu WordPress #3 – tworzenie rozszerzenia klasy Walker | WPNinja

10. Witam, mam podobny problem do tego, który opisywał Filip: WordPress przyczepia się do tych linijek
    $args->link_before = ”;
    $args->link_after = ”;

    Co może być przyczyną? Pozdrawiam i dzięki za tutka!

    Odpowiedz

    1. Byker, co masz na myśli pisząc „WordPress czepia się?”?

       Odpowiedz

       1. Aga, wyświetla to samo co u Filipa:
          Warning: Attempt to assign property of non-object in C:wampwwwad360wp-contentthemesstronafirmowafunctions.php on line 26
          Call Stack.
          Jak usunę te dwie linijki:
          $args->link_before = ”;
          $args->link_after = ”;
          To błędu nie ma, ale skrypt nie wyświetla menu.

          Odpowiedz

          1. Byker, wklej tu kod, który wstawiłeś do functions.php. Kod wklej między znacznikami [ php ] i [ /php ] – bez spacji przy nawiasach kwadratowych.

             Odpowiedz

             1. Dzięki za zainteresowanie!

                <?php
                add_action( 'init', 'register_my_menus' );
                function register_my_menus() {
                	register_nav_menus(
                		array(
                			'primary-menu' => __( 'Primary Menu' )
                		)
                	);
                }
                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        ) .'"' : '';
                
                		$args->link_before = '<span>';
                		$args->link_after = '</span>';
                
                		$item_output .= '<a'. $attributes .'>';
                		$item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
                		$item_output .= '<img src="' . get_bloginfo('template_directory') . '/images/' .$item->description . '" alt="' . $item->title . '" />';
                		$item_output .= '</a>';
                		$item_output .= $args->after;
                
                		$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
                	}
                
                }
                
                
                function birdsite_widgets_init() {
                
                	if ( function_exists('register_sidebar') ){
                		register_sidebar( array (
                			'name' => 'slider',
                			'id' => 'slider',
                		) );
                		register_sidebar( array (
                			'name' => 'menu',
                			'id' => 'menu',
                		) );
                	}
                }
                //////////////////////////////////////////////////////
                // Search form
                function birdsite_search_form( $form ) {
                
                	$search_string = '';
                	if(is_search()){
                		$search_string = get_search_query();
                	}
                
                	$form = '<form method="get" id="searchform" action="' .home_url( '/' ) .'">
                			<div id="qsearch">
                				<input type="text" name="s" id="s" value="' .$search_string .'" />
                					<input class="btn" alt="' .__('Search', 'birdsite') .'" type="image" src="' .get_bloginfo('template_url') .'/images/search.gif" title="' .__('Search', 'birdsite') .'" id="searchsubmit" value="' . __('Search', 'birdsite') .'" />
                			</div>
                	    </form>';
                
                    return $form;
                }
                //////////////////////////////////////////////////////
                // Setup Theme
                function birdsite_setup() {
                	// This theme styles the visual editor with editor-style.css to match the theme style.
                	add_editor_style();
                	// Set feed
                	add_theme_support( 'automatic-feed-links' );
                }
                //////////////////////////////////////////////////////
                // Action Hook
                add_action( 'widgets_init', 'birdsite_widgets_init' );
                add_action( 'after_setup_theme', 'birdsite_setup' );  
                add_filter( 'get_search_form', 'birdsite_search_form' );
                add_filter('show_admin_bar', '__return_false');
                ?>

             2. A która linia u Ciebie ma nr 26? Bo tutaj w linii nic nie ma i pewnie jest jakieś przesunięcie.

             3. Chodzi o ten fragment:
                $args->link_before = ”;
                $args->link_after = ”;

             4. ok, dzięki to jeszcze daj ten fragment odpowiednik z kroku 6.

             5. A, i jeszcze wklej kod, który dodałeś do header.php, chodzi mi o ten fragment odnośnie kroku 6.

             6. Aga, właśnie sobie poradziłem: W kroku 6 usunąłem parametr theme_location i teraz jest domyślnie ustawiony na none. Jeszcze raz dziękuję za pomoc. Pozdrawiam.

             7. Super, że się udało! Bardzo się cieszę.

11. Witam 😉

    Mam pytanko ponieważ wszystko się udało – pokazują się obrazki ale co mam zrobić aby nie pokazywały mi się treść pomiędzy linkami tzn.
    zamiast: Kontakt

    i teraz aby wywalało mi z tego kodu kontakt 🙂

    Wiem, że pytanie może proste ale dopiero zaczynam w WP

    Odpowiedz

    1. Witam 🙂

       Nie wiem, czy dobrze zrozumiałam pytanie, ale jeśli chcemy coś ukryć przed wyświetlaniem, a mimo wszystko zależy nam, żeby w kodzie HTML dany element pozostał to robimy to za pomocą CSS i np. reguły display: none.

       Odpowiedz

12. może wyjaśnię bardziej szczegółowo :
    powstaję mi po zrobieniu menu coś takiego: http://s4.ifotos.pl/img/Bez-nazwy_xnashxw.jpg 🙂
    Chodzi o to aby odnośnikami były obrazki a nie tekst 🙂

    Może to proste no ale… 🙂

    Odpowiedz

    1. Maniaq, jeśli robiłeś menu wg tego tutka, to reguła CSS którą należy dodać do pliku style.css Twojego motywu to:

       ul.rollover li a span {
           display: none;
       }
       

       A jak zrobiłeś to nieco inaczej, to muszę zobaczyć wygenerowany kod HTML odpowiedzialny za fragment z menu.

       Odpowiedz

    2. Łatwo to zrobić poprzez css: .menu li a {text-indent:-9999999px}
       a pozniej .menu li a img {text-indent:0};

       Jest to jedyna dopuszczalna przez google forma ukrywania tekstu, warunek jest taki, że tekst na obrazku musi być taki sam jak w html, tzn treść jaką za sobą niesie.

       Nie można robić obrazka z tekstem oferta i ikonka, a w html jest „oferta – najnowsze i najlepsze ciągniki siodłowe tylko od firmy xyz z poznania” – a jest to możliwe.

       Ja w ten sposób robie zawsze logo strony. W html wpisuje .. Nazwa firmy..

       Natomiast w CSS: .logo {text-indent:-999999px;display:block;background: url(img.png) no-repeat 0 0 scroll;}

       Odpowiedz

       1. Dzięki za merytoryczne wskazówki. Przyda się.

          Odpowiedz

13. Poszukując kiedyś szablonu dla siebie trafiłem na szablon Montezuma (http://wordpress.bytesforall.com/2012/09/montezuma-new-theme-from-bytesforall/). gdzie to jest fajnie rozwiązane poprzez dodanie odpowiedniej klasy do css z nazwą pozycji menu. Dzięki temu można dodać obrazek z poziomu CSS.

    PS. Mogła byś dorobić opcję powiadomienia o WSZYSTKICH komentarzach do danego wpisu?

    Odpowiedz

    1. SpeX, tak, na klasach też można wiele wyczarować. Z tym że w Twoim przypadku trzeba pewnie z góry założyć jakie obrazki będą wykorzystane i dodać je do pliku css. W rozwiązaniu tutaj opisanych odcinamy użytkownika od css.

       Dzięki za uwagę o opcji powiadamiania o wszystkich komentarzach. W takim razie zainstaluję wtyczkę „Subscribe to Comments Reloaded”.

       Odpowiedz

14. Może to będzie głupie pytanie ale dopiero się uczę projektowania stron i nie mogę sobie poradzić z tą klasą rollover. Byłby ktoś chętny żeby mi z tym pomóc?

    Odpowiedz

    1. To nie jest głupie pytanie. Chodzi Ci o podmianę obrazków po najeździe myszą?

       Odpowiedz

       1. Tak, mam juz gotowe podwójne obrazki i menu z Twojego tutorialu tylko nie potrafię zrobić tak żeby obrazki się podmieniały.

          Odpowiedz

          1. Podejrzy sobie plik CSS tego przykładu:
             http://bluepapaya.pl/wp-content/themes/bluepapaya/style.css

             i zwróć uwagę, że na hover:

             li.current-page-ancestor img,
             li.current-menu-item img,
             .rollover a:hover img {
             margin-top: -57px;
             }

             jest przesunięcie marginesu w górę o liczbę pikseli równą szerokości.

             Najlepiej jakbyś sobie to zrobił gdzieś poza WordPressa, żeby zrozumieć samą ideę, jak to działa w samym CSS.

             Odpowiedz

             1. Dziękuję pięknie, działa 🙂 tzn. działa ale nie w pełni, jeden element wyświetla się poprawnie a reszty nie widać.

             2. Uporałem się z tym problemem. Jeżeli można prosić jeszcze o pomoc, bo coś tak czuję że możesz mi z tym pomóc. Chciałem zrobić pionowe menu, składające się z 7 kółek, lecz jeżeli znalazłoby się tam więcej elementów to pojawiałyby się strzałki do przewijania tych kółek. Z góry dziękuję za pomoc 🙂

             3. Nie robiłam nigdy takiego menu, ale jeśli mogę coś poradzić, to właśnie odradzić. Menu powinno być proste w obsłudze. Jeśli znasz jakąś stronę, gdzie takie menu jest, to wystarczy podejrzeć źródła i zrobić analogicznie.

             4. Może tak, bo to mi potrzebne jest, to nie jest główne menu, może lepiej zrozumiesz jak zobaczysz o co mi chodzi. http://www.grupaverso.com.pl – jest takie „menu” złożone z kółek i to o ten element mi chodziło.

             5. Przepraszam najmocniej że piszę tak jeden komentarz po drugim ale wszedłem na tą stronę – http://bluepapaya.pl/ i żeby jeszcze ułatwić wyobrażenie sobie tego co chcę zrobić: potrzebuję do przesuwania tych kółek takiego samego mechanizmu jak przy przesuwaniu na tej stronie okładek, tylko że w pionie i żeby strzałki pojawiały się tylko jak tych elementów będzie za dużo.

             6. Tak, tak, ja czuję, o co Ci chodzi. Dopisałam odpowiedź do Twojego poprzedniego komentarza.

             7. JohnnyF, efekt takich strzałek w pionie to najłatwiej uzyskać podpinając jakiś gotowy skrypt jquery. Tak na szybko to nie kojarzę jakiegoś gotowca. Spróbuję w wolnej chwili poszukać. A jak znasz jakaś stronkę na której działa dokładnie taki efekt, to w źródle strony można by sprawdzić, jako skrypt za tym siedzi, a potem go zintegrować z WP.

15. Witam. Czy jest jakiś sposób/poradnik lub jakaś gotowa wtyczka żeby zrobić w WordPressie menu z obrazkami nie znając php i reszty? To wygląda świetnie i jest bardzo intuicyjne. Niestety nie znam się na tym, a chciałbym wprowadzić to w swoim świeżo powstałym blogu o biznesie w sieci.

    Odpowiedz

    1. Michał, tak na szybko, przychodzi mi na myśl jednak wtyczka, ale on jest płatna. Nazywa się Uber Menu.

       Odpowiedz

16. Świetny tutorial. Przyda się na przyszłość. Wiele blogów dotyczących wordpress przeglądałem, jednak śmiało mogę napisać, że ten jest przejrzysty, po prostu najlepszy. Jest ładnie opisane jakie funkcje dodać i gdzie. Jedno mnie zastanawia, w czym robisz podświetlenie linijek kodu? Fajnie wygląda ten efekt, bo od razu widać, na co zwrócić uwagę i wyjaśnia człowiekowi momentalnie na zasadzie: „A! To o to biega!”. Swoją drogą uczulam jednocześnie wszystkich piszących powyżej, którzy grzebią w kodzie css głównie na Operę. Ma ona problem z dziedziczeniem w obrębie selektora. Wyjaśniam o co chodzi. Przykładowo prosty tag a. Jeśli damy w css tak a {margin-left:32px;} natomiast w a:hover, a:visited, a:active nie nadamy tego atrybutu, to chrome, firefox, safari, IE 10 czytają sobie ten lewy margines z selektora a, natomiast opera wymaga, aby podać ten margines we wszystkich czterech przypadkach. Dziwne to, ale robiłem ostatnio rozwijane menu na stronie http://outdoor-events.pl i musiałem ustawić marginesy wszędzie, bo w operze nierówno wyświetlało się sub-menu. Pozdrawiam.

    Odpowiedz

    1. Adrian, dzięki za miłe słowa. Może to zabrzmi banalnie, ale takie komentarze zawsze mnie dodatkowo motywują, żeby dobrze przygotowywać artykuły.

       Używam wtyczki SyntaxHighlighter Evolved i żeby podświetlić daną linię wpisuję dodatkowy parametr: highlight=”30″, gdzie 30 to numer lini. Jak zainstalujesz wtyczkę i przejrzysz ekran z parametrami (w ustawieniach), to będziesz wiedział o co chodzi.

       Dzięki za zwrócenie uwagi na zachowanie się Opery. Muszę to sprawdzić, być może też popełniam ten błąd.

       Odpowiedz

       1. Jest też dziwna przypadłość w Opera oraz Internet Explorer 8. Mianowicie dziedziczy sobie current_page_item i current-menu-item wszędzie, pomimo stosowania tych klas w różnych tagach div z różnymi id. Do sprawdzenia na stronie, którą obecnie testuję. Można zobaczyć, że dziedziczy sobie z górnego menu w dolnym menu obie klasy. Nie wiem, jak to obejść. Pozdrawiam.

          Odpowiedz

          1. Adriano, czy Ty czasami nie mylisz efektu uzyskanego przez CSS od tego co generuje WordPress?

             Odpowiedz

             1. Może i mylę. Po prostu do dzisiejszego dnia nie potrafię zrozumieć, dlaczego chrome, safari, firefox potrafią dobrze interpretować css, natomiast opera i internet explorer nie, co powoduje powyżej opisany problem. Jest to koszmarnie irytujące i chętnie się dowiem, jak to obejść, aby korzystając z funcji wp_nav_menu można było generować inną klasę current-menu-item, albo curren_page_item dla menu górnego, dolnego i bocznego. Bo takie akurat mam projekty robione przez grafików i wszędzie musi być w menu zaznaczone, że jest klient na danej stronie (tzw. breadcrumb) ale inaczej jest to rozwiązane graficznie na każdym z menu. 🙂

             2. To ja Ci proponuję zrobić próbę z klasami CSS na statycznym, prostym pliku html z dołączonym CSS-em. Dodaj tam jakaś prostą listę będącą odpowiednikiem menu i ręcznie uzupełnij klasy current w tych miejscach, gdzie wygenerowałby je WordPress. I potem ustaw w CSS reguły tak, żeby był pożądany efekt. Jak już będzie wszystko działać pod różnymi przeglądarkami, to przeniesiesz ten fragment CSS do motywu WP.

17. Mam pytanie odnośnie najnowszych wersji wordpressa. Nie ma już pola „opis” w menu. Czy można skorzystać z innego pola? Bedzie działało?

    Odpowiedz

    1. Ok. Cofam pytanie z serii „blondynka pyta”. Doczytałam i mam to pole ofkors 😉 Dzięki za bloga 😀

       Odpowiedz

18. Fajna sprawa. Czy jest możliwość wymiany jednego elementu w menu na ikonę? Np. Home zmienić na ikonę, a resztę tekstu pozostawić w formie niezmienionej?

    Odpowiedz

    1. Proponuję zainstalować wtyczkę Menu Icons i zmienić np. Home na ikonkę domku a reszta bez zmian.

       Odpowiedz

       1. Dziękuję za podpowiedź. Chętnie skorzystam.

          Natomiast menu do reklamiarnia.pl wykonałem wykorzystując UberMenu i przygotowaną wcześniej grafikę.

          Odpowiedz

19. Cześć – na stronie z przykładem nie ma już przykładu 😉 Czy gdzieś on jeszcze istnieje?

    Odpowiedz

20. Witaj. tutorial bardzo fajny. Tylko że na tę chwilę utknąłem w punkcie kiedy wybieram opcje ekranu. Klikam, ikonka trójkąta się zmienia i nic… instalacja jest świeżutka tak na prawdę. Dodałem dopiero kilka wtyczek authorbox i wooCommerce… sytuacja już drugi raz. wersja instalowana poprzez panel administratora w home.pl….

    Odpowiedz

21. Witam.
    Próbowałem zrobić tak jak w tym materiale i coś sknociłem bo wyskoczył mi taki komunikat
    Parse error: błąd składni, nieoczekiwany koniec pliku w /home/gabkor/domains/zdrowiej.net.pl/public_html/wp-content/themes/virtue/lib/image_functions.php on line 136

    POMOCY!!!!!!!

    Odpowiedz

22. Cześć, dopiero zaczynam z WP i mam pewną wizję – chciałabym zamiast klasycznego poziomego Menu, właśnie Menu z obrazkami/zdjęciami ale sporymi. Chciałabym ich 6, po 3 w jednym rzędzie, nad każdym obrazkiem/zdjęciem tytuł kategorii. Czy osiągnę to właśnie tak jak opisałaś powyżej? Ewentualnie czy mogłabyś mnie ukierunkować jak się za to zabrać? Pozdrawiam 🙂

    Odpowiedz

    1. Hej Monia, są też gotowe wtyczki (albo niektóre motywy wspierają takie menu) np. ta: https://wordpress.org/plugins/menu-image/

       Odpowiedz

23. A znacie jakiś sposób na zastosowanie tej metody przy interpreterze PHP 7.6? Do tej pory korzystałem z wersji 7.6 i, niestety, WP informuje, że: „Declaration of My_Walker::start_el[…] schould be compatibile with Walker_Nav_Menu[…]”.
    „Maskowania” w stylu define( 'WP_DEBUG’, false ); w pliku konfiguracyjnym WP wolałbym nie stosować xD

    Odpowiedz

24. Z jednaj strony by chciało się tak ulepszyć stronę. A z drugiej zawsze każda zmiana i dodanie czegoś coraz bardziej je spowalnia. Trzeba mocno szukać balansowania między tymi rzeczami co jest trudne.

    Odpowiedz