Der Gutenberg-Block-Editor (in WordPress 5.0 vorgestellt) ist der Standard-Weg, um Inhalte in WordPress zu erstellen. Während es Tausende von vorgefertigten Blöcken von Plugins und Themen gibt, erstellen Sie Ihren eigenen benutzerdefinierten Gutenberg-Block gibt Ihnen vollständige Kontrolle – perfekt für Markenelemente, wiederverwendbare Komponenten oder einzigartige Funktionalität, die kein vorhandener Block bietet. Im Jahr 2026, mit Full-Site-Bearbeitung und Block-Themen jetzt Standard, sind benutzerdefinierte Blöcke wichtiger als je zuvor für Agenturen, Entwickler und Unternehmen, die konsequentes Design auf Seiten wollen.
Bei Cope Business bauen wir benutzerdefinierte Gutenberg-Blöcke für Kunden während unserer technische SEO Audits zur verbesserung der inhaltskonsistenz, seitengeschwindigkeit und benutzererfahrung, ohne sich auf schwere drittanbieter-plugins zu verlassen.
Dieser Anfänger-zu-Zwischenführer zeigt Ihnen zwei praktische Möglichkeiten, einen benutzerdefinierten Gutenberg-Block in WordPress zu erstellen — mit einem Plugin (leichtesten) und von Kratzern mit Code (meist flexibel).
Warum einen benutzerdefinierten Gutenberg-Block erstellen?
- Brand Konsistenz — Erstellen Sie wiederverwendbare Elemente, die Ihrem Designsystem entsprechen
- Einzigartige Funktionalität — Funktionen hinzufügen, die nicht vorhanden sind (z.B. benutzerdefinierte Preistabellen, Bewertungen mit Bewertungen)
- Leistung — Vermeiden Sie bloated Plugins; nur laden Sie, was Sie brauchen
- Wiederverwendbarkeit — Verwenden Sie den gleichen Block über Beiträge, Seiten und Vorlagen
- Zukunftsproof — Blockthemen und Vollseitenbearbeitung machen benutzerdefinierte Blöcke mächtiger
Methode 1: Verwendung eines Plugins – einfachster Weg (kein Code erforderlich)
Wenn Sie Blöcke erstellen möchten, ohne JavaScript/PHP zu schreiben, verwenden Sie ein Block Builder-Plugin.
Empfohlenes Plugin: Block Lab oder Kadence Blocks (Free/Pro)
Beste kostenlose Option: Kadence Blocks (free core + Pro)
Schritte
- Installieren Kadence Blocks von Plugins > Neues hinzufügen.
- Gehen Sie Kadence Blocks > Bibliothek → Aktivieren Sie alle Starterblöcke, die Sie mögen.
- Für wirklich benutzerdefinierte Blöcke:
- Verwendung Kadence Blocks Pro (~$79/Jahr) → Erweiterte benutzerdefinierte Blöcke Funktion
- Oder verwenden Blocklabor (kostenlos) + Erweiterte benutzerdefinierte Felder (ACF) (free/pro)
- In ACF → Erstellen Sie eine neue Feldgruppe → Felder hinzufügen (Text, Bild, Repeater, etc.)
- In Block Lab → Neuer Block erstellen → Wechsel zu ACF-Feldern → Designvorlage in PHP/HTML
- Save → Neuer Block erscheint im Gutenberg-Einschub.
Alternative: Gutenberg Block Generator (online tool) → Code generieren → in WPCode einfügen.
Pros: Kein/niedriger Code, visuelle Einrichtung, schnell.
Negativ: Weniger Flexibilität als reiner Code; kann Blähungen hinzufügen.
Methode 2: Erstellen eines benutzerdefinierten Blocks aus Kratz (Code Methode – mächtigste)
Diese Methode gibt volle Kontrolle und ist zukunftssicher für Blockthemen.
Voraussetzungen
- Lokale/stagende Seite (LocalWP oder DevKinsta)
- Node.js & npm installiert
- Grundlegendes JavaScript & PHP Wissen
- Code Editor (VS Code)
Schritt für Schritt: Erstellen Sie einen einfachen “Kall zu Aktion” Block
- Plugin Folder erstellen
- /wp-content/plugins/cope-custom-blocks/Kreate: cope-custom-blocks.php
PHP<?php /** * Plugin Name: Cope Custom Gutenberg Blocks * Description: Custom blocks for Cope Business sites * Version: 1.0 * Author: Cope Business */ function cope_register_custom_blocks() { if ( ! function_exists( 'register_block_type' ) ) { return; } register_block_type( __DIR__ . '/blocks/call-to-action' ); } add_action( 'init', 'cope_register_custom_blocks' ); function cope_enqueue_block_assets() { wp_enqueue_script( 'cope-blocks-editor', plugins_url( '/blocks/call-to-action/index.js', __FILE__ ), array( 'wp-blocks', 'wp-i18n', 'wp-element', 'wp-editor' ), filemtime( plugin_dir_path( __FILE__ ) . 'blocks/call-to-action/index.js' ) ); wp_enqueue_style( 'cope-blocks-style', plugins_url( '/blocks/call-to-action/style.css', __FILE__ ), array(), filemtime( plugin_dir_path( __FILE__ ) . 'blocks/call-to-action/style.css' ) ); } add_action( 'enqueue_block_editor_assets', 'cope_enqueue_block_assets' );- Block Folder & Dateien erstellen
- Ordner erstellen: /Blocks/Call-to-action/Add Dateien:
- block.jsonindex.jseditor.cssstyle.css
- Ordner erstellen: /Blocks/Call-to-action/Add Dateien:
JSON{ "apiVersion": 3, "name": "cope/call-to-action", "title": "Call to Action", "category": "text", "icon": "megaphone", "description": "A custom call to action block", "supports": { "html": false }, "textdomain": "cope-blocks", "editorScript": "file:./index.js", "style": "file:./style.css", "editorStyle": "file:./editor.css", "attributes": { "title": { "type": "string", "default": "Ready to Get Started?" }, "content": { "type": "string", "default": "Contact us today for a free consultation." }, "buttonText": { "type": "string", "default": "Get in Touch" }, "buttonUrl": { "type": "string", "default": "" } } }- index (editor & save logic)
JavaScriptimport { registerBlockType } from '@wordpress/blocks'; import { TextControl, URLInputButton } from '@wordpress/components'; import { useBlockProps } from '@wordpress/block-editor'; registerBlockType( 'cope/call-to-action', { edit: ( { attributes, setAttributes } ) => { const blockProps = useBlockProps(); return ( <div { ...blockProps }> <TextControl label="Title" value={ attributes.title } onChange={ ( val ) => setAttributes( { title: val } ) } /> <TextControl label="Content" value={ attributes.content } onChange={ ( val ) => setAttributes( { content: val } ) } /> <URLInputButton label="Button URL" url={ attributes.buttonUrl } onChange={ ( url ) => setAttributes( { buttonUrl: url } ) } /> <TextControl label="Button Text" value={ attributes.buttonText } onChange={ ( val ) => setAttributes( { buttonText: val } ) } /> </div> ); }, save: ( { attributes } ) => { const blockProps = useBlockProps.save(); return ( <div { ...blockProps }> <h3>{ attributes.title }</h3> <p>{ attributes.content }</p> { attributes.buttonUrl && ( <a href={ attributes.buttonUrl } className="button"> { attributes.buttonText } </a> ) } </div> ); }, } );- stil & redaktion — Fügen Sie Grundstilierung hinzu.
- Plugin aktivieren → Gehen Sie zu Plugins → Aktivieren Sie “Cope Custom Gutenberg Blocks”.
- Prüfverfahren: Block in Editor hinzufügen → “Cope / Call to Action” erscheint → Anpassen & speichern.
Pros: Volle Kontrolle, wiederverwendbar, keine zusätzlichen Plugins. Negativ: Erfordert JavaScript/PHP-Wissen; testen Sie gründlich.
Best Practices für benutzerdefinierte Gutenberg-Blöcke
- Verwenden Sie immer ein Plugin oder ein Kind Thema - nie bearbeiten Kerndateien.
- Verwenden Sie @wordpress/scripts für die moderne Blockentwicklung (npm start/build).
- Testen Sie mobile, verschiedene Browser und Blockthemen.
- Blocks leicht halten – schwere Abhängigkeiten vermeiden.
- Fügen Sie Block-Stile und Variationen für Flexibilität.
- Verwenden Sie @wordpress/block-editor Haken für beste Kompatibilität.
Benutzerdefinierte Blöcke geben Ihnen branded, wiederverwendbare Elemente — ideal für Konsistenz.
Letzte Gedanken
Erstellen eines benutzerdefinierten Gutenberg-Block in WordPress können Sie die Funktionalität und Design Ihrer Website Bedürfnisse hinzufügen. Starten Sie mit einem Plugin wie Kadence Blocks oder Block Lab, wenn Sie Low-Code wollen, oder bauen Sie von Grund auf für maximale Kontrolle.
Benutzerdefinierte Blöcke zukunftssicher Ihre Website für Blockthemen und Full-Site Bearbeitung.
Brauchen Sie Hilfe bei der Erstellung von benutzerdefinierten Blöcken, der Optimierung Ihres Editors oder der Verbesserung der gesamten Website-Performance? Kontakt Cope Business für eine kostenlose technische SEO Beratung – wir bauen maßgeschneiderte Blöcke und Lösungen, um Ihre WordPress-Erfahrung zu erhöhen.
