Jak dodać ikony do niestandardowych menu WordPress bez wtyczek

Dodawanie ikon do menu nawigacyjnego witryny daje odwiedzającym wizualne wskazówki dotyczące treści, a także dodaje ładny wygląd do witryny.

W tym poście zademonstruję, jak możesz to zrobić bez użycia żadnych wtyczek lub przesyłania jakichkolwiek zdjęć. Zamiast tego dokonasz poprawek w menu nawigacyjnym za pośrednictwem panelu administracyjnego WordPress, a następnie dodasz kod do pliku motywu.

Po zakończeniu będziesz mieć kilka prostych ikon obok każdego elementu w menu nawigacyjnym, a najlepsze jest to, że nie będziesz musiał przesyłać żadnych obrazów ani plików, które mogłyby spowolnić Twoją witrynę. Oto jak będzie wyglądać menu nawigacyjne po zakończeniu:

Użyjemy Font Awesome icon library, które można dodać za pomocą wtyczki, ale nie trzeba, jak można łatwo zadzwonić z pliku funkcji motywu.

Dodawanie Ikon Menu-Przegląd

Są to kroki, które podejmiesz, jeśli zastosujesz się do tego postu:

1. Utwórz motyw potomny motywu twenty fifteen do pracy (możesz pominąć ten krok, jeśli pracujesz z własnym motywem).
2. Aktywuj bibliotekę Font awesome z pliku funkcji motywu.
3. Dodaj klasy CSS do elementów w menu nawigacyjnym za pośrednictwem panelu administracyjnego WordPress.
4. Dodaj trochę stylizacji do arkusza stylów motywu, aby uzyskać układ i czcionki.

Zaczynajmy.

Tworzenie motywu dziecięcego Twenty Fifteen

Jeśli nie masz jeszcze motywu, z którym pracujesz, musisz go utworzyć. Najprostszym sposobem na to jest utworzenie motywu podrzędnego istniejącego motywu, co oznacza, że możesz dodawać własne zmiany bez robienia czegokolwiek do oryginalnego motywu. Mam zamiar utworzyć motyw potomny domyślnego motywu, który jest dwadzieścia piętnaście.

Jeśli dopiero zaczynasz korzystać z motywu podrzędnego, zapoznaj się z naszym obszernym przewodnikiem, który wyjaśnia, jak to zrobić.

Aktywacja Font Awesome

Następnym krokiem jest aktywacja Biblioteki Font Awesome w Twoim motywie. Zanim to zrobisz, rzućmy okiem na Font Awesome:

Font Awesome to biblioteka ikon tworzona przy użyciu czcionki ikon. Oznacza to, że nie używa obrazów tła, jak to było w przeszłości podczas dodawania ikon do witryny. Zamiast tego używa klas CSS, dodając pseudo-element do wszystkiego z klasą ikon. Ten pseudo-element dodaje specjalny znak przed elementem, ze stylem ikony. Kończy się to wyświetlaniem ikony bezpośrednio przed elementem, do którego dodałeś klasę CSS.

Jeśli chcesz dowiedzieć się więcej o tym, jak Font Awesome używa CSS, zapoznaj się ze stroną przykłady na swojej stronie internetowej. Nauczysz się również, jak używać klas do wyświetlania ikon, gdy przebrniemy przez ten samouczek, co jest prawdopodobnie najłatwiejszym sposobem, aby się z tym uporać.

Zacznijmy więc od aktywacji Font Awesome w naszym motywie.

W folderze motywów utwórz nowy plik o nazwie funkcje.php. Jeśli twój motyw ma już plik funkcji, Otwórz go.

Dodaj ten kod do pliku funkcji:

Rzućmy okiem na to, co to robi:

1. Tworzy funkcję o nazwie wmpudev_enqueue_icon_stylesheet().
2. Wewnątrz tej funkcji wykorzystuje wp_register_style() aby zarejestrować arkusz stylów Font Awesome, który jest hostowany poza Twoją witryną. Możesz znaleźć ten link na stronie wprowadzenie czcionki Awesome site.
3. Następnie wykorzystuje wp_enqueue_style() aby sprawdzić styl, który właśnie zarejestrował.
4. Na koniec zaczepia funkcję do wp_enqueue_scripts Hook akcji, który mówi WordPressowi, kiedy uruchomić funkcję.

Zauważ, że na stronie wprowadzenie Font Awesome dostajesz instrukcje, aby wywołać arkusz stylów z < head> sekcji swoich stron internetowych (które byłyby w nagłówek.php Plik z motywem WordPress. To nie jest najlepszy sposób, aby zarejestrować arkusze stylów w WordPress: powyższa metoda jest sposobem, w jaki powinieneś to zrobić.

Teraz zapisz swoje funkcje.php plik.

Dodawanie CSS do elementów Menu

Teraz, gdy mamy zarejestrowaną Font Awesome, możemy użyć klas CSS, które zapewnia, aby dodać ikony do naszych elementów menu.

W adminie WordPress przejdź do Wygląd > Menu aby można było edytować menu nawigacyjne. Jeśli nie utworzyłeś jeszcze menu nawigacyjnego, utwórz je teraz i upewnij się, że zaznaczyłeś pole wyboru na ekranie menu, aby znalazło się ono w gnieździe „Główna nawigacja” w Twoim motywie.

WordPress pozwala dodać klasę CSS do każdego elementu w menu, ale domyślnie nie widzisz pola do tego: musisz go najpierw włączyć:

1. U góry ekranu kliknij kartę Opcje ekranu.
2. Upewnij się, że pole obok pozycji 'klasy CSS’ jest zaznaczone.
3. Zamknij kartę Opcje ekranu.

Teraz możesz dodać klasę do każdego z elementów menu. Zacznij od pozycji menu „Strona główna”. Obok elementu menu kliknij strzałkę w dół, aby wyświetlić więcej opcji związanych z tym elementem menu. W polu’ CSS Classes ’ wpisz następujące:

To dodaje trzy klasy do pozycji menu:

• fa służy do wszystkich elementów z ikoną Font Awesome
• fa-lg ustawia rozmiar ikony na duży
• fa-Strona główna odnosi się do konkretnej ikony, którą chcesz wyświetlić.

Interfejs administratora dla Twojego menu będzie teraz wyglądał następująco:

Teraz zrób to samo dla każdego z elementów menu. Więcej ikon i ich klas znajdziesz na stronie Font Awesome icons.

Korzystam z następujących zajęć:

• Spis treści: fa fa-LG FA-Strona główna (jak wyżej: ikona domu)
• Aktualności: fa fa-lg FA-gazeta-o (ikona gazety)
• Galeria: fa fa-LG FA-kamera-retro (ikona aparatu)
• O firmie: fa fa-LG FA-info-koło (ikona informacji)
• Kontakt: fa fa-lg FA-envelope-o (ikona koperty)

Możesz użyć dowolnej ikony. Tylko upewnij się, że dodajesz fa fa-lg a następnie klasa dla ikony do każdego elementu menu nawigacyjnego w polu „klasy CSS”.

Teraz zapisz swoje menu, klikając Zapisz Menu guzik.

Stylizacja elementów Menu

Teraz spójrz na menu witryny w interfejsie. Oto moje:

Co za bałagan! Czcionki w moim menu zostały zmienione, ikony są nad tekstem, gdy chcę je po lewej stronie, a moje pozycje menu są obok siebie, gdy powinny być jeden nad drugim.

Jeśli pracujesz z własnym motywem, może się okazać, że Twoje menu wygląda lepiej (lub gorzej!) i być może będziesz musiał wprowadzić różne poprawki. Aby rozwiązać problemy na mojej stronie, dodam trochę stylizacji do mojego arkusza stylów.

Zacznijmy od uczynienia pozycji menu jeden nad drugim.

Otwórz arkusz stylów szablonu i dodaj do niego następujące elementy:

Zapewni to, że każdy element menu zajmuje 100% szerokości zawierającego go elementu.

Uwaga: jeśli pracujesz z własnym motywem, być może będziesz musiał kierować różne klasy lub identyfikatory do swojego menu w zależności od tego, jak kodowany jest motyw. Użyj Inspektora sieciowego w przeglądarce, aby zidentyfikować klasy docelowe.

Teraz po odświeżeniu ekranu menu wygląda nieco lepiej:

Elementy menu są teraz we właściwym miejscu, ale ikony powinny znajdować się po lewej stronie każdego elementu menu zamiast nad nim.

Napraw to, dodając następujące elementy do arkusza stylów:

To wykorzystuje :: przed pseudo-element, który Font Awesome dodaje do każdego elementu, do którego przypisujesz jego klasy. W tym przypadku zawartość pseudo-elementu będzie płynąć w lewo, co oznacza, że ikona pojawi się po lewej stronie tekstu menu.

Teraz zapisz arkusz stylów i odśwież ekran. Ikony będą w odpowiednim miejscu:

Ikony są teraz we właściwym miejscu, ale przydałoby się posprzątać. Dodajmy więcej stylizacji marginesu i szerokości. Edytuj deklarację dla pseudo-elementu, który właśnie dodałeś do arkusza stylów, aby brzmiał tak:

Dodaje to margines nad elementem, aby wyrównać go z tekstem, a także nadaje mu stałą szerokość, dzięki czemu będzie spacja między nim a tekstem, ale tekst będzie wyrównany.

Teraz Twoje menu będzie wyglądać tak:

Tak lepiej. Ostatnim krokiem jest dostosowanie czcionki dla tekstu menu.

Dodanie klasy Font Awesome do każdego elementu menu zmieniło czcionkę używaną do tekstu, a także ikony, więc musimy to zmienić z powrotem. Zamierzam dodać stylizację linku w każdej pozycji listy w menu, ponieważ nie wpłynie to na ikony, a użyję czcionki z motywu twenty twelve.

W arkuszu stylów dodaj to:

Celuje to w link w dowolnym punkcie menu, który otrzymał klasy fa i fa-lg, i dostosowuje czcionkę i rozmiar czcionki.

Oto, z czego będzie składał się twój ostateczny arkusz stylów:

Teraz menu wygląda tak, jak powinno:

Teraz moje menu nawigacyjne jest kompletne!

Streszczenie

Dodawanie ikon do witryny jest procesem zupełnie innym niż rok lub dwa temu. Teraz, zamiast przesyłać obrazy i używać stylizacji do umieszczania ich w tle elementów na stronie, możesz dodawać ikony za pomocą biblioteki ikon opartej na czcionkach.

W tym poście nauczyłeś się używać Font Awesome library, aby dodawać ikony do elementów menu, a następnie stylizować je tak, aby wyglądały schludnie, a czcionka tekstu była taka, jaka powinna być. Możesz użyć tej techniki z innymi elementami w swojej witrynie, takimi jak listy, objaśnienia i przyciski, po prostu używając klas CSS dostarczonych przez Font Awesome library.

Tagi:

• kod
• menu