WordPress już od dłuższego czasu był na drodze do stworzenia prawdziwego API Web Fonts - wraz z wydaniem Gutenberg 12.8 w dniu 16 marca 2022 r. stało się to faktem. Dowiedz się, jak korzystać z API Web Fonts w WordPressie i co się wreszcie zmieni dzięki Web Fonts API.
API WordPress Web Fonts pozwala między innymi na dynamiczne dodawanie niestandardowych czcionek do motywów WordPressa, dając ci większą kontrolę nad tekstem na twojej witrynie WordPressa.
Czym w ogóle jest interfejs API?
Ten interfejs nazywany jest interfejsem programowania aplikacji (API). Oznacza to, że pozwalasz programom komunikować się ze sobą tak, by mogły wymieniać dane w ograniczony i kontrolowany sposób.
Czym jest nowe API WordPress Web Fonts?
We wrześniu 2021 roku społeczność dyskutowała nad propozycją Ariego Stathopoulosa, twórcy WordPressa , dotyczącą API Web Fonts. API WordPress Web Fonts to wielki przełom dla Ciebie jako twórcy stron internetowych. API WordPress Web Fonts umożliwia osadzanie czcionek na stronach WordPressa bez konieczności martwienia się o regułę font-face czy politykę cross domain.
API WordPress Web Fonts zostało zintegrowane z nową stroną Gutenberg w wersji 12.8 i ma zostać wprowadzone do rdzenia wraz z WordPressem 6.0. "Fakt, że tak długo trwało dojście do tego punktu, świadczy o tym, jak skomplikowane mogą być czcionki internetowe" - jak wyjaśnia Héctor Prieto w oficjalnym wpisie na blogu Gutenberg 12.8 pod adresem WordPress.org.
Teraz, gdy te ramy już istnieją, można na nich budować kolejne narzędzia i optymalizacje, aby mieć pewność, że WordPress zapewnia najlepsze możliwe doświadczenia (i prywatność) użytkownikom końcowym.
"*" wyświetla wymagane pola
Dlaczego Core API jest niezbędne?
Standardy pozwalają na rutynową implementację czcionek. Jest to standard, dzięki któremu każdy programista może spojrzeć na kilka linijek kodu i zrozumieć, co ten kod robi. Implementując API, tworzy się stabilną podstawę dla przyszłego rozwoju.
Projekt Gutenberg
Powstał edytor Gutenberg. Oprócz możliwości używania stylów globalnych, programiści potrzebowali także możliwości określenia w Gutenbergu, jakie czcionki powinny być używane na stronie. Dzięki temu, że jest to API, inne aplikacje lub części tej samej aplikacji mogą również pobierać dane z API WordPress Web Fonts.
Scenariusz zastosowania: zleciłeś programiście utworzenie niestandardowego banera plików cookie. W witrynie WordPress używasz interfejsu API WordPress Web Fonts, aby określić czcionki, które mają być używane. Programista może użyć tych samych czcionek internetowych, które są używane na innej stronie.
Tego samego interfejsu API można użyć do zarządzania czcionkami na stronie internetowej. Nie trzeba zarządzać ustawieniami w wielu miejscach. Warto zauważyć, że pierwsza wersja jest tylko fundamentem, na którym zespół WordPressa będzie budować.
Droga do interfejsu API Web Fonts w WordPressie była dla programistów istnym rollercoasterem emocji. Po usunięciu go z WordPressa 5.9 został przeniesiony do projektu Gutenberg, gdzie mógł być rozwijany wraz z powiązanymi funkcjami, które na nim bazowały.
Oznacza to, że możesz używać i ustawiać swoje czcionki z tego samego miejsca, a zmiany zostaną zsynchronizowane ze wszystkimi miejscami, w których używasz API WordPress Web Fonts. Warto zauważyć, że pierwsza wersja to tylko fundament, na którym zespół WordPressa będzie się dalej opierał.
W tym artykule pokażemy, jak korzystać z interfejsu API WordPress Web Fonts, od jego zainstalowania po dodawanie czcionek do interfejsu API. Zaczynajmy.
Co robi API WordPress Web Fonts?
To API jest pierwszym krokiem w kierunku umożliwienia ładowania czcionek w sposób wydajny, przyjazny dla prywatności i przyszłościowy - coś, co jest bardzo trudne do zrobienia bez takiego systemu.
API WordPress Web Fonts pozwala twórcom motywów na określenie rodzin czcionek, które powinny być używane w WordPressie, oraz powiązanych z nimi plików. WordPress automatycznie ładuje czcionki wraz z odpowiednim CSS w edytorze i we frontendzie. W pierwszej wersji API WordPress Web Fonts skrypty i style są umieszczane w kolejce. Powodem tego jest potrzeba stworzenia jednolitego rozwiązania.
Funkcja interfejsu API czcionek WWW pełni rolę wrappera dla interfejsu API arkuszy stylów. Dzieje się tak dlatego, że aby umieścić czcionkę internetową w kolejce, sam plik czcionki musi zostać umieszczony w kolejce poprzez kolejkowanie arkusza stylów (lub dodanie stylu inline).
Początkowo można używać tylko czcionek lokalnych. W przyszłości zespół WordPressa z pewnością doda obsługę większej liczby dostawców czcionek.
Zamiast je usuwać, może moglibyśmy je odpowiednio zaimplementować i wymusić stosowanie czcionek internetowych hostowanych lokalnie, aby poprawić wydajność i prywatność? W ten sposób damy dobry przykład i zobaczymy znaczną poprawę wydajności i prywatności w ekosystemie WordPressa, ponieważ motywy i wtyczki, które obecnie używają czcionek Google, Adobe itp.
Cytat z GitHub
Jeśli obsługiwane są tylko czcionki lokalne, może to prowadzić do problemów z wydajnością, gdy pobieranie motywów staje się większe. Jednak dla wielu motywów nie powinno to stanowić problemu - jeden, dwa lub trzy pakiety czcionek powinny wystarczyć dla większości motywów. Jeśli jednak popularne staną się globalne wariacje stylistyczne, możemy zobaczyć motywy oferujące wiele czcionek, które pokryją kilka predefiniowanych wzorów.
Jak korzystać z API WordPress Web Fonts
Przyjrzyjmy się teraz, jak w praktyce można wykorzystać nowy interfejs API WordPress Web Fonts.
Istnieją dwie metody rejestrowania czcionek internetowych w WordPressie: poprzez plik "theme.json", co jest standardem od wersji 5.8 WordPressa, lub poprzez metodę @font-face. Klucze i wartości pliku theme.json w większości odpowiadają regule CSS @font-face. Jeśli ich nie znasz, powinieneś odświeżyć swoją wiedzę. Reguła @font-face jest stylem CSS, który pozwala określić czcionkę, jakiej chcesz używać na swojej stronie.
Można użyć czcionki, która jest już zainstalowana na komputerze użytkownika, lub załadować czcionkę ze zdalnego serwera. Plik theme.json zawiera listę czcionek, których chcesz używać na swojej witrynie. Zawiera ona nazwę czcionki, adres URL pliku czcionki oraz wagę i styl czcionki.
Przyjrzymy się teraz, jak można zmienić czcionki za pomocą pliku theme.json. Aby to zrobić, musisz połączyć się ze swoją witryną WordPress przez SFTP. W ten sposób uzyskujesz dostęp do plików na swojej stronie. Użyj wybranego przez siebie klienta FTP. (Należy pamiętać, że Raidboxes obsługuje tylko SFTP, a nie nieszyfrowany FTP). Ja używam Termiusa.
Po połączeniu się z serwerem i wejściu do folderu domowego zobaczysz folder o nazwie "dysk". Kliknij na nim.
W folderze "dysk" zobaczysz dwa foldery (w niektórych przypadkach może to wyglądać inaczej), ale powinieneś kliknąć na folder "WordPress". W folderze "WordPress" zobaczysz zwykłą bibliotekę plików WordPressa. Kliknij na folder "wp-content", a pod nim na folder "themes".
Znajdujemy się teraz w folderze, w którym przechowywane są wszystkie zainstalowane motywy WordPress. Klikam na twentytwentytwo w celach demonstracyjnych. Na rysunku widać plik, który należy pobrać na komputer, aby móc go edytować.
Po otwarciu pliku "theme.json" za pomocą zwykłego edytora lub ulubionego IDE, dodaj czcionki internetowe jako część specjalnej definicji rodziny czcionek w settings.typography.fontfamily.
},
„typography“: {
"customFontSize": true,
"dropCap": false,
"fontFamilies": [
{
}, "fontFamily": "outfit", "sans-serif",
}, "name": "outfit",
{ "slug": "primary".
},
{
}, "fontFamily": "monospace",
}, "name": "monospace",
"}, "slug": "monospace
}
Po otwarciu pliku "theme.json" w dowolnym edytorze tekstu.
Przeglądając kod, możesz znaleźć tag "typografia". Następnie zobaczysz tag "fontFamilies", pod którym wpiszesz czcionki, które chcesz dodać do swojej witryny WordPress. Na rysunku widać czerwone znaczniki. Jak na zdjęciu powyżej.
W zależności od motywu, którego używasz, kod może wyglądać inaczej. W innym przykładzie używam domyślnego motywu twentytwentytwo bez żadnych zmian. Jak widać, pod pierwszą "fontfamily" znajduje się kod dla stosu czcionek systemowych (czcionki systemowe i domyślne używane w komputerach i telefonach komórkowych). Więcej o czcionkach przeczytasz tutaj.
Przykłady zastosowania
Dzięki interfejsowi API WordPress Web Fonts w najnowszej wersji WordPressa programiści mogą określić, które czcionki mają być używane w edytorze motywu. Wyobraźmy sobie, że programista chce użyć kombinacji czcionek zgodnie z życzeniem klienta.
Wtedy bardzo łatwo jest redaktorowi opublikować artykuł. Edytor nie musi myśleć o kombinacjach czcionek, są one już wstępnie ustawione. Ten przykład zastosowania pokazuje, na czym polega idea Font API.
Podsumowanie interfejsu API WordPress Web Fonts
API WordPress Web Fonts jest dla Ciebie, jako twórcy stron internetowych lub projektanta, czymś, co zmienia postać rzeczy. Pozwalając twórcom motywów na zdefiniowanie rodzin czcionek i powiązanych z nimi plików, WordPress zajmuje się ładowaniem czcionek zarówno w edytorze, jak i we frontendzie. To sprawia, że rozwój i projektowanie są o wiele łatwiejsze i bardziej efektywne.
W tym artykule opisałem, jak działa API WordPress Web Fonts. Czy próbowałeś go używać? Chętnie wysłucham twojej opinii.
Pytania dotyczące API WordPress Web Fonts
Masz pytania do Noela? Zachęcamy do komentowania. Chcesz być informowany o nowych artykułach na temat marketingu internetowego? Obserwuj nas na Twitterze i Facebooku, LinkedIn lub za pośrednictwem naszego Newslettera.
