API för Wordpress-teckensnitt: Så här använder du API:et för Wordpress-teckensnitt

Hur man använder WordPress Web Fonts API - enkelt förklaras

Under lång tid var WordPress på väg till ett riktigt API för webbteckensnitt – med Frisläppande av Gutenberg 12.8 den 16 mars 2022 kommer den att vara där. Lär dig hur du använder Api:et för WordPress Web Fonts och vad som slutligen ändras tack vare API:et för webbteckensnitt.

Bland annat kan du använda WordPress Web Fonts API för att dynamiskt lägga till anpassade teckensnitt till dina WordPress-teman och få mer kontroll över texten på din WordPress-webbplats. 

Vad är ett API egentligen?

Ett gränssnitt kallas ett API (Application Programming Interface). Det innebär att du låter program kommunicera med varandra så att de kan utbyta data med varandra på ett begränsat och kontrollerat sätt.

Vad är det nya WordPress Web Fonts API? 

I september 2021 diskuterades ett förslag från WordPress-utvecklaren Ari Stathopoulos för ett WEB Fonts API i samhället. Med WordPress Web Fonts API är ett stort genombrott för dig som webbutvecklare eller designer. Med Api:et för WordPress Web Fonts kan du bädda in teckensnitt på dina WordPress-webbplatser utan att behöva oroa dig för font-face-regeln eller policyn för korsdomäner.  

WordPress Web Fonts API har integrerats i den nya Gutenberg Version 12.8 integrerad och bör komma med WordPress 6.0 i kärnan. "Det faktum att det tog oss så lång tid att komma till denna punkt är ett bevis på hur komplexa webbteckensnitt kan vara" - som Héctor Prieto i officiellt blogginlägg på Gutenberg 12.8 på WordPress.org förklarad.

Nu när detta ramverk är på plats kan fler verktyg och optimeringar byggas på det för att säkerställa att WordPress ger slutanvändare bästa möjliga upplevelse (och integritet).

"*" visar obligatoriska fält

Samtycke*
Det här fältet är avsett för validering och bör inte ändras.

Varför behövs ett Core API? 

Standarder möjliggör rutinmässig implementering av teckensnitt. Det är en standard så att varje utvecklare kan titta på några rader kod och förstå vad koden gör.  

Att Gutenberg Projekt

Den Gutenberg Redaktören har utvecklats. Tillsammans med möjligheten att använda globala stilar var utvecklare tvungna att Gutenberg Du kan också ange vilka teckensnitt som ska användas på sidan. Tack vare det faktum att det är ett API kan andra applikationer eller delar av samma applikation också hämta data från WordPress Web Fonts API.

Ett program scenario: Du har gett en utvecklare i uppdrag att skapa en enskild cookie-banner . På din WordPress-webbplats använder du WordPress Web Fonts API för att ange vilka teckensnitt som ska användas. Utvecklaren kan använda samma webbteckensnitt som används på den andra webbplatsen.

Du kan använda samma API för att hantera webbplatsens teckensnitt. Du behöver inte hantera inställningarna på flera ställen. Det är värt att notera att den första versionen bara är en grund som WordPress-teamet kommer att bygga på.

Vägen till ett Web Fonts API i WordPress har varit en berg- och dalbana av känslor för utvecklare. Efter att det togs bort från WordPress 5.9 inkluderades det i Gutenberg Projektet sköts upp, där det kunde utvecklas tillsammans med relaterade funktioner som förlitade sig på det.

Detta innebär att du kan använda och ställa in dina teckensnitt från samma plats och ändringarna synkroniseras med alla platser där du använder WordPress Web Fonts API. Det är värt att notera att den första versionen bara är en grund som WordPress-teamet kommer att fortsätta att bygga på. 

I den här artikeln visar vi dig hur du använder API:et för WordPress Web Fonts, från installation till att lägga till teckensnitt i API:et. Nu sätter vi igång.  

Vad gör API:et för WordPress Web Fonts? 

Detta API är det första steget i att möjliggöra teckensnittsladdning på ett kraftfullt, integritetsvänligt och framtidssäkert sätt - något som är mycket svårt att göra utan ett sådant ramverk.

Med Api:et För WordPress Web Fonts kan temautvecklare ange vilka teckensnittsfamiljer som ska användas tillsammans med de associerade filerna i WordPress. WordPress laddar automatiskt teckensnitten med rätt CSS i redigeraren och frontend. I den första versionen av API:et för WordPress Web Fonts är skript och format inställda på köer. Anledningen till detta är behovet av en enhetlig lösning.

API-funktionen Webbteckensnitt fungerar som ett omslag för API:et för formatmallen. Eftersom ett webbteckensnitt ska placeras i kö måste själva teckensnittsfilen köa genom att köa i formatmallen (eller lägga till ett infogat format). 

Till att börja med kan du bara använda lokala teckensnitt. I framtiden kommer WordPress-teamet säkert att lägga till stöd för fler teckensnittsleverantörer. 

I stället för att ta bort dem kanske vi kan implementera dem ordentligt och tvinga lokalt värd webbteckensnitt för att förbättra prestanda och integritet? På detta sätt skulle vi föregå med gott exempel och se en betydande förbättring av prestanda och integritet i WordPress ekosystem, eftersom teman och plugins som för närvarande använder Google-teckensnitt, Adobe-teckensnitt etc. kommer att anta API: et. 

Citat från GitHub

Det kan orsaka prestandaproblem om nedladdningar av teman blir större om endast lokala teckensnitt stöds. För många teman bör detta dock inte vara ett problem - ett, två eller tre teckensnittspaket bör räcka för de flesta teman. Men om globala stilvariationer blir populära kan vi se teman som erbjuder många teckensnitt för att täcka flera fördefinierade mönster.  

Så här använder du API:et för WordPress Web Fonts 

Låt oss nu ta en titt på hur det nya WordPress Web Fonts API kan användas i praktiken. 

Det finns två metoder för att registrera webbteckensnitt med WordPress: via din "theme.json" -fil, som har varit standard sedan WordPress 5.8 , eller via @font-face-metoden. Nycklarna och värdena för theme.json överensstämmer till stor del med CSS-regeln @font ansikte. Om du inte känner till dem bör du uppdatera din kunskap. Regeln för @font ansikte är en CSS-stil som låter dig ställa in teckensnittet du vill använda på din webbplats.

Du kan antingen använda ett teckensnitt som redan är installerat på användarens dator eller hämta ett teckensnitt från en fjärrserver. Filen theme.json innehåller listan över teckensnitt som du vill använda på din webbplats. Den innehåller teckensnittets namn, url:en till teckensnittsfilen och teckensnittets vikt och stil.  

Vi kommer nu att titta på hur du kan ändra teckensnitten med filen theme.json. För att göra detta måste du ansluta till din WordPress-webbplats via SFTP. Så här kommer du åt webbplatsens filer. Använd valfri FTP-klient. (Observera att Raidboxes endast SFTP och ingen okrypterad FTP stöds). Jag använder Termius.  

När du har anslutit till din server och är i hemmappen ser du en mapp som heter "disk". Klicka på den. 

Api för Wordpress-webbteckensnitt

Det finns två mappar i mappen "disk" (det kan vara annorlunda i vissa fall), men du bör klicka på mappen "WordPress". Under mappen "WordPress" visas det vanliga WordPress-biblioteket med filer. Klicka på mappen "wp-content" och under den här mappen i mappen "teman".

Vi finns nu i mappen där alla installerade WordPress-teman lagras. Jag klickar på twentytwentytwo för demonstrationsändamål. I bilden visas filen som du behöver hämta till datorn för att redigera filen.  

Api för Wordpress-webbteckensnitt

När du har öppnat filen theme.json med den vanliga redigeraren eller din favorit-IDE lägger du till webbteckensnitten på settings.typography.fontfamily som en del av en särskild definition av teckensnittsfamiljen.  

}, 

„typography“: { 

"customFontSize": sant, 

dropCap: falskt, 

"fontFamilies": [ 

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

"namn": "Outfit", 

"snigel": "primär" 

}, 

"fontFamily": "monospace", 

"namn": "monospace", 

"snigel": "monospace" 

  

När du har öppnat filen theme.json i valfri textredigerare. 

Api för Wordpress-webbteckensnitt

Du hittar taggen "typografi" genom att titta igenom koden. Då ser du taggen "fontFamilies", där du anger de teckensnitt du vill lägga till på din WordPress-webbplats. Röda markeringar kan ses på bilden. Som på bilden ovan.  

Api för Wordpress-webbteckensnitt

Beroende på vilket tema du använder kan koden se olika ut. I ett annat exempel använder jag standardtemat twentytwentytwo utan ändringar. Som du kan se under den första "fontfamily" ser du koden för System Font Stack (systemet och standardteckensnitt används på datorer och mobiltelefoner). Läs mer om typsnitt här.  

Exempel på användning 

Med WordPress Web Fonts API för den senaste versionen av WordPress kan utvecklare ange vilka teckensnitt som ska användas i temaredigeraren. Föreställ dig att en utvecklare vill använda en teckensnittskombination enligt kundens önskemål.

Då är det väldigt enkelt för redaktören att publicera en artikel. Redigeraren behöver inte tänka på teckensnittskombinationer, de är redan förinställda. Det här program exemplet visar vad idén bakom Teckensnitts-API: et är. 

Slutsats om API:et för WordPress Web Fonts

WordPress Web Fonts API är ett avgörande steg framåt för dig som webbutvecklare eller designer. Genom att låta temautvecklare definiera teckensnittsfamiljer och tillhörande filer tar WordPress hand om att ladda teckensnitten i både redigeraren och frontend. Detta gör utveckling och design mycket enklare och effektivare. 

I den här artikeln har jag beskrivit hur WordPress Web Fonts API fungerar. Har du försökt använda dem? Jag vill gärna höra din åsikt om det.   

Dina frågor om API:et för WordPress Web Fonts

Vilka frågor har du till Noel? Använd gärna kommentarsfunktionen. Vill du bli informerad om nya inlägg om onlinemarknadsföring? Följ oss sedan på Twitter, Facebook,LinkedIneller via vårt nyhetsbrev.

Tyckte du om artikeln?

Med din recension hjälper du oss att förbättra vårt innehåll ytterligare.

Skriva en kommentar

Din e-postadress kommer inte att publiceras. Obligatoriska fält är markerade med *.