Jak osadzić czcionki ikon WordPress w swojej witrynie?

Czym są ikony WordPressa i dlaczego warto ich używać?

Ikony WordPress to zestaw piktogramów, które nie zawierają żadnych cyfr ani liter, ale różnego rodzaju symbole, które reprezentują prawie wszystko. Te piktogramy są bardzo ważne dla każdej strony internetowej, aby mieć responsywny projekt strony internetowej.

Te ikony nie mają dużych rozmiarów plików i możesz je łatwo dodać do swojej witryny. Jeśli chcesz dostosować lub przeprojektować ikony zgodnie ze swoją witryną, możesz to zrobić za pomocą CSS. Możesz je skalować bez żadnych ograniczeń, a ponadto przechowujesz tyle ikon w jednym pliku.

Ikony oparte na obrazach są dość ciężkie w porównaniu z ikonami opartymi na czcionkach i mogą potencjalnie obniżyć wydajność witryny. Dlatego dla lepszej wydajności witryny i optymalizacji ikony czcionek są znacznie lepsze od ikon graficznych i są teraz szeroko stosowane.

Jest jednak kilka innych kwestii związanych z wydajnością, o których powiemy w dalszej części tego postu.

Ale na razie zobaczmy, gdzie możesz mieć ikony WordPress i wiele sposobów ich używania w swojej witrynie WordPress.

Skąd wziąć ikony WordPress LUB czcionki ikon?

W Internecie dostępnych jest tysiące darmowych i płatnych czcionek ikon WordPress. Wystarczy wpisać „ Czcionka ikony WordPress ” w wyszukiwarkach, a w wyniku pojawi się lista witryn z ikonami.

Gdy zainstalujesz WordPress, będziesz mieć zestaw bezpłatnych ikon czcionek WordPress (Dashicons) wraz z nim. Te czcionki ikon WordPress są zwykle używane w obszarach administracyjnych WordPress.

Oprócz tego istnieją inne bezpłatne źródła, z których można łatwo pobrać wiele czcionek ikon. Niektórzy z nich są:

Niektóre ikony WordPress Darmowe źródła

1. Ikona WordPress Czcionka niesamowita
2. Ikony materiałów od Google
3. Czcionka Ico
4. Ikomoon

Ale w tym poście rozważymy ikonę WordPressa Font Awesome , ze względu na jego popularność, dostępną open-source, darmową i wyższą bazę użytkowników. Obecnie zapewnia ponad 2000 darmowych czcionek ikon , a jeśli wybierzesz wersję pro, możesz odkryć jeszcze więcej (16000+ ikon) .

W tym poście dowiesz się, w jaki sposób możesz wykorzystać ikony WordPress do projektowania swojej witryny na różne sposoby. Abyś mógł wybrać najlepszy sposób wykorzystania ikon na swojej stronie internetowej w swojej strefie komfortu.

Jak korzystać z czcionek ikon WordPress w swojej witrynie?

Chociaż istnieją różne metody dodawania czcionek ikon do Twojej witryny. Ale najpierw zaczynamy nasz samouczek od najłatwiejszych metod. Możesz wybrać dla siebie najlepszą i najłatwiejszą metodę.

Dodawanie czcionek ikon WordPress za pomocą wtyczki ikon WordPress

Jednym z najlepszych i najłatwiejszych sposobów dodawania ikon WordPress do witryny jest użycie wtyczki WordPress. Ta metoda jest najlepsza dla początkujących, którzy są w fazie uczenia się projektowania strony internetowej i muszą używać bardzo ograniczonych rodzajów ikon.

Nie musisz wprowadzać zmian w plikach motywów, a będziesz mógł swobodnie używać ikon w dowolnym obszarze swojej witryny. Wszystko, co musisz zrobić, to zainstalować wtyczkę ikony Font Awesome WordPress i gotowe.

Aby zainstalować wtyczkę Font Awesome, zaloguj się do pulpitu WordPress, przejdź do wtyczek > Dodaj nowy i wpisz Font Awesome w pasku wyszukiwania.

Po pojawieniu się wtyczki kliknij przycisk „ zainstaluj ”, a następnie „ Aktywuj ”, jak pokazano na powyższym obrazku. Po pomyślnej instalacji i aktywacji niesamowita wtyczka czcionek zapewni pełne wsparcie dla zainstalowanego motywu i możesz łatwo edytować lub dostosowywać dowolną stronę lub post w witrynie za pomocą prostych skrótów, takich jak:

Po prostu wklej krótki kod w dowolnym miejscu na stronie lub poście i tak wygląda on w backendzie.

Teraz, gdy publikujesz lub przeglądasz post, oto jak będzie wyglądał na interfejsie użytkownika.

Podobnie możesz dodać dowolną liczbę ikon WordPress, które lubisz bezpośrednio, kopiując kod z list bezpłatnych ikon Font awesome.

Dodawanie ikon WordPress Dashicons (domyślne wbudowane ikony WordPress)

WordPress udostępnia również czcionki ikon, które są powszechnie znane jako Dashicons. Te czcionki ikon są domyślnie dostępne, WordPress wykorzystuje je na zapleczu. Aby jednak przenieść go na front, musisz mieć nazwę skryptu, która jest już dostępna w pliku WordPress.

Aby korzystać z Dashicons, możesz dodać fragment kodu do pliku function.php lub użyć wtyczki WordPress o nazwie Code snippets . Jednak zdecydowanie zalecamy, aby nie podejmować ryzyka edytowania pliku function.php, ale zamiast tego korzystać z wtyczki WordPress. Ponieważ nawet drobny błąd może zepsuć motyw i uszkodzić całą witrynę.

Po zainstalowaniu wtyczki możesz odwiedzić stronę z daszykonami WordPress i wybrać ikonę, którą chcesz wyświetlić w swojej witrynie. Kliknij link Kopiuj HTML i wklej ten kod w dowolnym miejscu swojej witryny, w którym chcesz wyświetlić ikonę.

Weźmy ten kod jako przykład i zobaczmy, jak to działa. Otwórz dowolny post, powiedzmy post testowy, w którym wkleiliśmy kod HTML, który skopiowaliśmy wcześniej ze strony ikon kreski.

Teraz, gdy klikniesz przycisk podglądu, zobaczysz ikonę, jak pokazano na poniższym obrazku:

Dodawanie czcionek ikon WordPress za pomocą kreatorów stron WordPress

Większość wtyczek do tworzenia stron WordPress zawiera wbudowane czcionki ikon wordpress. Za jego pomocą możesz łatwo używać ikon na swojej stronie.

Elementor

Jeden z najpopularniejszych i najczęściej używanych kreatorów stron. Dzięki Elementorowi masz wiele opcji dostosowywania, a także zapewnia szeroką gamę czcionek ikon dla Twojej witryny.

Jego funkcja „przeciągnij i upuść” jest tak przydatna, że ​​możesz łatwo przeciągnąć dowolną ikonę z listy i bezpośrednio upuścić ją w żądanych obszarach witryny. Nie ma potrzeby dodawania fragmentów kodu ani wymaganego kodu CSS w celu dostosowania.

Oprócz tego istnieją również inne popularne konstruktory, których możesz użyć, takie jak Oxygen lub Beaver Builder , który ma funkcję wbudowanych ikon.

Ręczne dodawanie czcionek ikon WordPress za pomocą fragmentów kodu

Metoda ręczna nie jest przeznaczona dla początkujących lub tych, którzy nie chcieliby podążać techniczną lub długą ścieżką dodawania czcionek ikon wordpress na swojej stronie internetowej. Ta metoda jest bardzo wydajna dla programistów lub projektantów stron internetowych, ponieważ zapewnia dużą elastyczność i opcje dostosowywania, których nie znajdziesz w żadnych wtyczkach.

Przyjrzyjmy się wszystkim dostępnym metodom manualnym.

1. Osadź kody ikon, które pobierają bibliotekę ikon z ich serwerów Cdn

Jedna z najłatwiejszych ręcznych metod osadzania ikon w witrynie Wordpress. Wszystko, co musisz zrobić, to wejść na stronę Font Awesome i podać swój adres e-mail, aby otrzymać kod do osadzenia.

Sprawdź swoją skrzynkę e-mail, znajdziesz fragment kodu, który został wysłany przez Font awesome. Skopiuj ten kod i przenieś go do pulpitu WordPress > Edytor motywów i wklej go tuż przed tagiem </head> w pliku header.php motywu WordPress.

Cokolwiek osadzisz w kodzie dostarczonym przez font awesome, pobierze on bezpośrednio bibliotekę z serwerów Font Awesome CDN.

Uwaga: Bez wątpienia ta metoda wydaje się bardzo prosta, ale ma również pewne obawy dotyczące kompatybilności z innymi wtyczkami, które mogą powodować pewne problemy.

Tak więc, aby uniknąć tego konfliktu, byłoby lepiej, jeśli poprawnie załadujesz javascript w WordPress. Możesz do tego wykorzystać wbudowaną metodę kolejkowania.

Wszystko, co musisz zrobić, to dodać następujące elementy w pliku function.php swojego motywu lub możesz użyć wtyczki codenippet .

2. Umieszczaj ikony bezpośrednio w swojej witrynie

Ta metoda jest dość długa niż wszystkie wymienione powyżej i wymagała pewnej wiedzy technicznej na temat obsługi plików WordPress.

Dlatego ta metoda jest wysoce zalecana tylko dla twórców stron internetowych lub projektantów stron internetowych, którzy znają wszystkie zagrożenia związane z dostępem i edycją plików. Dzięki tej metodzie będziesz mógł przechowywać ikony Font Awesome bezpośrednio w swojej witrynie.

Wystarczy odwiedzić witrynę Font Awesome i pobrać pakiet ikon, jak pokazano na poniższym obrazku:

Po pobraniu rozpakuj pakiet i połącz swój hosting WordPress przez klienta FTP (File Zilla). Teraz poszukaj katalogu motywów WordPress, utwórz nowy folder i nazwij go, jak chcesz.

Teraz następną rzeczą, którą musisz zrobić, to przesłać zawartość pobranego pakietu ikon Font Awesome do nowego folderu, który utworzyłeś na swoim serwerze hostingowym . Teraz zapisz wprowadzone zmiany i gotowe.

Teraz, aby zakończyć proces, ostatnią rzeczą, którą musisz zrobić, to dodać prosty kod (podany poniżej) do pliku function.php motywu lub zainstalowanej wtyczki fragmentu kodu.

W tym momencie udało Ci się z powodzeniem hostować czcionkę na swojej stronie internetowej.

Ikony WordPress i ich wpływ na wydajność witryny

Chociaż bez względu na metody, o których wspomnieliśmy powyżej, nie ma nic złego ani słusznego, aby je zastosować, aby dodać ikony do swojej witryny. Ale jedynym problemem jest jego wpływ na wydajność Twojej witryny. Dowiedzmy się, jak.

Dlaczego potrzebujesz ich wszystkich, jeśli nie zamierzasz ich wszystkich używać?

Pojawia się pierwsze i główne pytanie, dlaczego musisz ładować je wszystkie, podczas gdy potrzebujesz tylko garstki. Po co marnować swoje zasoby, jeśli nie zamierzasz ich wkrótce wykorzystywać.

Na przykład, jeśli hostujesz ikony w swojej witrynie lub używasz wtyczek do osadzania ikon w swojej witrynie, najpierw załadują całą bibliotekę, a co jeśli musisz użyć tylko 10 lub 15 z nich.

Jest to całkowite marnowanie zasobów i nieefektywna metoda do naśladowania. A co, jeśli możesz łatwo nimi efektywnie zarządzać.

Aby lepiej to zrozumieć, rozważmy przykład:

Załóżmy, że masz na swojej stronie internetowej niesamowitą bibliotekę czcionek, sam rozmiar pliku czcionki wynosi około 388 kb. To może nie wydawać się zbyt duże, ale kiedy wybierzesz lub podniesiesz czcionki, których zamierzasz użyć, możesz znacznie zmniejszyć rozmiar pliku.

Zwiększ wydajność, ładując czcionki z jednego dysku CD

Chociaż nie ma nic złego w ładowaniu czcionek z wielu sieci CDN, jeśli masz możliwość wybrania jednego, po co wybierać różne sieci CDN. Pojedyncza sieć CDN jest znacznie wydajniejsza i szybsza niż w przypadku różnych sieci CDN.

Głównym powodem jest to, że pojedynczy CDN zmniejsza dodatkową liczbę wyszukiwań DNS , a także ma tę zaletę, że korzysta z pojedynczego połączenia HTTP/2 . Ale dodatkowo, Twój pojedynczy CDN musi być potężny i wydajny.

Streszczenie

To wszystko o ikonach WordPress i na końcu tego postu możesz teraz osadzić czcionki ikon WordPress na swojej stronie internetowej. Musisz tylko wybrać najlepszą odpowiednią metodę, która jest wygodna do naśladowania i wykonywania swojej pracy bez żadnych problemów.

Rozważając wydajność strony internetowej, możesz postępować zgodnie z naszymi wskazówkami i zrobić wszystko, co konieczne, aby jak najlepiej ją wykorzystać. Oprócz tego, jeśli zastosujesz inną metodę dodawania ikon WordPress na swojej stronie internetowej, o których nie mogliśmy wspomnieć w tym poście. Daj nam znać w sekcji komentarzy poniżej i podziel się z nami swoimi cennymi punktami.

Często Zadawane Pytania