WordPress Block Theme Tutorial (13 Tipps)

von

am

|

geschätzte Lesezeit:

27 Minuten

WordPress Block Theme Tutorial, in dem es viel um passende Breiten geht
Vielleicht braucht nicht jedes WordPress Block Theme eine Ente, dem Tutorial schaden kann sie aber nicht

Block Themes, das ist der neue heiße Sch… äh… Weg, Gestaltvorlagen für eine WordPress Website zu erstellen. Dank Full Site Editing soll nun jede/r in der Lage sein, selbst ein eigenes solches Theme zu bauen. Doch die Erfahrung sagt: So einfach ist das alles gar nicht. Deshalb möchte ich Ihnen mit meinem Tutorial dabei helfen, Ihr erstes eigenes WordPress Block Theme zu erstellen.

Was dieses WordPress Block Theme Tutorial leisten kann

Eine Anleitung mit dem Ziel, dass Sie am Ende Ihr perfektes WordPress Block Theme produziert haben, ist dieses Tutorial nicht. Kann es auch nicht sein. Es kann aber wichtige Fragen beantworten. Fragen, die ich mir selbst gestellt habe in den letzten Wochen und Monaten, während ich an meinen ersten Block Themes gearbeitet habe.

Auch soll Ihnen mein Tutorial dabei helfen, übliche Fehler zu vermeiden. Denn Fehler – glauben Sie mir – werden Sie reichlich machen. Bestenfalls werden Sie an diesen Fehlern – so wie ich – aber auch lernen.

Wer sich nun daran wagt, sollte eine grundlegende Vorstellung davon haben, wie so ein Theme (egal ob Block oder herkömmlich) funktioniert. So sollten bestimmte Begrifflichkeiten bekannt sein. Zum Beispiel »Template« im Gegensatz zu »Theme«. Oder dass ein Theme aus verschiedenen Templates besteht. Die wiederum bestimmte Template-Teile benutzen.

Auch sollte bekannt sein, aus welchen Blöcken ein einzelnes Template üblicherweise besteht. Natürlich können Sie mit einem konkreten Inhalt, sagen wir einem Absatzblock, dafür sorgen, dass dessen Inhalt

»Dies ist mein erstes tolles Block Theme!«

auf der gesamten Website immer oben links erscheint.

Aber in der Regel arbeitet man doch mehr mit Blöcken, die als Platzhalter dienen. Wir sprechen hier vor allem von den Blöcken aus den Bereichen Theme und Design.

Konkrete Inhalte verbleiben auf Seiten oder Beiträgen. Und von denen sollten Sie schon ein paar haben. Sonst gibt es nichts, was Ihre Vorlage darstellen könnte.

Mein WordPress Block Theme Tutorial setzt also gewisse Vorkenntnisse und ein paar Inhalte voraus. Erklärt aber vielleicht an mancher Stelle auch Aspekte, die Fortgeschrittenen längst bekannt sind. Sorry dafür!

Tutorial WordPress Block Theme: 13 Tipps für die leichtere Arbeit

Weil es aber auch für Fortgeschrittene durchaus einige Fallstricke gibt, biete ich mit diesem WordPress Tutorial dreizehn Tipps, die es Ihnen erleichtern sollen, Ihr erstes eigenes Block Theme zu erstellen. Eigentlich sind es noch eine Menge mehr Tipps (schauen Sie sich allein mein Inhaltsverzeichnis an!). Aber dreizehn Tipps. das klingt doch irgendwie gut. Oder?

Beginnen wir direkt mit dem ersten Tipp:

Block Theme Tutorial Tipp 1:

Schaffen Sie die Grundlagen für Ihr Block Themes selbst!

Grundlagen für ein Block Theme schaffen

Zuletzt hatte ich bereits das Plugin Create Block Theme dargestellt und gelobt. Ich hatte allerdings auch schon darauf hingewiesen, dass es nur die Grundlagen für ein eigenes Block Theme produziert.

Die Grundlagen lassen sich aber auch manuell erstellen. Vielleicht sogar besser manuell, denn seit meinem Beitrag haben die Entwickler/innen so viel daran geändert, dass das Plugin zwischendurch immer wieder für Fehler gesorgt hat. Zum Teil waren die sogar fatal.

Letztlich produziert das Plugin, wenn es ein leeres Block Theme erstellen soll, neben neuerdings einer screenshot.png auch nur sechs Dateien und zwei Ordner. Wir sprechen hier von jeweils einer

  • readme.txt,
  • style.css,
  • theme.json,
  • index.html, die sich im Ordner /templates befindet,
  • sowie einen /parts Ordner mit den Dateien header.html und footer.html

Mindestens die Hälfte dieser Dateien sollte auch einen Inhalt haben. Beim Rest geht es tatsächlich auch ohne. Allein sollten sie, wenn auch ohne Inhalt, vorhanden sein.

Erstellen können Sie die folgenden Dateien mit dem einfachen Editor Ihres Windows- oder mit TextEdit Ihres macOS-Systems. Angenehmer für die Arbeit sind allerdings Notepad++ (Windows) und TextMate (macOS).
Auf keinen Fall benutzen Sie ein Programm wie Word!

readme.txt

In der readme.txt stehen einige Grundinformationen, so als Erstes der Name des Themes. Die Datei weist aber auch zum Beispiel die Lizenz aus, unter der Sie das Theme veröffentlichen. Auch finden Sie hier bei Themes anderer Autor/innen immer die Änderungen (Changelog) nach einem Theme Update.

Vielleicht haben Sie nicht gerade vor, Ihr Theme auch anderen zur Nutzung anzubieten. Dennoch macht es Sinn, sich an diese Vorgaben zu halten. Immerhin veröffentlichen Sie hier ja Ihre Arbeit. Die folgenden Informationen sollten Sie also mitveröffentlichen.

=== NAME DES THEMES ===
Contributors: NAME(N) DER MITWIRKENDEN
Requires at least: 5.8
Tested up to: 6.2
Requires PHP: 5.7
License: GPLv2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html

== Description ==
EINE KURZE BESCHREIBUNG DES THEMES


== Changelog ==

= 0.0.1 =
* Initial release

== Copyright ==

NAME DES THEMES WordPress Theme, (C) 2023 
NAME DES THEMES is distributed under the terms of the GNU GPL.

This program is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 2 of the License, or (at your option) any later version.

This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.

style.css

Zwar rühmt sich das Full Site Editing damit, für das Erstellen eines Block Themes gar keine style.css mehr zu brauchen. Dennoch braucht es diese Datei, damit WordPress das Theme als solches überhaupt erkennt. Deshalb müssen hier gewisse Informationen vorhanden sein.

Wollen Sie in dieser Datei aber tatsächlich eigene CSS-Definitionen hinterlegen, die Ihr Block Theme dann auch nutzt, brauchen Sie überdies eine functions.php. Mehr dazu später.

Die Informationen, die WordPress in der style.css braucht, lauten:

/*
Theme Name: NAME DES THEMES
Theme URI: (sofern vorhanden)
Author: IHR NAME
Author URI: (sofern vorhanden)
Description: BESCHREIBUNG DES THEMES 
Requires at least: 5.8
Tested up to: 6.2
Requires PHP: 5.7
Version: 0.0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Template: 
Text Domain: NAME DES THEME ORDNERS
Tags: 
*/

theme.json

Die theme.json übernimmt einen Gutteil der Arbeit, die man sonst in der style.css finden würde. Zumindest betrifft dies einzelne Aspekte wie zum Beispiel die Breite des Contents und die weite Breite.

Die theme.json kann aber noch mehr. Sie benennt zum Beispiel auch einzelne Templates oder Template-Teile, die im Theme vorhanden sein sollen. Mindestens sollte Ihre theme.json also die beiden Template-Teile header und footer kennen.

Eine schlichte theme.json könnte für den Start wie folgt lauten:

{
    "$schema": "https://schemas.wp.org/wp/6.2/theme.json",
    "settings": {
        "appearanceTools": true,
        "layout": {
            "contentSize": "620px",
            "wideSize": "1000px"
        },
        "spacing": {
            "units": [
                "%",
                "px",
                "em",
                "rem",
                "vh",
                "vw"
            ]
        },
        "typography": {
            "fontFamilies": [
                {
                    "fontFamily": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif",
                    "name": "System Font",
                    "slug": "system-font"
                }
           ]
        }
    },
    "templateParts": [
        {
            "area": "header",
            "name": "header"
        },
        {
            "area": "footer",
            "name": "footer"
        }
    ],
    "version": 2
}

Dies ist die theme.json, wie sie das Plugin Create Block Theme Ihnen erstellen würde. Allzu viel tut sie noch nicht für Sie, aber das wird sich ändern.

Für den Moment sorgt sie jedenfalls schon mal dafür, dass es Angaben für die Inhaltsbreite (620 Pixel) und die weite Breite (1000 Pixel) gibt. Ferner stellt sie die üblichen Maßeinheiten (px, %, em et cetera) sowie die zu nutzenden Systemschriftarten zur Verfügung. Und schließlich benennt sie header und footer als Template-Teile.

Warum ist der Inhaltsbereich so schmal? Weil sich Text so gut lesen lässt. Das Auge muss beim Sprung vom Zeilenende zum Anfang der nächsten Zeile nicht lange suchen. Nichts ist schlimmer als Text, der über die volle Fensterbreite geht. Wenn Sie wollen, dass niemand Ihre Texte liest, wählen Sie eine Inhaltsbreite von mehr als 800 Pixeln!

Manuell werden wir nicht allzu viel in dieser Datei ändern. Zu groß ist die Wahrscheinlichkeit, sie durch ein einziges falsches Zeichen (eine Klammer zu viel oder ein fehlendes Komma) unbrauchbar zu machen. Verändern werden wir sie aber trotzdem, am laufenden Band sozusagen.

Wir werden später auf das Arbeiten mit dieser Datei zurückkommen.

/templates/index.html

Block Theme Tutorial Tipp 2:

Starten Sie mit leeren Template(s) und Template-Teilen und überlassen Sie das Codieren WordPress!

Weiterhin braucht Ihr Block Theme noch eine index.html. Die muss sich in einem Verzeichnis namens /templates befinden. Zwar sollte sie bestenfalls bereits einen Inhalt aufweisen, sie kann aber auch leer sein.

Ganz fehlen darf sie aber nicht, denn dann versteht WordPress Ihr Theme als beschädigt.

Wir belassen es für den Start bei einer leeren index.html. Das erspart es Ihnen, sich hier mit Code herumzuschlagen. Der Datei einen Inhalt geben werden wir aber trotzdem – über das Arbeiten mit dem Design Editor.

/parts/header.html und /parts/footer.html

Ihre theme.json weiß bereits von den beiden Template-Teilen für den Header und den Footer. Also sollten wir Ihrem Block Theme diese beiden Dateien auch hinzufügen.

Wie bei der index.html gilt: Wir könnten beide Dateien bereits mit passendem Code befüllen. Oder wir lassen sie einfach leer und erstellen ihre Inhalte über den Design Editor.

Upload auf den Server

Die Verzeichnisstruktur Ihres Block Themes sollte nun wie folgt aussehen:

  • /name-ihres-themes
    • readme.txt
    • style.css
    • theme.json
    • /templates
      • index.html
    • /parts
      • header.html
      • footer.html

Dieses Verzeichnis mit seinen sechs Dateien und den zwei Ordnern laden Sie nun mit einem FTP-Programm wie Filezilla auf Ihren Server in das Verzeichnis /wp-content/themes/.

Wenn Sie das Block Theme nun aktivieren – sehen Sie nicht viel. Tatsächlich zeigt Ihnen jede Seite und jeder Beitrag Ihrer Installation nur eine weiße Seite mit dem kleinen Hinweis oben links:

Leeres Template: Index

Das werden wir nun im Folgenden ändern. Und alles, was nun in diesem Tutorial folgt, soll Ihnen dabei helfen, Ihr WordPress Block Theme so zu erstellen und zu gestalten, dass es Ihnen gefällt.

Alles beginnt mit einer Vorlage: die index.html

Block Theme Tutorial Tipp 3:

Investieren Sie viel Zeit in Ihre index.html. Sie werden später davon profitieren!

Im Moment kann Ihre index.html noch rein gar nichts. Das werden wir jetzt ändern. Wir gehen also in den Design > Editor, um der Vorlage Struktur zu geben.

Zuerst einmal sollte die index.html eine Kopfzeile bekommen. Dafür gibt es ja bereits eine Datei, die header.html im /parts Verzeichnis. Diese werden wir jetzt nutzen und sinnvoll strukturieren.

Um Ihren leeren Template-Teil in die index.html einzubinden, suchen Sie unter den Blöcken nach den Template-Teilen – und wählen den Header-Block aus.

Als Nächstes wählen Sie für diesen Template-Teil Ihre leere Header-Vorlage aus. Sie erscheint in der Auswahl als Erstes – und ist auch hier leer.

Schließlich geben wir dem Header Template-Teil noch die gewünschte Struktur. Dafür wählen Sie aus den Blockvorlagen für Header, die WordPress zur Verfügung stellt, eine Vorlage aus. Ich habe eine für einfache Header gewählt.

Was war das noch vor gar nicht so langer Zeit ein Gefummel, so eine einfache Kopfzeile zu erstellen. Ein wenig Fummelei ist es aber immer noch, Blöcke oder Blockvorlagen an der richtigen Stelle zu platzieren. Wenn Sie nicht auf das Plus-Zeichen innerhalb des Template-Teils klicken, landet die Blockvorlage schnell darunter.

Vielleicht müssen Sie jetzt noch für Ihren Header eine Navigation erstellen. Ich habe davon bereits reichlich und bekomme die aktuellste in meinen Blockvorlagen angezeigt.

WordPress Block Theme Tutorial: Navigation erstellen
Navigation erstellen

Main-Bereich erstellen

Nun gilt es, den Hauptbereich zu erstellen. Für die index.html sollte dies eine Auflistung aller Beiträge sein. Es braucht also einen Abfrage-Loop.

Auch hierfür bietet WordPress einige Vorlagen. Uns soll an dieser Stelle die Standard-Variante reichen.

Für den Main Bereich die Standardvorlage für die Abfrage von Beiträgen einfügen
Standardvorlage für Beitragsabfrage

Die Standard-Vorlage zeigt eine Liste der Beiträge an. Ich mache daraus nun ein Raster, weil das besser für meine Screenshots ist. Sie können natürlich auch bei der Listenansicht bleiben.

Wichtig ist nur, dass Sie für Ihre Abfrage die Option »Abfrage von Template übernehmen« wählen. Nur so stellen Sie sicher, dass Ihre Archiv-Seiten immer alle passenden Beiträge anzeigen.

Aus der Liste der Beiträge ein Raster machen
von Listenansicht auf Raster umstellen

Natürlich können Sie jede Blockvorlage auch anpassen. So muss der Abfrage Loop nicht zwangsläufig das Beitragsdatum ausgeben. Im Rahmen des Abfrage Loops an einer Stelle gelöscht, zeigt keiner der so abgefragten Beiträge mehr sein Datum.

Umgekehrt könnten Sie aber auch den Autoren oder die Kategorien hinzufügen.

Schließlich gönnen wir der index.html auch noch eine Fußzeile. Das Vorgehen entspricht dem beim Header:

  1. Unter den Blöcken nach den Template-Teilen suchen und den Footer-Block wählen.
  2. Bei der Auswahl den vorhandenen (leeren) Template-Teil anklicken.
  3. Und für die Struktur des Footers eine der Footer Blockvorlagen wählen.

Nun nur noch speichern – und schon gibt die Website nicht länger eine weiße Seite mit dem Hinweis auf ein leeres Template aus. Vielmehr zeigt sie das Konstrukt, das wir gerade erstellt haben.

Nun nutzt jede Seite und jeder Beitrag dieses Template. Es gibt ja noch kein anderes. Ohnehin stellt die index.html den Fallback dar, den WordPress immer heranzieht, wenn es kein anderes, passenderes Template gibt.

WordPress Block Theme Tutorial: Die Index sieht nicht gut aus - aber sie funktioniert.
erstes Ergebnis der index.html

Schön ist anders, da haben Sie recht. Aber immerhin funktioniert das Ganze schon mal. Und schön machen lässt es sich später ja noch über die Stile. Also jenem Bereich des Design Editors, der sich dem Formatieren widmet.

Im Moment aber dreht sich in meinem WordPress Block Theme Tutorial alles um die Struktur. Und der ist erst einmal egal, welche Schriftart oder -farbe hier am Werk ist.

Typischer Aufbau eines Templates

Viel wichtiger ist, dass der Aufbau der Templates so ist, dass der Inhalt die passenden Breiten nutzt. Im Moment nutzen Header und Footer nur die weite Breite, während der Content auf die volle Breite geht.

Im Folgenden kümmern wir uns darum, dass alle Bereiche (Header, Main und Footer) in passender Breite ausgegeben werden. Das betrifft auch einzelne Elemente im Hauptbereich, die breiter sein sollen, als die Breite für den Content (620 Pixel, Sie erinnern sich?) es vorgibt.

Block Theme Tutorial Tipp 4:

Lernen Sie den Satz verstehen: »Die inneren Blöcke verwenden die Breite des Inhalts«

Sicherlich ist nicht jede Website gleich aufgebaut. Manche nutzen noch immer Seitenleisten rechts oder links. Oder Sie bevorzugen das boxed Design, das niemals die volle Breite ausnutzt.

In meinem Tutorial geht es aber erst einmal darum, dass die Vorlagen für Ihr WordPress Block Theme Ihre Inhalte so ausgeben, dass die drei Breiten Inhalt / weite Breite / volle Breite auch immer so angezeigt werden.

Ein typisches Layout für die Vorlage einer WordPress Seite oder eines Beitrags. Tutorial Block Theme mit Ente in Badewanne.
Eine Seite mit drei Breiten (und einer Ente…)

Um ein Ergebnis wie das mit der großen Ente erreichen zu können, müssen Sie verstehen, was folgender Satz bedeutet:

»Die inneren Blöcke verwenden die Breite des Inhalts«

Glauben Sie mir, dieser Satz hat mir schon reichlich Kopfzerbrechen bereitet.

Die inneren Blöcke verwenden die Breite des Inhalts

Wann immer Sie mit dem Gruppe-Block arbeiten, bietet er Ihnen für die Darstellung der Blöcke, die Sie so gruppiert haben (oder noch gruppieren wollen), einen Schieberegler. Mit dem können Sie festlegen, ob die gruppierten Blöcke nun die Breite des Inhalts benutzen sollen oder nicht.

Aber was bedeutet das, die Breite des Inhalts?

Die Breite des Inhalts haben Sie einmal in der theme.json festgelegt. Laut unserer theme.json beträgt die Inhaltsbreite tatsächlich nur 620 Pixel. Und genau darauf bezieht sich dieser ominöse Satz.

Ein Absatz, eine Zwischenüberschrift oder ein eingebundenes Bild – sie alle nehmen ohne Ihr weiteres Zutun also immer nur die Breite von 620 Pixel in Anspruch.

Gruppieren Sie nun zwei Absätze und sagen der Gruppe, dass sie selbst die weite Breite nutzen soll, können Sie über diesen Schieberegler festlegen, dass ihr Inhalt – die beiden Absätze – noch immer nur die Inhaltsbreite nutzen sollen. Oder Sie legen fest, dass auch sie die weite Breite der Gruppe einnehmen.

Dieses Prinzip machen wir uns nun für das Template zunutze. Denn hier hilft es auch dabei, dass Ihr Inhalt – vor allem auf kleinen Geräten – nicht direkt am Rand klebt. Während große (Cover)-Bilder noch immer die volle Breite nutzen können – ohne Rand zum Browserfenster.

Main – Section – Content passend einrichten

Block Theme Tutorial Tipp 5:

Achten Sie auf eine saubere Auszeichnung Ihrer Gruppen als semantische HTML-Elemente.

Das Prinzip des Verschachtelns von div-Containern hat WordPress nicht erfunden. Allein bietet es mit den neuen Editoren für Inhalte und Templates zum ersten Mal die Möglichkeit, damit zu arbeiten. Dabei nennt WordPress sie Gruppen statt Container.

Wesentlich sind hier also die Gruppe-Blöcke. Die können zwei Zustände haben: Entweder verwenden ihre inneren Blöcke die Breite des Inhalts – oder nicht. Im ersten Fall zeichnet WordPress den betreffenden Block dann mit der Klasse .is-layout-constrained aus. Nutzen die inneren Blöcke hingegen nicht die Breite des Inhaltes, lautet die Klasse .is-layout-flow.

Eine Seite, drei Container: main, secktion und content. Und nur der content verwendet die Breiten der Inhalte. WordPress Block Theme Tutorial
Cheat Sheet in Sachen »Die inneren Blöcke verwenden die Breite des Inhalts«

Damit nun ein Layout wie das meine funktioniert, braucht es zwei Container: einen main-Container und in ihm einen section-Container. Der Container für den Content ist in unserem Fall der index.html der des Abfrage-Loop-Blocks. Auf anderen Templates wird der Beitragsinhalt-Block dafür sorgen.

So machen Sie aus einer Gruppe ein HTML-Element

Für so ziemlich jeden Block gibt es in der rechten Seitenspalte das Panel Erweitert.

Dort finden Sie für Gruppe-Blöcke die Option, sie zu einem HTML-Element zu machen. Zur Auswahl stehen:

  • div-Standard
  • header
  • main
  • section
  • article
  • aside
  • footer

Diese Erkenntnis machen wir uns nun für die index.html zunutze.

Header und Footer die passende Breite geben

Zuerst einmal brauchen Header und Footer die passende Einstellung, damit ihre Inhalte in passender Breite dargestellt werden.

Im Moment beschränken beide ihre Inhalte auf die 1000 Pixel der weiten Breite. Ich aber möchte, dass sie beide die volle Breite nutzen. Deshalb bekommen beide dieselbe Einstellung. Und die besagt: Benutze bitte für deine inneren Blöcke nicht die Breite des Inhalts.

Für beide, Header wie Footer, ist das Vorgehen gleich: Man suche sich die alles umschließende Gruppe aus. Und schalte dann den entsprechenden Schieberegler ab.

Header Einstellung für die Breite der inneren Blöcke. WordPress Block Theme Tutorial
Der Header-Gruppe das passende Verhalten geben

Den Hauptbereich der index.html strukturieren

Für den Hauptbereich ist das Vorgehen dann in der Tat komplizierter.

  • Machen Sie zweimal aus dem Abfrage-Loop-Block eine Gruppe. Somit erhalten Sie zwei ineinander verschachtelte Container.
  • Der äußere Container wird zum main-Bereich, der innere zur section.
  • Für beide Container, main und section, schalten Sie die Option »Die inneren Blöcke verwenden die Breite des Inhalts« ab.
  • Für den Abfrage-Loop-Block selbst schalten Sie die Option »Die inneren Blöcke verwenden die Breite des Inhalts« an.
  • Und für das Beitragstemplate des Abfrage-Loop-Blocks wählen Sie als Ausrichtung die weite Breite.
  • Schließlich können Sie über das Einrichten von Innenabstand im section-Container dafür sorgen, dass sein Inhalt nicht an seinem Rand klebt.

Leider macht der Design-Editor nach Ihrer Wahl an keiner anderen Stelle deutlich, dass diese Gruppe nun ein bestimmtes HTML-Element ausmacht. Noch heißt die Gruppe überall Gruppe und nicht main oder section.

Unter anderem macht diese fehlende Kennzeichnung die Arbeit mit verschachtelten Gruppen so schwierig und unübersichtlich. Dabei ist diese Auszeichnung wichtig. Seit der Veröffentlichung von HTML5 heißen nicht alle Container länger nur DIV. Vielmehr verraten sie über ihren Namen bereits, wozu sie gut sind. Das nennt sich dann semantische Elemente.

Wie auch immer Sie sich Ihre Strukturierung im Detail vorstellen: Es lohnt sich, die Arbeit bereits hier in die index.html zu investieren. Denn jedes weitere Template, das Sie neu erstellen, wird sich im Zweifel an dem Layout Ihrer index.html orientieren.

In dieser Hinsicht bleibt WordPress sich treu und folgt der eigenen Template-Hierarchie!

Ergebnisse sichern und als Fallback nutzen

Es ist jederzeit möglich, alle Anpassungen, die Sie in einem Template oder einem Template-Teil vorgenommen haben, auch wieder rückgängig zu machen. Entweder schrittweise – oder komplett.

WordPress Block Theme Tutorial: Anpassungen entfernen, hier am Bespiel Template Teil Header
Anpassungen entfernen am Beispiel Header

Im Moment würden Sie, wenn Sie Ihre Anpassungen für Ihre index.html entfernen, wieder dort landen, wo Sie begonnen haben: bei einer leeren Datei.

Im Einzelfall kann das sogar hilfreich sein. Wenn Sie aber eigentlich schon zufrieden waren mit Ihren Ergebnissen, dann wäre es natürlich schön, auf diesen Stand wieder zurückfallen zu können.

Block Theme Tutorial Tipp 6:

Sichern Sie immer wieder Ihre Arbeit und kopieren Sie den Stand in Ihre Template-Dateien.

Jederzeit können Sie den Code, den WordPress für Sie erstellt hat und für Sie vorhält, in Ihre noch immer leere index.html übernehmen.

Dazu klicken Sie auf Ansicht anpassen (die drei vertikalen Pünktchen oben rechts) und wählen die Code-Ansicht. Der Code, den WordPress Ihnen dann zeigt, kopieren Sie.

Dann wählen Sie über die linke WordPress-Seitenleiste unter Werkzeuge den Theme-Datei-Editor und fügen den Code für Ihre index.html in eben diese ein.

Fortan ist das Ihr Fallback, falls Sie wirklich mal alle Anpassungen entfernen müssen. Und dasselbe können und sollten Sie auch für Ihren Header und den Footer machen.

Welche Templates sind nötig?

Template-Hierarchie, das ist ein wirklich gutes Stichwort. Denn sie sorgt dafür, dass Sie wahrscheinlich gar nicht so viele Templates brauchen, wie so manches freie, aber vor allem viele Bezahlthemes mitbringen.

Block Theme Tutorial Tipp 7:

Erstellen Sie nur so viele Templates, wie Sie wirklich brauchen. Wesentlich sind neben der index.html die single.html, page.html, search.html und 404.html.

single.html und page.html

Was ein Block Theme also neben der index.html (die auch ganz wunderbar den Job der archive.html übernehmen kann und so allen Archiven dient) auf jeden Fall braucht, ist eine single.html und eine page.html. Erstere ist dann für alle Beiträge zuständig, Letztere für alle Seiten.

Allerdings gibt es auch die Möglichkeit, Templates für einzelne Seiten oder einzelne Beiträge zu erstellen. Die Zuordnung geschieht dann bereits hier bei der Erstellung. Es sei denn, Sie erstellen ein individuelles Template. Das können Sie dann in der Beitrags- oder Seitenbearbeitung statt des Standard-Templates wählen.

Wesentlich ist erst einmal: Wenn Sie nun Templates für Beiträge und Seiten hinzufügen, werden die die Struktur der index.html übernehmen. Das bedeutet, dass all das Verschachtelungs-Gedöns bereits vorhanden ist. Sie müssen es nicht noch einmal erstellen.

Wie gesagt: Verwenden Sie viel Zeit für Ihre index.html – das erspart Ihnen jetzt viel Arbeit!

Es reicht, für single.html und page.html den Abfrage Loop zu löschen und stattdessen die passenden Blöcke für Beiträge und Seiten zu nutzen. Dabei können sich single.html und page.html übrigens sehr ähneln. Grundsätzlich würden sie beide wahrscheinlich als Erstes ihr Beitragsbild ausgeben, gefolgt von ihrem Beitragstitel und dem Beitragsinhalt. Für all das gibt es Blöcke, die Sie unter Blöcke > Theme finden.

Überdies können beide mit dem Kommentar-Block arbeiten – sofern Sie auf Beiträgen und / oder Seiten Kommentare zulassen möchten.

Die single.html dient übrigens auch allen Custom Post Types, deren Fähigkeiten denen von Beiträgen entsprechen. Sie können für Ihre Custom Post Types aber auch wie bisher eigene Templates erstellen. Und auch die heißen dann – abgesehen vom Dateiformat .html statt .php – wie früher. In diesem Fall also single-POSTTYPENAME.html.

Breiten einzelner Elemente

Auch bei der Gestaltung dieser Templates gilt es, das Augenmerk auf die zu nutzenden Breiten zu werfen. Damit zum Beispiel der Beitragstitel ebenfalls nur die Inhaltsbreite benutzt, muss er einmal gruppiert werden und über den Schieberegler die entsprechende Einstellung erhalten.

Ob die single.html ihr Beitragsbild oben in voller, weiter oder Inhaltsbreite ausgibt, vielleicht sogar als Coverblock, ist Geschmackssache. Vielleicht gibt sie es aber auch gar nicht aus. Weil Sie Ihr Beitragsbild erst später im Text an passender Stelle als normalen Bildblock verwenden.

Wenn Sie aber wie ich wollen, dass das Beitragsbild die volle Breite nutzt, darf es sich nicht innerhalb der section-Gruppe befinden. Denn die sorgt über ihren Innenabstand ja für einen Abstand zum Fensterrand. Deshalb gilt: Das Beitragsbild muss in diesem Fall eine Ebene höher in die main-Gruppe. Und das lässt sich am leichtesten mittels der Listenansicht bewerkstelligen.

Block Theme Tutorial Tipp 8:

Arbeiten Sie – vor allem im Kontext von Gruppen – mit der Listenansicht!

Die Listenansicht hilft beim Verschieben von Blöcken. WordPress Block Theme Tutorial
Über die Listenansicht Blöcke positionieren

Im Ergebnis würde Ihr Beitrag im Moment so aussehen:

  • Das Beitragsbild nutzt die volle Breite
  • Beitragstitel und -inhalt beschränken sich auf die Inhaltsbreite
  • Einzelne Elemente des Inhaltes (hier der Medien-Text-Block) nutzen die weite Breite
Ein Beitrag auf Basis des erstellten Templates für alle Beiträge
und wieder: eine Seite, drei Breiten (und eine Ente)

front-page.html

Ob Sie überdies eine front-page.html für Ihre Startseite brauchen, sei dahingestellt. Wenn Sie Ihre Startseite für die Ausgabe Ihrer Beiträge benutzen, könnte Ihre index.html schon reichen. Denn die ist im Zweifel auch für die Blog-Seite zuständig. Ein Job, den Ihre Startseite in dem Fall ja übernimmt.

Wollen Sie für den Start statische Inhalte zeigen, braucht es auch dafür nicht zwingend eine eigene Vorlage. Übliche Begrüßungs-Inhalte können Sie auch auf der Seite selbst realisieren.

Wirklich interessant wird so eine front-page.html eigentlich erst, wenn sich die Startseite von ihrer Gestalt her von anderen Seiten unterscheiden soll. Sagen wir, dass Sie auf Ihrer Startseite einen großen Header zeigen wollen, während die anderen Seiten eine abgespeckte Variante davon nutzen sollen. Das können Sie nur im Template umsetzen und nicht direkt auf der Seite.

search.html und 404.html

Auch ohne Custom Post Types gibt es noch weitere Einsatzorte für Templates. Sinnvoll ist sicherlich ein Template für die Suche (search.html) und eines für 404-Seiten (404.html).

Die search.html sollte in ihrem Hauptbereich einen Abfrage Loop Block zeigen – und zwar mit der Einstellung Abfrage vom Template übernehmen. Dann kann sie passende Inhalte auszugeben für die gestellte Suchanfrage.

Diese gestellte Suchanfrage sollte auch als Überschrift vorhanden sein. Dies erledigt der Titel der Suchergebnisse Block.

Da es aber natürlich vorkommt, dass eine Suchanfrage zu gar keinen Ergebnissen führt, braucht es auch hierfür einen Block. Der ist bereits Teil der Standardvorlage für Abfragen. Aber nicht jede Abfrage-Vorlage nutzt ihn. Deshalb gilt darauf zu achten, dass der Block Keine Suchergebnisse auf jeden Fall unterhalb der Abfrage erscheint.

Wichtig für das Suche-Template: der Keine Ergebnisse Block am Ende des Abfrage Loop Blocks. WordPress Block Theme Tutorial.
Darf in der search.html nicht fehlen: der keine Ergebnisse Block

Auch der 404.html kann es nicht schaden, über den Hinweis auf den nicht vorhandenen Inhalt hinaus Alternativen zu zeigen. Schließlich wird die 404-Seite ja nur ausgegeben, wenn da jemand nach etwas gesucht hat, das auf Ihrer Website definitiv nicht (mehr) vorhanden ist.

Dies sollte auf so einer 404-Seite also der erste Hinweis sein, gefolgt von der Möglichkeit zur Suche. Darunter könnten zum Beispiel Widget-Blöcke wie Neueste Beiträge, Kategorien– und Seitenliste folgen.

Und für alle weiteren Möglichkeiten gilt: Bloß weil WordPress Ihnen eine ganze Latte von denkbaren Templates anbietet, müssen Sie die nicht alle erstellen. Ihr Block Theme wird wahrscheinlich auch ohne archive.html, category.html oder Templates für einzelne Beiträge sehr gut funktionieren.

Auslagern einzelner Elemente als Template-Teil

Template-Teile finden nicht nur Anwendung für Header und Footer. Im Kontext von möglichen Widgetbereichen und noch immer denkbaren Seitenleisten können Sie sehr wohl interessant sein.

Block Theme Tutorial Tipp 9:

Lagern Sie einzelne Bereiche als Template-Teil aus und ersparen Sie sich so viel Arbeit!

Widgetbereich als Template-Teil

Hier soll es nun um einen Widgetbereich gehen.

Erstellen lässt sich so etwas im Rahmen des Templates, in dem man den Template-Teil auch nutzen möchte. Ich habe mich hier für einen Spaltenblock entschieden. Drei Spalten umfasst er. Die ersten beiden zeigen eine Überschrift und einen Absatz. In der dritten Spalte befindet sich eine Suche.

Den Spaltenblock habe ich gruppiert und auch hier wieder die Einstellung gewählt, die dafür sorgt, dass der Spaltenblock nur die weite Breite einnimmt. Der Gruppe in voller Breite habe ich dann noch eine gelbe Hintergrundfarbe gegeben.

Diesen Widgetbereich möchte ich vielleicht noch im Rahmen anderer Templates einsetzen. Deshalb mache ich daraus einen Template-Teil.

Mit Klick auf Ansicht anpassen der alles umschließenden Gruppe finden Sie die Option »Ein Template-Teil erstellen«. Dem geben Sie im Folgenden einen eindeutigen Namen und legen fest, zu welchem Bereich er gehört (Allgemein, Header oder Footer). Das war es schon.

Sehr schnell lässt sich so ein Template-Teil dann in andere Templates einbinden. Entweder mit der Suche nach »Widgetbereich« oder über die Eingabe von /widgetbereich in der passenden neuen Zeile.

Großartig schnell lassen sich aber auch kleine Fehler in so einem Template-Teil korrigieren. Die Korrektur zeigt sich dann sofort auf allen Templates, die diesen Template-Teil nutzen.

Ein Fehler im Template-Teil korrigiert, schon verschwindet er überall, wo der Teil eingesetzt ist.
kleiner Fehler an einer Stelle korrigiert…

Template-Teile kann es fast gar nicht genug geben. Aber leider ist es nicht möglich, einen Template-Teil in einen Template-Teil einzubinden. So ist es zum Beispiel nicht möglich, die Post Meta Angaben als Template-Teil abzulegen, um sie dann in einem Template-Teil Abfrage zu nutzen.

Ergänzungen zur theme.json: Schriftarten und Farben

Wie man Schriftarten und Farben für ein Block Theme ergänzt, hatte ich schon einmal in zwei Beiträgen gezeigt.

Was bei den Farben durchaus auch über die Stile funktioniert, kann für Schriftarten nicht klappen. Die müssen erst einmal überhaupt vorliegen. Dabei kann das Plugin Create Block Theme helfen. Sie können es aber auch selbst hinbekommen.

Schriftarten hinzufügen

Im Wesentlichen geht es darum, dass Sie aus der Schriftart, die Sie nutzen wollen, erst einmal einen Webfont produzieren. Um diesen dann unter eigenem Namen und mit eigener Lizenz selbst zu veröffentlichen. Denn es ist aus Gründen des Datenschutzes nicht mehr möglich, Schriftarten einfach so über Google Fonts einzubinden.

Wenn Sie also einen anderen als den System Font benutzen wollen, müssen Sie diesen anderen Font selbst zur Verfügung stellen. Dafür braucht es ein entsprechendes Verzeichnis im Rahmen Ihres Block Themes.

Sie erstellen also ein /assets/fonts-Verzeichnis mit mindestens einer .woff2-Datei Ihrer gewünschten Schriftart(en). Und dann modifizieren Sie Ihre theme.json, damit Ihr Block Theme Ihren Webfont auch nutzt.

Hier im Beispiel benutze ich dieselbe Schriftart wie damals in meinem Beitrag. Dies hat den simplen Grund, dass Kalam sofort auffällt. Anders als in meinem Beitrag würde ich das Einbinden auch direkt über die theme.json erledigen und nicht über ein @font-face in der style.css (die im Moment ja eh noch nicht entsprechend funktioniert).

Die Definitionen für die theme.json lauten so:

"typography": {
    "fontFamilies": [
    {
        "fontFamily": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif",
        "name": "System Font",
         "slug": "system-font"
    },
	{
		"fontFace": [
		{
		"fontFamily": "Kalam",
		"fontStretch": "normal",
		"fontStyle": "normal",
		"fontWeight": "200 900",
		"src": [
		"file:./assets/fonts/kalam-v15-latin-regular.woff2"
			]
		}
	],
	"fontFamily": "\"Kalam\", sans-serif",
	"name": "Kalam",
	"slug": "kalam"
	}
    ]
 }

Nun, da der Webfont eingebunden ist, steht er für die weitere Zuordnung in den Stilen zur Verfügung.

Farben definieren

Block Theme Tutorial Tipp 10:

Hinterlegen Sie Ihre Farbwerte direkt in der theme.json und erledigen Sie die Zuordnung der Farben zu einzelnen Elementen über die Stile.

Zwar lassen sich eigene Farbwerte über die Stile definieren. Ich halte es aber für einfacher, sie in der theme.json zu hinterlegen.

Das hat den Grund, dass sich WordPress alles, was Sie vielleicht über die Stile mal ausprobiert haben, irgendwie merkt. Und plötzlich wundern Sie sich, woher zum Henker denn noch immer dieses Rot oder jenes Grün kommen, von denen sie sich schon längst verabschiedet glaubten.

Für mein Block Theme habe ich mich für folgende Farben entschieden:

"$schema": "https://schemas.wp.org/wp/6.2/theme.json",
	"settings": {
		"appearanceTools": true,
		"color": {
			"palette": [
				{
					"color": "#351853",
					"name": "lila",
					"slug": "lila"
				},
				{
					"color": "#ffc000",
					"name": "gelb",
					"slug": "gelb"
				},
				{
					"color": "#fed966",
					"name": "hellgelb",
					"slug": "hellgelb"
				},
				{
					"color": "#2a2a2a",
					"name": "dunkelgrau",
					"slug": "dunkelgrau"
				},
				{
					"color": "#666666",
					"name": "grau",
					"slug": "grau"
				}
			]
		},
		"layout": ...

Einmal so in der theme.json hinterlegt, stehen die Farbwerte dann überall zur Verfügung, wo sich etwas einfärben lässt. Also auch in der Bearbeitung von Beiträgen oder Seiten.

Arbeiten mit den Stilen

Nun, da wir die ersten Templates und drei Template-Teile erstellt, eine Schriftart eingebunden und die Farben hinterlegt haben, wird es Zeit, dem Block Theme ein ansprechenderes Erscheinungsbild zu geben.

Für diese Zwecke bietet der Design Editor die Stile.

Farben zuordnen

Stile können Sie zuerst einmal ganz allgemein definieren.

Beginnen wir mit den Farben. Die Farbwerte, die Sie in der theme.json hinterlegt haben, stehen hier nun zur Verfügung. Nun können Sie zum Beispiel unter Typographie diese Farbwerte für alle Textarten, für die Überschriften, für Links und für Buttons zuordnen.

Im Beispiel habe ich dafür gesorgt, dass alle Links lila und bei Mauszeigerkontakt (hover) gelb werden.

Schriftart zuordnen

Apropos Textarten und Überschriften. Denen können Sie nun auch den mit der theme.json eingebundenen Webfont zuordnen. In meinem Fall sollen alle Textarten und alle Überschriften den System Font benutzen.

Nur die Überschriften der Ebene 2 und 3 (h2 und h3) sollen Kalam verwenden.

Blöcke formatieren und zusätzliches CSS

Auch können Sie Stile festlegen für alle Blocktypen. Die lassen sich entweder über Stile > Blöcke auflisten. Oder Sie verwenden dafür das neue Stilbuch.

Wer wie ich die zentrale Ablage von Styles in der style.css liebt, tut sich mit diesen Stilen und dem Stilbuch vielleicht noch etwas schwer.

An sich aber bietet das Stilbuch eine gute Übersicht über das Erscheinungsbild aller wesentlichen Blöcke. Auch lassen diese sich hier ob der Übersichtlichkeit besser und einfacher erreichen als über die alphabetische Liste aller Blöcke.

Block Theme Tutorial Tipp 11:

Arbeiten Sie mit dem Stilbuch. Es bietet leichteren Zugriff auf die wesentlichen Blocktypen und ihre Optionen zur Gestaltung.

Zusätzliches CSS lässt sich übrigens auch allgemein über die Stile-Aktionen (die drei vertikalen Pünktchen neben dem Icon für das Stilbuch) hinterlegen. Diese Funktion listet aber nicht automatisch alle CSS-Definitionen auf, die Sie vielleicht schon für einzelne Blöcke festgelegt haben.

Zugegeben…

Ich fremdle noch ein wenig mit dem Stilbuch. Zum einen habe ich es gerne, wenn ich alle meine Formatangaben an einem zentralen Ort finde, der sich bestenfalls style.css nennt. Zum anderen bieten die Stile natürlich noch immer nicht alle denkbaren Optionen für die Formatierung der Blöcke. Ich muss also ohnehin alle Nase lang zusätzliches CSS anlegen. Das kann ich dann auch in meiner zentralen Datei machen.

Nun muss ich der Gerechtigkeit halber erwähnen, dass die Angaben, die Sie sich mit den Stilen zusammenklicken, genauso in einer zentralen Datei landen wie das zusätzliche CSS, das Sie hier definieren. Und diese Datei ist die theme.json.

Sichern Sie Ihre Stile

Irgendwann kommen Sie an den Punkt, wo Sie schon reichlich Templates und Template-Teile angelegt und massig Stile definiert haben. Wenn Sie mit Ihrem (Zwischen)-Ergebnis zufrieden sind, dann sollten Sie Ihre Arbeit einmal sichern.

Dafür gibt es zwei Optionen. Entweder Sie benutzen ohnehin schon das Plugin Create Block Theme. Dann wählen Sie hier einfach die Option »Overwrite IHR-BLOCK-THEME«. Ein Klick, und schon werden ALLE Benutzer-Änderungen als Theme-Änderungen im Theme-Ordner gespeichert. Benutzer-Änderungen gibt es dann nicht mehr. Alles, was Sie bislang gemacht haben, ist nun Teil des Block Themes.

Die Ergebnisse sehen Sie dann auch sofort im Werkzeuge > Theme-Datei-Editor: Alle Templates, die Sie erstellt haben, sind hier nun als Dateien vorhanden. Und Ihre theme.json zeigt extrem viel mehr Einträge.

Alternativ können Sie aber auch einfach Ihr Block Theme exportieren. Dazu klicken Sie im Design Editor auf Ansicht anpassen (die drei vertikalen Pünktchen oben rechts) und wählen unter Werkzeuge > Exportieren. WordPress erstellt dann ein zip-Archiv Ihres Block Themes. Und dazu gehört natürlich auch die theme.json, die alle Ihre Stile berücksichtigt.

Diese theme.json können Sie nun per FTP auf Ihren Server laden und die dort vorhandene überschreiben. Oder Sie kopieren die neuen Definitionen über Werkzeuge > Theme-Datei-Editor in die vorhandene, weit überschaubarere theme.json.

So oder so schaffen Sie sich einen weichen Fallback. Denn falls Sie irgendwann das Bedürfnis haben sollten, über die Stile-Aktionen alles auf die Standardeinstellungen zurückzusetzen, landen Sie nicht wieder ganz am Anfang.

Block Theme Tutorial Tipp 12:

Sichern Sie Ihre Stile per Export Ihres Block Themes und kopieren Sie die Definitionen in Ihre theme.json. So schaffen Sie sich einen weichen Fallback.

Dem Block Theme eine functions.php geben

Oder Sie benutzen die style.css, die das Theme ja ohnehin braucht. Bearbeiten können Sie diese Datei (so wie alle Theme-Dateien) im Werkzeuge > Theme-Datei-Editor.

Doch damit Ihr Block Theme Ihre Styles in der style.css überhaupt benutzt, braucht es die passende Funktion. Und die Funktion können Sie nur in einer functions.php hinterlegen.

Block Theme Tutorial Tipp 13:

Gönnen Sie Ihrem Block Theme eine functions.php und sorgen Sie dafür, dass Ihr Block Theme die Angaben in Ihrer style.css berücksichtigt.

Sie erstellen für Ihr Block Theme nun also eine Datei namens functions.php und kopieren folgenden Code hinein:

<?php

/**
 * Enqueue the style.css file.
 * 
 * @since 1.0.0
 */
function fse_styles() {
	wp_enqueue_style(
		'fse-style',
		get_stylesheet_uri(),
		wp_get_theme()->get( 'Version' )
	);
}
add_action( 'wp_enqueue_scripts', 'fse_styles' );

Diese functions.php laden Sie ebenfalls per FTP in das Verzeichnis /wp-content/themes/NAME-IHRES-THEMES.

Fortan wird Ihr Block Theme alle CSS-Definitionen berücksichtigen, die Sie in Ihre style.css schreiben.

Mit dieser functions.php können Sie aber auch eigene Block Styles oder Block Patterns für Ihr Block Theme registrieren. Und natürlich können Sie hier eigene Funktionen einbauen, für die Sie sonst vielleicht Plugins bräuchten.

WordPress Block Theme Tutorial Fazit

Habe ich Sie mit meinem Tutorial so erschlagen, dass Sie nun darauf verzichten, Ihr eigenes WordPress Block Theme zu erstellen? Das täte mir leid und war definitiv nicht meine Absicht.

Wenn ich mit meiner Anleitung und den Tipps aber etwas verdeutlichen wollte, dann ist es meine Einschätzung, dass Full Site Editing nichts für absolute Einsteiger/innen ist.

Auch wenn Sie mit dem Design Editor viel schneller ans Ziel kommen als bisher mit PHP-Codierung, erfordert das Ganze doch immer noch Vorkenntnisse in Sachen Webgestaltung. Und es braucht dieselbe Begeisterung für sehr exaktes, zeichengenaues Arbeiten.

Eine Einschätzung, nach der WordPress nun einen auf Baukasten macht, bei dem man sich ganz simpel was zusammenklicken kann, teile ich definitiv nicht.

Hilfe erwünscht?

Wenn Sie Hilfe bei der Erstellung Ihres eigenen Block Themes benötigen, kontaktieren Sie mich. Gerne helfe ich Ihnen im Rahmen eines Online-Termins dabei, für Ihre Vorstellungen und Wünsche die passenden Lösungen zu finden. Die Konditionen entsprechen denen meiner Einzelkurse.

PS: Über kurz oder lang wird übrigens auch diese Website Ihr eigenes Block Theme erhalten. In Arbeit ist es bereits…


alle Beitragsbilder: Britta Kretschmer

Schreibe einen Kommentar

Die im Rahmen der Kommentare angegebenen Daten werden von mir dauerhaft gespeichert. Cookies speichere ich nicht. Für weitere Informationen siehe bitte meine Datenschutzerklärung.

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert