Jak dodać ikony obrazkowe do menu nawigacyjnych WordPress

Przez lata pomogliśmy tysiącom czytelników dostosować ich witryny WordPress, aby poprawić zarówno doświadczenie użytkownika, jak i atrakcyjność wizualną. Z naszego praktycznego doświadczenia w projektowaniu stron internetowych dowiedzieliśmy się, że dodanie ikon obrazkowych do menu nawigacyjnych WordPress może drastycznie poprawić użyteczność Twojej witryny.

Dzieje się tak, ponieważ ikony obrazkowe mogą dostarczać odwiedzającym intuicyjne wskazówki wizualne, ułatwiając im nawigację po witrynie. W ten sposób interfejs Twojej witryny jest bardziej interaktywny i angażujący, co pomaga zmniejszyć współczynnik odrzuceń.

W tym artykule pokażemy Ci, jak łatwo dodawać ikony obrazkowe do menu nawigacyjnych w WordPress. 

Dlaczego dodawać ikony obrazkowe do menu nawigacyjnych w WordPress?

Zazwyczaj menu nawigacyjne WordPress to zwykłe linki tekstowe. Te linki działają dobrze dla większości stron internetowych, ale nie zawsze wyglądają interesująco lub angażująco. 

Dodając ikony obrazkowe do menu nawigacyjnego, możesz zachęcić odwiedzających do zwrócenia uwagi na menu i eksplorowania większej części Twojej witryny.

Jeśli Twoje menu ma wiele różnych opcji, ikony obrazkowe mogą ułatwić odwiedzającym skanowanie treści i znalezienie tego, czego szukają. Może to być łatwy sposób na zwiększenie liczby wyświetleń stron i zmniejszenie współczynnika odrzuceń w WordPress. 

Możesz nawet użyć ikony obrazu, aby wyróżnić najważniejszy element menu, taki jak link do Kasy w Twoim rynku online. 

Podkreślając wezwanie do działania w menu, możesz często uzyskać więcej rejestracji, sprzedaży, członków i innych konwersji.

Biorąc to pod uwagę, zobaczmy, jak możesz dodać ikony obrazkowe do swojego menu nawigacyjnego WordPress. Po prostu użyj poniższych szybkich linków, aby przejść bezpośrednio do metody, której chcesz użyć:

• Metoda 1: Dodaj ikony obrazkowe do menu nawigacyjnych za pomocą wtyczki (szybko i łatwo)
• Metoda 2: Dodaj ikony do menu WordPress za pomocą kodu (bardziej konfigurowalne)
• Bonus: Dodaj ikony mediów społecznościowych do menu WordPress

Metoda 1: Dodaj ikony obrazkowe do menu nawigacyjnych za pomocą wtyczki (szybko i łatwo)

Najprostszym sposobem dodania ikon do menu WordPress jest użycie Menu Image. Ta wtyczka zawiera ikony dashIcon, które można dodać za pomocą kilku kliknięć.

Jeśli masz skonfigurowaną czcionkę Font Awesome na swojej stronie, możesz łatwo dodać te ikony do swojego menu nawigacyjnego za pomocą Menu Image. Więcej informacji o tym, jak zainstalować Font Awesome, znajdziesz w naszym przewodniku na temat jak łatwo dodać czcionki ikon do motywu WordPress.

Inną opcją jest użycie obrazów lub ikon z biblioteki mediów WordPress.

Pierwszą rzeczą, którą musisz zrobić, to zainstalować i aktywować wtyczkę Menu Image. Więcej szczegółów znajdziesz w naszym przewodniku krok po kroku jak zainstalować wtyczkę WordPress.

Po aktywacji kliknij na Obraz menu w panelu WordPress. Na tym ekranie możesz wybrać, czy chcesz otrzymywać powiadomienia o bezpieczeństwie i funkcjach, czy kliknąć przycisk „Pomiń”.

Spowoduje to przejście 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 obrazkowych.

Jeśli planujesz używać ikon z Font Awesome lub dashicons, Menu Image automatycznie je przeskaluje. Jednak jeśli używasz obrazów z biblioteki mediów, będziesz musiał ręcznie wybrać rozmiar.

Wtyczka obsługuje domyślne rozmiary obrazów WordPress, takie jak miniatury, obrazy i duże. Dodaje również trzy unikalne rozmiary, które domyślnie ustawione są na 24x24, 36x36 i 48x48 pikseli.

Te ustawienia powinny dobrze działać dla większości stron internetowych, ale możesz sprawić, że ikony będą większe lub mniejsze, wpisując różne liczby dla 1., 2. lub 3. rozmiaru obrazu menu.

Podczas dodawania ikon do menu domyślnie zobaczysz pole „obrazek przy najechaniu”. Pozwala to na wyświetlenie innego ikony, gdy odwiedzający najedzie kursorem na tę pozycję menu.

Pamiętaj tylko, że to ustawienie jest dostępne tylko wtedy, gdy używasz własnych obrazów. Nie musisz martwić się o funkcję „obrazek przy najechaniu”, jeśli planujesz używać ikon dashIcons lub Font Awesome.

Wyświetlanie innej ikony może pomóc odwiedzającym zobaczyć, gdzie znajdują się w menu nawigacyjnym. Jest to szczególnie przydatne, jeśli Twoje menu ma wiele różnych elementów. Na przykład, możesz użyć różnych kolorów lub rozmiarów ikon, aby wyróżnić aktualnie zaznaczony element.

Jeśli chcesz tworzyć różne efekty najazdu, upewnij się, że zaznaczyłeś pole „Włącz pole obrazu po najechaniu”.

Po wykonaniu tej czynności kliknij „Zapisz zmiany”, aby zachować ustawienia.

Aby dodać ikony do menu nawigacyjnego, przejdź do strony Wygląd » Menu. Domyślnie WordPress wyświetli główne menu Twojej witryny.

Jeśli chcesz edytować inne menu, po prostu otwórz rozwijaną listę „Wybierz menu do edycji” i wybierz menu z listy. Następnie kliknij „Wybierz”.

Teraz najedź kursorem na pierwszy element menu, do którego chcesz dodać ikonę. Gdy pojawi się opcja „Menu Image”, kliknij ją.

Możesz teraz zdecydować, czy chcesz użyć własnego obrazu, czy wybrać gotową ikonę, taką jak ikona Font Awesome.

Aby użyć gotowej ikony, kliknij przycisk radiowy obok „Ikony”.

Następnie możesz kliknąć, aby wybrać dowolną ikonę dashicon lub Font Awesome.

Jeśli chcesz użyć własnego obrazka, zaznacz przycisk radiowy obok „Obrazek” i kliknij link „Ustaw obrazek”.

Możesz teraz wybrać obraz z biblioteki mediów WordPress lub przesłać nowy plik z komputera.

Jeśli zaznaczyłeś opcję „Włącz obrazek po najechaniu” w ustawieniach wtyczki, będziesz musiał również kliknąć „Ustaw obrazek po najechaniu”.

Teraz wybierz obraz, który ma być wyświetlany, gdy użytkownik najedzie kursorem na tę pozycję menu.

Czasami możesz chcieć zignorować to ustawienie i pokazywać tę samą ikonę bez względu na wszystko. Aby to zrobić, kliknij „Ustaw obrazek przy najechaniu” i wybierz dokładnie ten sam obrazek.

Jeśli nie wybierzesz obrazu, ikona całkowicie zniknie, gdy odwiedzający najedzie na nią kursorem.

Następnie otwórz menu rozwijane Rozmiar obrazu i wybierz rozmiar z listy.

Używanie tego samego rozmiaru dla wszystkich ikon zazwyczaj sprawia, że menu wygląda bardziej uporządkowanie. Jednak czasami warto użyć większej ikony dla najważniejszego elementu.

Na przykład, jeśli utworzyłeś sklep internetowy za pomocą wtyczki takiej jak WooCommerce, możesz użyć większej ikony dla opcji „Checkout”, aby się wyróżniała.

Gdy będziesz zadowolony z ikony, czas przyjrzeć się etykiecie elementu menu. Domyślnie wtyczka wyświetla tytuł etykiety po ikonie.

Aby to zmienić, zaznacz dowolny przycisk radiowy w sekcji „Pozycja tytułu”.

Inną opcją jest całkowite usunięcie etykiety nawigacyjnej i stworzenie menu składającego się tylko z ikon. Jeśli Twoje menu ma wiele elementów, może to sprawić, że będzie wyglądać mniej zagracone.

Należy jednak ukrywać etykiety tylko wtedy, gdy znaczenie każdej ikony jest oczywiste. Jeśli jest niejasne, odwiedzający będą mieli trudności z nawigacją po swoim blogu lub witrynie WordPress.

Aby ukryć etykietę, zaznacz przycisk radiowy obok opcji „Brak”.

Gdy będziesz zadowolony z konfiguracji elementu menu, kliknij „Zapisz zmiany”.

Aby dodać ikonę do innych elementów menu, po prostu postępuj zgodnie z powyższym procesem.

Po zakończeniu nie zapomnij kliknąć przycisku „Zapisz menu”. Teraz, jeśli odwiedzisz swoją stronę WordPress, zobaczysz zaktualizowane menu nawigacyjne na żywo.

Metoda 2: Dodaj ikony do menu WordPress za pomocą kodu (bardziej konfigurowalne)

Możesz również dodawać ikony obrazkowe do swoich menu nawigacyjnych za pomocą CSS.

W ten sposób możesz dokładnie kontrolować, gdzie ikony pojawiają się w Twoich menu. Możesz również użyć dowolnego obrazu jako ikony, więc jest to świetny sposób na dodanie własnej marki.

Zanim zaczniesz, prześlij wszystkie pliki graficzne, których chcesz użyć jako ikon. Mogą to być zdjęcia stockowe, obrazy dostępne bezpłatnie znalezione w Internecie lub niestandardowe grafiki stworzone za pomocą aplikacji takiej jak Canva.

Po dodaniu każdego obrazu do biblioteki multimediów WordPress, upewnij się, że skopiowałeś jego adres URL i wkleiłeś go do edytora tekstu, takiego jak Notatnik. Będziesz potrzebować wszystkich tych linków w następnym kroku.

Aby znaleźć adres URL obrazka, po prostu zaznacz 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 przesłanych w WordPress.

Następnie musisz odwiedzić stronę Wygląd » Menu z panelu administracyjnego WordPress.

Następnie otwórz menu rozwijane „Wybierz menu do edycji” i wybierz menu, do którego chcesz dodać ikony obrazkowe.

Następnie kliknij „Wybierz”.

Następnie musisz włączyć niestandardowe klasy CSS, klikając na „Opcje ekranu”.

W panelu, który się pojawi, zaznacz pole wyboru obok „Klasy CSS”.

Po wykonaniu tej czynności możesz dodać niestandardowe klasy CSS do dowolnego elementu w menu nawigacyjnym. W ten sposób połączysz każdy element menu z obrazkiem w bibliotece mediów WordPress.

Możesz nazwać te klasy czymkolwiek chcesz, ale dobrym pomysłem jest użycie czegoś, co pomoże Ci zidentyfikować element menu.

Aby rozpocząć, po prostu kliknij pierwszy element, do którego chcesz dodać ikonę obrazkową. W polu „Klasy CSS (opcjonalnie)” wpisz nazwę klasy, której chcesz użyć.

Użyjesz 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 elementów menu. Następnie kliknij „Zapisz menu”, aby zachować ustawienia.

Teraz jesteś gotowy, aby dodać ikony obrazkowe do menu nawigacyjnych WordPress za pomocą CSS.

Często samouczki WordPress zalecają dodawanie fragmentów kodu do plików motywu WordPress. Jednak zrobienie tego może spowodować częste błędy WordPress i nie jest przyjazne dla początkujących.

Dlatego polecamy WPCode.

Jest to najlepsza wtyczka do fragmentów kodu WordPress, używana przez ponad 1 milion stron internetowych, która pozwala dodawać niestandardowy kod bez edycji pliku functions.php Twojego motywu.

Pierwszą rzeczą, którą musisz zrobić, to zainstalować i aktywować bezpłatną wtyczkę WPCode. Więcej szczegółów znajdziesz w naszym przewodniku krok po kroku dotyczącym jak zainstalować wtyczkę WordPress.

Po aktywacji przejdź do Fragmenty kodu » Dodaj fragment.

Spowoduje to przejście do strony „Dodaj fragment”, gdzie możesz zobaczyć bibliotekę gotowych fragmentów WPCode. Obejmują one fragmenty, które pozwalają ulepszyć bezpieczeństwo WordPress poprzez wyłączenie XML-RPC, przesyłanie typów plików, których WordPress domyślnie nie obsługuje, i wiele więcej.

Po prostu najedź kursorem myszy na „Dodaj swój niestandardowy kod”, a następnie kliknij „Użyj fragmentu”, gdy się pojawi.

Na początek wpisz tytuł dla niestandardowego fragmentu kodu. Może to być cokolwiek, co pomoże Ci zidentyfikować fragment w panelu WordPress.

Po wykonaniu tej czynności otwórz menu rozwijane „Typ kodu” i wybierz „Fragment kodu CSS”.

W edytorze kodu będziesz musiał dodać kod dla każdej ikony, którą chcesz wyświetlić.

Aby Ci pomóc, stworzyliśmy poniżej przykładowy fragment kodu. Możesz śmiało zmienić „.carticon” na niestandardową klasę CSS, którą utworzyłeś w poprzednim kroku. Będziesz również musiał zastąpić adres URL linkiem do obrazu w swojej bibliotece multimedió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;
}

Będziesz musiał dostosować powyższy fragment dla każdego pojedynczego elementu menu, który utworzyłeś powyżej.

Gdy będziesz zadowolony z kodu, przewiń do sekcji „Wstawianie”. WPCode może dodawać kod do różnych lokalizacji, takich jak po każdym poście, tylko na froncie lub tylko w panelu administracyjnym.

Aby użyć niestandardowego kodu CSS w całym blogu lub witrynie WordPress, kliknij „Automatyczne wstawianie”, jeśli nie jest już zaznaczone.

Następnie otwórz menu rozwijane „Lokalizacja” i wybierz „Nagłówek w całej witrynie”.

Następnie jesteś gotowy, aby przewinąć do góry ekranu i kliknąć przełącznik „Nieaktywny”, aby zmienił się na „Aktywny”.

Na koniec kliknij „Zapisz fragment”, aby niestandardowy CSS stał się aktywny.

Teraz, jeśli odwiedzisz swoją stronę internetową, zobaczysz wszystkie ikony obrazów w swoim menu nawigacyjnym.

W zależności od motywu WordPress, może być konieczne dostosowanie CSS, aby ikony obrazkowe wyświetlały się dokładnie w odpowiednim miejscu. Jeśli tak jest, przejdź do Fragmenty kodu » Fragmenty kodu w panelu administracyjnym WordPress.

Następnie po prostu najedź kursorem na fragment i kliknij link „Edytuj”, gdy się pojawi.

Otwiera to edytor kodu, który jest gotowy do wprowadzenia zmian.

Bonus: Dodaj ikony mediów społecznościowych do menu WordPress

Oprócz ikon menu, możesz również dodać ikony mediów społecznościowych do swojego menu nawigacyjnego WordPress. Zrobienie tego pomoże promować Twoje profile w mediach społecznościowych w atrakcyjny wizualnie sposób, nie zajmując zbyt wiele miejsca na Twojej stronie.

Aby to zrobić, możesz użyć wtyczki Menu Image. Po aktywacji po prostu odwiedź stronę Wygląd » Menu z panelu administracyjnego WordPress i rozwiń zakładkę „Niestandardowe linki” w lewej kolumnie.

Następnie dodaj adres URL swojego identyfikatora w mediach społecznościowych i wpisz nazwę platformy. Następnie kliknij przycisk „Dodaj do menu”.

Po dodaniu profilu mediów społecznościowych jako elementu menu, zostanie on wyświetlony po prawej stronie ekranu.

Tutaj musisz ponownie rozwinąć zakładkę elementów i kliknąć przycisk „Menu Image”.

Spowoduje to otwarcie nowego okna na ekranie, gdzie możesz kliknąć link „Ustaw obrazek”, aby przesłać ikonę mediów społecznościowych z biblioteki mediów.

Jeśli chcesz dodać gotową ikonę, możesz wybrać opcję „Ikona” i dodać swoją ikonę mediów społecznościowych z FontAwesome.

Na koniec kliknij przycisk „Zapisz zmiany”, aby zachować swoje ustawienia.

Pomyślnie dodałeś ikonę mediów społecznościowych do swojego menu nawigacyjnego. Więcej informacji znajdziesz w naszym poradniku jak dodać ikony mediów społecznościowych w menu WordPress.

Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak dodawać ikony obrazkowe do menu nawigacyjnego WordPress. Możesz również zapoznać się z naszym przewodnikiem na temat jak dodać logikę warunkową do menu w WordPress oraz jak stworzyć przyklejone, pływające menu nawigacyjne w WordPress.

Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube po samouczki wideo WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.