12. Dezember 2023

Synchronisierte Vorlagen – So kannst du in WordPress Block-Templates erstellen, die automatisch auf jeder Seite geändert werden

Seit noch gar nicht allzu langer Zeit gibt es WordPress das Feature „synchronisierte Vorlagen“. Und dieses Feature ist aus meiner Sicht ein echter Game-Changer.

Im Prinzip ist eine „synchronisierte Vorlage“ nicht anderes als eine Zusammenstellung beliebiger Elemente, die im Block-Editor erstellt worden sind. Einmal erstellt, kann ich diese Vorlage auf beliebig vielen Seiten einfügen. Das Besondere: Die Inhalte sind synchronisiert. Das bedeutet, wenn ich auf einer Seite etwas ändere, wird dieser Bereich auf allen Seiten ebenfalls geändert. Und das ist wirklich unfassbar praktisch!

Einige klassische Anwendungsfälle sind z.B. Kontaktboxen, CTAs am Ende einer Seite („Jetzt Kontakt aufnehmen!“), Teaser-Boxen mit Leistungen eines Unternehmens oder im Prinzip auch ganze Footer-Menüs.

Um eine „synchronisierte Vorlage“ zu anzulegen, erstelle als erstes die Inhalte im Block-Editor.

Anschließend markierst du die gewünschten Blöcke, klickst auf den 3-Punkte-Button und dann auf „Vorlage erstellen“.

Jetzt gibst du der Vorlage noch einen Namen. Standardmäßig ist die Option „synchronisiert“ vorausgewählt.

Anschließend kannst du die Vorlage über den blauen „+“-Button oben links in Seiten oder Posts einfügen.

Um den Überblick über die Vorlagen zu behalten, empfiehlt es sich, sie über das Menü zugänglich zu machen. Von hier aus können die Vorlagen dann zentral editiert werden.

Ergänze hierfür einfach folgenden Code in der functions.php:

function ff_reusable_blocks_admin_menu() {
    add_menu_page( 'Vorlagen', 'Vorlagen', 'edit_posts', 'edit.php?post_type=wp_block', '', 'dashicons-editor-table', 22 );
}
add_action( 'admin_menu', 'ff_reusable_blocks_admin_menu' );Code-Sprache: JavaScript (javascript)

Und mit folgendem Snippet können die Blöcke auch direkt im PHP verwendet werden:

$reusable_block = get_post( 678 );
echo apply_filters( 'the_content', $reusable_block->post_content );Code-Sprache: PHP (php)