W artykule:
Czy chcesz dodać ikony obrazów do menu nawigacji WordPress? Ostatnio jeden z naszych użytkowników poprosił o łatwy sposób dodawania ikon menu. W tym artykule pokażemy, jak dodać ikony obrazów z menu nawigacji w WordPress.
Dlaczego warto dodawać ikony obrazów z menu nawigacji?
Zazwyczaj menu nawigacji WordPress to zwykłe linki tekstowe. Linki te działają w większości witryn internetowych, jednak możesz sprawić, że menu nawigacyjne będzie wyglądać bardziej interaktywnie, dodając ikony obrazów.
Ikony obrazów mogą być również używane, aby twoje menu było bardziej zauważalne. Na przykład piękna ikona obrazu obok strony kontaktu może wyróżniać się wśród innych linków w menu.
Mając to na uwadze, przyjrzyjmy się, jak łatwo dodawać ikony obrazów z menu nawigacji w WordPress.
Video Tutorial
Jeśli nie chcesz oglądać samouczka wideo, możesz kontynuować czytanie wersji tekstowej poniżej:
Metoda 1: Dodawanie ikon Menu za pomocą wtyczki
Ta metoda jest łatwiejsza i jest zalecana dla początkujących użytkowników, ponieważ nie wymaga kodu.
Pierwszą rzeczą, którą musisz zrobić, to zainstalować i aktywować wtyczkę obrazu Menu. Aby uzyskać więcej informacji, zobacz nasz przewodnik krok po kroku, jak zainstalować wtyczkę WordPress.
Po aktywacji musisz odwiedzić Wygląd ” Menu strona.
Stąd możesz kliknąć dowolny element menu w prawej kolumnie, aby go rozwinąć. W Ustawieniach dla każdego elementu zobaczysz przyciski „obraz Menu” i „obraz po najechaniu kursorem”.
Za pomocą tych przycisków możesz wybrać lub przesłać ikonę obrazu menu, której chcesz użyć. Jeśli chcesz, możesz po prostu przesłać obraz menu i zignorować obraz najechania kursorem.
W menu rozwijanym „Rozmiar obrazu” możesz wybrać rozmiar ikony obrazu. Ten rozmiar dotyczy zarówno obrazu ikony menu, jak i Obrazu po najechaniu kursorem.
Wtyczka zawiera wiele opcji do wyboru. Zalecamy jednak, aby ikony menu były małe, używając rozmiarów 24×24 lub 36×36.
Jeśli chcesz dodać własny rozmiar niestandardowy dla obrazów menu, możesz to zrobić, dodając ten kod w funkcjach szablonu.plik php lub wtyczka specyficzna dla witryny.
add_filter ('menu_image_default_sizes', function ($sizes){
// Usuń domyślny rozmiar 36x36
unset ($rozmiary['menu-36x36']);
// Dodaj nowy rozmiar
$rozmiary ['menu-50x50'] = array (50,50);
// return $sizes (required)
return $ sizes;
});
Możesz także ustawić pozycję tytułu powyżej, poniżej, przed lub za ikoną obrazu. Pozwala również ukryć tytuł i wyświetlić tylko ikonę obrazu dla każdego menu nawigacyjnego.
Po skonfigurowaniu ustawień po prostu dodaj ikony obrazów do wszystkich pozycji menu nawigacyjnego osobno. Następnie kliknij przycisk „Zapisz Menu”, aby zobaczyć ikony menu w akcji.
Metoda 2: Dodawanie Ikon Menu Za Pomocą Fragmentu Kodu
Ta metoda jest przeznaczona dla bardziej doświadczonych użytkowników, którzy znają się na CSS.
Po pierwsze, musisz odwiedzić Media ” Dodaj Nowy aby przesłać wszystkie ikony obrazów w WordPress. Po przesłaniu musisz skopiować ich adresy URL i wkleić je w edytorze tekstu, takim jak Notatnik.
Następnie musisz przejść do Wygląd ” Menu i kliknij przycisk „Opcje ekranu” w prawym górnym rogu ekranu. W opcjach ekranu musisz zaznaczyć opcję „klasy CSS”.
Następnie przewiń w dół i kliknij dowolny element menu, aby rozwinąć jego ustawienia. Zauważysz pole ” klasy CSS (opcjonalne)”, w którym musisz dodać nazwę klasy CSS dla elementu menu.
Teraz musisz dodać ten niestandardowy CSS do swojego motywu.
.homeicon {
background-image: url ("http://www.example.com/wp-content/uploads/2018/09/home.png');
background-repeat: no-repeat;
background-position: left;
padding-left: 5px;
}
W tym fragmencie CSS,.homeicon to nazwa klasy, którą dodałeś w polu CSS Classes powyżej.
W zależności od motywu może być konieczne dostosowanie CSS, aby uzyskać idealne miejsce dla ikon menu. Gdy jesteś zadowolony z wyniku, powtórz proces dla wszystkich pozycji menu.
To wszystko. Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak dodawać ikony obrazów z menu nawigacji w WordPress. Możesz również zapoznać się z naszym przewodnikiem, jak stylizować menu nawigacji WordPress.
Jeśli podoba Ci się ten artykuł, zasubskrybuj nasz kanał YouTube dla samouczków wideo WordPress. Znajdziesz nas również na Twitterze i Facebooku.
