Lettertypen beheren in WordPress-blokthema's

Lettertypen zijn een bepalend kenmerk van het ontwerp van elke site. Dat geldt ook voor WordPress-thema's, waar het gebruikelijk is dat thema-ontwikkelaars een service zoals Google Fonts 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 filet en (2) definieer de gebundelde lettertypen in de theme.json filet.

Sinds de release van Twenty Twenty-Two is het proces echter eenvoudiger geworden. Gebundelde lettertypen kunnen nu worden gedefinieerd zonder ze te registreren, zoals weergegeven in het Twenty Twenty-Three 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 Site Editor beschikbaar zijn voor vroeg gebruik en testen. In een recente Thema Shaper artikel, Gutenberg 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 plugin.

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 team, 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 functions.php bestand.

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

Dan is Google Fonts als volgt vooraf verbonden met het thema:

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

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 GDPR-vereisten. Het probleem? Door Google Fonts op de site in de wachtrij te zetten, werd het IP-adres van een bezoeker zichtbaar, waardoor de privacy 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 website aan de gebruiker aangeboden in plaats van op de servers van Google, waardoor de privacy wordt beschermd. WP Tavern bespreekt de uitspraak van de Duitse rechtbank en bevat links 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 Lokale 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 Team 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 het Uiterlijk → 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.

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 Kopen Google Reviews Fonts-API.

Voor deze demo heb ik geselecteerd Inter 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 assets/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.

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

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 Site Editor globale stijlen (het Uiterlijk → editor), met name in het Design-paneel.

Navigeer vanaf hier naar Sjablonen → Index en klik op de blauwe Edit knop om het te bewerken index.html sjabloon. We willen de globale stijlen instellingen, die worden weergegeven als een contrastpictogram in de rechterbovenhoek van het scherm. Als we op de Tekst instellingen en open de doopvont menu in het Typografie sectie… we zien Inter!

Hetzelfde, maar met lokale lettertypen

We kunnen net 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 functions.php bestand. Maar we kunnen WordPress die last 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 update 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.

Als u op de verwijderen links activeert een waarschuwing voor u om de verwijdering te bevestigen. We zullen klikken OK te gaan.

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 exact dezelfde aanpak die we in dit artikel hebben gebruikt. Het zou moeten zijn GDPR-compatibel, te. De functie is gepland om te landen met WordPress 6.3 release 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 Global Styles-instellingen in de 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.

Extra 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 extra context te geven.

Beheer van WordPress-lettertypen

GitHub-problemen

Europese AVG-vereisten

• Door SEO aangedreven content en PR-distributie. Word vandaag nog versterkt.
• Platoblockchain. Web3 Metaverse Intelligentie. Kennis versterkt. Toegang hier.
• Bron: https://css-tricks.com/managing-fonts-in-wordpress-block-themes/