Zastanawiasz nad dodaniem ikon do menu strony? W tym przypadku trafiłeś na dobry temat. Przygotowaliśmy dla Ciebie proste i wygodne rozwiązania, które pomogą aktualizować witrynę i dodać odpowiednie elementy graficzne do menu. Jak zwykle mamy dla Ciebie dwa rozwiązania: ręczne wprowadzenie potrzebnych funkcji do kodu oraz korzystanie z gotowej wtyczki, która rozszerza możliwości CMS. Każdy z tych sposobów ma swoje wady i zalety. Dlatego możesz wybrać ten, który Ci najbardziej odpowiada.

Przejrzymy każdy ze sposobów po kolei.

1. Modyfikacja kodu motywu

Na samym początku warto zaznaczyć, że płatne motywy mogą posiadać funkcję dodania ikon do menu. Dlatego zalecamy zapoznać się z dokumentacją templatki, aby nie dublować kodu. Jeśli jesteś pewien, że Twój motyw nie oferuje takiej funkcji, możesz spróbować go zmodyfikować za pomocą poniższych rekomendacji.

Importować ikony będziemy z serwisu Font Awesome. Tutaj znajduje się ponad 1500 elementów graficznych, które można używać za darmo. A jeśli potrzebujesz jeszcze większego wyboru ikon (ponad 7700 elementów), możesz zamówić roczny plan w wysokości $99.

I tak, przechodzimy do sekcji Wygląd – Menu, aby stworzyć menu. Warto zaznaczyć, że zaproponowany sposób działa tylko z elementami, które stworzone jako Własne odnośniki (rys. 1).

Rysunek 1. Tworzenie menu

Wybieramy element Własne odnośniki, dodajemy adres URL oraz tekst odnośnika. Dalej dodajemy ten element do menu (rys. 2) i przechodzimy na stronę Font Awesome.

Rysunek 2. Dodanie kodu ikony do elementu menu

W naszym przypadku dodaliśmy odnośnik do blogu i będziemy poszukiwać charakterystyczną ikonę. Dla przykładu wybierzemy ten obraz (rys. 3):

Rysunek 3. Dodanie kodu ikony do elementu menu

Aby wstawić powyższą ikonę do menu warto skopiować kod <i class=”fab fa-blogger-b”></i> i wstawić go w pole Etykieta nawigacji, aby nazwa elementu menu była pomiędzy znacznikami <i> </i>, czyli: <i class=”fab fa-blogger-b”>Blog</i>. 

Teraz przechodzimy na stronę i… widzimy, że ikona się nie pojawiła (rys. 4). 🙂

Rysunek 4. Brak ikony w menu

Sprawa polega na tym, że dodaliśmy tylko kod ikony do elementu menu. Jednak nie podłączyliśmy samej czcionki znaków na stronę. Aby to zrobić warto wykonać 1 lub 2 krok (1 krok może nie działać na niektórych motywach):

1. Przejść do pliku php motywu domyślnego. Zrobić to można przez sekcję Wygląd – Edytor motywu i dalej wybrać potrzebny plik (rys. 5). Na końcu warto wstawić poniższy kod:

add_action( 'wp_enqueue_scripts’, 'enqueue_font_awesome’ );

function enqueue_font_awesome() {

       wp_enqueue_style( 'font-awesome’, '//maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css’ );

}

Rysunek 5. Edycja pliku functions.php

1. Przejść do pliku header.php (także przez Wygląd – Edytor motywu). I pomiędzy znacznikami <header></header> wstawić poniższy tekst (rys. 6):

<link rel=”stylesheet” href=”https://use.fontawesome.com/releases/v5.7.1/css/all.css” integrity=”sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr” crossorigin=”anonymous”>

Rysunek 6. Edycja pliku header.php

Teraz możecie sprawdzić każdy z tych sposobów po kolei. W końcu menu musi wyglądać tak:

Rysunek 7. Menu z ikonami

Jak widać, wszystko działa poprawnie. Więc przechodzimy do następnego sposobu.

2. Instalacja wtyczki

Na repozytorium WordPress jest sporo rozwiązań dla dodania ikonek do menu. Ze swojej strony możemy polecić wtyczkę Menu Image. Ona ma ponad 90 tys. aktywnych instalacji i dobrą średnią ocenę. Wtyczka jest darmowa.

Zainstalować wtyczkę można bezpośrednio przez panel administracyjny WordPress: sekcja Wtyczki – Dodaj nową i wpisać słowo kluczowe „Menu Image”. Po instalacji i aktywacji wtyczki pojawi się sekcja Menu Image na panelu (rys. 8).

Rysunek 8. Ustawienie wtyczki Menu Image

Wtyczka posiada minimalną liczbę ustawień dotyczących rozmiarów ikon. W naszym przypadku zostawimy wszystko bez zmian i przejdziemy do menu (rys. 9).

Rysunek 9. Dodanie ikony do elementu menu

Jak widać na rysunku 9, element menu posiada dodatkowe ustawienia. Można załadować ikonę, dodać ikonę, która będzie pojawiać się po najechaniu myszą oraz ustawić położenie dla ikony menu. Załadujemy ten sam obraz z literą B jaką ikonę do menu i ustawimy położenie Przed. Po zapisywaniu zmian strona wygląda następnie:

Rysunek 10. Ikony w menu

Jak widać, obrazek się pojawił. Jednak warto jego rozmiar dostosować do menu. Zrobić to można za pomocą opcji wtyczki.

Podsumowanie

Jeśli planujecie dodać ikony do elementów menu, zrobić to można ręcznie, edytując kod, oraz za pomocą wtyczki. W dzisiejszym artykule pokazaliśmy jak modyfikować menu według tych dwóch sposobów. Jak pisaliśmy wcześniej, każdy z nich mam swojej wady i zalety. Dlatego zachęcamy wybrać ten, który będzie Ci jak najbardziej pasował.

Jeśli masz dodatkowe pytania lub uwagi, prosimy pozostawiać komentarze.

Autor: Janusz Kamiński