Block-Muster

Dieser Text wurde mithilfe von KI übersetzt. Wenn du den Originaltext auf Englisch lesen möchtest, klicke hier.

Eine WordPress-Vorlage ist eine Sammlung von Blöcken, die zu einem durchdachten, zielgerichteten und gestalteten Abschnitt für einen Beitrag, eine Seite oder ein Template zusammengestellt sind.

Mit WordPress.com-Vorlagen kannst du mühelos ansprechende Beiträge, Seiten und Templates erstellen. Sie wurden vom Designteam bei WordPress.com entwickelt und übernehmen nahtlos die globalen Stile deines Themes. Wähle aus einer umfangreichen Sammlung von Vorlagen und passe diese nach Belieben an – keine zusätzlichen Plugins oder Programmierung erforderlich. Betrachte diese Vorlagen als eine Komponentenbibliothek für den Block-Editor.

Vorlagen auf WordPress.com verwenden

Vorlagen über den Block-Editor finden

WordPress.com-Vorlagen sind im Block-Editor verfügbar. Folge dazu diesen Anweisungen:

1. Navigiere zum Editor für einen beliebigen Beitrag, eine Seite oder ein Template.
2. Klicke auf die Schaltfläche +, um den Block-Inserter aufzurufen.
3. Klicke auf den Tab Vorlagen, um eine Liste der Vorlagenkategorien zu durchsuchen. (Um alle Vorlagen in der Rasteransicht anzuzeigen, scrolle ans Ende der Liste und klicke auf Alle Vorlagen erkunden.)
4. Klicke auf die gewünschte Vorlage, um sie in deinen Beitrag, deine Seite oder dein Template einzufügen.

Von dort aus kannst du den Inhalt der Vorlage (Bilder, Text, Links usw.) im Editor bearbeiten. Im Website-Editor definierte Theme-Stile werden automatisch auf die eingefügte Vorlage angewendet.

Vorlagen über die Vorlagen-Bibliothek finden

Um Vorlagen bei verschiedenen Bildschirmbreiten in der Vorschau anzuzeigen und die Responsivität der Designs zu überprüfen, kannst du die Vorlagen-Bibliothek von WordPress.com verwenden. Die Bibliothek ermöglicht es dir nicht nur, Vorlagen zu durchsuchen, zu suchen und bei verschiedenen Bildschirmbreiten in der Vorschau anzuzeigen, sondern auch Vorlagen zu kopieren und in den Block-Editor einzufügen.

Wenn du die Vorlagen-Bibliothek besuchst, verwende die Kategorienavigation, um alle verfügbaren Vorlagen anzuzeigen. Alternativ kannst du das Suchformular verwenden, um nach Vorlagen anhand von Schlüsselwörtern oder Funktionen zu suchen. Sobald du eine Vorlage gefunden hast, die du verwenden möchtest, klicke auf die Schaltfläche Kopieren.

Nachdem du eine Vorlage ausgewählt hast, navigiere zum Editor für einen Beitrag, eine Seite oder ein Template auf deiner WordPress.com-Website und füge die Vorlage mit einem Tastaturkürzel (command + v auf Mac oder ctrl + v unter Windows) oder durch Rechtsklick und Auswahl von Einfügen ein.

Wie bei anderen Vorlagen kannst du den Inhalt der eingefügten Vorlage (Bilder, Text, Links usw.) im Block-Editor bearbeiten.

Mit Vorlagen gestalten

Unsere Block-Vorlagen sind portabel konzipiert, aber deine theme.json-Datei muss dennoch einige Richtlinien befolgen, damit unsere Vorlagen optimal aussehen.

Konkret setzen wir voraus, dass die folgenden Slugs in spacing.spacingSizes definiert sind:

• "slug": "20"
• "slug": "30"
• "slug": "40"
• "slug": "50"
• "slug": "60"
• "slug": "70"
• "slug": "80"

Dies sind dieselben Abstands-Voreinstellungen, die WordPress standardmäßig generiert. Wenn sie in deinem Theme fehlen, kann es vorkommen, dass einige Block-Abstände beim Einfügen einer Vorlage vollständig zusammenfallen. Unsere Vorlagen funktionieren möglicherweise auch dann, wenn dein Theme andere Abstands-Voreinstellungen verwendet, aber dies ist der Standard, an den wir uns halten.

Richtlinien zur Vorlagenstruktur

Neben der Verwendung von WordPress.com-Vorlagen in deinen Beiträgen, Seiten und Templates kannst du auch eigene erstellen. Das WordPress.com-Designteam hat einige seiner Erkenntnisse im WordPress Developer Blog veröffentlicht, darunter die folgenden empfohlenen Richtlinien für die Erstellung von Vorlagen:

• Ein Gruppe-Block auf oberster Ebene, der die gesamte Breite der Seite einnimmt.
  • Dies erleichtert es, die Hintergrundfarbe eines ganzen Seitenabschnitts zu ändern und die Abschnitte einer Seite neu anzuordnen, da jede Vorlage in einem Gruppe-Block enthalten ist.
  • Diese Gruppe-Blöcke haben in der Regel die linken und rechten Innenabstandswerte den globalen Stil-Layout-Einstellungen der Website zugeordnet, sodass sich die Vorlage an das Theme anpasst. 
• Ein Container-Block (Raster, Spalten, Zeile und Stapel usw.) wird direkt innerhalb des Blocks auf oberster Ebene verschachtelt.
  • Dieser Block wird auf den „Breit“-Breitenwert des Themes gesetzt, sodass der Inhalt der Vorlage eine maximale Breite hat, wie sie vom Theme definiert wird.
• Zwei Abstandshalter-Blöcke werden direkt über und unter dem Container-Block platziert.
  • Diese Abstandshalter-Blöcke ermöglichen es dir, den Abstand zwischen Vorlagen auszuwählen und anzupassen, ohne die entsprechenden Innenabstands-Steuerelemente des Blocks suchen zu müssen.

Erfahre mehr darüber, wie bestimmte Blöcke funktionieren und wie du damit bauen kannst.

Vorlagen deaktivieren

Um Block-Vorlagen in den meisten Fällen zu entfernen, konsultiere die offizielle WordPress-Dokumentation zum Aufheben der Registrierung von Vorlagen. Es kann jedoch Fälle geben, in denen du Vorlagen deaktivieren möchtest, die spezifisch für WordPress.com sind.

Das Deaktivieren von Vorlagen erfordert, dass du Zugriff auf SSH oder SFTP für deine Website hast, um die Datei functions.php deines Themes bearbeiten zu können.

Um alle nicht von Benutzern erstellten Vorlagen zu deaktivieren, kopiere den folgenden Code und füge ihn am Ende der Datei functions.php deines Themes ein:

// Disable the remote patterns coming from the Dotorg pattern directory.
// See https://developer.wordpress.org/themes/patterns/registering-patterns/#disabling-remote-patterns
add_filter( 'should_load_remote_block_patterns', '__return_false' );

// Remove and unregister patterns from core, Dotcom, and plugins. 
// See 		https://github.com/Automattic/jetpack/blob/d032fbb807e9cd69891e4fcbc0904a05508a1c67/projects/packages/jetpack-mu-wpcom/src/features/block-patterns/block-patterns.php#L107
add_filter( 'rest_dispatch_request', 'your_theme_restrict_block_editor_patterns', 12, 3 );

/**
 * Restricts block editor patterns in the editor by removing support for all patterns from:
 *  - Dotcom and plugins like Jetpack
 *  - Dotorg pattern directory except for theme patterns
 */
function your_theme_restrict_block_editor_patterns( $dispatch_result, $request, $route ) {
	if ( strpos( $route, '/wp/v2/block-patterns/patterns' ) === 0 ) {
		$patterns = WP_Block_Patterns_Registry::get_instance()->get_all_registered();

		if ( ! empty( $patterns ) ) {
			// Remove theme support for all patterns from Dotcom, and plugins. 
			// See https://developer.wordpress.org/themes/patterns/registering-patterns/#unregistering-patterns
			foreach ( $patterns as $pattern ) {
				unregister_block_pattern( $pattern['name'] );
			}

			// Remove theme support for core patterns from the Dotorg pattern directory. 
			// See https://developer.wordpress.org/themes/patterns/registering-patterns/#removing-core-patterns
			remove_theme_support( 'core-block-patterns' );
		}
	}
	
	return $dispatch_result;
}

Um nur WordPress.com-Vorlagen zu deaktivieren, kopiere den folgenden Code und füge ihn am Ende der Datei functions.php deines Themes ein:

add_filter( 'a8c_override_patterns_source_site', 'your_theme_restrict_block_editor_patterns_from_dotcom_library' );

/**
 * Restrict patterns from the Dotcom library
 */
function your_theme_restrict_block_editor_patterns_from_dotcom_library() {
	return 'disable-dotcom-patterns-source';
}