Lettertypen zijn een bepalend kenmerk van het ontwerp van elke web site. Dat geldt ook voor WordPress-thema’s, waar het gebruikelijk is dat thema-ontwikkelaars een service zoals Google-lettertypen in de WordPress Customizer-instellingen voor een “klassiek” op PHP gebaseerd thema. Dat is niet helemaal het geval geweest voor WordPress-blokthema’s. Hoewel het integreren van Google Fonts in klassieke thema’s goed gedocumenteerd is, is er momenteel niets beschikbaar voor blokthema’s in de Handboek WordPress Thema’s.
Daar gaan we in dit artikel naar kijken. Blokthema’s kunnen inderdaad Google Fonts gebruiken, maar het proces om ze te registreren is heel anders dan wat je eerder hebt gedaan in klassieke thema’s.
Wat we al weten
Zoals ik al zei, er is weinig voor ons om verder te gaan dan aan de slag te gaan. Het Twenty Twenty-Two-thema is het eerste op blokken gebaseerde standaard WordPress-thema en het laat zien hoe we gedownloade lettertypebestanden kunnen gebruiken als middelen in het thema. Maar het is behoorlijk log omdat het een aantal stappen omvat: (1) registreer de bestanden in de functions.php bestand en (2) definieer de gebundelde lettertypen in de theme.json bestand.
Sinds de launch van Twenty Twenty-Two is het proces echter eenvoudiger geworden. Gebundelde lettertypen kunnen nu worden gedefinieerd zonder ze te registreren, zoals weergegeven in het Twintig Drieëntwintig thema. Het proces vereist echter nog steeds dat we lettertypebestanden handmatig downloaden en bundelen in de thema’s. Dat is een belemmering die het doel van eenvoudige, drop-in, gehoste lettertypen die op een snelle CDN worden aangeboden, verslaat.
Wat is er nieuw
Als je het nog niet wist, de Gutenberg-project is een experimentele plug-in waarbij functies die worden ontwikkeld voor de WordPress Block en Web site Editor beschikbaar zijn voor vroeg gebruik en testen. In een recente Theme Shaper-artikelGutenberg projectleider architect Matias Ventura bespreekt hoe Google Fonts – of welke andere gedownloade lettertypen dan ook – kunnen worden toegevoegd aan blokthema’s met behulp van de Blokthema maken inpluggen.
Deze korte video op Leer WordPress geeft een goed overzicht van de Create Block Theme-plug-in en hoe deze werkt. Maar het komt erop neer dat het doet wat het zegt: het creëert blokthema’s. Maar het doet het door bedieningselementen in de gebruikersinterface van WordPress te bieden waarmee u een volledig thema, een kindthema of een themastijlvariatie kunt maken zonder code te schrijven of ooit sjabloonbestanden aan te raken.
Ik heb het geprobeerd! En aangezien Create Block Theme is geschreven en onderhouden door WordPress.org workforce, zou ik zeggen dat dit de beste richting is die we hebben om Google Fonts in een thema te integreren. Dat gezegd hebbende, is het zeker vermeldenswaard dat de plug-in actief wordt ontwikkeld. Dat betekent dat dingen vrij snel kunnen veranderen.
Voordat ik inga op hoe het allemaal werkt, laten we ons eerst even opfrissen met het “traditionele” proces voor het toevoegen van Google Fonts aan klassieke WordPress-thema’s.
Hoe het vroeger ging
Dit ThemeShaper-artikel uit 2014 geeft een uitstekend voorbeeld van hoe we dit vroeger deden in klassieke PHP-thema’s, zoals het is dit nieuwere Cloudways-artikel van Ibad Ur Rehman.
Om ons geheugen op te frissen, is hier een voorbeeld van de standaard Twintig Zeventien thema laat zien hoe Google-lettertypen in de wachtrij staan features.php bestand.
perform twentyseventeen_fonts_url() {
$fonts_url="";
/**
* Translators: If there are characters in your language that aren't
* supported by Libre Franklin, translate this to 'off'. Don't translate
* into your personal language.
*/
$libre_franklin = _x( 'on', 'libre_franklin font: on or off', 'twentyseventeen' );
if ( 'off' !== $libre_franklin ) ', $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 );
}Dan is Google Fonts als volgt vooraf verbonden met het thema:
perform 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 );Wat is er mis met de traditionele manier
Geweldig, toch? Er is echter een probleem. In januari 2022 is een De Duitse regionale rechtbank legde een boete op op een website-eigenaar wegens het schenden van Europa’s AVG-vereisten. Het probleem? Door Google Fonts op de web site in de wachtrij te zetten, werd het IP-adres van een bezoeker zichtbaar, waardoor de privateness van de gebruiker in gevaar kwam. CSS-Tricks behandelde dit een tijdje geleden.
De Blokthema maken plug-in voldoet aan de AVG-privacyvereisten, omdat het gebruikmaakt van de Google Fonts-API om uitsluitend als proxy voor de lokale leverancier te dienen. De lettertypen worden op dezelfde web site aan de gebruiker aangeboden in plaats van op de servers van Google, waardoor de privateness wordt beschermd. WP taverne bespreekt de uitspraak van de Duitse rechtbank en bevat hyperlinks naar handleidingen voor het zelf hosten van Google Fonts.
Hoe Google Fonts te gebruiken met blokthema’s
Dit brengt ons bij de huidige “moderne” manier om Google Fonts te gebruiken met WordPress-blokthema’s. Laten we eerst een lokale testsite opzetten. Ik gebruik Flywheels Lokaal app voor lokale ontwikkeling. Je kunt dat gebruiken of wat je maar wilt, gebruik dan de Theme Test Data-plug-in door het WordPress Themes Workforce om met dummy-inhoud te werken. En natuurlijk wil je de Blokthema maken plug-in daar ook.
Heb je die plug-ins geïnstalleerd en geactiveerd? Zo ja, navigeer dan naar Verschijning → Themalettertypen beheren vanuit het WordPress admin-menu.
Het scherm “Themalettertypen beheren” geeft een lijst weer van alle lettertypen die al in de thema’s zijn gedefinieerd theme.json bestand. Er zijn ook twee opties bovenaan het scherm:
- Voeg Google-lettertypen toe. Deze optie voegt Google Fonts rechtstreeks toe aan het thema vanuit de Google Fonts API.
- Voeg lokale lettertypen toe. Deze optie voegt gedownloade lettertypebestanden toe aan het thema.
Ik gebruik een volledig leeg thema van WordPress genaamd Leeg thema. Je bent van harte welkom om mee te gaan met je eigen thema, maar ik wilde erop wijzen dat ik Emptytheme heb hernoemd naar “EMPTY-BLANK” en het heb aangepast, dus er zijn helemaal geen vooraf gedefinieerde lettertypen en stijlen.
Ik dacht dat ik een screenshot zou delen van de bestandsstructuur van mijn thema en theme.json bestand om te laten zien dat er letterlijk geen stijlen of configuraties aan de gang zijn.
theme.json bestand (rechts)Laten we op de knop “Google-lettertypen toevoegen” klikken. Het brengt ons naar een nieuwe pagina met opties om elk beschikbaar lettertype uit het huidige te kiezen Google Fonts-API.
Voor deze demo heb ik geselecteerd Onder uit het menu met opties en selecteerde de gewichten 300, Normaal en 900 in het voorbeeldscherm:
Nadat ik mijn selecties heb opgeslagen, worden de Inter-lettertypestijlen die ik heb geselecteerd automatisch gedownload en opgeslagen in de thema’s property/fonts map:
Merk ook op hoe die selecties automatisch naar het theme.json bestand in dat screenshot. De plug-in Create Block Theme voegt zelfs het pad toe aan de lettertypebestanden.
Bekijk het geheel theme.json code
theme.json code {
"model": 2,
"settings": {
"appearanceTools": true,
"structure": {
"contentSize": "840px",
"wideSize": "1100px"
},
"typography": {
"fontFamilies": (
{
"fontFamily": "Inter",
"slug": "inter",
"fontFace": (
{
"fontFamily": "Inter",
"fontStyle": "regular",
"fontWeight": "300",
"src": (
"file:./property/fonts/inter_300.ttf"
)
},
{
"fontFamily": "Inter",
"fontStyle": "regular",
"fontWeight": "900",
"src": (
"file:./property/fonts/inter_900.ttf"
)
},
{
"fontFamily": "Inter",
"fontStyle": "regular",
"fontWeight": "400",
"src": (
"file:./property/fonts/inter_regular.ttf"
)
}
)
}
)
}
}
}Als we naar het hoofdscherm van Create Block Theme gaan en op de Themalettertypen beheren Als u nogmaals op de knop drukt, zien we Inter’s 300, 400 (normaal) en 900 gewichtsvarianten weergegeven in het voorbeeldvenster.
A voorbeeldvenster voor demotekst bovenaan kunt u zelfs een voorbeeld van de geselecteerde lettertypen in de zin, koptekst en alinea bekijken met de schuifregelaar voor het selecteren van de lettergrootte. Je kunt deze nieuwe functie in actie bekijken in deze GitHub-video.
De geselecteerde font(s) zijn ook beschikbaar in de Web site Editor Wereldwijde stijlen (Verschijning → Editor), met identify in het Design-paneel.
Navigeer vanaf hier naar Sjablonen → Inhoudsopgave en klik op de blauwe Bewerking knop om het te bewerken index.html sjabloon. We willen de Wereldwijde stijlen instellingen, die worden weergegeven als een contrastpictogram in de rechterbovenhoek van het scherm. Als we op de Tekst instellingen en open de Lettertype menukaart in de Typografie sectie… we zien Inter!
Hetzelfde, maar met lokale lettertypen
We kunnen web zo goed kijken naar het toevoegen van lokale lettertypen aan een thema, aangezien de plug-in Create Block Theme die optie biedt. Het voordeel is dat u elk gewenst lettertypebestand kunt gebruiken van elke gewenste lettertypeservice.
Zonder de plug-in zouden we onze lettertypebestanden moeten pakken, ze ergens in de themamap moeten neerzetten en dan onze toevlucht moeten nemen tot de traditionele PHP-route om ze in de wachtrij te plaatsen features.php bestand. Maar we kunnen WordPress die final voor ons laten dragen door het lettertypebestand te uploaden naar de Voeg lokale lettertypen toe scherm met behulp van de Create Block Theme-interface. Zodra een bestand is geselecteerd om te uploaden, worden de vakjes voor lettertypedefinities automatisch ingevuld.
Ook al kunnen we ze allemaal gebruiken .ttf, .woffof .woff2 bestand, ik heb het gewoon gedownload Open Sans-lettertypebestanden van Google Fonts voor deze oefening. Ik pakte twee gewichtsvariaties, normaal en 800.
Hetzelfde automatisch magische bestandsbeheer en theme.json replace die we zagen met de Google Fonts-optie gebeurt opnieuw wanneer we de lettertypebestanden uploaden (die een voor een worden gedaan). Bekijk waar de lettertypen in mijn themamap terecht zijn gekomen en hoe ze zijn toegevoegd theme.json:
Lettertypen verwijderen
Met de plug-in kunnen we ook lettertypebestanden verwijderen uit een blokthema van de WordPress-beheerder. Laten we een van de Open Sans-varianten verwijderen die we in de laatste sectie hebben geïnstalleerd om te zien hoe dat werkt.
Klikken op de Verwijderen hyperlinks activeert een waarschuwing voor u om de verwijdering te bevestigen. We zullen klikken OK doorgaan.
Laten we onze themamap openen en de theme.json bestand. Zeker, het Open Sans 800-bestand dat we op het plug-inscherm hebben verwijderd, heeft het lettertypebestand uit de themamap verwijderd en de verwijzing ernaar is allang verdwenen theme.json.
Er wordt voortdurend gewerkt
Er wordt gesproken over het toevoegen van deze “Font Manager”-functie aan WordPress Core in plaats van een aparte plug-in nodig te hebben.
Een eerste iteratie van de functie is beschikbaar in de repository, en het gebruikt precise dezelfde aanpak die we in dit artikel hebben gebruikt. Het zou moeten zijn AVG-conform, te. De functie is gepland om te landen met WordPress 6.3 launch later dit jaar.
Afsluiten
De Create Block Theme-plug-in verbetert de gebruikerservaring aanzienlijk als het gaat om het omgaan met lettertypen in WordPress-blokthema’s. Met de plug-in kunnen we lettertypen toevoegen of verwijderen met inachtneming van de AVG-vereisten.
We zagen hoe het selecteren van een Google-lettertype of het uploaden van een lokaal lettertypebestand het lettertype automatisch in de themamap plaatst en registreert in de theme.json bestand. We hebben ook gezien hoe het lettertype een beschikbare optie is in de World Kinds-instellingen in de Web site-editor. En als we een lettertype moeten verwijderen? De plug-in zorgt daar ook volledig voor – zonder themabestanden of code aan te raken.
Bedankt voor het lezen! Als u opmerkingen of suggesties heeft, deel deze dan in de opmerkingen. Ik zou graag willen weten wat u vindt van deze mogelijke richting voor lettertypebeheer in WordPress.
Aanvullende middelen
Ik vertrouwde op veel onderzoek om dit artikel te schrijven en dacht dat ik de artikelen en bronnen die ik gebruikte zou delen om u additional context te geven.
