Internetkurse Köln

Mit WordPress 5.9 hat nun das Full Site Editing die große Bühne betreten. Seit letztem Sommer stand es zwar schon zur Verfügung. Dies allerdings nur solchen Nutzer/innen, die auch das Gutenberg Entwickler-Plugin installiert hatten. Nun aber können alle damit arbeiten – sofern sie ein sogenanntes Block Theme aktiviert haben. Das neue Standardtheme Twenty Twenty-Two ist so ein Block Theme. Und auch wenn sich Twenty Twenty-Two im neuen Website Editor ohne weitere Kodierung updatesicher anpassen lässt, kann so ein Child Theme doch nützlich sein.

Letzten Sommer fragte ich mich noch, wie das beim Full Site Editing mit dem Child Theme funktionieren soll. Nun weiß ich: Es ist viel einfacher, als ich damals vermutet hätte!

Twenty Twenty-Two ist einen zweiten Blick wert

Man muss kein Ornithologe sein, um dem neuen Standardtheme etwas abgewinnen zu können. Twenty Twenty-Two bringt sehr viele Blockvorlagen mit – und die nutzen Bilder von Vögeln als Beispiele für die Gestaltung.

Natürlich liegt es jetzt nicht in der Absicht des WordPress Teams, dass nun die Hälfte aller Websites diese Bilder auch nutzen. Nur im Moment bietet es sich halt an, das Theme und seine Optionen für die Gestaltung mit eben diesen Bildern vorzustellen. Weshalb Sie aktuell überall Beiträge zu dem neuen Standardtheme mit eben diesen Vogelbildern sehen. Nun sind die Bilder aber auch hübsch, das muss man ihnen lassen. Zudem lässt ihre Lizenz (CC0 1.0 Universal (CC0 1.0) Public Domain Dedication) es zu.

Zu finden sind diese Vogelbilder, die Teil der Twenty Twenty-Two Blockvorlagen sind, übrigens im Verzeichnis /assets des Theme-Ordners /twentytwentytwo. Von dort kann man sie sich in die Mediathek holen und dann mit ihnen herumspielen.

Fern von hübschen Bildern bedeutet das Arbeiten mit einem Block Theme wie Twenty Twenty-Two aber wirklich eine echte Umstellung. Fortgeschrittene und Profis müssten sich arg an die neuen Anforderungen anpassen. Und WordPress Einsteiger sind klar überfordert.

Aber »Anpassen« ist ja auch die Bezeichnung der Gutenberg-Phase, in der wir gerade alle stecken. Wir reden hier von der Möglichkeit, die Website mit dem neuen Website Editor von Header bis Footer anzupassen. Den neuen Editor sehen Sie aber eben auch nur, wenn Sie ein Block Theme aktivieren.

Der neue Website Editor

Was auf den ersten Blick irgendwie sehr einfach aussieht, gestaltet sich bei der Arbeit dann aber doch nicht so easy und selbstverständlich. Mitnichten ist das Full Site Editing nur ein Block-Schubsen. Ganz im Gegenteil: Es erfordert, dass Sie das Zusammenspiel von Templates und Template-Teilen verstehen lernen. Und an dieser Stelle ist Twenty Twenty-Two eine sehr gute Schule.

Aber wie das bei Schulen so ist: Manchmal überkommen einen die Erkenntnisse wie im Flug. Und manchmal möchte man einfach nur schreien.

Schreien möchte ich hier auf diesem Blog nicht. Sondern nach und nach meine Erkenntnisse teilen. Und dabei wird Twenty Twenty-Two immer die Grundlage bieten.

Wozu ein Child Theme für Twenty Twenty-Two erstellen?

Eine meiner ersten Erkenntnisse bei Twenty Twenty-Two war, dass das Theme für Überschriften eine Schriftart benutzt, die mir nicht gefällt: Source Serif Pro. Wenngleich mir gefällt, dass das Theme diese Schriftart in seinen /assets mitbringt und nicht über eine Verbindung zu Google Fonts bezieht. Mir gefällt die Schriftart an sich halt nicht. Und schon erst recht nicht für Überschriften.

Doch wie kann ich die abwählen? Im Website Editor lässt sie sich jedenfalls nicht einfach so abschalten. Eine Wahl haben Sie hier nur für Text an sich. Also alle Textsorten – bis auf die Überschriften. Für die Überschriften ist der Font Source Serif Pro über die Datei theme.json festgelegt.

Diese theme.json finden Sie im Theme-Verzeichnis auf Ihrem Server. Klar können Sie die nun bearbeiten. Und das wird auch funktionieren. Allerdings nur bis zum nächsten Theme-Update.

Nun ist mein Missfallen der Schriftart für die Überschriften nicht der einzige Grund, warum man auf die Idee kommen kann, für Twenty Twenty-Two ein Child Theme zu erstellen. Was ist, wenn Sie Ihre eigenen Blockvorlagen (ohne Vögel…) erstellen wollen? Dann brauchen Sie ein Child Theme.

Denn auch wenn sich ein Block Theme Ihre Anpassungen im Rahmen des Website Editors merkt, überschreibt das Theme-Update Ihre Änderungen der functions.php (sofern es die überhaupt gibt).

Child Theme für ein Block Theme erstellen, am Beispiel von Twenty Twenty-Two

Ein Child Theme für ein Block Theme zu erstellen, ist grundsätzlich echt einfach. Was Sie dann damit machen, steht auf einem anderen Blatt geschrieben. Aber so ein Block Child Theme benötigt eigentlich nur drei Dateien:

• eine style.css
• eine theme.json und
• eine index.php.

Hinzukommen dann weitere mögliche Dateien und Ordner, so vor allem

• eine functions.php und
• Ordner für templates, parts, blockpatterns, fonts, et cetera

Wenn Sie darauf bestehen, können Sie Ihrem Child Theme natürlich auch noch eine screenshot.png gönnen. Ohne eine solche Bilddatei, die nur für die Darstellung im Backend unter Desgin > Themes zu sehen ist, funktioniert das Ganze aber auch.

style.css = die Verbindung zwischen Child Theme und Twenty Twenty-Two

Die Verbindung zwischen Ihrem Child Theme und einem Block Theme wie Twenty Twenty-Two findet wie gehabt in der style.css statt. Und zwar im Rahmen der Angaben, die ganz zu Beginn der Datei stehen.

Für mein Child Theme Luzi-TT2-Blocks, mit dem ich auf bloggerbrunch.de herumspiele, habe ich folgende Angaben gewählt:

/*
Theme Name: Luzi-TT2-Child
Author: bk
Author URI: https://britta-kretschmer.de
Description: nur ein Versuch
[...]
Template: twentytwentytwo
[...]
*/

Die wesentliche Angabe in Hinblick auf die Verbindung zum Parent Theme ist hier: Template: twentytwentytwo. Wäre das Parent Theme Blockbase, lautete die Angabe also: Template: blockbase.

theme.json für die Globalen Stile

Wenn Sie so wie ich nur etwas herumprobieren wollen, macht es viel Sinn, die theme.json von Twenty Twenty-Two zu nehmen und hier nur wenige Änderungen für Ihr Child Theme vorzunehmen. In meinem Fall beziehen sich die Änderungen auf den Font für die Überschriften.

Die theme.json ist in Bereiche eingeteilt. Beginnend mit der Versionsnummer erscheinen als Erstes die custom templates. Dann folgen die settings, später die styles. Zum Schluss gibt es noch die templateParts. In Hinblick auf die Schriftart der Überschriften interessiert uns der Bereich der styles.

Insgesamt umfasst die theme.json aktuell über 350 Zeilen. Im Bereich der settings, ab Zeile 170, geht es um die Schriftarten, die das Theme nutzen soll:

"typography": {
	"dropCap": false,
	"fontFamilies": [
		{
		"fontFamily": "-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif",
		"name": "System Font",
		"slug": "system-font"
		},
		{
		"fontFamily": "\"Source Serif Pro\", serif",
		"name": "Source Serif Pro",
		"slug": "source-serif-pro"
		}
	],

Das kann so bleiben, wie es ist. Vielleicht wollen Sie die Source Serif Pro ja an anderer Stelle noch nutzen.

Die Änderungen für die Überschriften finden nun im Bereich styles, ab Zeile 268, statt. Hier sind die sechs Überschriftebenen h1 bis h6 als elements aufgelistet.

"elements": {
	"h1": {
		"typography": {
			"fontFamily": "var(--wp--preset--font-family--source-serif-pro)",
			"fontWeight": "300",
			"lineHeight": "var(--wp--custom--typography--line-height--tiny)",
			"fontSize": "var(--wp--custom--typography--font-size--colossal)"
			}
		},
	"h2": {
		"typography": {
			"fontFamily": "var(--wp--preset--font-family--source-serif-pro)",
			"fontWeight": "300",
			"lineHeight": "var(--wp--custom--typography--line-height--small)",
			"fontSize": "var(--wp--custom--typography--font-size--gigantic)"
			}
		},
	"h3": {
		"typography": {
			"fontFamily": "var(--wp--preset--font-family--source-serif-pro)",
			"fontWeight": "300",
			"lineHeight": "var(--wp--custom--typography--line-height--tiny)",
			"fontSize": "var(--wp--custom--typography--font-size--huge)"
			}
		},
		[...]

Jede dieser Überschriften zeigt als fontFamily den Wert "var(--wp--preset--font-family--source-serif-pro)". Den gilt es nun also für jede Überschriftenebene zu verändern. Aus "var(--wp--preset--font-family--source-serif-pro)" wird "var(--wp--preset--font-family--system-font)".

Was System Font bedeutet, ist in den settings oben definiert. Dort sind die Schriftarten aufgelistet, die WordPress auch für das Backend nutzt. Für Windows-Systeme ist dies die Segoe UI.

index.php – vielleicht bald nicht mehr nötig

Eine index.php ist in der Tat zwar noch nötig, allerdings … Twenty Twenty-Two hat in seiner index.php nur Folgendes stehen:

»Hier steht nix, weil Block Themes keine PHP-Vorlagen nutzen. Es gibt eine Diskussion im Core Trac, in der es um das Entfernen dieser Anforderung für Block Themes geht.« Es folgt der Link zu dieser Diskussionsgruppe.

Angabe in der index.php von Twenty Twenty-Two

functions.php – für eigene Funktionen

Eine functions.php brauchen Sie immer dann, wenn Sie eigene Funktionen hinzufügen wollen. Das kann schon damit beginnen, dass Sie eigene Definitionen in Ihrer style.css hinterlegen wollen. Oder was auch immer Sie sonst noch Ihrem Child Theme hinzufügen möchten.

Für das Hinterlegen eigener Styles im Rahmen der style.css lautet der Eintrag in der functions.php (Quelle: fullsiteediting.com):

function fse_styles() {
	wp_enqueue_style(
		'fse-style',
		get_stylesheet_uri(),
		wp_get_theme()->get( 'Version' )
	);
}
add_action( 'wp_enqueue_scripts', 'fse_styles' );

Ordner für eigene Templates und -Teile, Blockvorlagen et cetera

Eigene Templates und Template-Teile können Sie auch ohne Child Theme für ein Block Theme wie Twenty Twenty-Two anlegen. Allerdings braucht es dazu vor allem erst einmal ein Verständniskonzept für die Zusammenarbeit von eben diesen Templates und den einzelnen Teilen. Erst wenn Sie verstanden haben, wie zum Beispiel der Header mit dem großen, dunklen Header zusammenarbeitet, können Sie sich Gedanken über eigene Vorlagen machen.

Alle notwendigen Templates sind in Twenty Twenty-Two jedenfalls bereits realisiert. Wenn Sie diese bearbeiten, überlebt ihre Bearbeitung dann auch das nächste Update. Eigene Templates, die über das Notwendige hinausgehen, können Sie dann als HTML-Dateien in dem entsprechenden Ordner hinterlegen.

Auch Blockvorlagen können Sie in einem eigenen Ordner hinterlegen. Einzelne Blockvorlagen habe ich bislang aber immer einfach nur in der functions.php registriert.

Wenn Sie planen, einen speziellen Font einzusetzen, dann müssen dem natürlich auch noch einen Ordner gönnen. Bloggerbrunch nutzt nun für die Überschriften statt Source Serif Pro den Kalam-Font. Wie das geht? Ich werde darauf noch zu sprechen kommen.

Fazit: Ein Child Theme für Twenty Twenty-Two ist schnell erstellt

Grundsätzlich gilt aber erst einmal: Für so ein Child Theme braucht es nicht viel. Drei Dateien – und schon ist Twenty Twenty-Two Mutter oder Vater geworden:

• style.css
• theme.json
• index.php

Alles Weitere erfordert dann schon eine Menge mehr Aufmerksamkeit und viel Neu-Lernen.

Update 08.02.2022

Nun ist auch mein Beitrag zum Host Europe Blog online. Hier geht es auch um WordPress 5.9, das Full Site Editing und Twenty Twenty-Two: WordPress Trends 2022: Was Sie über das Full Site Editing wissen sollten

Beitragsbilder: Britta Kretschmer, Illustrationen des Weißbauchschnäppers, des Grünschwanzjacamars und des Kolibris Public Domain