Wordpress Font API: Jak používat Wordpress Font API

Jak používat WordPress Web Fonts API - jednoduché vysvětlení

Po dlouhou dobu byl WordPress na cestě ke skutečnému API webových písem - s Vydání Gutenberg 12.8 16. března 2022 tam bude. Naučte se používat WordPress Web Fonts API a co se konečně mění díky Web Fonts API.

Mimo jiné můžete použít WordPress Web Fonts API k dynamickému přidávání vlastních písem do vašich motivů WordPress a získat větší kontrolu nad textem na vašem webu WordPress. 

Co je to vlastně API?

Rozhraní se nazývá rozhraní API (Application Programming Interface). To znamená, že necháte programy vzájemně komunikovat, aby si mohly navzájem vyměňovat data omezeným a kontrolovaným způsobem.

Co je nové WordPress Web Fonts API? 

V září 2021 byl v komunitě diskutován návrh vývojáře WordPress Ari Stathopoulose na API webových písem. S WordPress Web Fonts API je velký průlom pro vás jako webový vývojář nebo designér. WordPress Web Fonts API vám umožňuje vkládat písma do vašich webových stránek WordPress, aniž byste se museli starat o pravidlo písma nebo zásady mezi doménami.  

WordPress Web Fonts API bylo představeno v novém Gutenberg Verze 12.8 integrovaná a měla by být dodávána s WordPress 6.0 v jádru. "Skutečnost, že nám trvalo tak dlouho, než jsme se dostali do tohoto bodu, je důkazem toho, jak složitá mohou být webová písma" - jak napsal Héctor Prieto v oficiální blogový příspěvek na Gutenberg 12.8 ze dne WordPress.org vysvětlený.

Nyní, když je tento rámec zaveden, lze na něm stavět více nástrojů a optimalizací, aby bylo zajištěno, že WordPress poskytuje koncovým uživatelům nejlepší možný zážitek (a soukromí).

Souhlas*
Toto pole slouží k ověření a nemělo by se měnit.

Proč je základní rozhraní API nezbytné? 

Standardy umožňují rutinní implementaci písem. Jedná se o standard, takže každý vývojář se může podívat na několik řádků kódu a pochopit, co kód dělá. Implementace rozhraní API poskytuje stabilní základ pro budoucí vývoj.  

Že Gutenberg Projekt

Ten Gutenberg Editor byl vyvinut. Spolu se schopností používat globální styly museli vývojáři Gutenberg můžete také určit, která písma se mají na stránce použít. Díky tomu, že se jedná o API, mohou data z WordPress Web Fonts API načíst i jiné aplikace nebo části stejné aplikace.

Scénář aplikace: Pověřili jste vývojáře, aby vytvořil individuální banner souboru cookie . Na svých webových stránkách WordPress používáte WordPress Web Fonts API k určení, která písma se mají použít. Vývojář může použít stejná webová písma, která se používají na jiném webu.

Stejné rozhraní API můžete použít ke správě písem webu. Nemusíte spravovat nastavení na více místech. Stojí za zmínku, že první verze je jen základem, na kterém bude tým WordPress stavět.

Cesta k WEB Fonts API ve WordPressu byla pro vývojáře horskou dráhou emocí. Poté, co byl odstraněn z WordPress 5.9 , byl zahrnut do Gutenberg Projekt odložen, kde by mohl být vyvinut spolu se souvisejícími funkcemi, které se na něj spoléhaly.

To znamená, že můžete používat a nastavovat písma ze stejného místa a změny budou synchronizovány se všemi místy, kde používáte WordPress Web Fonts API. Stojí za zmínku, že první verze je jen základem, na kterém bude tým WordPress i nadále stavět. 

V tomto článku vám ukážeme, jak používat WordPress Web Fonts API, od instalace až po přidání písem do API. Začněme.  

Co dělá WordPress Web Fonts API? 

Toto rozhraní API je prvním krokem k povolení načítání písem výkonným, bezpečným způsobem a připraveným na budoucnost - něco, co je velmi obtížné bez takového rámce.

S WordPress Web Fonts API mohou vývojáři témat určit, které rodiny písem se mají použít spolu s přidruženými soubory ve WordPressu. WordPress automaticky načte písma se správným CSS v editoru a frontendu. V první verzi WordPress Web Fonts API jsou skripty a styly nastaveny na fronty. Důvodem je potřeba jednotného řešení.

Funkce rozhraní API webového písma funguje jako obálka pro rozhraní API šablony stylů. Protože chcete-li zařadit webové písmo do fronty, musí být samotný soubor písma zařazen do fronty zařazením šablony stylů do fronty (nebo přidáním vloženého stylu). 

Zpočátku můžete používat pouze místní písma. V budoucnu tým WordPress jistě přidá podporu pro více poskytovatelů písem. 

Místo toho, abychom je odstranili, možná bychom je mohli správně implementovat a vynutit místně hostovaná webová písma, abychom zlepšili výkon a soukromí? Tímto způsobem bychom šli příkladem a viděli bychom významné zlepšení výkonu a soukromí v ekosystému WordPress, protože témata a pluginy, které v současné době používají písma Google, písma Adobe atd., Přijmou API. 

Citace z GitHubu

To může způsobit problémy s výkonem, pokud se stahování motivů zvětší, pokud jsou podporována pouze místní písma. U mnoha témat by to však neměl být problém - pro většinu témat by měl stačit jeden, dva nebo tři balíčky písem. Pokud se však globální varianty stylu stanou populárními, můžeme vidět témata, která nabízejí mnoho písem, které pokrývají více předdefinovaných návrhů.  

Jak používat WordPress Web Fonts API 

Nyní se podívejme na to, jak lze nové WordPress Web Fonts API použít v praxi. 

Existují dva způsoby registrace webových písem pomocí WordPressu: prostřednictvím souboru "theme.json", který je standardní od WordPress 5.8 , nebo pomocí metody @font-face. Klíče a hodnoty theme.json do značné míry odpovídají pravidlu CSS @font-face. Pokud je neznáte, měli byste si osvěžit své znalosti. Pravidlo @font obličeje je styl CSS, který umožňuje nastavit písmo, které chcete na svém webu použít.

Můžete buď použít písmo, které je již nainstalováno v počítači uživatele, nebo můžete písmo stáhnout ze vzdáleného serveru. theme.jsv souboru obsahuje seznam písem, která chcete použít na svém webu. Obsahuje název písma, adresu URL souboru písma a tloušťku a styl písma.  

Teď se podíváme na to, jak můžete změnit písma pomocí souboru theme.json . Chcete-li to provést, musíte se připojit k webovým stránkám WordPress prostřednictvím SFTP. Zde je návod, jak získat přístup k souborům vašeho webu. Použijte klienta FTP podle vašeho výběru. (Všimněte si, že Raidboxes pouze SFTP a není podporován žádný nešifrovaný FTP). Používám Termius.  

Jakmile se připojíte k serveru a jste v domovské složce, zobrazí se složka s názvem "disk". Klikněte na něj. 

Wordpress Web Fonts Api

Ve složce "disk" jsou dvě složky (v některých případech to může vypadat jinak), ale měli byste kliknout na složku "WordPress". Ve složce "WordPress" se zobrazí obvyklá knihovna WordPress se soubory. Klikněte na složku "wp-content" a pod touto složkou ve složce "témata".

Nyní jsme ve složce, kde jsou uloženy všechny nainstalované motivy WordPress. Kliknu na twentytwentytwo pro demonstrační účely. Na obrázku uvidíte soubor, který je třeba stáhnout do počítače, abyste jej mohli upravit.  

Wordpress Web Fonts Api

Po otevření souboru theme.json v normálním editoru nebo oblíbeném integrovaném vývojovém prostředí (IDE) přidejte webová písma jako součást speciální definice rodiny písem na adrese settings.typography.fontfamily .  

}, 

“typography”: { 

"customFontSize": pravda, 

"dropCap": false, 

"fontFamilies": [ 

"fontFamily": "Outfit", "sans-serif", 

"jméno": "Oblečení", 

"slimák": "primární" 

}, 

"fontFamily": "monospace", 

"name": "Monospace", 

"slimák": "monospace" 

  

Po otevření souboru theme.json v libovolném textovém editoru. 

Wordpress Web Fonts Api

Značku "typografie" najdete, pokud se podíváte do kódu. Poté uvidíte značku "fontFamilies", pod kterou zadáte písma, která chcete přidat na své webové stránky WordPress. Na obrázku jsou vidět červené značky. Stejně jako na obrázku výše.  

Wordpress Web Fonts Api

V závislosti na motivu, který používáte, může kód vypadat jinak. V jiném příkladu používám výchozí téma twentytwentytwo beze změn. Jak můžete vidět pod prvním "fontfamily", uvidíte kód pro System Font Stack (Systémová a standardní písma se používají na počítačích a mobilních telefonech). Přečtěte si více o písmech zde.  

Příklady použití 

S WordPress Web Fonts API pro nejnovější verzi WordPressu mohou vývojáři určit, která písma se mají použít v editoru motivů. Představte si, že vývojář chce použít kombinaci písem podle přání zákazníka.

Pak je pro editora velmi snadné publikovat článek. Editor nemusí přemýšlet o kombinacích písem, jsou již přednastaveny. Tento příklad aplikace ukazuje, jaká je myšlenka rozhraní Font API. 

Závěr o WordPress Web Fonts API

WordPress Web Fonts API je rozhodujícím krokem vpřed pro vás jako webového vývojáře nebo designéra. Tím, že umožňuje vývojářům témat definovat rodiny písem a přidružené soubory, WordPress se postará o načtení písem v editoru i frontendu. Díky tomu je vývoj a design mnohem jednodušší a efektivnější. 

V tomto článku jsem popsal, jak funguje WordPress Web Fonts API. Zkoušeli jste je použít? Rád bych slyšel váš názor na to.   

Vaše dotazy týkající se WordPress Web Fonts API

Jaké otázky máte pro Noela? Neváhejte použít funkci komentáře. Chcete být informováni o nových příspěvcích na téma online marketingu? Pak nás sledujte na Twitteru, Facebooku,LinkedInnebo prostřednictvím našeho newsletteru.

Líbil se vám tento článek?

Svou recenzí nám pomůžete zlepšit náš obsah.

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna.