Administrere skrifter i WordPress Block Themes

Skrifter er en definerende egenskap ved utformingen av ethvert nettsted. Det inkluderer WordPress-temaer, der det er vanlig for temautviklere å integrere en tjeneste som Google Fonts inn i WordPress Customizer-innstillingene for et "klassisk" PHP-basert tema. Det har ikke helt vært tilfelle for WordPress-blokktemaer. Selv om integrering av Google Fonts i klassiske temaer er godt dokumentert, er det ingenting tilgjengelig for blokktemaer i WordPress temahåndbok.

Det er det vi skal se på i denne artikkelen. Blokktemaer kan faktisk bruke Google Fonts, men prosessen for å registrere dem er helt annerledes enn hva du kanskje har gjort før i klassiske temaer.

Det vi allerede vet

Som jeg sa, det er lite for oss å gå så langt som å komme i gang. Twenty Twenty-Two-temaet er det første blokkbaserte standard WordPress-temaet, og det demonstrerer hvordan vi kan bruke nedlastede fontfiler som eiendeler i temaet. Men det er ganske uhåndterlig fordi det involverer et par trinn: (1) registrer filene i functions.php fil og (2) definere de medfølgende skriftene i theme.json fil.

Siden Twenty Twenty-Two ble utgitt, har imidlertid prosessen blitt enklere. Bunlede skrifter kan nå defineres uten å registrere dem, som vist i Twenty Twenty-Three tema. Imidlertid krever prosessen fortsatt at vi manuelt laster ned skriftfiler og pakker dem inn i temaene. Det er en hindring som på en måte overvinner formålet med enkle, drop-in, vertsbaserte fonter som serveres på et raskt CDN.

Hva er nytt

Hvis du ikke allerede visste det, Gutenberg-prosjektet er en eksperimentell plugin der funksjoner som utvikles for WordPress Block og Site Editor er tilgjengelige for tidlig bruk og testing. I en nylig Theme Shaper-artikkel, Gutenberg prosjektleder arkitekt Matias Ventura diskuterer hvordan Google Fonts – eller andre nedlastede fonter, for den saks skyld – kan legges til for å blokkere temaer ved hjelp av Lag blokktema plugin.

Denne korte video på Lær WordPress gir en god oversikt over Create Block Theme-pluginen og hvordan den fungerer. Men poenget er at den gjør det som står på tinnen: den lager blokktemaer. Men det gjør det ved å tilby kontroller i WordPress-grensesnittet som lar deg lage et helt tema, undertema eller en temastilvariasjon uten å skrive noen kode eller noen gang å måtte berøre malfiler.

Jeg har prøvd det! Og siden Create Block Theme er skrevet og vedlikeholdt av WordPress.org team, vil jeg si at det er den beste retningen vi har for å integrere Google Fonts i et tema. Når det er sagt, er det definitivt verdt å merke seg at plugin-en er i aktiv utvikling. Det betyr at ting kan endre seg ganske raskt.

Før jeg kommer til hvordan det hele fungerer, la oss først kort oppdatere oss med den "tradisjonelle" prosessen for å legge til Google Fonts til klassiske WordPress-temaer.

Hvordan det pleide å gjøres

Denne ThemeShaper-artikkelen fra 2014 gir et utmerket eksempel på hvordan vi pleide å gjøre dette i klassiske PHP-temaer, som det er denne nyere Cloudways-artikkelen av Ibad Ur Rehman.

For å friske opp hukommelsen, her er et eksempel fra standarden Twenty Seventeen tema viser hvordan Google-fonter er satt i kø i functions.php filen.

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

Da er Google Fonts forhåndstilkoblet til temaet slik:

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

Hva er galt med den tradisjonelle måten

Flott, ikke sant? Det er imidlertid en hake. I januar 2022, a Tysk regional domstol ila bøter på en nettsideeier for brudd på Europas GDPR-krav. Problemet? Å sette Google Fonts i kø på nettstedet avslørte en besøkendes IP-adresse, noe som satte brukerens personvern i fare. CSS-Tricks dekket dette for en stund tilbake.

De Lag blokktema plugin tilfredsstiller personvernkravene i GDPR, ettersom den utnytter Google Fonts API til kun å tjene som en proxy for den lokale leverandøren. Fontene blir servert til brukeren på samme nettsted i stedet for på Googles servere, og beskytter personvernet. WP Tavern diskuterer den tyske rettsavgjørelsen og inkluderer lenker til veiledninger for selvhostende Google Fonts.

Slik bruker du Google Fonts med blokktemaer

Dette bringer oss til dagens "moderne" måte å bruke Google Fonts på med WordPress-blokktemaer. La oss først sette opp en lokal testside. Jeg bruker Flywheel's lokal app for lokal utvikling. Du kan bruke det eller hva du foretrekker, og bruk deretter Plugin for tematestdata av WordPress Themes Team for å jobbe med dummy-innhold. Og selvfølgelig vil du ha Lag blokktema plugin der også.

Har du installert og aktivert disse pluginene? I så fall, naviger til Utseende → Administrer temafonter fra WordPress admin-menyen.

"Administrer temafonter"-skjermen viser en liste over alle fonter som allerede er definert i temaets theme.json fil. Det er også to alternativer øverst på skjermen:

• Legg til Google-fonter. Dette alternativet legger til Google Fonts direkte til temaet fra Google Fonts API.
• Legg til lokale skrifter. Dette alternativet legger til nedlastede fontfiler til temaet.

Jeg bruker et helt tomt tema fra WordPress kalt Tomt tema. Du er velkommen til å rulle sammen med ditt eget tema, men jeg ville si at jeg har omdøpt Emptytheme til "EMPTY-BLANK" og endret det, så det er ingen forhåndsdefinerte fonter og stiler i det hele tatt.

Jeg tenkte jeg skulle dele et skjermbilde av temaets filstruktur og theme.json fil for å vise at det bokstavelig talt ikke er noen stiler eller konfigurasjoner på gang.

La oss klikke på "Legg til Google Fonts"-knappen. Det tar oss til en ny side med alternativer for å velge hvilken som helst tilgjengelig font fra den nåværende Google Fonts API.

For denne demoen valgte jeg Inter fra menyen med alternativer og valgte vektene 300, Regular og 900 fra forhåndsvisningsskjermen:

Når jeg har lagret valgene mine, blir Inter-skriftstilene jeg valgte automatisk lastet ned og lagret i temaets assets/fonts mappe:

Legg også merke til hvordan disse valgene automatisk har blitt skrevet til theme.json filen i det skjermbildet. Create Block Theme-pluginen legger til og med banen til skriftfilene.

{ "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 Create Block Theme-hovedskjermen og klikker på Administrer temafonter knappen igjen, vil vi se Inters 300, 400 (vanlige) og 900 vektvarianter vist i forhåndsvisningspanelet.

A forhåndsvisningsboks for demotekst øverst lar deg til og med forhåndsvise de valgte skriftene i setningen, overskriften og avsnittet med glidebryteren for valg av skriftstørrelse. Du kan sjekke ut denne nye funksjonen i aksjon i denne GitHub-videoen.

Den(e) valgte skrifttypen(e) er også tilgjengelig i Site Editor Globale stiler (Utseende → editor), spesielt i designpanelet.

Herfra, naviger til maler → Index og klikk på den blå Rediger knappen for å redigere index.html mal. Vi ønsker å åpne Globale stiler innstillinger, som er representert som et kontrastikon øverst til høyre på skjermen. Når vi klikker på tekst innstillinger og åpne Font menyen i Typografi seksjon... vi ser Inter!

Samme, men med lokale fonter

Vi kan like gjerne se på å legge til lokale fonter til et tema siden Create Block Theme-pluginen gir det alternativet. Fordelen er at du kan bruke hvilken som helst fontfil du vil fra hvilken fonttjeneste du foretrekker.

Uten plugin-modulen må vi ta tak i fontfilene våre, slippe dem et sted i temamappen, og deretter ty til den tradisjonelle PHP-ruten for å sette dem i kø i functions.php fil. Men vi kan la WordPress bære den byrden for oss ved å laste opp fontfilen på Legg til lokale skrifter skjermen ved å bruke grensesnittet Create Block Theme. Når en fil er valgt å laste opp, fylles boksene for skrifttypedefinisjoner automatisk.

Selv om vi kan bruke hvilken som helst .ttf, .woffeller .woff2 fil, jeg bare lastet ned Åpne Sans-fontfiler fra Google Fonts for denne øvelsen. Jeg snappet to vektvarianter, vanlig og 800.

Den samme auto-magiske filbehandlingen og theme.json oppdateringen vi så med Google Fonts-alternativet skjer igjen når vi laster opp skriftfilene (som gjøres én om gangen). Sjekk ut hvor skriftene havnet i temamappen min og hvordan de legges til theme.json:

Fjerning av fonter

Programtillegget lar oss også fjerne skriftfiler fra et blokktema fra WordPress-administratoren. La oss slette en av Open Sans-variantene vi installerte i den siste delen for å se hvordan det fungerer.

Ved å klikke på fjerne koblinger utløser en advarsel for deg om å bekrefte slettingen. Vi klikker OK å fortsette.

La oss åpne temamappen vår og sjekke theme.json fil. Visst nok, Open Sans 800-filen vi slettet på plugin-skjermen fjernet fontfilen fra temamappen, og referansen til den er for lengst borte i theme.json.

Det er et pågående arbeid som skjer

Det er snakk om å legge til denne "Font Manager"-funksjonen til WordPress Core i stedet for å trenge en egen plugin.

En første iterasjon av funksjonen er tilgjengelig i repoen, og den bruker nøyaktig samme tilnærming som vi brukte i denne artikkelen. Det bør være GDPR-kompatibelogså. Funksjonen er planlagt å lande med WordPress 6.3 utgivelse senere i år.

Innpakning opp

Create Block Theme-pluginen forbedrer brukeropplevelsen betraktelig når det gjelder håndtering av fonter i WordPress-blokktemaer. Programtillegget lar oss legge til eller slette alle fonter mens vi respekterer GDPR-kravene.

Vi så hvordan valg av en Google-skrift eller opplasting av en lokal skriftfil automatisk plasserer skriften i temamappen og registrerer den i theme.json fil. Vi så også hvordan skriften er et tilgjengelig alternativ i Global Styles-innstillingene i Site Editor. Og hvis vi trenger å fjerne en font? Programtillegget tar seg helt av det også - uten å berøre temafiler eller kode.

Takk for at du leste! Hvis du har kommentarer eller forslag, del dem i kommentarene. Jeg vil gjerne vite hva du synes om denne mulige retningen for skriftbehandling i WordPress.

Tilleggsressurser

Jeg stolte på mye forskning for å skrive denne artikkelen og tenkte jeg skulle dele artiklene og ressursene jeg brukte for å gi deg ekstra kontekst.

WordPress fontbehandling

GitHub-problemer

Europeiske GDPR-krav

• SEO-drevet innhold og PR-distribusjon. Bli forsterket i dag.
• Platoblokkkjede. Web3 Metaverse Intelligence. Kunnskap forsterket. Tilgang her.
• kilde: https://css-tricks.com/managing-fonts-in-wordpress-block-themes/