Full Site Editing

Full Site Editing (FSE) ist eine Sammlung von neuen WordPress Features: Block themes, templates, template parts und global styles. Die Bearbeitung erfolgt in einem Block-Editor.

Abfrage-Loop mit Beitragsbild als Cover

Abfrage-Loop mit Beitragstitel und Textauszug als Cover

Im deutschsprachigen WordPress-Support-Forum wurde die Frage gestellt, wie man auf der Startseite die Beitragsbilder als Cover darstellen kann, so dass Beitragstitel und Textauszug im Bild und nicht neben dem Bild angezeigt werden. Zunächst hatte ich gedacht, dass das z. Zt. nicht möglich ist. Carolina Nymark hat mich aber im Slack-Channel #fse-outreach-experiment eines besseren belehrt. Was dann daraus geworden ist, habe ich in diesem Beitrag zusammengefasst. …

Weiterlesen …

Onepager mit Twenty Twenty-Two und wie man das mit Full Site Editing (FSE) macht

Onepager bei einem Block Theme am Beispiel Twenty Twenty-Two

Ich hatte vor einiger Zeit schon mal einen Beitrag zum Onepager als WordPress-Website erstellt. Damals ging es um eine Website als Onepager mit einem klassischen Theme wie z. B. Twenty Twenty. Mit einem Block Theme wie z. B. Twenty Twenty-Two und Full Site Editing (FSE) sieht das allerdings anders aus. Welche Möglichkeiten man hat, zeige ich in diesem Beitrag. …

Weiterlesen …

Theme Export bei Twenty Twenty-Two (WordPress 6.0)

Export Block Theme in WordPress 6 am Beispiel Twenty Twenty-Two

Eine Website wird häufig in einer Entwicklungsumgebung erstellt. Bei einem Block Theme wie z. B. Twenty Twenty-Two kann man das angepasste Theme mit allen aktualisierten Styles und Templates ab WordPress 6.0 jetzt exportieren und z. B. auf einer anderen Website importieren. Wie das funktioniert, zeige ich in diesem Beitrag. …

Weiterlesen …

Navigation mit Zeile am oberen Rand mit Full Site Editing (FSE) bei Twenty Twenty-Two einrichten

Navigation mit Zeile am oberen Rand (Full Site Editing)

Insbesondere bei gewerblich Websites findet man häufig ganz oben über der Navigation eine schmale Zeile, in denen z. B. die Kontaktdaten aufgelistet sind. In der Regel kann man das mit einem klassischen Theme nicht so einfach umsetzen. Als Anwendungsfall wollte ich mal testen, ob und wie man das mit Full Site Editing (FSE) hinbekommen kann. Wie man diese Zeile mit FSE einrichten kann, beschreibe ich in diesem Beitrag. …

Weiterlesen …

BlockGap passt den vertikalen Rand oder Abstand zwischen Blöcken (z. B. bei Spalten) an und kann in der theme.json (FSE) definiert werden.

blockGap in der theme.json: Abstände zwischen Blöcken

Bei der Einarbeitung in Full Site Editing (FSE) wollte ich 2-spaltige Blöcke mit Bildern verwenden, die abwechselnd Spalten mit 1/3- und 2/3-Aufteilung haben sollten. Das ist grundsätzlich auch kein Problem. Das Problem bestand eher darin, dass der Abstand zwischen den Spalten nur sehr klein sein sollte (z. B. 3px). Das kann man mit dem blockGap-Stil in der theme.json ändern. Wie das funktioniert, erläutere ich nachfolgend. …

Weiterlesen …

Full Site Editing (FSE) und theme.json: Schriftarten nutzen

Schriftarten (fonts) nutzen: Full Site Editing (FSE) und theme.json

Dieser Beitrag ist quasi eine Art Dokumentation, in der ich protokolliere, wie ich vorgegangen bin, um andere Schriften zu nutzen. Ziel war es, nach Erstellung eines Child Themes zusätzliche Schriftarten im Bedarfsfall für bestimmte Blöcke durch entsprechende Änderung der theme.json zu definieren. Ich muss gestehen, dass ich schon im Vorfeld einige Versuche unternommen hatte und teilweise krachend gescheitert war und/oder entnervt aufgegeben habe. Diesmal hat es geklappt. …

Weiterlesen …

Full Site Editing (FSE): Einstellungen und Stile - Stolpersteine bei Typography, Colors und Layout

Full Site Editing (FSE): Einstellungen und Stile (Settings and Styles)

In WordPress 6.0 wird Full Site Editing (FSE) nach der Einführung in WordPress 5.9 weiterhin eine große Rolle spielen. Beim FSE bin ich immer wieder darüber gestolpert, dass ich z. B. irgendwelche Änderungen an Farben beim Block Theme Twenty Twenty Two vorgenommen habe, die aber nicht umgesetzt wurden. Nach vielen (Test-)Wochen habe ich jetzt das Prinzip weitestgehend begriffen. Wie man am besten vorgeht und welche Fallstricke es bei der Bearbeitung von Templates und Template-Teilen gibt, beschreibe ich in diesem Beitrag. …

Weiterlesen …

Global Style Variations: orange auf anthazit am Beispiel TwentyTwenty-Two

Global Style Variationen bei Block Themes

In WordPress 6.0 wird man mehrere Global Style Variationen bei einem Block Theme wie z. B. Twenty Twenty-Two anbieten oder nutzen können. Global Style Variationen können verschiedenen Stilvoreinstellungen berücksichtigen, wie das Ein-/Ausschalten der Schriftstärke, Stiloptionen oder auch die Standardfarbpalette. In diesem Beitrag beschreibe ich am Beispiel der Standardfarbpalette, wie man Global Styles bei Block Themes in WordPress erstellt und verwendet. …

Weiterlesen …

Erstellen eines Child Themes

Block Themes: Generate Child Theme – ein WordPress-Plugin

Die Erstellung eines Child Themes bei Block Themes oder klassischen Themes ist nicht ganz einfach. Wie man mit dem Plugin Generate Child Theme für WordPress relativ schnell und einfach Child Themes für Block Themes wie z. B. Twenty Twenty-Two erstellen kann, erläutere ich in diesem Beitrag. Lediglich die theme.json muss zusätzlich erstellt bzw. in den Ordner kopiert werden. Aber auch für klassische Themes wie z. B. GeneratePress ist das Plugin eine zeitsparende Lösung. …

Weiterlesen …