Betűtípusok kezelése a WordPress blokktémákban

A betűtípusok minden webhely kialakításának meghatározó jellemzői. Ez magában foglalja a WordPress témákat is, ahol a témafejlesztőknél gyakori, hogy integrálnak egy-egy szolgáltatást Google Fonts a WordPress testreszabási beállításaiba egy „klasszikus” PHP-alapú témához. Ez nem egészen így volt a WordPress blokkotémák esetében. Bár a Google Fonts integrálása a klasszikus témákba jól dokumentált, jelenleg semmi sem érhető el a blokkotémákhoz a WordPress téma kézikönyv.

Ebben a cikkben ezt fogjuk megvizsgálni. A blokkolt témák valóban használhatják a Google Fonts szolgáltatást, de a regisztrációjuk folyamata merőben eltér attól, amit korábban a klasszikus témáknál csinált.

Amit már tudunk

Amint mondtam, nem sok van ahhoz, hogy továbbjussunk az indulásig. A Twenty Twenty-Two téma az első blokk alapú alapértelmezett WordPress téma, és bemutatja, hogyan használhatjuk a letöltött betűkészlet fájlokat a témában eszközként. De ez elég nehézkes, mert néhány lépésből áll: (1) regisztrálja a fájlokat a functions.php filé és (2) határozza meg a kötegelt fontokat a theme.json filé.

A Twenty TwentyTwo megjelenése óta azonban a folyamat egyszerűbbé vált. A kötegelt betűtípusok mostantól regisztráció nélkül is definiálhatók, amint az a Twenty-Twenty-Three téma. A folyamat azonban továbbra is megköveteli, hogy manuálisan töltsük le a betűtípusfájlokat, és csomagoljuk őket a témákba. Ez egy olyan akadály, amely meghiúsítja az egyszerű, beugró, hosztolt betűtípusok célját, amelyeket egy gyors CDN-en szolgálnak ki.

Mi újság

Ha még nem tudta, akkor a Gutenberg projekt egy kísérleti bővítmény, ahol a WordPress Block és Site Editor számára fejlesztés alatt álló funkciók elérhetőek korai használatra és tesztelésre. Egy nemrégiben Témaformáló cikk, Gutenberg projekt vezető építésze Matias Ventura megvitatja, hogy a Google Fonts – vagy bármely más letöltött betűtípus – hogyan adható hozzá a témák blokkolásához a Blokktéma létrehozása plugin.

Ez a rövid videó a WordPress tanulásában jó áttekintést nyújt a Blokktéma létrehozása bővítményről és működéséről. De a lényeg az, hogy azt csinálja, amit a konténeren ír: blokktémákat hoz létre. De ezt úgy teszi, hogy olyan vezérlőket biztosít a WordPress felhasználói felületén, amelyek lehetővé teszik egy teljes téma, gyermektéma vagy témastílus-variáció létrehozását anélkül, hogy kódot írnának, vagy meg kellene érintenie a sablonfájlokat.

Kipróbáltam! És mivel a Blokktéma létrehozása az szerzője és karbantartója a WordPress.org csapattal, azt mondanám, hogy ez a legjobb irány a Google Fonts témába való integrálására. Ennek ellenére mindenképpen érdemes megjegyezni, hogy a bővítmény aktív fejlesztés alatt áll. Ez azt jelenti, hogy a dolgok elég gyorsan változhatnak.

Mielőtt rátérnék, hogyan működik mindez, először röviden frissítsük fel magunkat a „hagyományos” eljárással, amellyel a Google Fonts-t adjuk hozzá a klasszikus WordPress-témákhoz.

Hogyan szokták csinálni

Ez a ThemeShaper cikk 2014-ből kiváló példája annak, hogyan csináltuk ezt a klasszikus PHP-témákban ez az újabb Cloudways cikk Ibad Ur Rehmantól.

A memóriánk felfrissítésére álljon itt egy példa az alapértelmezettből Twenty Seventeen téma bemutatja, hogy a Google betűtípusok hogyan kerülnek sorba a functions.php fájlt.

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

Ezután a Google Fonts előre kapcsolódik a témához, így:

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

Mi a baj a hagyományos módszerrel

Remek, igaz? Van azonban egy hiba. 2022 januárjában a A német regionális bíróság pénzbírságot szabott ki egy webhely tulajdonosának, mert megsértette az európai jogot GDPR követelmények. A kérdés? A Google Fonts-sorba állítása az oldalon felfedte a látogató IP-címét, ami veszélyezteti a felhasználók adatait. A CSS-Tricks foglalkozott ezzel egy ideje.

A Blokktéma létrehozása A beépülő modul megfelel a GDPR adatvédelmi követelményeinek, mivel a Google Fonts API-t kihasználva kizárólag a helyi szállító proxyjaként szolgál. A betűtípusokat a felhasználó ugyanazon a webhelyen jeleníti meg, nem pedig a Google szerverein, ezzel védve a magánéletet. WP taverna tárgyalja a német bírósági ítéletet, és hivatkozásokat tartalmaz a Google Fonts önálló tárolására szolgáló útmutatókhoz.

A Google Fonts használata blokktémákkal

Ezzel elérkeztünk a Google Fonts és a WordPress blokktémák használatának mai „modern” módjához. Először is hozzunk létre egy helyi teszthelyet. Én lendkereket használok helyi alkalmazás a helyi fejlesztéshez. Használhatja azt, vagy bármit, amit szeretne, majd használja a Theme Test Data plugin a WordPress Themes Team által, hogy áltartalommal dolgozhasson. És természetesen akarni fogja a Blokktéma létrehozása plugin ott is.

Telepítetted és aktiváltad ezeket a bővítményeket? Ha igen, navigáljon ide megjelenés → Téma betűtípusok kezelése a WordPress adminisztrációs menüjéből.

A „Téma betűtípusok kezelése” képernyő megjeleníti a témában már definiált betűtípusok listáját theme.json fájlt. Két lehetőség is van a képernyő tetején:

• Google betűtípusok hozzáadása. Ezzel az opcióval a Google Fonts közvetlenül hozzáadható a témához a Google Fonts API-ból.
• Helyi betűtípusok hozzáadása. Ez az opció hozzáadja a letöltött betűtípusfájlokat a témához.

A WordPress egy teljesen üres témáját használom Üres téma. Szívesen görgetheti a saját témáját, de fel akartam hívni, hogy az Emptytheme-et átneveztem „ÜRES ÜRES”-re, és módosítottam, így egyáltalán nincsenek előre meghatározott betűtípusok és stílusok.

Gondoltam megosztok egy képernyőképet a témám fájlszerkezetéről és theme.json fájlt, amely megmutatja, hogy szó szerint nincsenek stílusok vagy konfigurációk.

Kattintson a „Google Fonts hozzáadása” gombra. Ez egy új oldalra visz minket, ahol a meglévő betűtípusok közül választhatunk Google Fonts API.

Ehhez a demóhoz választottam Inter az opciók menüjéből, és az előnézeti képernyőn kiválasztotta a 300-as, a Normál és a 900-as súlyokat:

Miután elmentettem a kijelöléseimet, az általam kiválasztott Inter betűstílusok automatikusan letöltődnek és eltárolódnak a téma assets/fonts mappa:

Figyelje meg azt is, hogy ezek a kijelölések hogyan lettek automatikusan beírva a theme.json fájlt azon a képernyőképen. A Blokktéma létrehozása bővítmény még az elérési utat is hozzáadja a betűtípusfájlokhoz.

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

Ha a Blokktéma létrehozása főképernyőjére lépünk, és rákattintunk a Téma betűtípusok kezelése gombot, az Inter 300-as, 400-as (normál) és 900-as súlyváltozatait fogjuk látni az előnézeti panelen.

A bemutató szöveg előnézeti mezőbe a tetején még a kiválasztott betűtípusok előnézetét is megtekintheti a mondatban, a fejlécben és a bekezdésben a betűméret-választó csúszkával. Megtekintheti ezt az új funkciót működés közben ezt a GitHub-videót.

A kiválasztott betűtípus(ok) a Webhelyszerkesztőben is elérhető(k). Globális stílusok (megjelenés → szerkesztő), különösen a Tervező panelen.

Innen navigáljon ide sablonok → index és kattintson a kékre szerkesztése gombot a szerkesztéséhez index.html sablon. Meg akarjuk nyitni a Globális stílusok beállításokat, amelyek kontraszt ikonként jelennek meg a képernyő jobb felső sarkában. Amikor rákattintunk a szöveg beállításokat, és nyissa meg a betűtípus menü a Tipográfia szakasz… látjuk az Intert!

Ugyanaz, csak helyi betűtípusokkal

Megvizsgálhatjuk helyi betűtípusok hozzáadását egy témához, mivel a Blokktéma létrehozása bővítmény ezt a lehetőséget biztosítja. Ennek az az előnye, hogy bármilyen betűtípus-fájlt használhat bármilyen betűtípus-szolgáltatásból, amelyet szeretne.

A beépülő modul nélkül meg kell ragadnunk a betűkészlet-fájljainkat, el kell dobnunk őket valahova a téma mappájába, majd a hagyományos PHP-útvonalat kell használniuk, és sorba kell helyeznünk őket a functions.php fájlt. De hagyhatjuk, hogy a WordPress viselje ezt a terhet, ha feltölti a fontfájlt a Helyi betűtípusok hozzáadása képernyőt a Blokktéma létrehozása felület segítségével. Miután kiválasztotta a feltöltendő fájlt, a betűtípus-meghatározási mezők automatikusan kitöltődnek.

Bár bármelyiket használhatjuk .ttf, .woffvagy .woff2 fájlt, egyszerűen letöltöttem Nyissa meg a Sans font fájlokat a Google Fontsból ehhez a gyakorlathoz. Két súlyváltozatot ragadtam ki, a normál és a 800-ast.

Ugyanaz az automatikus mágikus fájlkezelés és theme.json A Google Fonts opciónál látott frissítés ismét megtörténik, amikor feltöltjük a betűtípusfájlokat (amit egyenként hajtunk végre). Nézze meg, hová kerültek a betűtípusok a témamappámban, és hogyan lettek hozzáadva theme.json:

Betűtípusok eltávolítása

A beépülő modul azt is lehetővé teszi, hogy a WordPress adminisztrátorától eltávolítsuk a betűtípusfájlokat egy blokktémából. Töröljük az egyik Open Sans változatot, amelyet az utolsó részben telepítettünk, hogy megnézzük, hogyan működik.

Kattintson a eltávolít linkek figyelmeztetést küldenek a törlés megerősítésére. Majd kattintunk OK hogy folytassa.

Nyissuk meg a téma mappát, és ellenőrizzük a theme.json fájlt. Valóban, az Open Sans 800 fájl, amelyet a beépülő modul képernyőjén töröltünk, eltávolította a font fájlt a téma mappából, és a hivatkozás már régen eltűnt. theme.json.

Folyamatos munka folyik

Beszélgetések folynak a „Font Manager” funkciónak a WordPress Core-hoz való hozzáadásáról ahelyett, hogy külön bővítményre lenne szüksége.

A szolgáltatás kezdeti iterációja elérhető a repóban, és pontosan ugyanazt a megközelítést használja, mint ebben a cikkben. Kellene lennie GDPR-kompatibilis, is. A funkció az a tervek szerint a WordPress 6.3 megjelenése még ebben az évben.

Csomagolta

A Create Block Theme beépülő modul jelentősen javítja a felhasználói élményt a WordPress blokktémák betűtípusainak kezelésében. A beépülő modul segítségével bármilyen betűtípust hozzáadhatunk vagy törölhetünk a GDPR-követelmények tiszteletben tartása mellett.

Láttuk, hogy egy Google betűtípus kiválasztása vagy egy helyi betűtípusfájl feltöltése hogyan helyezi el automatikusan a betűtípust a téma mappájába, és regisztrálja a theme.json fájlt. Azt is láttuk, hogy a font elérhető opció a Webhelyszerkesztő Globális stílusok beállításaiban. És ha el kell távolítanunk egy betűtípust? A beépülő modul erről is gondoskodik – anélkül, hogy hozzáérne a témafájlokhoz vagy a kódhoz.

Köszönöm, hogy elolvasta! Ha bármilyen észrevétele vagy javaslata van, ossza meg őket a megjegyzésekben. Szeretném tudni, mi a véleménye a WordPress betűtípus-kezelésének lehetséges irányáról.

További források

Sok kutatásra támaszkodtam ennek a cikknek a megírásakor, és úgy gondoltam, megosztom azokat a cikkeket és forrásokat, amelyeket felhasználtam, hogy további kontextust biztosítsak Önnek.

WordPress betűkészlet-kezelés

GitHub problémák

Európai GDPR követelmények

• SEO által támogatott tartalom és PR terjesztés. Erősödjön még ma.
• Platoblockchain. Web3 metaverzum intelligencia. Felerősített tudás. Hozzáférés itt.
• Forrás: https://css-tricks.com/managing-fonts-in-wordpress-block-themes/