Verwalten von Schriftarten in WordPress-Blockdesigns

Schriftarten sind ein bestimmendes Merkmal des Designs jeder Website. Dazu gehören WordPress-Themes, bei denen es für Theme-Entwickler üblich ist, einen Dienst wie z Google Fonts in die WordPress Customizer-Einstellungen für ein „klassisches“ PHP-basiertes Theme. Das war bei WordPress-Blockthemen nicht ganz der Fall. Während die Integration von Google Fonts in klassische Designs gut dokumentiert ist, ist derzeit nichts für Blockdesigns im verfügbar WordPress-Theme-Handbuch.

Das werden wir uns in diesem Artikel ansehen. Block-Designs können zwar Google Fonts verwenden, aber der Prozess für deren Registrierung unterscheidet sich erheblich von dem, was Sie zuvor bei klassischen Designs getan haben.

Was wir bereits wissen

Wie gesagt, für den Anfang gibt es wenig, was wir tun könnten. Das Twenty Twenty-Two-Theme ist das erste blockbasierte Standard-WordPress-Theme und zeigt, wie wir heruntergeladene Schriftdateien als Assets im Theme verwenden können. Aber es ist ziemlich unhandlich, weil es ein paar Schritte beinhaltet: (1) Registrieren Sie die Dateien in der functions.php Datei und (2) die gebündelten Schriftarten definieren der theme.json Datei.

Seit der Veröffentlichung von Twenty Twenty-Two ist der Prozess jedoch einfacher geworden. Gebündelte Schriftarten können jetzt definiert werden, ohne sie zu registrieren, wie in gezeigt Twenty Twenty-Three-Thema. Der Prozess erfordert jedoch immer noch, dass wir Schriftdateien manuell herunterladen und sie in die Themen bündeln. Das ist ein Hindernis, das den Zweck von einfachen, gehosteten Drop-in-Schriftarten, die auf einem schnellen CDN bereitgestellt werden, zunichte macht.

Was gibt's Neues

Wenn Sie es noch nicht wussten, die Gutenberg-Projekt ist ein experimentelles Plugin, bei dem Funktionen, die für den WordPress-Block und den Site-Editor entwickelt werden, für die frühe Verwendung und zum Testen verfügbar sind. In einer kürzlichen Theme Shaper-Artikel, leitender Architekt des Gutenberg-Projekts Matthias Ventura erläutert, wie Google-Schriftarten – oder andere heruntergeladene Schriftarten – hinzugefügt werden können, um Themen mithilfe von zu blockieren Blockdesign erstellen plugin.

Diese kurze Video unter WordPress lernen bietet einen guten Überblick über das Plugin „Create Block Theme“ und wie es funktioniert. Aber unter dem Strich tut es, was es verspricht: Es erstellt Blockthemen. Aber es tut es, indem es Steuerelemente in der WordPress-Benutzeroberfläche bereitstellt, mit denen Sie ein ganzes Design, ein untergeordnetes Design oder eine Variation des Designstils erstellen können, ohne Code zu schreiben oder jemals Vorlagendateien berühren zu müssen.

Ich habe es versucht! Und da ist Create Block Theme verfasst und gepflegt von WordPress.org Team würde ich sagen, dass dies die beste Richtung ist, die wir haben, um Google Fonts in ein Design zu integrieren. Es ist jedoch definitiv erwähnenswert, dass sich das Plugin in der aktiven Entwicklung befindet. Das bedeutet, dass sich die Dinge ziemlich schnell ändern können.

Bevor ich dazu komme, wie das alles funktioniert, wollen wir uns zunächst kurz mit dem „traditionellen“ Prozess zum Hinzufügen von Google Fonts zu klassischen WordPress-Themes auffrischen.

Wie es früher gemacht wurde

Dieser ThemeShaper-Artikel von 2014 liefert ein hervorragendes Beispiel dafür, wie wir dies früher in klassischen PHP-Designs gemacht haben, so wie es ist dieser neuere Cloudways-Artikel von Ibad Ur Rehman.

Um unser Gedächtnis aufzufrischen, hier ein Beispiel aus der Voreinstellung Twenty Seventeen-Thema zeigt, wie Google-Schriftarten in die Warteschlange eingereiht werden functions.php Datei.

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

Dann ist Google Fonts wie folgt vorab mit dem Thema verbunden:

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

Was ist falsch an der traditionellen Art und Weise

Großartig, oder? Es gibt jedoch einen Haken. Im Januar 2022, a Das deutsche Landgericht verhängte eine Geldbuße über einen Website-Eigentümer wegen Verstoßes gegen Europa DSGVO-Anforderungen. Das Thema? Durch das Einbinden von Google Fonts auf der Website wird die IP-Adresse eines Besuchers offengelegt, wodurch die Privatsphäre der Benutzer gefährdet wird. CSS-Tricks haben dies vor einiger Zeit behandelt.

Das Blockdesign erstellen Das Plugin erfüllt die Datenschutzanforderungen der DSGVO, da es die Google Fonts-API nutzt, um ausschließlich als Proxy für den lokalen Anbieter zu dienen. Die Schriftarten werden dem Benutzer auf derselben Website und nicht auf den Servern von Google bereitgestellt, um die Privatsphäre zu schützen. WP Tavern diskutiert das deutsche Gerichtsurteil und enthält Links zu Leitfäden für selbst gehostete Google Fonts.

So verwenden Sie Google Fonts mit Blockdesigns

Dies bringt uns zur heutigen „modernen“ Art der Verwendung von Google Fonts mit WordPress-Blockdesigns. Lassen Sie uns zunächst eine lokale Testsite einrichten. Ich benutze die von Flywheel Lokale App für die lokale Entwicklung. Sie können that oder was auch immer Sie bevorzugen, dann verwenden Sie die Theme-Testdaten-Plugin vom WordPress Themes Team, um mit Dummy-Inhalten zu arbeiten. Und natürlich wollen Sie die Blockdesign erstellen Plugin auch da.

Hast du diese Plugins installiert und aktiviert? Wenn ja, navigieren Sie zu Optik → Themenschriftarten verwalten aus dem WordPress-Admin-Menü.

Der Bildschirm „Designschriften verwalten“ zeigt eine Liste aller Schriftarten an, die bereits in den Designs definiert sind theme.json Datei. Es gibt auch zwei Optionen am oberen Rand des Bildschirms:

• Fügen Sie Google-Schriftarten hinzu. Diese Option fügt Google Fonts direkt aus der Google Fonts API zum Design hinzu.
• Fügen Sie lokale Schriftarten hinzu. Diese Option fügt dem Design heruntergeladene Schriftdateien hinzu.

Ich verwende ein völlig leeres Thema von WordPress genannt Leeres Thema. Sie können gerne Ihr eigenes Design mitbringen, aber ich wollte darauf hinweisen, dass ich Emptytheme in „EMPTY-BLANK“ umbenannt und modifiziert habe, sodass es überhaupt keine vordefinierten Schriftarten und Stile gibt.

Ich dachte, ich würde einen Screenshot der Dateistruktur meines Themas teilen und theme.json Datei, um zu zeigen, dass es buchstäblich keine Stile oder Konfigurationen gibt.

Klicken wir auf die Schaltfläche „Google Fonts hinzufügen“. Es führt uns zu einer neuen Seite mit Optionen, um eine verfügbare Schriftart aus der aktuellen auszuwählen Google Fonts-API.

Für diese Demo habe ich ausgewählt Inter aus dem Optionsmenü und wählen Sie die Gewichte 300, Regular und 900 auf dem Vorschaubildschirm aus:

Sobald ich meine Auswahl gespeichert habe, werden die von mir ausgewählten Inter-Schriftstile automatisch heruntergeladen und in den Designs gespeichert assets/fonts Ordner:

Beachten Sie auch, wie diese Auswahlen automatisch in die geschrieben wurden theme.json Datei in diesem Screenshot. Das Create Block Theme-Plugin fügt sogar den Pfad zu den Schriftartdateien hinzu.

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

Wenn wir zum Hauptbildschirm des Blockthemas erstellen gehen und auf klicken Themenschriftarten verwalten erneut drücken, werden die Gewichtsvarianten 300, 400 (Regular) und 900 von Inter im Vorschaubereich angezeigt.

A Demo-Textvorschaufeld oben können Sie mit dem Schieberegler zur Auswahl der Schriftgröße sogar eine Vorschau der ausgewählten Schriftarten innerhalb des Satzes, der Überschrift und des Absatzes anzeigen. Sie können diese neue Funktion in Aktion testen dieses GitHub-Video.

Die ausgewählte(n) Schriftart(en) sind auch im Site-Editor verfügbar Globale Stile (Optik → Herausgeber), insbesondere im Design-Bedienfeld.

Navigieren Sie von hier aus zu Template → Index und klicken Sie auf das Blau Bearbeiten Schaltfläche zum Bearbeiten der index.html Vorlage. Wir wollen die öffnen Globale Stile Einstellungen, die als Kontrastsymbol oben rechts auf dem Bildschirm dargestellt werden. Wenn wir auf die klicken Text Einstellungen und öffnen Sie die Schriftart Menü in der Typografie Abschnitt… wir sehen Inter!

Das Gleiche, aber mit lokalen Schriftarten

Wir können auch versuchen, lokale Schriftarten zu einem Design hinzuzufügen, da das Plugin „Create Block Theme“ diese Option bietet. Der Vorteil ist, dass Sie jede gewünschte Schriftartdatei von jedem beliebigen Schriftartendienst verwenden können.

Ohne das Plugin müssten wir unsere Schriftdateien abrufen, sie irgendwo im Themenordner ablegen und dann auf die traditionelle PHP-Route zurückgreifen, indem wir sie in die Warteschlange einreihen functions.php Datei. Aber wir können WordPress diese Last für uns tragen lassen, indem wir die Schriftartdatei auf die hochladen Fügen Sie lokale Schriftarten hinzu Bildschirm mit der Oberfläche "Blockdesign erstellen". Sobald eine Datei zum Hochladen ausgewählt wurde, werden die Felder für Schriftartdefinitionen automatisch ausgefüllt.

Obwohl wir alle verwenden können .ttf, .woff, oder .woff2 Datei, habe ich einfach heruntergeladen Öffnen Sie Sans-Schriftartendateien von Google Fonts für diese Übung. Ich habe zwei Gewichtsvarianten geschnappt, normal und 800.

Die gleiche automatische magische Dateiverwaltung und theme.json Das Update, das wir mit der Google Fonts-Option gesehen haben, geschieht erneut, wenn wir die Schriftartdateien hochladen (die einzeln ausgeführt werden). Sehen Sie sich an, wo die Schriftarten in meinem Themenordner gelandet sind und wie sie hinzugefügt werden theme.json:

Schriftarten entfernen

Das Plugin ermöglicht es uns auch, Schriftdateien aus einem Blockdesign aus dem WordPress-Adminbereich zu entfernen. Lassen Sie uns eine der Open Sans-Varianten löschen, die wir im letzten Abschnitt installiert haben, um zu sehen, wie das funktioniert.

Durch Klicken auf die Entfernen links löst eine Warnung aus, damit Sie das Löschen bestätigen müssen. Wir klicken OK um fortzufahren.

Öffnen wir unseren Themenordner und überprüfen Sie die theme.json Datei. Sicher genug, die Open Sans 800-Datei, die wir auf dem Plugin-Bildschirm gelöscht haben, hat die Schriftdatei aus dem Themenordner entfernt, und der Verweis darauf ist längst verschwunden theme.json.

Es wird laufend gearbeitet

Es wird darüber geredet, diese „Font Manager“-Funktion zu WordPress Core hinzuzufügen anstatt ein separates Plugin zu benötigen.

Eine erste Iteration des Features ist im Repo verfügbar, und es verwendet genau denselben Ansatz, den wir in diesem Artikel verwendet haben. Es sollte sein GDPR-konform, zu. Das Merkmal ist soll mit WordPress 6.3 landen Veröffentlichung später in diesem Jahr.

Wrapping up

Das Create Block Theme-Plugin verbessert die Benutzererfahrung beim Umgang mit Schriftarten in WordPress-Block-Themes erheblich. Das Plugin ermöglicht es uns, Schriftarten hinzuzufügen oder zu löschen, während die DSGVO-Anforderungen eingehalten werden.

Wir haben gesehen, wie das Auswählen einer Google-Schriftart oder das Hochladen einer lokalen Schriftartdatei die Schriftart automatisch im Themenordner platziert und in der registriert theme.json Datei. Wir haben auch gesehen, dass die Schriftart eine verfügbare Option in den Einstellungen für globale Stile im Site-Editor ist. Und wenn wir eine Schriftart entfernen müssen? Das Plugin kümmert sich auch vollständig darum – ohne Themendateien oder Code zu berühren.

Danke fürs Lesen! Wenn Sie Kommentare oder Vorschläge haben, teilen Sie diese in den Kommentaren mit. Ich würde gerne wissen, was Sie von dieser möglichen Richtung für die Schriftverwaltung in WordPress halten.

Zusätzliche Ressourcen

Ich habe mich beim Schreiben dieses Artikels auf viel Recherche verlassen und dachte, ich teile die Artikel und Ressourcen, die ich verwendet habe, um Ihnen zusätzlichen Kontext zu bieten.

Verwaltung von WordPress-Schriftarten

GitHub Probleme

Europäische DSGVO-Anforderungen

• SEO-gestützte Content- und PR-Distribution. Holen Sie sich noch heute Verstärkung.
• Platoblockkette. Web3-Metaverse-Intelligenz. Wissen verstärkt. Hier zugreifen.
• Quelle: https://css-tricks.com/managing-fonts-in-wordpress-block-themes/