Eigenen wiederverwendbaren Inhalt mit dem WordPress Block Editor erstellen

Stormtrooper von Lego

Bild: Omar Flores @ Unsplash

Seit der Veröffentlichung von WordPress 5.2 können Autoren und Redakteure ohne Programmieraufwand ihre eigenen wiederverwendbaren Content-Komponenten zusammenstellen. Dies ist einer leistungsstarken Kombination von wiederverwendbaren Blöcken und dem Gruppenblock zu verdanken.

Ich konzipiere, gestalte und programmiere WordPress-Websites für Kunden unserer Agentur Say Hello, und alle unsere Projekte seit Anfang 2019 werden mit vollständiger Unterstützung des Blockeditors (Gutenberg) erstellt. Dadurch können unsere Kunden entscheiden, welche Inhalte wo auf der Website erscheinen. Nicht nur in der Inhaltsspalte sondern auch in Randbereichen.

Mit jeder neuen Version von WordPress haben die Kunden einen viel grösseren Umfang an Kontrolle über das Seitenlayout und den Seiteninhalt als je zuvor – entweder im Seiteninhalt oder in vordefinierten, inhaltsunabhängigen Bereichen. Oft, ohne dass wir irgendwelche technischen Arbeiten durchführen müssen.

Das Erstellen von Inhalten ist einfach für Autoren, sei es für jemanden, der einen einfachen Artikel nur mit Text schreiben möchte, oder für einen Redakteur, der ein medienreiches, mehrspaltiges Layout zusammenstellen möchte.

Aber vielleicht möchte ich in der Lage sein, den gleichen Inhalt auf mehreren Seiten oder in mehr als einem Blogbeitrag zu verwenden. Wenn ich den Inhalt einmal ändere, sollte er automatisch überall auf der Website aktualisiert werden. Kann ich dies ohne Programmierung oder Verwendung eines Plugins tun?

Klar doch. Hier ist ein Beispiel für diesen Anwendungsfall: ein «Teaser», der auf unsere motivierenden Hintergründe verweist.

Etwas Motivation gefällig?

Diesen Motivations-Wallpapers musst du dir unbedingt anschauen und gleich herunterladen.

Ich habe diesen Inhalt mit nichts anderem als einem Standardelement im Editor erstellt; dem Cover-Block mit einem einfachen Inhalt. Ich habe diese Kombination durch die Option «Zu wiederverwendbaren Blöcken hinzufügen» in ein wiederverwendbares Element geändert. Nun kann ich diesen speziell entworfenen und verlinkten Block auf meiner gesamten Website hinzufügen.

Wenn ich es irgendwo auf der Website bearbeite, werden alle anderen Stellen, an denen es erscheint, automatisch aktualisiert. (Ein Hinweis: Wenn du ein bestehendes wiederverwendbares Element bearbeitest, musst du die Änderungen im Block speichern und den aktuellen Beitrag ebenfalls speichern).

Was sind also Gruppenblöcke? Sie sind das, was du verwendest, wenn das Layout etwas komplexer wird. Ich möchte den Teaser oben verwenden, ihn aber in ein Spaltenlayout einbetten, etwas Text hinzufügen und das Ganze in einen breiten Banner mit einer dunklen Hintergrundfarbe setzen. An dieser Stelle kommt der Gruppenblock ins Spiel.

  1. Füge der Seite einen Gruppenblock hinzu.
  2. Füge der Seite eine Hintergrundfarbe für die Gruppe hinzu.
  3. Füge einen Spaltenblock in die Gruppe ein.
  4. Füge den Teaser in eine der Spalten und einen zusätzlichen Text in die andere Spalte ein.
  5. Wandle den äusseren Gruppenblock in einen wiederverwendbaren Block um.

Etwas Motivation gefällig?

Diesen Motivations-Wallpapers musst du dir unbedingt anschauen und gleich herunterladen.

Hier ist ein Text, der erklärt, wie dieses Element als Beispiel eines wiederverwendbaren Blocks aufgesetzt wurde.

Das war’s! Wenn du diese einfachen Schritte befolgst, hast du gerade deinen ersten «Call to Action» (Teaser) erstellt, ohne Programmierung, ohne CSS, nur mit dem Standard-Blockeditor.

Da der Gruppenblock dieselbe Logik wie andere Blöcke im Editor verwendet, kann er auch von einem Entwickler angepasst werden – zum Beispiel durch eine Reihe vordefinierter Auffüll- oder Randoptionen.

Das Tolle an dieser Technik ist, dass du wiederverwendbare Blöcke und den Gruppenblock so implementieren kannst, wie du willst. Vorausgesetzt, dass das von dir verwendete Theme diese Funktionen richtig unterstützt, ist die gesamte Arbeit redaktionell.

Sobald du den Dreh raus hast, kannst du sogar komplexe Inhalte mit wiederverwendbaren Blöcken innerhalb wiederverwendbarer Blöcke aufbauen. Es ist überhaupt nicht schwierig, wenn du einmal eine Handvoll einfacherer Kombinationen gemacht hast und dich an diese Arbeitsweise gewöhnt hast.

Bedeutet dies, dass wir keine Custom Blocks mehr brauchen?

Du wirst manchmal feststellen, dass das Layout, das du erstellen musst, sehr komplex ist und eine so grosse Bandbreite an Optionen und Einstellungen und Ebenen enthält. Dass eine Kombination vorhandener Blöcke manchmal schwierig zu pflegen ist. Möglicherweise weisst du nicht, wo du kreativ anfangen sollst, wenn du eine Kombination von wiederverwendbaren Blöcken erstellen willst.

Möglicherweise stösst du auf Fälle, in denen du die Ränder und Abstände manuell in einer Weise anpassen musst, die mit dem Blockeditor nicht möglich ist. Oder du musst einen Inhalt präsentieren, der mit bestehenden Blöcken nicht erstellt werden kann.

An dieser Stelle ist es sinnvoll, einen erfahrenen WordPress-Entwickler zu bitten, dir einen benutzerdefinierten Block zu erstellen. Wenn ein Entwickler vielleicht ein paar Stunden Budget für einen wiederverwendbaren angepassten Block benötigt, kann dir dies Stunden oder sogar Tage Arbeit ersparen.

Zwei abschliessende Tipps

Der erste Tipp ist, dass es einfacher ist, die wiederverwendbaren Inhaltselemente direkt als eigenständige Elemente zu erstellen, anstatt sie immer «on the fly» in der Seite oder dem Beitrag zu erstellen, den du gerade schreibst. Auf diese Weise wirst du dich daran gewöhnen, dass deine Bearbeitung sie überall verändert, und du wirst verhindern, dass du Inhalte versehentlich überschreibst.

(Wenn du keine Erlaubnis hast, Beiträge in deiner WordPress-Site zu bearbeiten, kannst du auch diese wiederverwendbare Blöcke nicht bearbeiten).

Der zweite Tipp ist, wo man die wiederverwendbaren Blöcke findet. Sie sind nicht leicht zu finden, aber es gibt zwei Lösungen.

Erste Möglichkeit: Auf das Plus-Symbol «Block hinzufügen» oben links auf dem Bearbeitungsbildschirm klicken und dann nach unten zu «Wiederverwendbare Blöcke» scrollen. Innerhalb dieses Abschnitts findest du einen Link zu «Alle wiederverwendbaren Blöcke verwalten», der dich direkt dorthin führt.

Zweite Möglichkeit: Das folgende Code-Snippet zu deinem Theme hinzufügen, wenn du über ausreichende WordPress-Programmierkenntnisse verfügst.

function mhm_reusableBlocksAdminMenu()
{
	add_submenu_page(
		'themes.php',
		_x('Reusable Blocks', 'Admin page title', 'my_theme'),
		_x('Reusable Blocks', 'Admin menu label', 'my_theme'),
		'edit_posts',
		'edit.php?post_type=wp_block'
	);
}

add_action('admin_menu', 'mhm_reusableBlocksAdminMenu');


Keine Beiträge verpassen?






War dieser Artikel hilfreich?
Please wait...
Fragen oder Anregungen?
Zu den Kommentaren ( 0 )
Passende Themen
Kommentare (0)

Schreibe einen Kommentar

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

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.