Hantera teckensnitt i WordPress-blockteman

Teckensnitt är ett avgörande kännetecken för designen på vilken webbplats som helst. Det inkluderar WordPress-teman, där det är vanligt att temautvecklare integrerar en tjänst som Google Fonts i WordPress Customizer-inställningarna för ett "klassiskt" PHP-baserat tema. Det har inte riktigt varit fallet för WordPress-blockteman. Även om det är väldokumenterat att integrera Google Fonts i klassiska teman, finns det för närvarande inget tillgängligt för blockteman i WordPress temahandbok.

Det är vad vi ska titta på i den här artikeln. Blockteman kan verkligen använda Google Fonts, men processen för att registrera dem är helt annorlunda än vad du kanske har gjort tidigare i klassiska teman.

Vad vi redan vet

Som jag sa, det finns lite för oss att gå på så långt som att komma igång. Twenty Twenty-Two-temat är det första blockbaserade standard WordPress-temat, och det visar hur vi kan använda nedladdade teckensnittsfiler som tillgångar i temat. Men det är ganska otympligt eftersom det innebär ett par steg: (1) registrera filerna i functions.php fil och (2) definiera de medföljande typsnitten i theme.json fil.

Sedan Twenty Twenty-Two släpptes har processen dock blivit enklare. Buntade typsnitt kan nu definieras utan att registrera dem, som visas i Twenty Twenty-Three tema. Processen kräver dock att vi manuellt laddar ner teckensnittsfiler och buntar in dem i teman. Det är ett hinder som på ett sätt motverkar syftet med enkla, drop-in, värdtypsnitt som serveras på ett snabbt CDN.

Vad är nytt

Om du inte redan visste det Gutenberg-projektet är ett experimentellt plugin där funktioner som utvecklas för WordPress Block och Site Editor är tillgängliga för tidig användning och testning. I en nyligen Theme Shaper-artikel, Gutenberg projektledare arkitekt Matias Ventura diskuterar hur Google Fonts – eller andra nedladdade typsnitt, för den delen – kan läggas till för att blockera teman med hjälp av Skapa blocktema plugin.

Så här kort video på Lär dig WordPress ger en bra översikt över insticksprogrammet Create Block Theme och hur det fungerar. Men poängen är att den gör det som står på burken: den skapar blockteman. Men det gör det genom att tillhandahålla kontroller i WordPress UI som låter dig skapa ett helt tema, ett barntema eller en temastilsvariation utan att skriva någon kod eller någonsin behöva röra mallfiler.

Jag har gett det ett försök! Och eftersom Skapa Block Theme är författad och underhållen av WordPress.org team, jag skulle säga att det är den bästa vägen vi har för att integrera Google Fonts i ett tema. Som sagt, det är definitivt värt att notera att plugin är i aktiv utveckling. Det betyder att saker och ting kan förändras ganska snabbt.

Innan jag kommer till hur det hela fungerar, låt oss först kort uppdatera oss med den "traditionella" processen för att lägga till Google Fonts till klassiska WordPress-teman.

Hur det gjordes förr

Denna ThemeShaper-artikel från 2014 ger ett utmärkt exempel på hur vi brukade göra detta i klassiska PHP-teman, som det är denna nyare Cloudways-artikel av Ibad Ur Rehman.

För att fräscha upp vårt minne, här är ett exempel från standarden Twenty Seventeen tema visar hur Google-teckensnitt är köade i functions.php fil.

function twentyseventeen_fonts_url() { $fonts_url = ''; /** * Translators: If there are characters in your language that are not * supported by Libre Franklin, translate this to 'off'. Do not translate * into your own language. */ $libre_franklin = _x( 'on', 'libre_franklin font: on or off', 'twentyseventeen' ); if ( 'off' !== $libre_franklin ) { $font_families = array(); $font_families[] = 'Libre Franklin:300,300i,400,400i,600,600i,800,800i'; $query_args = array( 'family' => urlencode( implode( '|', $font_families ) ), 'subset' => urlencode( 'latin,latin-ext' ), ); $fonts_url = add_query_arg( $query_args, 'https://fonts.googleapis.com/css' ); } return esc_url_raw( $fonts_url );
}

Då är Google Fonts föranslutet till temat så här:

function twentyseventeen_resource_hints( $urls, $relation_type ) { if ( wp_style_is( 'twentyseventeen-fonts', 'queue' ) && 'preconnect' === $relation_type ) { $urls[] = array( 'href' => 'https://fonts.gstatic.com', 'crossorigin', ); } return $urls;
}
add_filter( 'wp_resource_hints', 'twentyseventeen_resource_hints', 10, 2 );

Vad är det för fel på det traditionella sättet

Bra, eller hur? Det finns dock ett problem. I januari 2022, en Den tyska regionaldomstolen dömde ut böter på en webbplatsägare för att ha brutit mot Europas GDPR-krav. Problemet? Att köa Google Fonts på webbplatsen avslöjade en besökares IP-adress, vilket äventyrade användarnas integritet. CSS-Tricks täckte detta för ett tag sedan.

Smakämnen Skapa blocktema plugin uppfyller integritetskraven i GDPR, eftersom det utnyttjar Google Fonts API för att endast fungera som en proxy för den lokala leverantören. Typsnitten serveras till användaren på samma webbplats snarare än på Googles servrar, vilket skyddar integriteten. WP Tavern diskuterar den tyska domstolsdomen och inkluderar länkar till guider för Google Fonts som är värdar för sig själv.

Hur man använder Google Fonts med blockteman

Detta för oss till dagens "moderna" sätt att använda Google Fonts med WordPress-blockteman. Låt oss först skapa en lokal testplats. Jag använder svänghjul Lokala app för lokal utveckling. Du kan använda det eller vad du föredrar, använd sedan Plugin för tematestdata av WordPress Themes Team för att arbeta med dummy-innehåll. Och självklart vill du ha det Skapa blocktema plugin där också.

Har du installerat och aktiverat dessa plugins? Om så är fallet, navigera till Utseende → Hantera temateckensnitt från WordPress admin-menyn.

Skärmen "Hantera temateckensnitt" visar en lista över alla teckensnitt som redan har definierats i temats theme.json fil. Det finns också två alternativ längst upp på skärmen:

• Lägg till Google-teckensnitt. Det här alternativet lägger till Google Fonts direkt till temat från Google Fonts API.
• Lägg till lokala teckensnitt. Det här alternativet lägger till nedladdade teckensnittsfiler till temat.

Jag använder ett helt tomt tema från WordPress som heter Tomt tema. Du får gärna rulla med ditt eget tema, men jag ville säga att jag har döpt om Emptytheme till "EMPTY-BLANK" och modifierat det, så det finns inga fördefinierade typsnitt och stilar alls.

Jag tänkte dela med mig av en skärmdump av mitt temas filstruktur och theme.json fil för att visa att det bokstavligen inte finns några stilar eller konfigurationer på gång.

Låt oss klicka på knappen "Lägg till Google Fonts". Det tar oss till en ny sida med alternativ för att välja vilket teckensnitt som helst från det nuvarande Google Fonts API.

För den här demon valde jag Inter från menyn med alternativ och valde vikterna 300, Regular och 900 från förhandsgranskningsskärmen:

När jag har sparat mina val hämtas de Inter-fontstilar jag valde automatiskt ner och lagras i temats assets/fonts mapp:

Lägg också märke till hur dessa val automatiskt har skrivits till theme.json filen i den skärmdumpen. Insticksprogrammet Create Block Theme lägger till och med sökvägen till teckensnittsfilerna.

{ "version": 2, "settings": { "appearanceTools": true, "layout": { "contentSize": "840px", "wideSize": "1100px" }, "typography": { "fontFamilies": [ { "fontFamily": "Inter", "slug": "inter", "fontFace": [ { "fontFamily": "Inter", "fontStyle": "normal", "fontWeight": "300", "src": [ "file:./assets/fonts/inter_300.ttf" ] }, { "fontFamily": "Inter", "fontStyle": "normal", "fontWeight": "900", "src": [ "file:./assets/fonts/inter_900.ttf" ] }, { "fontFamily": "Inter", "fontStyle": "normal", "fontWeight": "400", "src": [ "file:./assets/fonts/inter_regular.ttf" ] } ] } ] } }
}

Om vi ​​går till Skapa block-temas huvudskärm och klickar på Hantera temateckensnitt knappen igen kommer vi att se Inters 300, 400 (vanliga) och 900 viktvarianter visas i förhandsgranskningspanelen.

A förhandsgranskningsruta för demotext högst upp kan du till och med förhandsgranska de valda teckensnitten i meningen, rubriken och stycket med skjutreglaget för val av teckenstorlek. Du kan kolla in den här nya funktionen i aktion i denna GitHub-video.

De valda teckensnitten är också tillgängliga i Site Editor Globala stilar (Utseende → redaktör), särskilt i designpanelen.

Härifrån, navigera till Mallar → index och klicka på den blå Redigera knappen för att redigera index.html mall. Vi vill öppna Globala stilar inställningar, som representeras som en kontrastikon längst upp till höger på skärmen. När vi klickar på text inställningar och öppna Font menyn i Typografi avsnitt... vi ser Inter!

Samma sak, men med lokala typsnitt

Vi kan lika gärna titta på att lägga till lokala teckensnitt till ett tema eftersom insticksprogrammet Create Block Theme ger det alternativet. Fördelen är att du kan använda vilken typsnittsfil du vill från vilken typsnittstjänst du föredrar.

Utan plugin-programmet skulle vi behöva ta tag i våra teckensnittsfiler, släppa dem någonstans i temamappen och sedan ta till den traditionella PHP-vägen att ställa dem i kö i functions.php fil. Men vi kan låta WordPress bära den bördan för oss genom att ladda upp teckensnittsfilen på Lägg till lokala teckensnitt med hjälp av gränssnittet Skapa blocktema. När en fil har valts att ladda upp fylls rutor för teckensnittsdefinitioner automatiskt.

Även om vi kan använda vilken som helst .ttf, .woff, eller .woff2 fil laddade jag helt enkelt ner Öppna Sans-teckensnittsfiler från Google Fonts för denna övning. Jag snodde två viktvariationer, vanlig och 800.

Samma automagiska filhantering och theme.json uppdatering som vi såg med Google Fonts-alternativet händer igen när vi laddar upp teckensnittsfilerna (som görs en i taget). Kolla in var typsnitten hamnade i min temamapp och hur de läggs till theme.json:

Ta bort teckensnitt

Pluginet låter oss också ta bort teckensnittsfiler från ett blocktema från WordPress-administratören. Låt oss ta bort en av Open Sans-varianterna som vi installerade i det sista avsnittet för att se hur det fungerar.

Genom att klicka på AVLÄGSNA länkar utlöser en varning för dig att bekräfta raderingen. Vi klickar OK att fortsätta.

Låt oss öppna vår temamapp och kontrollera theme.json fil. Visst, Open Sans 800-filen som vi raderade på pluginskärmen tog bort teckensnittsfilen från temamappen, och hänvisningen till den är sedan länge borta i theme.json.

Det pågår ett pågående arbete

Det pratas om att lägga till denna "Font Manager"-funktion till WordPress Core istället för att behöva ett separat plugin.

En första iteration av funktionen finns i repan, och den använder exakt samma tillvägagångssätt som vi använde i den här artikeln. Det borde vara GDPR-kompatibelockså. Funktionen är planerad att landa med WordPress 6.3 släpps senare i år.

Inslagning upp

Plugin-programmet Create Block Theme förbättrar användarupplevelsen avsevärt när det kommer till hantering av teckensnitt i WordPress-blockteman. Insticksprogrammet låter oss lägga till eller ta bort alla typsnitt samtidigt som vi respekterar GDPR-kraven.

Vi såg hur man väljer ett Google Font eller laddar upp en lokal teckensnittsfil automatiskt placerar teckensnittet i temamappen och registrerar det i theme.json fil. Vi såg också hur typsnittet är ett tillgängligt alternativ i Global Styles-inställningarna i Site Editor. Och om vi behöver ta bort ett teckensnitt? Insticksprogrammet tar hand om det också - utan att röra temafiler eller kod.

Tack för att du läser! Om du har några kommentarer eller förslag, dela dem i kommentarerna. Jag skulle gärna vilja veta vad du tycker om den här möjliga riktningen för teckensnittshantering i WordPress.

Ytterligare resurser

Jag förlitade mig på mycket forskning för att skriva den här artikeln och tänkte dela med mig av artiklarna och resurserna jag använde för att ge dig ytterligare sammanhang.

WordPress teckensnittshantering

GitHub-problem

Europeiska GDPR-krav

• SEO-drivet innehåll och PR-distribution. Bli förstärkt idag.
• Platoblockchain. Web3 Metaverse Intelligence. Kunskap förstärkt. Tillgång här.
• Källa: https://css-tricks.com/managing-fonts-in-wordpress-block-themes/