Gestionarea fonturilor în temele bloc WordPress

Fonturile sunt o caracteristică definitorie a designului oricărui site. Aceasta include teme WordPress, unde este obișnuit ca dezvoltatorii de teme să integreze un serviciu ca Google fonturi în setările WordPress Customizer pentru o temă „clasică” bazată pe PHP. Acesta nu a fost chiar cazul temelor de blocare WordPress. Deși integrarea fonturilor Google în temele clasice este bine documentată, în prezent nu este nimic disponibil pentru temele blocate în Manual de teme WordPress.

La asta ne vom uita în acest articol. Temele bloc pot utiliza într-adevăr Fonturi Google, dar procesul de înregistrare a acestora este mult diferit de ceea ce ați fi făcut înainte în temele clasice.

Ceea ce știm deja

Așa cum am spus, nu avem prea multe de mers până la început. Tema Twenty Twenty-Two este prima temă WordPress implicită bazată pe blocuri și demonstrează cum putem folosi fișierele de font descărcate ca active în temă. Dar este destul de greu de manevrat, deoarece implică câțiva pași: (1) înregistrați fișierele în functions.php fişier și (2) definiți fonturile grupate în theme.json fişier.

De când a fost lansat Twenty Twenty-Two, procesul a devenit mai simplu. Fonturile grupate pot fi acum definite fără a le înregistra, așa cum se arată în Tema Douăzeci și douăzeci și trei. Cu toate acestea, procesul încă necesită să descarcăm manual fișierele cu fonturi și să le grupăm în teme. Acesta este un obstacol care anulează oarecum scopul fonturilor simple, drop-in, găzduite, care sunt difuzate pe un CDN rapid.

Ce mai e nou

Dacă nu știați deja, Proiectul Gutenberg este un plugin experimental în care funcțiile dezvoltate pentru WordPress Block și Site Editor sunt disponibile pentru utilizare și testare timpurie. Într-un recent Articolul Theme Shaper, arhitect principal al proiectului Gutenberg Matias Ventura discută despre modul în care fonturile Google – sau orice alte fonturi descărcate, de altfel – pot fi adăugate pentru a bloca teme folosind Creați temă bloc plugin.

Acest scurt videoclip la Learn WordPress oferă o imagine de ansamblu bună a pluginului Creare temă bloc și a modului în care funcționează. Dar concluzia este că face ceea ce scrie pe cutie: creează teme de bloc. Dar o face prin furnizarea de controale în interfața de utilizare WordPress care vă permit să creați o temă întreagă, o temă copil sau o variație de stil de temă fără a scrie niciun cod sau a fi nevoie vreodată să atingeți fișierele șablon.

Am încercat! Și din moment ce Create Block Theme este creat și întreținut de WordPress.org echipa, aș spune că este cea mai bună direcție pe care o avem pentru a integra Google Fonts într-o temă. Acestea fiind spuse, este cu siguranță demn de remarcat faptul că pluginul este în dezvoltare activă. Asta înseamnă că lucrurile s-ar putea schimba destul de repede.

Înainte de a ajunge la modul în care funcționează totul, mai întâi să ne reîmprospătăm pe scurt cu procesul „tradițional” de adăugare a fonturilor Google la temele WordPress clasice.

Cum se facea înainte

Acest articol ThemeShaper din 2014 oferă un exemplu excelent al modului în care obișnuiam să facem acest lucru în temele PHP clasice, așa cum este acest articol mai nou Cloudways de Ibad Ur Rehman.

Pentru a ne reîmprospăta memoria, iată un exemplu din implicit Tema Douăzeci și șaptesprezece care arată modul în care fonturile Google sunt puse în coadă în functions.php fișier.

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

Apoi Google Fonts este preconectat la tema astfel:

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

Ce este în neregulă cu modul tradițional

Grozav, nu? Există totuși o problemă. În ianuarie 2022, a Tribunalul regional german a aplicat o amendă pe proprietarul unui site web pentru încălcarea normelor europene Cerințele GDPR. Problema? Punerea în coadă a fonturilor Google pe site a expus adresa IP a unui vizitator, punând în pericol confidențialitatea utilizatorului. CSS-Tricks a acoperit acest lucru cu ceva timp în urmă.

Creați temă bloc pluginul îndeplinește cerințele de confidențialitate GDPR, deoarece folosește API-ul Google Fonts pentru a servi exclusiv ca proxy pentru furnizorul local. Fonturile sunt oferite utilizatorului pe același site web, mai degrabă decât pe serverele Google, protejând confidențialitatea. Taverna WP discută decizia instanței germane și include linkuri către ghiduri pentru auto-găzduirea fonturilor Google.

Cum să utilizați fonturile Google cu teme de bloc

Acest lucru ne aduce la modul „modern” de azi de a folosi fonturile Google cu teme de bloc WordPress. Mai întâi, să creăm un site de testare local. Eu folosesc Flywheel's Local aplicație pentru dezvoltare locală. Puteți folosi asta sau orice doriți, apoi utilizați Plugin de date de testare a temei de către echipa de teme WordPress pentru a lucra cu conținut fals. Și, desigur, vei dori Creați temă bloc plugin și acolo.

Ați instalat și activat acele plugin-uri? Dacă da, navigați la Aspect → Gestionați fonturile temei din meniul de administrare WordPress.

Ecranul „Gestionați fonturile temei” afișează o listă cu orice fonturi deja definite în temei theme.json fişier. Există, de asemenea, două opțiuni în partea de sus a ecranului:

• Adăugați fonturi Google. Această opțiune adaugă Google Fonts direct la tema din API-ul Google Fonts.
• Adăugați fonturi locale. Această opțiune adaugă fișierele de font descărcate la temă.

Folosesc o temă complet goală de la WordPress numită Temă goală. Sunteți binevenit să treceți cu propria dvs. temă, dar am vrut să vă spun că am redenumit Emptytheme în „GOLĂ-GOL” și l-am modificat, deci nu există fonturi și stiluri predefinite.

M-am gândit să partajez o captură de ecran a structurii de fișiere a temei mele și theme.json fișier pentru a arăta că literalmente nu există stiluri sau configurații.

Să facem clic pe butonul „Adăugați fonturi Google”. Ne duce la o nouă pagină cu opțiuni de a alege orice font disponibil din actualul Google Fonts API.

Pentru acest demo, am selectat Inter din meniul de opțiuni și selectați greutățile 300, Normal și 900 din ecranul de previzualizare:

După ce mi-am salvat selecțiile, stilurile de font Inter pe care le-am selectat sunt descărcate automat și stocate în temei. assets/fonts pliant:

Observați, de asemenea, cum acele selecții au fost scrise automat în theme.json fișierul din acea captură de ecran. Pluginul Create Block Theme adaugă chiar și calea fișierelor cu fonturi.

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

Dacă mergem la ecranul principal al Creare temă bloc și facem clic pe Gestionați fonturile temei butonul din nou, vom vedea variantele de greutate 300, 400 (regular) și 900 ale lui Inter afișate în panoul de previzualizare.

A caseta de previzualizare a textului demonstrativ în partea de sus vă permite chiar să previzualizați fonturile selectate în propoziție, antet și paragraf cu glisorul de selectare a mărimii fontului. Puteți verifica această nouă funcție în acțiune în acest videoclip GitHub.

Fonturile selectate sunt disponibile și în Editorul site-ului Stiluri globale (Aspect → Editor), în special în panoul Design.

De aici, navigați la Șabloane → index și faceți clic pe albastru Editati butonul pentru a edita index.html șablon. Vrem să deschidem Stiluri globale setări, care sunt reprezentate ca o pictogramă de contrast situată în partea din dreapta sus a ecranului. Când facem clic pe Text setări și deschideți Font meniul din Tipografie secțiunea... vedem Inter!

Același lucru, dar cu fonturi locale

La fel de bine ne putem uita la adăugarea fonturilor locale la o temă, deoarece pluginul Creare temă bloc oferă această opțiune. Avantajul este că puteți utiliza orice fișier de font doriți de la orice serviciu de fonturi doriți.

Fără plugin, ar trebui să luăm fișierele cu fonturi, să le aruncăm undeva în folderul cu teme, apoi să apelăm la ruta tradițională PHP de a le pune în coadă în functions.php fişier. Dar putem lăsa WordPress să poarte această povară pentru noi, încărcând fișierul fontului pe Adăugați fonturi locale ecran folosind interfața Creare temă bloc. Odată ce un fișier este selectat pentru încărcare, casetele de definiții ale fontului sunt completate automat.

Chiar dacă putem folosi oricare .ttf, .woff, Sau .woff2 fișier, pur și simplu l-am descărcat Deschideți fișierele cu fonturi Sans din Google Fonts pentru acest exercițiu. Am smuls două variații de greutate, obișnuită și 800.

Același management de fișiere auto-magic și theme.json actualizarea pe care am văzut-o cu opțiunea Fonturi Google se întâmplă din nou când încărcăm fișierele cu fonturi (care se fac unul câte unul). Verificați unde au ajuns fonturile în folderul meu cu teme și cum sunt adăugate theme.json:

Eliminarea fonturilor

Plugin-ul ne permite, de asemenea, să eliminăm fișierele cu fonturi dintr-o temă bloc din administratorul WordPress. Să ștergem una dintre variantele Open Sans pe care le-am instalat în ultima secțiune pentru a vedea cum funcționează.

Dacă faceți clic pe Elimină link-uri declanșează un avertisment pentru a confirma ștergerea. Vom face clic OK pentru a continua.

Să deschidem folderul nostru cu teme și să verificăm theme.json fişier. Destul de sigur, fișierul Open Sans 800 pe care l-am șters de pe ecranul pluginului a eliminat fișierul cu fonturi din folderul temei, iar referința la acesta a dispărut de mult theme.json.

Se lucrează în desfășurare

Se vorbește despre adăugarea acestei funcții „Manager de fonturi” la WordPress Core în loc să aibă nevoie de un plugin separat.

O iterație inițială a caracteristicii este disponibil în repo, și folosește exact aceeași abordare pe care am folosit-o în acest articol. Ar trebui să fie GDPR compatibil, de asemenea. Caracteristica este programat să aterizeze cu WordPress 6.3 lansare mai târziu în acest an.

La finalul

Pluginul Create Block Theme îmbunătățește semnificativ experiența utilizatorului atunci când vine vorba de gestionarea fonturilor în temele de bloc WordPress. Pluginul ne permite să adăugăm sau să ștergem orice fonturi respectând cerințele GDPR.

Am văzut cum selectarea unui font Google sau încărcarea unui fișier de font local plasează automat fontul în folderul cu teme și îl înregistrează în theme.json fişier. De asemenea, am văzut cum fontul este o opțiune disponibilă în setările Stilurilor globale din Editorul site-ului. Și dacă trebuie să eliminăm un font? Pluginul are grijă și de asta – fără a atinge fișierele teme sau codul.

Multumesc pentru lectura! Dacă aveți comentarii sau sugestii, împărtășiți-le în comentarii. Mi-ar plăcea să știu ce părere aveți despre această posibilă direcție pentru gestionarea fonturilor în WordPress.

Resurse aditionale

M-am bazat pe o mulțime de cercetări pentru a scrie acest articol și m-am gândit să împărtășesc articolele și resursele pe care le-am folosit pentru a vă oferi un context suplimentar.

Gestionarea fonturilor WordPress

Probleme GitHub

Cerințe europene GDPR

• Distribuție de conținut bazat pe SEO și PR. Amplifică-te astăzi.
• Platoblockchain. Web3 Metaverse Intelligence. Cunoștințe amplificate. Accesați Aici.
• Sursa: https://css-tricks.com/managing-fonts-in-wordpress-block-themes/