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.
Se hele theme.json
kode
{ "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
, .woff
eller .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/
- :er
- $OPP
- 1
- 10
- 11
- 2022
- 7
- 8
- 9
- 98
- a
- Handling
- aktiv
- la til
- Ytterligere
- adresse
- Legger
- admin
- Alle
- tillater
- allerede
- og
- api
- app
- tilnærming
- ER
- Artikkel
- artikler
- AS
- Eiendeler
- At
- automatisk
- tilgjengelig
- tilbake
- BE
- fordi
- før du
- være
- under
- nytte
- BEST
- Blokker
- Blå
- Bunn
- bokser
- kort
- Bringer
- XNUMX bunk
- byrde
- knapp
- by
- ring
- som heter
- CAN
- hvilken
- bære
- saken
- endring
- karakteristisk
- tegn
- sjekk
- barn
- Velg
- Classic
- klikk
- cloudways
- kode
- COM
- kommentarer
- Felles
- helt
- Bekrefte
- innhold
- kontekst
- fortsette
- kontrast
- kontroller
- kunne
- Par
- Kurs
- Court
- dekket
- skape
- skaper
- Gjeldende
- I dag
- dato
- Misligholde
- definert
- definere
- helt sikkert
- demonstrerer
- utforming
- utviklet
- utviklere
- Utvikling
- forskjellig
- retning
- direkte
- skjermer
- nedlasting
- Drop
- Tidlig
- redaktør
- Forbedrer
- nok
- Hele
- Europas
- Selv
- NOEN GANG
- eksempel
- utmerket
- Øvelse
- erfaring
- explorer
- utsatt
- Face
- familie
- Trekk
- Egenskaper
- filet
- Filer
- fylt
- Først
- fonter
- Til
- fra
- GDPR
- Tysk
- få
- få
- GitHub
- gitt
- Global
- Go
- skal
- god
- google skrifter
- Googles
- grip
- Guider
- Gutenberg
- Håndtering
- skjer
- Ha
- å ha
- her.
- Fremhevet
- utheving
- hindring
- vert
- Hvordan
- Men
- HTTPS
- i
- ICON
- pålagt
- in
- inkluderer
- innledende
- installerte
- integrere
- Integrering
- Interface
- IP
- IP-adresse
- utstedelse
- IT
- køyring
- DET ER
- Januar
- jpg
- JSON
- Vet
- Tomt
- Språk
- Siste
- Latin
- Layout
- føre
- LÆRE
- utnytter
- i likhet med
- linje
- lenker
- Liste
- lite
- lokal
- ligger
- Lang
- Se
- Lot
- elsker
- Hoved
- administrer
- ledelse
- administrerende
- manuelt
- Saken
- midler
- Minne
- Meny
- kunne
- modifisert
- navn
- Naviger
- Navigasjon
- Trenger
- trenger
- Ny
- normal
- of
- on
- ONE
- pågående
- åpen
- Alternativ
- alternativer
- Annen
- oversikt
- egen
- eieren
- side
- panel
- banen
- PHP
- steder
- plato
- Platon Data Intelligence
- PlatonData
- plugg inn
- plugins
- mulig
- trekker
- pen
- Forhåndsvisning
- privatliv
- prosess
- prosjekt
- beskytte
- gi
- gir
- gi
- proxy
- formål
- raskt
- heller
- nylig
- Rød
- referanser
- regional
- registrering
- registre
- regelmessig
- slipp
- utgitt
- fjerne
- fjernet
- fjerne
- representert
- Krav
- Krever
- forskning
- Resort
- Ressurser
- respektere
- retur
- Rull
- Rute
- kjennelse
- s
- Sa
- samme
- sier
- Skjerm
- Seksjon
- valgt
- velge
- utvalg
- dømme
- separat
- betjene
- Servere
- tjeneste
- sett
- innstillinger
- Del
- Kort
- bør
- Vis
- vist
- betydelig
- Enkelt
- ganske enkelt
- siden
- nettstedet
- Størrelse
- glidebryter
- So
- et sted
- Rom
- spesielt
- startet
- Steps
- Still
- lagret
- struktur
- stil
- Støttes
- tar
- Snakk
- lag
- mal
- test
- Testing
- Det
- De
- Dem
- tema
- ting
- ting
- dette året
- trodde
- tid
- til
- dagens
- også
- topp
- HELT KLART
- berøre
- berøre
- tradisjonelle
- oversette
- sant
- typografi
- ui
- Oppdater
- oppdatert
- Opplasting
- us
- bruke
- Bruker
- Brukererfaring
- brukernes personvern
- ulike
- leverandør
- versjon
- Se
- brudd
- vs
- vs kode
- ønsket
- advarsel
- Vei..
- Nettsted
- vekt
- velkommen
- VI VIL
- Hva
- hvilken
- mens
- vil
- med
- innenfor
- uten
- WordPress
- WordPress Theme
- wordpress temaer
- Arbeid
- virker
- verdt
- skrive
- skriving
- skrevet
- Feil
- år
- Du
- Din
- zephyrnet