Jak zrobić menu obrazkowe w WordPressie – tutorial

WordPress - menu na obrazkach

Już kilka osób pytało w komentarzach, jak w WordPressie wykonać menu z obrazkami. Zainteresowanie tematem wcale mnie nie dziwi – menu obrazkowe może uatrakcyjnić wygląd i podkreślić indywidualny charakter strony. A pytanie, jak „wbić się” z własnymi grafikami do menu generowanego przez WordPressa, długo stanowiło zagadkę i dla mnie. Do momentu, gdy poznałam klasę Walker, której zastosowanie opisałam w artykule Ujarzmić menu w WordPressie….

W tym tutorialu pokazuję, jak wykorzystać tę klasę do implementacji menu bazującego na obrazkach. Będzie to kolejny artykuł typu „studium przypadku” – wykorzystane w artykule menu pochodzi z „żywej” strony opartej na WordPressie, możliwej do odwiedzenia w sieci.

Jaki będzie efekt końcowy

Poniżej widzimy fragment witryny opartej o WordPress, w której zaimplementowałam menu obrazkowe.

Strona na WordPressie z menu obrazkowym
Witryna na WordPressie z menu obrazkowym – kliknij, żeby przejść do strony

Menu wykonane jest w taki sposób, aby umożliwić dodawanie kolejnych jego elementów z poziomu panelu admina, a przy okazji móc kojarzyć je z wybranym obrazkiem.

Menu z obrazkiami - widok z panelu admina
Widok menu z poziomu panelu admina

Jest to możliwe, począwszy od wersji WordPressa 3.0, gdzie możemy tworzyć menu w sposób dynamiczny. Sami decydujemy, które podstrony mogą do niego trafić i w jakiej kolejności. W omawianym przypadku, naszym celem będzie dać użytkownikowi możliwość przypisania obrazka do każdej pozycji menu właśnie z tego poziomu. W sposób poglądowy pokazano to na obrazku obok.

Dla kogo przeznaczony jest artykuł

Integracja menu obrazkowego z WordPressem nie jest zagadnieniem dla początkujących. Ten artykuł jest dla Ciebie, jeśli:

  • implementowałaś/eś już menu w WordPressie za pomocą funkcji wp_nav_menu
  • wiesz, jak przygotować menu obrazkowe w postaci kodu HTML i CSS
  • znasz podstawy php i potrafisz wykonywać zmiany w kodzie motywów WordPressa

Menu obrazkowe w WordPressie – kroki

Proces integracji menu obrazkowego z motywem WordPressa obejmie wykonanie następujących kroków:

Krok 1: Włączenie obsługi dynamicznego menu w motywie

Do pliku functions.php dodajemy kod:

add_action( 'init', 'register_my_menus' );
function register_my_menus() {
	register_nav_menus(
		array(
			'primary-menu' => __( 'Primary Menu' )
		)
	);
}

Dzięki temu administrator panelu WordPressa będzie mieć możliwość tworzenia menu w oparciu o wybrane strony, wchodząc w Wygląd->Menu.

Krok 2: Założenie menu w panelu administracyjnym WordPressa

Menu obrazkowe w WordPressie - dodanie stron
Dodanie stron do menu

Wchodzimy do panelu administracyjnego, wybieramy Wygląd->Menu i zakładamy menu. Wybieramy strony lub kategorie, które mają wchodzić w jego skład. Zapisujemy.

Krok 3: Dodanie obrazków menu do katalogu z motywem

Umieszczenie grafik na serwerze
Umieszczenie plików obrazkowych na serwerze

Obrazki menu są integralną częścią danego motywu, a nie zawartości witryny, dlatego wystarczy, jeśli umieścimy je na serwerze w katalogu z motywem, np. w podkatalogu images (korzystając z wybranego klienta ftp).

Krok 4: Przypisanie obrazków do każdego z elementów menu

Aktywacja pola Opis w pracy z menu w WordPressie
Aktywacja pola Opis
Powiązanie elementu menu z plikiem obrazka
Skojarzenie z obrazkiem

Teraz skojarzymy każdy z obrazków z odpowiednią pozycją w menu. W tym celu wykorzystamy obszar Opis – pole dostępne dla każdej pozycji w menu WordPressa. Pole to jest domyślnie ukryte. Aby się pokazało należy włączyć jego widoczność, korzystając z opcji ekranu (zobacz rysunek obok, pierwszy z lewej).

Następnie dla każdego elementu menu w pole Opis wpisujemy nazwę pliku obrazkowego, który ma zostać z nim skojarzony. Zobacz obrazek drugi z lewej.

Krok 5: Przygotowanie motywu na odczyt pola Opis

Teraz najciekawsza część zagadnienia. W jaki sposób poinstruować WordPressa, aby podczas generowania menu uzupełnił je o nazwy obrazków, które wpisaliśmy w kroku 4? Innymi słowy, jak wstawić obrazki w postaci znacznika img src do generowanego menu?

W tym celu utworzymy własną klasę Walker_Nav_Menu. O szczegółach wykorzystania tej klasy pisałam w artykule Ujarzmić menu w WordPressie – jak zrobić nieklikanego rodzica. Tym razem skupię się tylko na samym aspekcie jej wykorzystania do osiągnięcia naszego celu – klasa odpowiedzialna za wyświetlanie menu zostanie zmodyfikowana w ten sposób, aby zostały uwzględnione obrazki.

Do pliku functions.php naszego motywu wklejamy poniższy kod (jeśli chcesz wiedzieć dlaczego ten kod wygląda tak a nie inaczej, zajrzyj po szczegóły do wspomnianego wyżej artykułu).

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 );
	}

}

Omówienie najważniejszych fragmentów.
W linii nr 30 znalazł się fragment kodu, który stanowi istotę wykonania menu obrazkowego w WordPressie. Odwołujemy się do pola Opis (description) poprzez zmienną $item->description. Przypominam, że do pola Opis wpisaliśmy w kroku nr 4 nazwę pliku skojarzoną z danym elementem menu.

Musimy utworzyć pełną ścieżkę dostępu do obrazka. W tym celu wykorzystujemy funkcję zwracającej URL miejsca, w którym znajduje się nasz motyw (get_bloginfo(‚template_directory’)), doklejając na końcu katalog images (bo tam wrzuciliśmy nasze grafiku – krok 4).

Krok 6: Wyświetlenie menu

Pozostaje nam wyświetlić menu w wybranym miejscu naszej skórki. W przypadku prezentowanej strony, kod wkleiłam do pliku header.php. Teraz, aby w końcu pokazać nasze menu na stronie, wykorzystamy funkcję wp_nav_menu, koniecznie z parametrem walker, wskazującym na utworzoną w kroku 5 naszą własną wersję klasy Walker_Nav_Menu, czyli My_Walker:


<?php $walker = new My_Walker;
  wp_nav_menu(array('theme_location' => 'primary-menu', 'menu_class' => 'rollover', 'walker' => $walker)); ?>

Uwaga: Powyższy fragment kodu zawiera parametr dodający również klasę rollover. Z pewnością nie będzie on konieczny w Twoim menu. W implementowanym przykładzie klasa ta potrzebna mi była do uzyskania efektu rollover (zmiany koloru obrazka po najechaniu myszą).

Menu na obrazkach – sądzisz, że warto?

A Tobie często się zdarza mieć do czytania z menu obrazkowym? Myślisz, że warto stosować tego rodzaju menu w witrynie? W jaki sposób sobie z tym radzisz w WordPressie? Zapraszam do komentowania.

Inne wpisy o podobnej tematyce:

75 thoughts on “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.

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

  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 🙂

    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

      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.

        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?

          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. 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.

          3. 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ść.

  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

  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 🙂

  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 😉

    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?

      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 😉

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

    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?

      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

        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 🙂

  6. 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 🙂

    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.

  7. 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!

      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.

        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.

          1. Dzięki za zainteresowanie!

            &lt;?php
            add_action( 'init', 'register_my_menus' );
            function register_my_menus() {
            	register_nav_menus(
            		array(
            			'primary-menu' =&gt; __( 'Primary Menu' )
            		)
            	);
            }
            class My_Walker extends Walker_Nav_Menu
            {
            	function start_el(&amp;$output, $item, $depth, $args) {
            		global $wp_query;
            		$indent = ( $depth ) ? str_repeat( &quot;t&quot;, $depth ) : '';
            
            		$class_names = $value = '';
            
            		$classes = empty( $item-&gt;classes ) ? array() : (array) $item-&gt;classes;
            		$classes[] = 'menu-item-' . $item-&gt;ID;
            
            		$class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) );
            		$class_names = ' class=&quot;' . esc_attr( $class_names ) . '&quot;';
            
            		$id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item-&gt;ID, $item, $args );
            		$id = strlen( $id ) ? ' id=&quot;' . esc_attr( $id ) . '&quot;' : '';
            
            		$output .= $indent . '&lt;li' . $id . $value . $class_names .'&gt;';
            
            		$attributes  = ! empty( $item-&gt;attr_title ) ? ' title=&quot;'  . esc_attr( $item-&gt;attr_title ) .'&quot;' : '';
            		$attributes .= ! empty( $item-&gt;target )     ? ' target=&quot;' . esc_attr( $item-&gt;target     ) .'&quot;' : '';
            		$attributes .= ! empty( $item-&gt;xfn )        ? ' rel=&quot;'    . esc_attr( $item-&gt;xfn        ) .'&quot;' : '';
            		$attributes .= ! empty( $item-&gt;url )        ? ' href=&quot;'   . esc_attr( $item-&gt;url        ) .'&quot;' : '';
            
            		$args-&gt;link_before = '&lt;span&gt;';
            		$args-&gt;link_after = '&lt;/span&gt;';
            
            		$item_output .= '&lt;a'. $attributes .'&gt;';
            		$item_output .= $args-&gt;link_before . apply_filters( 'the_title', $item-&gt;title, $item-&gt;ID ) . $args-&gt;link_after;
            		$item_output .= '&lt;img src=&quot;' . get_bloginfo('template_directory') . '/images/' .$item-&gt;description . '&quot; alt=&quot;' . $item-&gt;title . '&quot; /&gt;';
            		$item_output .= '&lt;/a&gt;';
            		$item_output .= $args-&gt;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' =&gt; 'slider',
            			'id' =&gt; 'slider',
            		) );
            		register_sidebar( array (
            			'name' =&gt; 'menu',
            			'id' =&gt; 'menu',
            		) );
            	}
            }
            //////////////////////////////////////////////////////
            // Search form
            function birdsite_search_form( $form ) {
            
            	$search_string = '';
            	if(is_search()){
            		$search_string = get_search_query();
            	}
            
            	$form = '&lt;form method=&quot;get&quot; id=&quot;searchform&quot; action=&quot;' .home_url( '/' ) .'&quot;&gt;
            			&lt;div id=&quot;qsearch&quot;&gt;
            				&lt;input type=&quot;text&quot; name=&quot;s&quot; id=&quot;s&quot; value=&quot;' .$search_string .'&quot; /&gt;
            					&lt;input class=&quot;btn&quot; alt=&quot;' .__('Search', 'birdsite') .'&quot; type=&quot;image&quot; src=&quot;' .get_bloginfo('template_url') .'/images/search.gif&quot; title=&quot;' .__('Search', 'birdsite') .'&quot; id=&quot;searchsubmit&quot; value=&quot;' . __('Search', 'birdsite') .'&quot; /&gt;
            			&lt;/div&gt;
            	    &lt;/form&gt;';
            
                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');
            ?&gt;
          2. A która linia u Ciebie ma nr 26? Bo tutaj w linii nic nie ma i pewnie jest jakieś przesunięcie.

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

          4. 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.

  8. 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

    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.

    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.

    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;}

    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”.

  9. 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?

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

        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.

          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.

  10. 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.

  11. Ś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.

    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.

      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.

          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.

  12. 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?

  13. 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?

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

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

  14. 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….

  15. 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!!!!!!!

  16. 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 🙂

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

Wyrażam zgodę na przetwarzanie przez Webfaces Agnieszka Bury, ul. Rymarska 42/3, 53-206 Wrocław NIP: 9111769381, REGON: 021997379, moich danych osobowych w celu dodania komentarza na blogu webfaces.pl w zgodzie i według zasad określonych w Polityce prywatności.