Fonttien hallinta WordPressin lohkoteemoissa

Fontit ovat minkä tahansa sivuston suunnittelun määrittelevä ominaisuus. Se sisältää WordPress-teemat, joihin on tavallista, että teeman kehittäjät integroivat palveluita, kuten Google Fonts WordPress Customizerin asetuksiin "klassista" PHP-pohjaista teemaa varten. Näin ei ole ollut WordPress-lohkoteemojen kohdalla. Vaikka Google-kirjasinten integrointi klassisiin teemoihin on hyvin dokumentoitua, tällä hetkellä ei ole saatavilla mitään lohkoteemoille. WordPress-teeman käsikirja.

Sitä aiomme tarkastella tässä artikkelissa. Block-teemat voivat todellakin käyttää Google Fontsia, mutta niiden rekisteröintiprosessi on erilainen kuin mitä olet ehkä tehnyt aiemmin klassisissa teemoissa.

Mitä jo tiedämme

Kuten sanoin, meillä ei ole juurikaan edetä alkuun asti. Twenty Twenty-Two -teema on ensimmäinen lohkopohjainen WordPress-oletusteema, ja se osoittaa, kuinka voimme käyttää ladattuja kirjasintiedostoja teeman resursseina. Mutta se on melko raskas, koska se sisältää pari vaihetta: (1) rekisteröi tiedostot hakemistoon functions.php tiedosto ja (2) määrittää niputetut fontit vuonna theme.json tiedosto.

Sen jälkeen kun Twenty TwentyTwo julkaistiin, prosessi on kuitenkin yksinkertaistunut. Niputetut kirjasimet voidaan nyt määrittää rekisteröimättä niitä, kuten kuvassa Twenty Twenty-Three teema. Prosessi edellyttää kuitenkin, että lataamme kirjasintiedostot manuaalisesti ja yhdistämme ne teemoihin. Se on este, joka tavallaan kumoaa nopeassa CDN:ssä toimitettavien yksinkertaisten, sisäänpudotettavien, isännöityjen fonttien tarkoituksen.

Mikä on uutta

Jos et vielä tiennyt, Gutenbergin projekti on kokeellinen laajennus, jossa WordPress Blockille ja Site Editorille kehitetyt ominaisuudet ovat saatavilla varhaiseen käyttöön ja testaukseen. Tuoreessa Theme Shaper -artikkeli, Gutenberg-projektin johtava arkkitehti Matias Ventura keskustellaan siitä, kuinka Google Fonts - tai mikä tahansa muu ladattu fontti - voidaan lisätä estämään teemoja käyttämällä Luo lohkoteema plugin.

Tämä lyhyt video osoitteessa Learn WordPress tarjoaa hyvän yleiskatsauksen Create Block Theme -laajennuksesta ja sen toiminnasta. Mutta tärkeintä on, että se tekee sen, mitä se sanoo tinalla: se luo lohkoteemoja. Mutta se tekee sen tarjoamalla WordPress-käyttöliittymän säätimiä, joiden avulla voit luoda kokonaisen teeman, alatason teeman tai teematyylimuunnelman kirjoittamatta koodia tai koskematta mallitiedostoihin.

Olen kokeillut! Ja koska Luo lohkoteema on WordPress.org:n kirjoittaja ja ylläpitämä tiimin kanssa, sanoisin, että se on paras tapa integroida Google Fonts johonkin teemaan. On kuitenkin syytä huomata, että laajennus on aktiivisesti kehitteillä. Tämä tarkoittaa, että asiat voivat muuttua melko nopeasti.

Ennen kuin pääsen käsittämään, miten se kaikki toimii, virkistetään ensin lyhyesti "perinteisellä" prosessilla Google-fonttien lisäämiseksi klassisiin WordPress-teemoihin.

Miten sitä ennen tehtiin

Tämä ThemeShaper-artikkeli vuodelta 2014 tarjoaa erinomaisen esimerkin siitä, kuinka teimme tämän klassisissa PHP-teemoissa sellaisenaan tämä Ibad Ur Rehmanin uudempi Cloudways-artikkeli.

Muistimme virkistämiseksi tässä on esimerkki oletusasetuksesta Twenty Seventeen teema näyttää, kuinka Google-kirjasimet asetetaan jonoon functions.php tiedosto.

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

Sitten Google Fonts on valmiiksi yhdistetty teemaan seuraavasti:

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

Mitä vikaa perinteisessä menetelmässä

Hienoa, eikö? Siinä on kuitenkin ongelma. Tammikuussa 2022 a Saksan aluetuomioistuin määräsi sakon verkkosivuston omistajalle Euroopan sääntöjen rikkomisesta GDPR-vaatimukset. Ongelma? Google-kirjasinten jonottaminen sivustolle paljasti vierailijan IP-osoitteen, mikä vaaransi käyttäjien yksityisyyden. CSS-Tricks käsitteli tämän jokin aika sitten.

- Luo lohkoteema laajennus täyttää GDPR-tietosuojavaatimukset, koska se hyödyntää Google Fonts API:ta toimimaan vain paikallisen toimittajan välityspalvelimena. Kirjasimet tarjotaan käyttäjälle samalla verkkosivustolla eikä Googlen palvelimilla, mikä suojaa yksityisyyttä. WP Taverna käsittelee Saksan tuomioistuimen päätöstä ja sisältää linkkejä oppaisiin itseisännöivien Google Fonts -kirjasinten käyttöön.

Kuinka käyttää Google-kirjasimia lohkoteemojen kanssa

Tämä vie meidät nykypäivän "moderniin" tapaan käyttää Google Fontsia WordPress-lohkoteemojen kanssa. Perustetaan ensin paikallinen testipaikka. Käytän vauhtipyörää paikallinen sovellus paikalliseen kehittämiseen. Voit käyttää sitä tai mitä tahansa haluat, ja käytä sitten Teema Test Data -laajennus WordPress Themes -tiimin toimesta työskennelläkseen valesisällön kanssa. Ja tietysti haluat Luo lohkoteema plugin myös sinne.

Oletko asentanut ja aktivoinut nämä lisäosat? Jos näin on, siirry kohtaan Esiintyminen → Hallitse teemafontteja WordPressin järjestelmänvalvojavalikosta.

"Hallinnoi teemafontteja" -näyttö näyttää luettelon kaikista teemassa jo määritetyistä fonteista theme.json tiedosto. Näytön yläosassa on myös kaksi vaihtoehtoa:

• Lisää Google-fontteja. Tämä vaihtoehto lisää Google-fontit suoraan teemaan Google-kirjasinten sovellusliittymästä.
• Lisää paikallisia fontteja. Tämä vaihtoehto lisää ladatut fonttitiedostot teemaan.

Käytän täysin tyhjää WordPress-teemaa nimeltä Tyhjä teema. Olet tervetullut vierittämään omaa teemaasi, mutta halusin huomauttaa, että olen nimennyt Emptythemen uudelleen muotoon "EMPTY-BLANK" ja muokannut sitä, joten ennalta määritettyjä kirjasimia ja tyylejä ei ole ollenkaan.

Ajattelin jakaa kuvakaappauksen teemani tiedostorakenteesta ja theme.json tiedosto osoittaakseen, että tyylejä tai määrityksiä ei kirjaimellisesti ole meneillään.

Napsauta "Lisää Google-kirjasimia" -painiketta. Se vie meidät uudelle sivulle, jolla on vaihtoehtoja valita mikä tahansa käytettävissä oleva fontti nykyisestä Google Fonts API.

Tätä demoa varten valitsin Inter asetusvalikosta ja valitsi esikatselunäytöstä painot 300, Normaali ja 900:

Kun olen tallentanut valintani, valitsemani Inter-kirjasintyylit ladataan automaattisesti ja tallennetaan teeman assets/fonts kansio:

Huomaa myös, kuinka nämä valinnat on kirjoitettu automaattisesti theme.json tiedosto kyseisessä kuvakaappauksessa. Luo lohkoteema -laajennus jopa lisää polun kirjasintiedostoihin.

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

Jos siirrymme Luo lohkoteeman päänäyttöön ja napsauta Hallitse teemafontteja -painiketta uudelleen, näemme Interin 300, 400 (tavallinen) ja 900 painoversiot esikatselupaneelissa.

A esittelytekstin esikatseluruutu yläreunassa voit jopa esikatsella valittuja kirjasimia lauseessa, otsikossa ja kappaleessa fonttikoon valintaliukusäätimellä. Voit tarkistaa tämän uuden ominaisuuden toiminnassa osoitteessa tämä GitHub-video.

Valitut kirjasimet ovat saatavilla myös sivustoeditorissa Globaalit tyylit (Esiintyminen → toimittaja), erityisesti Suunnittelu-paneelissa.

Siirry tästä Mallit → indeksi ja napsauta sinistä muokata -painiketta muokataksesi index.html sapluuna. Haluamme avata Globaalit tyylit asetukset, jotka esitetään kontrastikuvakkeena näytön oikeassa yläkulmassa. Kun napsautamme teksti asetukset ja avaa kirjasinlaji -valikossa Typografia osio… näemme Inter!

Sama asia, mutta paikallisilla fonteilla

Voimme yhtä hyvin tarkastella paikallisten kirjasimien lisäämistä teemaan, koska Create Block Theme -laajennus tarjoaa tämän vaihtoehdon. Etuna on, että voit käyttää mitä tahansa haluamaasi fonttitiedostoa mistä tahansa fonttipalvelusta.

Ilman laajennusta meidän täytyisi tarttua fonttitiedostoihimme, pudottaa ne jonnekin teemakansioon ja sitten turvautua perinteiseen PHP-reittiin jonoon ne functions.php tiedosto. Mutta voimme antaa WordPressin kantaa tämän taakan meille lataamalla fonttitiedoston Lisää paikallisia fontteja -näyttö käyttämällä Create Block Theme -käyttöliittymää. Kun tiedosto on valittu ladattavaksi, kirjasinten kasvojen määrittelyruudut täytetään automaattisesti.

Vaikka voimme käyttää mitä tahansa .ttf, .wofftai .woff2 tiedoston, latasin vain Avaa Sans-fonttitiedostot Google Fontsista tätä harjoitusta varten. Nappasin kaksi painovaihtoehtoa, tavallisen ja 800.

Sama automaattinen maaginen tiedostohallinta ja theme.json Päivitys, jonka näimme Google Fonts -vaihtoehdon kanssa, tapahtuu jälleen, kun lataamme kirjasintiedostoja (jotka tehdään yksi kerrallaan). Tarkista, mihin kirjasimet päätyivät teemakansiooni ja miten ne lisätään theme.json:

Fontien poistaminen

Laajennuksen avulla voimme myös poistaa fonttitiedostoja WordPress-järjestelmänvalvojan lohkoteemasta. Poistetaan yksi Open Sans -versioista, jotka asensimme viimeisessä osiossa nähdäksemme, kuinka se toimii.

Klikkaamalla poista linkit laukaisee varoituksen, jossa voit vahvistaa poiston. Klikkaamme OK jatkaa.

Avataan teemakansiomme ja tarkistetaan theme.json tiedosto. Tosiaankin, laajennusnäytöltä poistamamme Open Sans 800 -tiedosto poisti fonttitiedoston teemakansiosta, ja viittaus siihen on kadonnut kauan theme.json.

Työtä on meneillään

Tämän "Font Manager" -ominaisuuden lisäämisestä WordPress Coreen keskustellaan meneillään erillisen laajennuksen sijaan.

Ominaisuuden ensimmäinen iteraatio on saatavilla repossa, ja se käyttää täsmälleen samaa lähestymistapaa, jota käytimme tässä artikkelissa. Sen pitäisi olla GDPR-yhteensopiva, myös. Ominaisuus on suunniteltu laskeutumaan WordPress 6.3:n kanssa julkaista myöhemmin tänä vuonna.

Käärimistä

Create Block Theme -laajennus parantaa merkittävästi käyttökokemusta WordPress-lohkoteemojen kirjasimien käsittelyssä. Laajennuksen avulla voimme lisätä tai poistaa fontteja GDPR-vaatimuksia noudattaen.

Näimme, kuinka Google-fontin valitseminen tai paikallisen kirjasintiedoston lataaminen sijoittaa kirjasimen automaattisesti teemakansioon ja rekisteröi sen theme.json tiedosto. Näimme myös, kuinka kirjasin on käytettävissä Sivustoeditorin Yleiset tyylit -asetuksissa. Ja jos meidän on poistettava fontti? Plugin huolehtii myös tästä täysin - koskematta teematiedostoihin tai koodiin.

Kiitos lukemisesta! Jos sinulla on kommentteja tai ehdotuksia, jaa ne kommenteissa. Haluaisin tietää, mitä mieltä olet tästä mahdollisesta kirjasinten hallinnan suunnasta WordPressissä.

Lisäresurssit

Luotin paljon tutkimukseen tämän artikkelin kirjoittamisessa ja ajattelin jakaa artikkelit ja resurssit, joita käytin tarjotakseni sinulle lisäkontekstia.

WordPress-kirjasinten hallinta

GitHub-ongelmat

Euroopan GDPR-vaatimukset

• SEO-pohjainen sisällön ja PR-jakelu. Vahvista jo tänään.
• Platoblockchain. Web3 Metaverse Intelligence. Tietoa laajennettu. Pääsy tästä.
• Lähde: https://css-tricks.com/managing-fonts-in-wordpress-block-themes/