Fontide haldamine WordPressi plokkiteemades

Fondid on iga saidi kujunduse iseloomulik tunnus. See hõlmab WordPressi teemasid, mille puhul on tavaline, et teemaarendajad integreerivad sarnase teenuse Google Fondid WordPressi kohandaja seadetesse "klassikalise" PHP-põhise teema jaoks. WordPressi plokkide teemade puhul pole see päris nii olnud. Kuigi Google'i fontide integreerimine klassikalistesse teemadesse on hästi dokumenteeritud, pole blokeeritud teemade jaoks praegu midagi saadaval. WordPressi teema käsiraamat.

Seda me selles artiklis vaatleme. Blokeeritavad teemad võivad tõepoolest kasutada Google'i fonte, kuid nende registreerimise protsess erineb oluliselt sellest, mida oleksite võinud varem klassikaliste teemade puhul teha.

Mida me juba teame

Nagu ma ütlesin, on meil vähe, et jätkata nii kaugele, kui alustada. Teema Twenty Twenty-Two on esimene plokipõhine WordPressi vaiketeema ja see näitab, kuidas saame kasutada allalaaditud fondifaile teema varadena. Kuid see on üsna kohmakas, kuna see hõlmab paari sammu: (1) registreerige failid functions.php fail ja (2) määrata komplekteeritud fondid aasta theme.json fail.

Kuid pärast Twenty Twenty Two väljaandmist on protsess muutunud lihtsamaks. Komplekteeritud fonte saab nüüd määratleda ilma neid registreerimata, nagu on näidatud Teema kakskümmend kakskümmend kolm. Protsess nõuab siiski, et me fondifailid käsitsi alla laadiksime ja teemadesse koondaksime. See on takistus, mis rikub kiires CDN-is esitatavate lihtsate, sisselülitatavate hostitud fontide eesmärki.

Mis on uut

Kui te veel ei teadnud, siis Gutenbergi projekt on eksperimentaalne pistikprogramm, kus WordPressi ploki ja saidiredaktori jaoks arendatavad funktsioonid on varajaseks kasutamiseks ja testimiseks saadaval. Ühes hiljutises Teema kujundaja artikkel, Gutenbergi projekti juhtivarhitekt Matias Ventura arutleb selle üle, kuidas Google'i fonte – või muid allalaaditud fonte – saab teemade blokeerimiseks lisada Loo ploki teema plugin.

See lühike video saidil Learn WordPress annab hea ülevaate Plokkiteema loomise pistikprogrammist ja selle toimimisest. Põhimõte on aga see, et see teeb seda, mis tina peal kirjas: loob plokkide teemasid. Kuid see teeb seda, pakkudes WordPressi kasutajaliideses juhtelemente, mis võimaldavad teil luua terve teema, alamteema või teemastiili variatsiooni ilma koodi kirjutamata või mallifaile puudutamata.

Olen proovinud! Ja kuna Loo Block Theme on autoriks ja haldajaks on WordPress.org meeskond, ma ütleksin, et see on meie parim suund Google'i fontide teemasse integreerimiseks. Sellegipoolest väärib kindlasti märkimist, et pistikprogramm on aktiivses arenduses. See tähendab, et asjad võivad üsna kiiresti muutuda.

Enne kui jõuan selleni, kuidas see kõik töötab, värskendagem end esmalt põgusalt "traditsioonilise" protsessiga Google'i fontide lisamiseks klassikalistele WordPressi teemadele.

Kuidas seda vanasti tehti

See ThemeShaperi artikkel aastast 2014 on suurepärane näide selle kohta, kuidas me seda klassikaliste PHP teemade puhul tegime see Ibad Ur Rehmani uuem Cloudwaysi artikkel.

Mälu värskendamiseks on siin näide vaikeseadest Teema kakskümmend seitseteist näitab, kuidas Google'i fondid on järjekorda pandud functions.php faili.

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

Seejärel on Google Fonts teemaga eelühendatud järgmiselt:

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

Mis traditsioonilisel viisil viga on

Suurepärane, eks? Siiski on probleem. Jaanuaris 2022 a Saksa piirkonnakohus määras rahatrahvi veebisaidi omanikule Euroopa omade rikkumise eest GDPR nõuded. Küsimus? Google'i fontide järjekorda seadmine saidile paljastas külastaja IP-aadressi, seades ohtu kasutaja privaatsuse. CSS-Tricks käsitles seda mõnda aega tagasi.

. Loo ploki teema pistikprogramm vastab GDPR-i privaatsusnõuetele, kuna see kasutab Google Fonts API-t, et toimida ainult kohaliku müüja puhverserverina. Fonte edastatakse kasutajale samal veebisaidil, mitte Google'i serverites, kaitstes privaatsust. WP kõrts käsitleb Saksamaa kohtuotsust ja sisaldab linke Google Fontsi isehostimise juhenditele.

Kuidas kasutada Google'i fonte blokeeritavate teemadega

See toob meid tänapäevase "moodsa" viisini kasutada Google'i fonte WordPressi plokiteemadega. Kõigepealt paneme üles kohaliku testimiskoha. Ma kasutan hooratast kohalik rakendus kohalikuks arenguks. Võite kasutada seda või mida iganes soovite, seejärel kasutage Teema Testiandmete pistikprogramm WordPressi teemade meeskond, et töötada näiva sisuga. Ja loomulikult tahad sa Loo ploki teema plugin ka seal.

Kas olete need pistikprogrammid installinud ja aktiveerinud? Kui jah, navigeerige saidile Välimus → Teema fontide haldamine WordPressi administraatori menüüst.

Ekraanil „Halda teemafonte” kuvatakse kõigi teemas juba määratletud fontide loend theme.json faili. Ekraani ülaosas on ka kaks valikut.

• Lisage Google'i fonte. See valik lisab Google Fonts otse teemale Google fontide API-st.
• Lisage kohalikke fonte. See suvand lisab allalaaditud fondifailid teemale.

Kasutan WordPressi täiesti tühja teemat nimega Tühi teema. Olete teretulnud oma teemaga edasi kerima, kuid tahtsin öelda, et olen nimetanud Emptytheme'i ümber "TÜHJAKS" ja muutnud seda, nii et eelmääratletud fonte ja stiile pole üldse.

Mõtlesin, et jagan ekraanipilti oma teema failistruktuurist ja theme.json faili, mis näitab, et seal pole sõna otseses mõttes ühtegi laadi ega konfiguratsiooni.

Klõpsame nuppu "Lisa Google'i fonte". See viib meid uuele lehele, kus on valikud, mis võimaldavad valida olemasoleva fondi hulgast Google Fonts API.

Selle demo jaoks valisin Inter valikute menüüst ja valisite eelvaateekraanilt kaalud 300, Tavaline ja 900:

Kui olen oma valikud salvestanud, laaditakse valitud Inter fonti stiilid automaatselt alla ja salvestatakse teema assets/fonts kausta:

Pange tähele ka seda, kuidas need valikud on automaatselt kirjutatud theme.json faili sellel ekraanipildil. Plokkiteema loomise pistikprogramm lisab isegi fondifailide tee.

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

Kui läheme Loo ploki teema põhiekraanile ja klõpsame nuppu Teema fontide haldamine nuppu uuesti, näeme eelvaatepaneelil Interi 300, 400 (tavaline) ja 900 kaaluvariante.

A demo teksti eelvaate kast ülaosas võimaldab isegi fondi suuruse valiku liuguriga vaadata valitud fonte lauses, päises ja lõigus. Saate vaadata seda uut funktsiooni töös see GitHubi video.

Valitud font(id) on saadaval ka saidiredaktoris Globaalne stiil (Välimus → toimetaja), täpsemalt paneelil Disain.

Siit navigeerige aadressile Mallid → indeks ja klõpsake sinist Edit nuppu, et redigeerida index.html malli. Tahame avada Globaalne stiil seaded, mis on kujutatud kontrasti ikoonina, mis asub ekraani paremas ülanurgas. Kui klõpsame nuppu Tekst seaded ja avage Font menüüs Tüpograafia jaotis… me näeme Interi!

Sama asi, kuid kohalike fontidega

Sama hästi võime vaadata teemale kohalike fontide lisamist, kuna Plokkiteema loomise pistikprogramm pakub seda võimalust. Selle eeliseks on see, et saate kasutada mis tahes soovitud fondifaili mis tahes eelistatud fonditeenusest.

Ilma pistikprogrammita peaksime haarama oma fondifailid, viskama need kuhugi teemakausta ja seejärel kasutama traditsioonilist PHP-teekonda nende järjekorda seadmiseks functions.php faili. Kuid saame lasta WordPressil selle koormuse enda kanda võtta, laadides fondifaili üles Lisage kohalikke fonte ekraan, kasutades liidest Loo plokiteema. Kui fail on üleslaadimiseks valitud, täidetakse fondi näo määratluste lahtrid automaatselt.

Isegi kui me saame kasutada mis tahes .ttf, .woffvõi .woff2 faili, laadisin lihtsalt alla Avage Sansi fondifailid teenusest Google Fonts selle harjutuse jaoks. Kahmasin kaks kaaluvarianti, tavalise ja 800.

Sama automaatne maagiline failihaldus ja theme.json Värskendus, mida nägime valiku Google Fonts puhul, juhtub veel kord, kui laadime üles fondifailid (mida tehakse ükshaaval). Vaadake, kuhu fondid minu teemakausta sattusid ja kuidas neid lisatakse theme.json:

Fontide eemaldamine

Samuti võimaldab pistikprogramm meil WordPressi administraatorilt eemaldada fondifailid plokiteemalt. Kustutame ühe viimases jaotises installitud Open Sansi variantidest, et näha, kuidas see töötab.

Klõpsates nupul eemalda lingid käivitab hoiatuse kustutamise kinnitamiseks. Me klõpsame OK jätkama.

Avame oma teemakausta ja kontrollime theme.json faili. Muidugi eemaldas Open Sans 800 fail, mille me pistikprogrammide ekraanilt kustutasime, teemakaustast fondifaili ja viide sellele on juba ammu kadunud. theme.json.

Käimas on töö

Räägitakse selle "Fontihalduri" funktsiooni lisamisest WordPress Core'i selle asemel, et vajada eraldi pistikprogrammi.

Funktsiooni esialgne iteratsioon on saadaval repos, ja see kasutab täpselt sama lähenemisviisi, mida kasutasime selles artiklis. See peaks olema GDPR-iga ühilduv, ka. Funktsioon on plaanitakse maanduda WordPress 6.3-ga vabastatakse hiljem sel aastal.

Pakke kuni

Plokiteema loomise pistikprogramm täiustab oluliselt kasutajakogemust WordPressi plokiteemades fontide haldamisel. Pistikprogramm võimaldab meil lisada või kustutada mis tahes fonte, järgides samal ajal GDPR-i nõudeid.

Nägime, kuidas Google'i fondi valimine või kohaliku fondifaili üleslaadimine asetab fondi automaatselt teemakausta ja registreerib selle theme.json faili. Samuti nägime, kuidas font on saidiredaktori globaalsete stiilide sätetes saadaval. Ja kui me peame fondi eemaldama? Pistikprogramm hoolitseb ka selle eest täielikult – teemafaile või koodi puudutamata.

Täname lugemise eest! Kui teil on kommentaare või ettepanekuid, jagage neid kommentaarides. Tahaksin teada, mida arvate sellest võimalikust fondihalduse suunast WordPressis.

Lisaressursid

Toetusin selle artikli kirjutamisel paljudele uuringutele ja mõtlesin, et jagan artikleid ja ressursse, mida kasutasin teile täiendava konteksti pakkumiseks.

WordPressi fondihaldus

GitHubi probleemid

Euroopa GDPR-i nõuded

• SEO-põhise sisu ja PR-levi. Võimenduge juba täna.
• Platoblockchain. Web3 metaversiooni intelligentsus. Täiustatud teadmised. Juurdepääs siia.
• Allikas: https://css-tricks.com/managing-fonts-in-wordpress-block-themes/