Czy chcesz dodać ikony obrazów do swoich menu nawigacyjnych WordPress?
Obrazy mogą pomóc odwiedzającym zrozumieć nawigację Twojej witryny na pierwszy rzut oka. Możesz nawet użyć ikon, aby podkreślić najważniejszą zawartość menu lub wezwanie do działania.
W tym artykule pokażemy Ci, jak dodać ikony obrazów do menu nawigacyjnych w WordPressie.
Dlaczego warto dodać ikony obrazu z menu nawigacyjnym w WordPressie?
Zazwyczaj menu nawigacyjne WordPress to zwykłe linki tekstowe. Te linki działają dla większości stron internetowych, ale nie zawsze wyglądają ciekawie lub angażująco.
Dodając ikony obrazów do menu nawigacyjnego, możesz zachęcić odwiedzających do zwrócenia uwagi na menu i zbadania więcej swojej witryny.
Jeśli twoje menu ma wiele różnych opcji, to ikony obrazów mogą ułatwić odwiedzającym skanowanie zawartości i znalezienie tego, czego szukają. Może to być łatwy sposób na zwiększenie liczby odsłon i zmniejszenie współczynnika odbicia w WordPressie.
Możesz nawet użyć ikony obrazu, aby podkreślić najważniejszy element menu, taki jak link Checkout na swoim rynku internetowym.
Podświetlając wezwanie do działania w pasku menu, często możesz uzyskać więcej rejestracji, sprzedaży, członków i innych konwersji.
Mając to na uwadze, zobaczmy, jak możesz dodać ikony obrazów do swojego menu nawigacyjnego WordPress. Po prostu użyj szybkich linków poniżej, aby przejść bezpośrednio do metody, której chcesz użyć.
Metoda 1: Dodaj ikony obrazu do menu nawigacyjnego za pomocą wtyczki (szybko i łatwo)
Najprostszym sposobem dodania ikon obrazu do menu WordPress jest użycie wtyczki Menu
Image.
Ta wtyczka pochodzi z ikonami dashicon, które możesz dodać za pomocą kilku kliknięć.
Jeśli dodałeś ikony Font Awesome do swojej witryny, to możesz ich użyć za pomocą tej darmowej wtyczki. Aby uzyskać więcej informacji o tym, jak skonfigurować Font Awesome, zobacz nasz przewodnik o tym, jak łatwo dodać czcionki ikon do swojego motywu WordPress.
Jeśli chcesz użyć własnych plików ikon, to Menu Image pozwala również wybrać obraz lub ikonę z biblioteki mediów WordPress.
Pierwszą rzeczą, którą musisz zrobić, to zainstalować i aktywować wtyczkę Menu Image. Aby uzyskać więcej szczegółów, zobacz nasz przewodnik krok po kroku, jak zainstalować wtyczkę WordPress.
Po aktywacji, kliknij na Menu Image w pulpicie nawigacyjnym WordPress. Na tym ekranie możesz wybrać, czy chcesz otrzymywać powiadomienia o zabezpieczeniach i funkcjach lub kliknąć przycisk „Pomiń”.
Spowoduje to przeniesienie Cię do ekranu, na którym możesz skonfigurować ustawienia wtyczki. Na początek zobaczysz wszystkie różne rozmiary, których możesz użyć dla ikon obrazu.
Jeśli planujesz użyć ikon z Font Awesome lub dashicons, to Menu Image zmieni ich rozmiar automatycznie. Jeśli jednak używasz obrazów z biblioteki mediów, wtedy będziesz musiał ręcznie wybrać rozmiar.
Wtyczka obsługuje domyślne rozmiary obrazów WordPress, takie jak miniaturka, obraz i duży. Dodaje również trzy unikalne rozmiary, które są domyślnie ustawione na 24×24, 36×36 i 48×48 pikseli.
Te ustawienia powinny działać dobrze dla większości stron internetowych, ale możesz sprawić, że ikony będą większe lub mniejsze, wpisując różne numery dla 1, 2 lub 3 rozmiaru obrazu menu.
Kiedy dodajesz ikony do swojego menu, domyślnie zobaczysz pole „image on hover”. Pozwala to na pokazanie innej ikony, gdy odwiedzający najedzie na daną pozycję menu.
Pamiętaj, że to ustawienie jest dostępne tylko wtedy, gdy używasz własnych obrazów.. Nie musisz się martwić o funkcję „image on hover”, jeśli planujesz używać dashicons lub ikon Font Awesome.
Pokazywanie innej ikony może pomóc odwiedzającym zobaczyć, gdzie są w menu nawigacyjnym. Jest to szczególnie przydatne, jeśli menu ma wiele różnych elementów. Na przykład możesz użyć różnych kolorów lub rozmiarów ikon, aby podkreślić aktualnie wybrany element menu.
Jeśli chcesz wypróbować różne efekty hover, to upewnij się, że zaznaczyłeś „Włącz obraz na polu hover”.
Mając to zrobione, kliknij 'Zapisz zmiany’, aby zapisać swoje ustawienia.
Aby dodać ikony do menu nawigacyjnego, udaj się do Wygląd ” Menu. Domyślnie, WordPress pokaże podstawowe menu Twojej witryny.
Jeśli chcesz edytować inne menu, to po prostu otwórz rozwijane 'Wybierz menu do edycji’ i wybierz menu z listy. Po tym, kliknij na 'Wybierz’.
Teraz znajdź pierwszą pozycję menu, w której chcesz dodać ikonę i daj jej kliknięcie. Następnie po prostu wybierz nowy przycisk 'Dodaj obraz / ikonę’.
Możesz teraz zdecydować, czy chcesz użyć własnego obrazu, czy wybrać ikonę.
Aby użyć gotowej ikony, kliknij przycisk radiowy obok „Ikony”. Następnie możesz kliknąć, aby wybrać dowolną ikonę dashicon lub Font Awesome.
Czy chcesz zamiast tego użyć własnych obrazów?
Następnie wybierz przycisk radiowy obok 'Obrazu’ i kliknij link 'Ustaw obraz’.
Możesz teraz wybrać obraz z biblioteki mediów WordPress lub przesłać nowy plik z komputera.
Jeśli zaznaczyłeś „Włącz pole obrazu na hover” w ustawieniach wtyczki, to będziesz musiał również kliknąć „Ustaw obraz na hover”.
Teraz wybierz obraz, aby pokazać, gdy użytkownik unosi się nad tym elementem menu.
Czasami możesz chcieć zignorować to ustawienie i pokazać tę samą ikonę bez względu na wszystko. Aby to zrobić, kliknij 'Ustaw obraz na hover’, a następnie wybierz dokładnie ten sam obraz.
Jeśli tego nie zrobisz, to ikona zniknie, gdy odwiedzający ją najedzie na nią.
Po tym, otwórz rozwijaną opcję Image Size i wybierz rozmiar z listy. Używanie tego samego rozmiaru dla wszystkich ikon ma tendencję do sprawiania, że menu wygląda na bardziej zorganizowane.
Możesz jednak sprawić, że najważniejsza ikona menu będzie większa. Na przykład, jeśli stworzyłeś sklep internetowy przy użyciu wtyczki takiej jak WooCommerce, możesz użyć większej ikony dla 'Checkout’, aby się wyróżniała.
Kiedy jesteś zadowolony z ikony, nadszedł czas, aby spojrzeć na etykietę pozycji menu.
Domyślnie wtyczka pokazuje etykietę tytułu po ikonie.
Aby to zmienić, wybierz dowolny z przycisków radiowych w sekcji „Pozycja tytułu”.
Inną opcją jest całkowite usunięcie etykiety nawigacyjnej, tworząc menu tylko z ikonami. Może to zapobiec sytuacji, w której menu z dużą ilością pozycji będzie wyglądało na zagracone.
Jednakże, powinieneś ukrywać etykiety tylko wtedy, gdy jest oczywiste, co każda ikona oznacza. Jeśli jest to niejasne, to odwiedzający będą zmagać się z nawigacją po Twoim blogu WordPress lub stronie internetowej.
Aby przejść do przodu i ukryć etykietę, wybierz przycisk radiowy obok „Brak”.
Kiedy jesteś zadowolony z tego, jak ustawiona jest pozycja menu, kliknij 'Zapisz zmiany’.
Aby dodać ikonę do innych pozycji menu, po prostu wykonaj ten sam proces opisany powyżej.
Kiedy skończysz, nie zapomnij kliknąć na przycisk 'Zapisz menu’. Teraz, jeśli odwiedzisz swoją stronę, zobaczysz aktualizacjęd menu nawigacyjnego na żywo.
Możesz także dodać ikony obrazów do swoich menu nawigacyjnych za pomocą niestandardowego CSS. Daje to większą elastyczność, aby kontrolować dokładnie, gdzie ikony pojawiają się w twoich menu.
Jednak wymaga to dodania niestandardowego kodu w WordPressie, więc jest zalecane dla bardziej średnio zaawansowanych lub zaawansowanych użytkowników WordPressa.
Zanim zaczniesz, przejdź do przodu i prześlij wszystkie swoje pliki obrazów do biblioteki mediów WordPress. Dla każdego obrazu upewnij się, że skopiujesz jego adres URL i wkleisz go do edytora tekstu, takiego jak Notatnik. Będziesz musiał użyć linków w swoim kodzie, więc może to zaoszczędzić sporo czasu.
Aby znaleźć adres URL obrazu, po prostu wybierz go w bibliotece mediów WordPress, a następnie spójrz na pole „Adres URL pliku”.
Aby uzyskać bardziej szczegółowe instrukcje, zapoznaj się z naszym przewodnikiem, jak uzyskać adres URL obrazów, które przesyłasz w WordPress.
Po wykonaniu tych czynności przejdź do Wygląd ” Menu.
Następnie otwórz rozwijane „Wybierz menu do edycji” i wybierz menu, w którym chcesz dodać ikony obrazów.
Po tym, przejdź dalej i kliknij „Wybierz”.
Następnie musisz włączyć niestandardowe klasy CSS, klikając na 'Opcje ekranu’.
W panelu, który się pojawi, zaznacz pole obok 'CSS Classes’.
Mając to zrobione, możesz dodać niestandardowe klasy CSS do każdego elementu w menu nawigacyjnym. W ten sposób połączysz każdy element menu z obrazem w bibliotece mediów WordPress.
Możesz nazwać te klasy jakkolwiek chcesz, ale dobrym pomysłem jest użycie czegoś, co pomoże zidentyfikować pozycję menu.
Aby rozpocząć, po prostu kliknij pierwszy element, do którego chcesz dodać ikonę obrazu. W polu „Klasy CSS (opcjonalnie)” wpisz nazwę klasy, której chcesz użyć.
Będziesz używał tych niestandardowych klas CSS w następnym kroku, więc zanotuj je w notatniku lub podobnej aplikacji.
Po prostu wykonaj ten sam proces, aby dodać osobną klasę do wszystkich pozycji menu. Po tym, kliknij na „Zapisz menu”, aby zapisać swoje ustawienia.
Uwaga: Każda ikona będzie powiązana z własną klasą CSS, więc pamiętaj, aby oznaczyć elementy menu inaczej, jeśli chcesz użyć oddzielnych ikon.
Teraz jesteś gotowy, aby dodać ikony obrazów do swoich menu nawigacyjnych WordPress za pomocą CSS.
Często samouczki WordPressa powiedzą ci, abyś dodał snippety kodu do plików motywu WordPressa. Jednak robienie tego może powodować typowe błędy WordPressa i nie jest zbyt przyjazne dla początkujących.
Dlatego właśnie polecamy WPCode.
WPCode to najpopularniejsza wtyczka code snippets używana przez ponad 1 milion stron internetowych WordPress. Pozwala na dodanie niestandardowego kodu bez edycji pliku functions.php twojego motywu.
Pierwszą rzeczą, którą musisz zrobić, to zainstalować i aktywować darmową wtyczkę WPCode. Aby uzyskać więcej szczegółów, zobacz nasz przewodnik krok po kroku, jak zainstalować wtyczkę WordPress.
Po aktywacji, przejdź do Code Snippets ” Add Snippet.
Tutaj wystarczy najechać myszką na 'Add Your Custom Code’.
Kiedy się pojawi, kliknij na 'Use snippet’.
Aby rozpocząć, wpisz tytuł dla niestandardowego fragmentu kodu. Może to być cokolwiek, co pomoże Ci zidentyfikować snippet w desce rozdzielczej WordPress.
Mając to zrobione, otwórz rozwijane 'Typ kodu’ i wybierz 'CSS Snippet’.
W edytorze kodu będziesz musiał dodać trochę kodu dla każdej ikony, którą chcesz pokazać.
Aby ci pomóc, stworzyliśmy przykładowy snippet poniżej. Możesz przejść doreklama i zmień ’.carticon’ na niestandardową klasę CSS, którą stworzyłeś w poprzednim kroku. Będziesz musiał również zastąpić adres URL linkiem do obrazu w swojej bibliotece mediów WordPress:
.carticon { background-image: url(’http://localhost:10013/wp-content/my-media/cartcheckout.png’); background-repeat: no-repeat; background-position: left; padding-left: 5px; }
Uwaga: Będziesz musiał zachować kropkę „.” przed klasą CSS w snippecie kodu. To właśnie mówi WordPressowi, że jest to klasa, a nie inny rodzaj selektora CSS.
Będziesz musiał dostosować powyższy snippet dla każdego elementu menu, który stworzyłeś powyżej. Możesz po prostu wkleić je wszystkie do pola „Podgląd kodu”.
Kiedy jesteś zadowolony ze swojego kodu, przewiń do sekcji 'Insertion’. WPCode może dodać kod do różnych miejsc, takich jak po każdym poście, tylko frontend lub tylko admin.
Chcesz użyć niestandardowego kodu CSS w całej naszej witrynie WordPress, więc kliknij 'Auto Insert’, jeśli nie jest jeszcze wybrany.
Następnie otwórz menu rozwijane 'Location’ i wybierz 'Site Wide Header’.
Po tym, jesteś gotowy, aby przewinąć do góry ekranu i kliknij na przełącznik 'Inactive’, aby zmienił się na 'Active’.
Na koniec kliknij na 'Save Snippet’, aby niestandardowy CSS stał się żywy.
Teraz, jeśli odwiedzisz swoją stronę, zobaczysz wszystkie ikony obrazów w menu nawigacyjnym.
W zależności od motywu, możesz potrzebować zmienić CSS tak, aby wyświetlał ikony obrazów w dokładnie tym samym miejscu. Jeśli tak jest, to udaj się do Code Snippets ” Code Snippets w desce rozdzielczej WordPress.
Następnie, po prostu najedź na snippet i kliknij na link „Edytuj”, gdy się pojawi.
To otwiera edytor kodu, gotowy do wprowadzenia zmian.
Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak dodać ikony obrazów do menu nawigacyjnego WordPress. Możesz również przejść przez nasz przewodnik po najlepszych drag-and-drop WordPress page builders i jak zarabiać pieniądze online blogując z WordPress.
Jeśli podobał Ci się ten artykuł, to zasubskrybuj nasz kanał YouTube dla tutoriali wideo WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.
