W tym artykule pomocy WordPress przeprowadzę Cię krok po kroku przez proces dodawania niestandardowych czcionek do motywów blokowych WordPress. Oznacza to, że możesz dodać DOWOLNE czcionki do DOWOLNEGO motywu, na przykład dodać czcionki Google do motywu Twenty Twenty Three.
Pokażę Ci, jak wykonać to zadanie za pomocą wtyczki Create Block Theme opracowanej bezpośrednio przez zespół programistów WordPress. Dzięki temu wtyczka jest wyjątkowo lekka, wydajna i bardzo łatwa w użyciu z motywami blokowymi.
Dzięki tej metodzie możesz umieścić link do czcionek (tj. link do czcionek Google) lub osadzić czcionki lokalnie w swojej witrynie (dla lepszej wydajności witryny). Wejdźmy w to!
Wideo: dodawanie niestandardowych czcionek do WordPress
1. Zainstaluj wtyczkę „Utwórz motyw blokowy”.
Na początek zaloguj się do obszaru administracyjnego WordPress, który przeniesie Cię do pulpitu nawigacyjnego. Stamtąd przejdź do Wtyczki> Dodaj nowy z głównej nawigacji (czerwona strzałka na powyższym obrazku).
Wyszukaj wtyczkę „Create Block Theme” za pomocą paska wyszukiwania w prawym górnym rogu (zaznaczonego na zielono na powyższym zdjęciu). Po wyświetleniu wtyczki Utwórz motyw blokowy kliknij przycisk „Zainstaluj teraz”, aby zainstalować ją na swojej stronie (czerwona strzałka).
Następnie kliknij przycisk „Aktywuj”, aby aktywować wtyczkę.
2. Wyłącz wtyczkę zabezpieczającą (tymczasowo)
Aby reszta tego procesu przebiegła bezproblemowo, musisz tymczasowo wyłączyć wszelkie zainstalowane wtyczki bezpieczeństwa, które blokują użytkownikom możliwość edytowania motywów lub wtyczek.
W moim konkretnym przypadku używam wtyczki SG Security (która jest dostarczana ze wszystkimi witrynami WordPress hostowane przez Siteground – host, który bardzo polecam). Wiem na pewno, że ta wtyczka zakłóca proces dodawania niestandardowych czcionek, więc wyłączę przeszkadzające ustawienie.
W takim przypadku przejdę do sekcji „Site Security” wtyczki SG Security za pomocą głównej nawigacji (czerwona strzałka na powyższym obrazku).
Następnie przewinę w dół do opcji oznaczonej „Wyłącz edytor motywów i wtyczek” (zaznaczonej na zielono na powyższym obrazku). Zobaczysz przełącznik po prawej stronie tej opcji – kliknij przełącznik, aby wyłączyć tę funkcję (czerwona strzałka). Powinieneś zobaczyć komunikat „Sukces” w prawej niebieskiej strzałce).
Gdy nasza wtyczka bezpieczeństwa jest tymczasowo wyłączona, możemy przejść do następnego kroku wyboru i załadowania czcionek, których chcemy używać w naszej witrynie.
Istnieją dwie opcje używania niestandardowych czcionek w WordPress.
3. Wybierz niestandardowe czcionki dla WordPress (połączone czcionki Google)
Pierwsza opcja to link do czcionek w witrynie innej firmy, Google Fonts. Ta opcja jest prostsza i zajmuje mniej czasu, ale spowalnia ładowanie strony internetowej. Ogranicza to również do czcionek dostępnych w Google Fonts (chociaż Google oferuje mnóstwo świetnych, darmowych czcionek). Jeśli jesteś mniej obeznany z technologią i nie masz nic przeciwko korzystaniu z czcionek Google, polecam tę opcję.
Na początek przejdź do „Wygląd> Zarządzaj czcionkami motywu” z głównego menu nawigacji (czerwona strzałka na powyższym obrazku).
W obszarze roboczym „Zarządzaj czcionkami motywu” zobaczysz wszystkie domyślne czcionki aktualnie zainstalowane w WordPress (zaznaczone na zielono na powyższym obrazku). Twoje czcionki są również wymienione po prawej stronie obszaru roboczego wraz z różnymi odmianami każdej czcionki i rozmiarem pliku dla każdej odmiany czcionki (zaznaczone na niebiesko).
Aby dodać nową czcionkę do motywu, kliknij przycisk „Dodaj czcionkę Google” (czerwona strzałka).
Kliknij listę rozwijaną „Wybierz czcionkę” i wyszukaj czcionkę Google, którą chcesz dodać do swojej witryny (czcionki są uporządkowane alfabetycznie). Jeśli nie masz pewności, jak wygląda każda czcionka, polecam przeglądanie witryny Google Fonts aby poznać czcionki i przetestować je. Po znalezieniu czcionki, której chcesz użyć, wybierz ją z listy rozwijanej (niebieska strzałka).
Zobaczysz teraz listę wszystkich dostępnych wariantów, które możesz zainstalować w swoim motywie dla tej czcionki. Możesz zaznaczyć pole obok poszczególnych wariantów lub kliknąć górne pole wyboru (czerwona strzałka na powyższym obrazku), aby wybrać wszystkie warianty. Po prawej stronie ekranu zobaczysz listę wybranych wariantów wraz z ich rozmiarem pliku. Gdy wszystko będzie gotowe, kliknij „Dodaj czcionki Google do swojego motywu” (zielona strzałka).
Powinieneś teraz zobaczyć komunikat u góry obszaru roboczego, że czcionka została zainstalowana w twoim motywie (w tym przypadku w motywie Twenty-Twenty Three). Następnie możesz kliknąć link „Zarządzaj czcionkami” w oknie komunikatu o powodzeniu lub kliknąć małą strzałkę wstecz (czerwona strzałka na powyższym obrazku), aby powrócić do obszaru roboczego „Zarządzaj czcionkami motywu”.
Zobaczysz teraz swoją nowo zainstalowaną rodzinę czcionek wymienioną wraz z resztą czcionek motywu (czerwona strzałka na powyższym obrazku). Zobaczysz także swoją rodzinę czcionek i wszystkie powiązane z nią odmiany czcionek po prawej stronie obszaru roboczego (podświetlone na zielono).
4. Osadź niestandardowe czcionki dla WordPress (czcionki lokalne dla lepszego SEO)
Drugą opcją dodawania czcionek do witryny WordPress jest „osadzenie” lub „hostowanie lokalne” czcionek. Innymi słowy, twoje pliki czcionek będą znajdować się na tym samym serwerze internetowym, na którym znajduje się twoja witryna.
Zaletą tej metody jest to, że nie wymaga pobierania czcionek z domeny innej firmy. W rezultacie Twoje czcionki ładują się szybciej, a tym samym Twoja strona internetowa ładuje się szybciej. Szybsze ładowanie stron internetowych jest lepsze dla wygody użytkownika, co oznacza, że może pomóc Twojej witrynie uzyskać wyższą pozycję w wyszukiwarkach i zwiększyć ruch.
Innymi słowy, osadzone czcionki są lepsze dla SEO (optymalizacja wyszukiwarek).
Chociaż ta metoda wymaga kilku dodatkowych kroków, nadal jest dość łatwa i wykorzystuje tę samą wtyczkę, którą zainstalowaliśmy wcześniej (wtyczka Utwórz motywy blokowe).
Aby zainstalować czcionki lokalnie, zacznij od przejścia do Wygląd>Zarządzaj czcionkami motywu z głównego menu nawigacji (jeśli nie jesteś tam już od ostatniego kroku – niebieska strzałka na powyższym obrazku). Następnie kliknij przycisk „Dodaj lokalną czcionkę” w prawym górnym rogu obszaru roboczego (czerwona strzałka).
Zostaniesz przeniesiony do obszaru „Lokalne czcionki”, gdzie możesz wybrać plik ze swojego komputera, aby przesłać go do motywu. Pod przyciskiem „Wybierz plik” zobaczysz listę obsługiwanych formatów plików czcionek. Możesz pobrać te formaty z dowolnej zaufanej witryny z czcionkami, w tym Google Fonts.
Znajdź i pobierz wybraną przez siebie czcionkę z Google Fonts
Przeskoczę do Czcionek Google i użyję paska wyszukiwania (czerwona strzałka), aby wyszukać żądaną czcionkę – w tym przypadku czcionkę „Catamaran”. Gdy czcionka pojawi się na liście wyników, kliknę ją, aby wyświetlić stronę z czcionkami (zielona strzałka).
Następnie kliknę przycisk „Pobierz rodzinę”, aby pobrać tę czcionkę i wszystkie jej odmiany na mój komputer. Możesz przewinąć stronę czcionki, jeśli chcesz zobaczyć wszystkie dostępne odmiany tej czcionki.
Kliknij „Zapisz”, aby zapisać plik zip z czcionką na komputerze.
Rozpakuj folder czcionek, aby uzyskać dostęp do plików czcionek
Po zakończeniu pobierania kliknij strzałkę obok zakończonego pobierania (czerwona strzałka) i kliknij „Pokaż w folderze” (zielona strzałka).
Kliknij prawym przyciskiem myszy plik zip w eksploratorze plików i kliknij „Wyodrębnij wszystko”.
Wyświetlone zostanie wyskakujące okienko pokazujące miejsce wyodrębniania czcionek (czerwona strzałka). Możesz zmienić tę lokalizację, jeśli chcesz, w przeciwnym razie kliknij przycisk oznaczony „Wyodrębnij” (zielona strzałka). Spowoduje to rozpakowanie folderu i utworzenie nowego pliku na komputerze ze wszystkimi rozpakowanymi plikami czcionek. Ten folder powinien otworzyć się automatycznie.
Jeśli pobrałeś pliki czcionek za pomocą Czcionek Google, przejdź do folderu oznaczonego jako „statyczny”, aby wyświetlić wszystkie pliki czcionek. W przeciwnym razie po prostu poszukaj plików, które są plikami OTF, TTF, WOFF lub WOFF2.
Wewnątrz tego „statycznego” folderu zobaczysz listę wszystkich odmian czcionek, które pobraliśmy dla czcionki Catamaran z Google Fonts. W sumie jest 9 odmian i możemy albo przesłać je wszystkie na naszą stronę internetową, albo tylko te, które chcemy/potrzebujemy. Kliknij lokalizację folderu w eksploratorze plików (zielona strzałka), a następnie kliknij prawym przyciskiem myszy i wybierz „Kopiuj”.
Prześlij swoje niestandardowe czcionki do WordPress
Wróć do WordPress, gdzie masz otwarty obszar roboczy „Lokalne czcionki”. Kliknij przycisk „Wybierz plik” (czerwona strzałka na powyższym obrazku), aby wybrać czcionki. Możesz ręcznie przejść do lokalizacji na komputerze, w której przechowywane są czcionki. Lub po prostu kliknij pasek adresu eksploratora plików (niebieska strzałka), usuń obecny adres, a następnie kliknij prawym przyciskiem myszy i wybierz „Wklej” (zielona strzałka). Spowoduje to wklejenie adresu skopiowanego w poprzednim kroku. Naciśnij klawisz Enter, a zostaniesz przeniesiony do folderu z czcionkami.
Musisz przesyłać swoje odmiany czcionek pojedynczo. W tym przykładzie po prostu prześlę odmianę czcionki „Catamaran-Regular”, klikając ją (zielona strzałka), a następnie przycisk „Otwórz” (czerwona strzałka).
Powinieneś teraz zobaczyć informacje dla „NAZWA CZCIONKI”, „STYL CZCIONKI” i „WAGA CZCIONKI”, a także podgląd czcionki po prawej stronie. Kliknij „Prześlij czcionkę do motywu” (czerwona strzałka), aby przesłać odmianę czcionki.
Zobacz swoje niestandardowe czcionki motywu
Powinieneś teraz zobaczyć komunikat o powodzeniu u góry obszaru roboczego (zaznaczony na zielono na powyższym obrazku). Gratulacje – Twoja niestandardowa czcionka została teraz przesłana do Twojego motywu jako czcionka lokalna! Możesz nadal klikać „Wybierz plik” i przesyłać dowolną liczbę odmian czcionek.
Po zakończeniu kliknij łącze „Zarządzaj czcionkami” w oknie komunikatu o powodzeniu lub strzałce wstecz (oznaczonej czerwoną strzałką), aby powrócić do obszaru roboczego Zarządzaj czcionkami motywu.
Zobaczysz teraz nową rodzinę czcionek „Catamaran” wymienioną wraz z resztą rodzin czcionek Twojego motywu (czerwona strzałka). Ponadto zobaczysz rodzinę czcionek i wszelkie zainstalowane odmiany po prawej stronie okna Zarządzaj czcionkami motywu (podświetlone na zielono).
5. Zmień czcionki motywu na niestandardowe czcionki
Teraz, gdy masz już zainstalowane nowe czcionki, czas na zabawną część!
Aby zmienić czcionki motywu na czcionki niestandardowe, przejdź do Edytora witryny, przechodząc do Wygląd>Edytor (czerwona strzałka na powyższym obrazku).
Kliknij dowolne miejsce w głównym obszarze zawartości (czerwona strzałka) Edytora witryny, aby wyświetlić elementy sterujące.
W górnym menu kliknij ikonę „Style” (niebieska strzałka). Następnie kliknij „Typografia” (czerwona strzałka).
W sekcji „Elementy” możesz zmienić czcionkę tekstu, linków, nagłówków lub przycisków. W tym przykładzie wybiorę opcję „Nagłówki”.
Zobaczysz teraz listę rozwijaną w sekcji „Typografia”, w której możesz wybrać dowolną czcionkę motywu (czerwona strzałka). Możesz zobaczyć czcionki „Neuton” i „Catamaran”, które dodałem do tego samouczka, są wymienione tutaj. Jako czcionkę nagłówka wybiorę „Neuton”.
Kliknij przycisk „Zapisz” w prawym górnym rogu, aby zapisać zmiany.
Kliknij „Zapisz” jeszcze raz (czerwona strzałka), a Twoja niestandardowa czcionka zostanie zapisana dla wszystkich nagłówków w Twojej witrynie!
Następnie możesz kliknąć łącze Widok>Wyświetl witrynę w prawym górnym rogu edytora witryn (czerwone strzałki na powyższym zdjęciu), aby zobaczyć, jak wygląda Twoja witryna z nową czcionką. Wróć do Edytora witryny i powtórz ten proces dla wszystkich innych elementów, których czcionkę chcesz dostosować.
Aby powrócić do obszaru administracyjnego WordPress, kliknij logo w lewym górnym rogu edytora witryny (zielona strzałka), a następnie ponownie kliknij logo.
6. Jak usunąć niestandardowe czcionki z WordPress
Aby usunąć dowolne niestandardowe czcionki, zacznij od przejścia z powrotem do Wygląd> Zarządzaj czcionkami motywu.
Możesz usunąć całą rodzinę czcionek, umieszczając kursor myszy nad prawą stroną nazwy rodziny czcionek i klikając ikonę kosza, która się pojawi (niebieska strzałka). Lub najedź kursorem myszy na poszczególne odmiany czcionek i kliknij ikonę kosza (wariacje czcionek znajdują się wewnątrz podświetlonego na zielono obszaru). Możesz także kliknąć łącze „Usuń rodzinę czcionek”, aby usunąć dowolną rodzinę czcionek (fioletowa strzałka).
To tyle w tym samouczku! Jeśli ci się podobało, możesz sprawdzić moją drugą Artykuły pomocy WordPress lub zapisz się do mojego Kurs mistrzowski WordPress na Udemy.
