Headings bei WordPress Websites und Block Themes wie Twenty Twenty-Four

WordCamp Leipzig 2024 Vortrag

WordCamp Leipzig 2024: Layouts mit dem Block Editor / GenerateBlocks

Hier klicken, um den Inhalt von WordPress.tv anzuzeigen.
Erfahre mehr in der Datenschutzerklärung von WordPress.tv.

„VideoPress Video Player“ direkt öffnen
Der Vortrag bei WordPress.tv

Beschreibung

In dem Vortrag zeige ich, welche interessanten Layouts mit dem Block Editor und ggfs. der zusätzlichen kleinen Block Bibliothek von GenerateBlocks möglich ist. Dabei gehe ich auch kurz auf die Unterschiede bei Verwendung von einem Block Theme wie Twenty Twenty-Four und einem klassischen Theme wie GeneratePress ein.
Bei dem Vortrag präsentiere ich anhand verschiedener fertiger Layouts, wie man die Blöcke verwenden kann, um moderne Layouts zu erstellen. In wenigen Fällen wird noch ein wenig zusätzliches CSS verwendet. Außerdem werde ich auch noch kurz auf das Grid Layout eingehen, das in einer kommenden Version von WordPress vorgesehen ist.

Zielgruppe: Der Vortrag richtet sich sowohl an Nutzer als auch an Beginner, aber evtl. ist auch etwas für die Profis dabei.

Bio

Hand-Gerd erstellt Websites seit ca. 20 Jahren. Angefangen hat er mit dem Projekt aachenerkinder.de, das 2015 von einem selbst entwickelten CMS auf WordPress portiert wurde. Er schreibt regelmäßig Beiträge rund um WordPress hier auf haurand.com, entwickelt WordPress-Websites für Kunden, ist aktiv in der deutschsprachigen Community (u. a. als Moderator im deutschsprachigen WordPress Support-Forum) sowie Organisator des WordPress Meetup Südsauerland.

Screenshot Kacheln

WordCamp Leipzig 2024: Kacheln

theme.json: Code und Hinweise

Einschalten der appearanceTools bei classic Themes

Die theme.json wird in dem Fall in den Root-Ordner des Themes kopiert.

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 2,
	"settings": {
		"appearanceTools": true
	}
}

Mit Einstellung der Content-Breite: layout

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 2,
	"settings": {
		"appearanceTools": true,
		"layout": {
			"contentSize": "650px",
			"wideSize": "1200px"
		}
	}
}

Mit Farben: color

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 2,
	"settings": {
		"appearanceTools": true,
		"color": {
			"palette": [
				{
					"color": "#38629F",
					"name": "Base",
					"slug": "base"
				},
				{
					"color": "#ffffff",
					"name": "Base / Two",
					"slug": "base-2"
				},
				{
					"color": "#111111",
					"name": "Contrast",
					"slug": "contrast"
				},
				{
					"color": "#D5E0F0",
					"name": "Contrast / Two",
					"slug": "contrast-2"
				},
				{
					"color": "#F3CD1E",
					"name": "Contrast / Three",
					"slug": "contrast-3"
				},
				{
					"color": "#8ED1FC",
					"name": "Accent",
					"slug": "accent"
				},
				{
					"color": "#BF1919",
					"name": "Accent / Two",
					"slug": "accent-2"
				},
				{
					"color": "#d8613c",
					"name": "Accent / Three",
					"slug": "accent-3"
				},
				{
					"color": "#b1c5a4",
					"name": "Accent / Four",
					"slug": "accent-4"
				},
				{
					"color": "#b5bdbc",
					"name": "Accent / Five",
					"slug": "accent-5"
				},
				{
					"color": "#F3CD1E",
					"name": "Accent / Six",
					"slug": "accent-6"
				},
				{
					"color": "#8ED1FC",
					"name": "Accent / Seven",
					"slug": "accent-7"
				},
				{
					"color": "#BF1919",
					"name": "Accent / Eight",
					"slug": "accent-8"
				},
				{
					"color": "#0064AA",
					"name": "Accent / Nine",
					"slug": "accent-9"
				}
			]
		},
		"layout": {
			"contentSize": "650px",
			"wideSize": "1200px"
		}
	}
}

Oder über ein kleines Code-Snippet in der functions.php des Child Themes 

add_theme_support( 'appearance-tools' );