Håndtering af skrifttyper i WordPress bloktemaer

Skrifttyper er en definerende egenskab ved designet af ethvert websted. Det inkluderer WordPress-temaer, hvor det er almindeligt for temaudviklere at integrere en tjeneste som Google Fonts ind i WordPress Customizer-indstillingerne for et "klassisk" PHP-baseret tema. Det har ikke helt været tilfældet for WordPress-bloktemaer. Selvom integration af Google Fonts i klassiske temaer er veldokumenteret, er der i øjeblikket intet tilgængeligt for bloktemaer i WordPress temahåndbog.

Det er det, vi skal se på i denne artikel. Blok-temaer kan faktisk bruge Google Fonts, men processen for at registrere dem er meget anderledes end hvad du måske har gjort før i klassiske temaer.

Hvad vi allerede ved

Som jeg sagde, er der ikke meget for os at komme videre, så langt som at komme i gang. Twenty Twenty-Two-temaet er det første blokbaserede standard WordPress-tema, og det demonstrerer, hvordan vi kan bruge downloadede skrifttypefiler som aktiver i temaet. Men det er ret uhåndterligt, fordi det involverer et par trin: (1) registrer filerne i functions.php fil og (2) definere de medfølgende skrifttyper i theme.json fil.

Siden Twenty Twenty-Two blev udgivet, er processen dog blevet enklere. Bundlede skrifttyper kan nu defineres uden at registrere dem, som vist i Twenty Treogtyve tema. Processen kræver dog stadig, at vi manuelt downloader skrifttypefiler og bundter dem i temaerne. Det er en hindring, der på en måde besejrer formålet med enkle, drop-in, hostede skrifttyper, der serveres på et hurtigt CDN.

Hvad er nyt

Hvis du ikke allerede vidste det Gutenberg projekt er et eksperimentelt plugin, hvor funktioner, der udvikles til WordPress Block og Site Editor, er tilgængelige til tidlig brug og test. I en nylig Theme Shaper artikel, Gutenberg projektleder arkitekt Matias Ventura diskuterer, hvordan Google Fonts - eller andre downloadede skrifttyper for den sags skyld - kan tilføjes for at blokere temaer ved hjælp af Opret bloktema plugin.

Denne korte video på Lær WordPress giver et godt overblik over Create Block Theme plugin og hvordan det virker. Men bundlinjen er, at den gør, hvad der står på dåsen: den skaber bloktemaer. Men det gør det ved at give kontrolelementer i WordPress UI, der giver dig mulighed for at oprette et helt tema, et børnetema eller en temastilvariation uden at skrive nogen kode eller nogensinde at skulle røre ved skabelonfiler.

Jeg har givet det en chance! Og da Create Block Theme er forfattet og vedligeholdt af WordPress.org team, vil jeg sige, at det er den bedste retning, vi har til at integrere Google Fonts i et tema. Når det er sagt, er det bestemt værd at bemærke, at plugin'et er i aktiv udvikling. Det betyder, at tingene kan ændre sig ret hurtigt.

Før jeg kommer til, hvordan det hele fungerer, lad os først kort genopfriske os med den "traditionelle" proces til at tilføje Google Fonts til klassiske WordPress-temaer.

Hvordan det plejede at blive gjort

Denne ThemeShaper-artikel fra 2014 giver et glimrende eksempel på, hvordan vi plejede at gøre dette i klassiske PHP-temaer, som det er denne nyere Cloudways-artikel af Ibad Ur Rehman.

For at genopfriske vores hukommelse er her et eksempel fra standarden Tyve Sytten tema viser, hvordan Google-skrifttyper sættes i kø 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 );
}

Så er Google Fonts på forhånd forbundet til temaet som dette:

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 );

Hvad er der galt med den traditionelle måde

Fantastisk, ikke? Der er dog et problem. I januar 2022, en Den tyske regionale domstol idømte en bøde på en hjemmesideejer for at krænke Europas GDPR krav. Problemet? Ved at sætte Google Fonts i kø på webstedet afslørede en besøgendes IP-adresse, hvilket bragte brugernes privatliv i fare. CSS-Tricks dækkede dette for et stykke tid siden.

Opret bloktema plugin opfylder GDPR privatlivskrav, da det udnytter Google Fonts API til udelukkende at tjene som proxy for den lokale leverandør. Skrifttyperne serveres til brugeren på det samme websted i stedet for på Googles servere, hvilket beskytter privatlivets fred. WP Tavern diskuterer den tyske domstolsafgørelse og inkluderer links til vejledninger til selv-hosting af Google Fonts.

Sådan bruger du Google Fonts med bloktemaer

Dette bringer os til nutidens "moderne" måde at bruge Google Fonts på med WordPress-bloktemaer. Lad os først oprette et lokalt teststed. Jeg bruger Flywheel's Lokale app til lokal udvikling. Du kan bruge det eller hvad du foretrækker, og brug derefter Tema Test Data plugin af WordPress Themes Team til at arbejde med dummy-indhold. Og selvfølgelig vil du have det Opret bloktema plugin der også.

Har du installeret og aktiveret disse plugins? Hvis ja, naviger til Udseende → Administrer temaskrifttyper fra WordPress admin-menuen.

Skærmen "Administrer temaskrifttyper" viser en liste over alle skrifttyper, der allerede er defineret i temaets theme.json fil. Der er også to muligheder øverst på skærmen:

• Tilføj Google-skrifttyper. Denne mulighed føjer Google Fonts direkte til temaet fra Google Fonts API.
• Tilføj lokale skrifttyper. Denne mulighed føjer downloadede skrifttypefiler til temaet.

Jeg bruger et helt tomt tema fra WordPress kaldet Tomt tema. Du er velkommen til at rulle sammen med dit eget tema, men jeg ville gerne sige, at jeg har omdøbt Emptytheme til "EMPTY-BLANK" og ændret det, så der er ingen foruddefinerede skrifttyper og stilarter overhovedet.

Jeg tænkte, at jeg ville dele et skærmbillede af mit temas filstruktur og theme.json fil for at vise, at der bogstaveligt talt ikke er nogen stilarter eller konfigurationer i gang.

Lad os klikke på knappen "Tilføj Google-skrifttyper". Det tager os til en ny side med muligheder for at vælge enhver tilgængelig skrifttype fra den nuværende Google Fonts API.

Til denne demo valgte jeg Inter fra menuen med muligheder og valgte vægtene 300, Regular og 900 fra forhåndsvisningsskærmen:

Når jeg har gemt mine valg, downloades de Inter-skrifttypestile, jeg valgte, automatisk og gemmes i temaets assets/fonts folder:

Bemærk også, hvordan disse valg automatisk er blevet skrevet til theme.json fil i det skærmbillede. Opret bloktema-pluginnet tilføjer endda stien til skrifttypefilerne.

{ "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" ] } ] } ] } }
}

Hvis vi går til Opret blok-temaets hovedskærm og klikker på Administrer temaskrifttyper knappen igen, vil vi se Inters 300, 400 (almindelige) og 900 vægtvarianter vist i forhåndsvisningspanelet.

A boks til forhåndsvisning af demotekst øverst giver dig endda mulighed for at få vist de valgte skrifttyper i sætningen, overskriften og afsnittet med skyderen til valg af skriftstørrelse. Du kan se denne nye funktion i aktion i denne GitHub-video.

Den eller de valgte skrifttyper er også tilgængelige i webstedseditoren Globale Styles (Udseende → editor), specifikt i designpanelet.

Herfra skal du navigere til skabeloner → Indeks og klik på den blå Redigere knappen for at redigere index.html skabelon. Vi ønsker at åbne Globale Styles indstillinger, som er repræsenteret som et kontrastikon placeret øverst til højre på skærmen. Når vi klikker på tekst indstillinger og åbn font i menuen Typografi sektion... vi ser Inter!

Det samme, men med lokale skrifttyper

Vi kan lige så godt se på at tilføje lokale skrifttyper til et tema, da Create Block Theme-pluginet giver den mulighed. Fordelen er, at du kan bruge en hvilken som helst skrifttypefil, du ønsker, fra den skrifttypetjeneste, du foretrækker.

Uden plugin'et ville vi have fat i vores skrifttypefiler, slippe dem et sted i temamappen og derefter ty til den traditionelle PHP-rute med at stille dem i kø i functions.php fil. Men vi kan lade WordPress bære denne byrde for os ved at uploade skrifttypefilen på Tilføj lokale skrifttyper skærmen ved hjælp af grænsefladen Create Block Theme. Når en fil er valgt at uploade, udfyldes felterne med skrifttypedefinitioner automatisk.

Selvom vi kan bruge evt .ttf, .woff eller .woff2 fil, jeg har simpelthen downloadet Åbn Sans-skrifttypefiler fra Google Fonts til denne øvelse. Jeg snuppede to vægtvariationer, almindelig og 800.

Den samme auto-magiske filhåndtering og theme.json opdatering, vi så med Google Fonts-indstillingen, sker igen, når vi uploader skrifttypefilerne (som udføres én ad gangen). Tjek, hvor skrifttyperne er havnet i min temamappe, og hvordan de føjes til theme.json:

Fjernelse af skrifttyper

Pluginnet giver os også mulighed for at fjerne skrifttypefiler fra et bloktema fra WordPress-administratoren. Lad os slette en af ​​de Open Sans-varianter, vi installerede i sidste afsnit for at se, hvordan det virker.

Ved at klikke på Fjern links udløser en advarsel til dig om at bekræfte sletningen. Vi klikker OK at fortsætte.

Lad os åbne vores temamappe og tjekke theme.json fil. Sikkert nok fjernede Open Sans 800-filen, vi slettede på plugin-skærmen, skrifttypefilen fra temamappen, og henvisningen til den er for længst væk i theme.json.

Der foregår et løbende arbejde

Der er tale om at tilføje denne "Font Manager"-funktion til WordPress Core i stedet for at have brug for et separat plugin.

En indledende gentagelse af funktionen er tilgængelig i repoen, og det bruger nøjagtig samme tilgang, som vi brugte i denne artikel. Det bør være GDPR-kompatibel, også. Funktionen er planlagt til at lande med WordPress 6.3 udgives senere i år.

Indpakning op

Create Block Theme-pluginnet forbedrer brugeroplevelsen markant, når det kommer til håndtering af skrifttyper i WordPress-bloktemaer. Pluginnet giver os mulighed for at tilføje eller slette alle skrifttyper, mens GDPR-kravene overholdes.

Vi så, hvordan valg af en Google-skrifttype eller upload af en lokal skrifttypefil automatisk placerer skrifttypen i temamappen og registrerer den i theme.json fil. Vi så også, hvordan skrifttypen er en tilgængelig mulighed i Global Styles-indstillingerne i Site Editor. Og hvis vi skal fjerne en skrifttype? Pluginnet tager sig også fuldstændig af det - uden at røre ved temafiler eller kode.

Tak fordi du læste med! Hvis du har kommentarer eller forslag, så del dem i kommentarerne. Jeg ville elske at vide, hvad du synes om denne mulige retning for skrifttypestyring i WordPress.

Yderligere ressourcer

Jeg stolede på en masse forskning for at skrive denne artikel og tænkte, at jeg ville dele de artikler og ressourcer, jeg brugte til at give dig yderligere kontekst.

WordPress skrifttypestyring

GitHub problemer

Europæiske GDPR-krav

• SEO Powered Content & PR Distribution. Bliv forstærket i dag.
• Platoblokkæde. Web3 Metaverse Intelligence. Viden forstærket. Adgang her.
• Kilde: https://css-tricks.com/managing-fonts-in-wordpress-block-themes/