So erstellen Sie einen benutzerdefinierten WordPress-Block (einfach)

Die Standard-WordPress-Blöcke eignen sich hervorragend für einfache Inhalte – aber sie stoßen schnell an ihre Grenzen, wenn Sie benutzerdefinierte Layouts, interaktive Elemente oder maßgeschneiderte Designs benötigen.

Hier kommen benutzerdefinierte Blöcke ins Spiel. Sie geben Ihnen die volle Kontrolle darüber, wie Ihr Inhalt aussieht und funktioniert, ohne auf aufgeblähte Plugins oder Workarounds angewiesen zu sein.

Das Beste daran? Das Erstellen benutzerdefinierter Blöcke ist zugänglicher, als die meisten Leute denken. Mit den richtigen Werkzeugen und einem klaren Prozess müssen Sie kein Entwickler sein, um Blöcke zu erstellen, die den einzigartigen Anforderungen Ihrer Website entsprechen.

Im Laufe der Jahre haben wir benutzerdefinierte Blöcke verwendet, um Arbeitsabläufe zu optimieren und maßgeschneiderte WordPress-Websites für Kunden zu liefern – und jetzt zeigen wir Ihnen, wie Sie dasselbe tun können.

In diesem Leitfaden lernen Sie den Schritt-für-Schritt-Prozess zur Erstellung benutzerdefinierter WordPress-Blöcke, auch wenn Sie kein erfahrener Coder sind.

Warum einen benutzerdefinierten WordPress-Block erstellen?

Sie sollten einen benutzerdefinierten WordPress Block erstellen, wenn Sie eine bestimmte Funktion oder ein bestimmtes Layout benötigen, das in der Standard-Blockbibliothek oder vorhandenen Block-Plugins nicht verfügbar ist.

Durch das Erstellen eines benutzerdefinierten Blocks können Sie bestimmte Designelemente – wie eine Testimonial-Karte oder einen Produkt-Callout – speichern und sie sofort auf mehreren Beiträgen wiederverwenden.

Dies beschleunigt Ihren Workflow erheblich. Anstatt jedes Mal, wenn Sie einen Beitrag schreiben, denselben Inhalt manuell zu codieren oder zu formatieren, fügen Sie einfach Ihren vorgefertigten benutzerdefinierten Block ein und füllen die Lücken aus.

Sehen wir uns nun an, wie Sie ganz einfach einen vollständig benutzerdefinierten Block in WordPress erstellen können.

In diesem Tutorial zeigen wir Ihnen zwei Methoden, um einen benutzerdefinierten Block zu erstellen. Sie können die Schnelllinks unten verwenden, um zur gewünschten Methode zu springen:

• Method 1: Create Custom Blocks for WordPress Using WPCode (Recommended)
• Method 2: Create Custom Blocks for WordPress Using Genesis Custom Code Plugin (Free)
• Bonus: Wiederverwendbare Blockmuster erstellen
• Häufig gestellte Fragen zu benutzerdefinierten WordPress-Blöcken

Methode 1: Erstellen von benutzerdefinierten Blöcken für WordPress mit WPCode (empfohlen)

Wenn Sie neu bei WordPress sind und Programmieren einschüchternd finden, ist WPCode eine fantastische Wahl für Sie.

Als Teil unseres Toolkits haben wir WPCode als die anfängerfreundlichste und sicherste Methode zur Ergänzung benutzerdefinierter Code-Snippets kennengelernt.

Wir haben auch eine detaillierte WPCode-Bewertung, die Ihnen helfen könnte, sein volles Potenzial zu verstehen.

Eine seiner herausragenden Funktionen sind die Block-Snippets, mit denen Sie mühelos benutzerdefinierte Blöcke erstellen können.

Schritt 1: WPCode installieren und aktivieren

Zuerst müssen Sie das WPCode Plugin installieren und aktivieren. Für detaillierte Anweisungen können Sie unseren Anfängerleitfaden zum Thema Installation eines WordPress-Plugins lesen.

Schritt 2: Erstellen Sie einen neuen Block-Snippet

Nach der Aktivierung gehen Sie im WordPress-Admin-Seitenmenü zu Code Snippets » + Snippet hinzufügen.

Sobald Sie dort sind, klicken Sie unter der Option „Benutzerdefinierten Code hinzufügen (Neuer Snippet)“ auf die Schaltfläche „Snippet verwenden“.

Dies führt Sie zur Seite 'Benutzerdefinierten Snippet erstellen', auf der Sie mit der Eingabe eines Namens für den neuen Block beginnen können, den Sie erstellen möchten.

Sobald Sie dies getan haben, wählen Sie einfach die Option „Blocks Snippet“ aus dem Dropdown-Menü „Code Type“ in der rechten Ecke des Bildschirms aus.

Dies zeigt die Schaltfläche „Mit Block-Editor bearbeiten“ im Feld „Code-Vorschau“ an.

Schritt 3: Gestalten Sie Ihren benutzerdefinierten Block

Klicken Sie einfach auf diese Schaltfläche, um den Block-Editor zu starten.

Nun erscheint eine Aufforderung auf Ihrem Bildschirm, die Sie auffordert, das Code-Snippet zu speichern, um es im Block-Editor zu laden. Klicken Sie einfach auf die Schaltfläche 'Ja', um fortzufahren.

Jetzt, da Sie sich im Blockeditor befinden, können Sie mit den vorgefertigten Blöcken im Menü ganz einfach einen benutzerdefinierten Block erstellen.

Für dieses Tutorial erstellen wir einen benutzerdefinierten Block, um Testimonials zu Ihrer Website hinzuzufügen.

Klicken Sie zuerst auf die Schaltfläche „Block hinzufügen“ (+) in der oberen linken Ecke des Bildschirms, um das Blockmenü zu öffnen.

Ziehen Sie von hier aus den Überschriftenblock in die Blockeditor-Oberfläche und nennen Sie ihn „Testimonials“.

Als Nächstes können Sie die Absatz-, Pull-Quote- oder Zitatblöcke verwenden, um Testimonials von verschiedenen Kunden auf Ihrer Website hinzuzufügen.

Sie können Ihren Testimonial-Block sogar weiter anpassen, indem Sie die Blöcke für Bilder, Website-Logo, soziale Symbole oder Website-Slogan verwenden.

Sie können auch die Größe, Textfarbe oder Hintergrundfarbe Ihrer Testimonials im Blockfenster auf der rechten Seite des Bildschirms konfigurieren.

Vergessen Sie nicht, nach Abschluss auf die Schaltfläche „Aktualisieren“ oben zu klicken, um Ihre benutzerdefinierten Blockeinstellungen zu speichern.

Schritt 4: Konfigurieren Sie die Einfügungseinstellungen

Klicken Sie dann einfach oben auf die Schaltfläche „Zurück zu WPCode-Snippet“, um zur Code-Editor-Seite weitergeleitet zu werden.

Wenn Sie dort sind, scrollen Sie nach unten zum Abschnitt „Einfügen“ und wählen Sie den Modus „Automatisch einfügen“.

Nach der Aktivierung des Code-Snippets wird Ihr benutzerdefinierter Block automatisch an der Stelle hinzugefügt, an der Sie ihn auf Ihrer Website einfügen möchten.

Als Nächstes müssen Sie den Speicherort des von Ihnen erstellten benutzerdefinierten Blocks konfigurieren.

Klicken Sie dazu einfach im Abschnitt „Einfügen“ auf das Dropdown-Menü „Speicherort“ und wechseln Sie zur Registerkarte „Seiten-spezifisch“. Von hier aus können Sie nun die Option „Nach Beitrag einfügen“ wählen, wenn Sie Ihren Testimonials-Block am Ende des Beitrags anzeigen möchten.

Sobald Sie dies getan haben, können Sie auch die Anzahl der Beiträge konfigurieren, nach denen der Testimonial-Block erscheinen soll. Wenn Sie beispielsweise die Zahl 3 eingeben, erscheint der Testimonials-Block in jedem dritten Beitrag.

Sie können den Block auch zwischen verschiedenen Absätzen, nach Beitragszusammenfassungen und mehr anzeigen.

Schritt 5: Wenden Sie bedingte Logik an (optional)

Wenn Sie den gewünschten Block-Speicherort jedoch nicht finden, können Sie auch Ihre eigene bedingte Logikregel erstellen, um den benutzerdefinierten Block an der gewünschten Stelle einzubetten.

Scrollen Sie dazu nach unten zum Abschnitt „Smart Conditional Logic“ und aktivieren Sie den Schalter „Enable Logic“.

Klicken Sie als Nächstes auf die Schaltfläche „Neue Gruppe hinzufügen“, um mit der Erstellung einer Regel für bedingte Logik zu beginnen.

Wenn Sie beispielsweise den von Ihnen erstellten benutzerdefinierten Block nur auf einer bestimmten Seite oder in einem bestimmten Beitrag anzeigen möchten, müssen Sie im Dropdown-Menü auf der rechten Seite die Option „Seiten-URL“ auswählen.

Danach können Sie das Dropdown-Menü in der Mitte unverändert lassen und dann die URL der WordPress-Seite/des Beitrags Ihrer Wahl in das Feld auf der linken Seite eingeben.

Sie können Ihre Regel für bedingte Logik auch so konfigurieren, dass der benutzerdefinierte Block nur auf einer bestimmten Seite, für angemeldete Benutzer, auf WooCommerce-Store-Seiten, auf Easy Digital Downloads-Seiten, für bestimmte Daten und mehr angezeigt wird.

Schritt 6: Aktivieren und speichern Sie Ihren Block

Wenn Sie fertig sind, scrollen Sie zurück zum Seitenanfang und schalten Sie den Schalter „Inaktiv“ auf „Aktiv“. Klicken Sie dann auf die Schaltfläche „Aktualisieren“, um Ihre Einstellungen zu speichern.

Ihr benutzerdefinierter Block wird nun automatisch zu allen von Ihnen ausgewählten Speicherorten für den Block-Snippet hinzugefügt.

Beachten Sie, dass der von Ihnen erstellte benutzerdefinierte Block nicht als Option im Blockmenü des WordPress Gutenberg-Editors angezeigt wird.

Sie müssen die Blockeinstellungen konfigurieren, indem Sie die Seite Code-Snippets im WordPress-Dashboard besuchen und auf den Link „Bearbeiten“ unter dem Block-Snippet klicken.

Dies öffnet die Seite „Snippet bearbeiten“, auf der Sie den Block anpassen oder seine Position und die Regeln für bedingte Logik einfach ändern können.

Besuchen Sie nun Ihre Website, um den von Ihnen erstellten benutzerdefinierten Block in Aktion zu sehen.

Hier ist unser benutzerdefinierter Testimonials-Block auf unserer Demowebsite.

Methode 2: Benutzerdefinierte Blöcke für WordPress mit dem Genesis Custom Code Plugin (kostenlos) erstellen

Wenn Sie ein fortgeschrittener Benutzer sind und nach einer kostenlosen Lösung suchen, dann ist diese Methode genau das Richtige für Sie. Beachten Sie, dass Sie mit HTML und CSS vertraut sein müssen, um die Anweisungen in dieser Methode befolgen zu können.

Schritt 1: Installieren Sie Genesis Custom Blocks

Installieren und aktivieren Sie zuerst das Plugin Genesis Custom Blocks. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung zum Thema Installieren eines WordPress-Plugins.

Für dieses Tutorial erstellen wir einen Testimonials-Block.

Schritt 2: Erstellen und konfigurieren Sie einen neuen Block

Gehen Sie zuerst zur Seite Benutzerdefinierte Blöcke » Neu hinzufügen in der WordPress-Admin-Seitenleiste.

Dies bringt Sie zur Seite Block-Editor, auf der Sie einen benutzerdefinierten Block für Ihre WordPress-Website erstellen werden.

Von hier aus können Sie damit beginnen, Ihrem Block einen Namen zu geben.

Auf der rechten Seite der Seite finden Sie nun die Blockeigenschaften, die Sie konfigurieren können.

Hier können Sie ein Symbol für Ihren Block auswählen, eine Kategorie hinzufügen und Schlüsselwörter hinzufügen.

Der Slug wird automatisch basierend auf dem Namen Ihres Blocks ausgefüllt, sodass Sie ihn nicht ändern müssen. Sie können jedoch bis zu 3 Schlüsselwörter in das Textfeld „Keywords“ eingeben, damit Ihr Block leicht gefunden werden kann.

Schritt 3: Fügen Sie Ihrem Block Felder hinzu

Nun ist es an der Zeit, Ihrem Block einige Felder hinzuzufügen. Sie können verschiedene Arten von Feldern hinzufügen, wie z. B. Text, Zahlen, E-Mail-Adressen, URLs, Farben, Bilder, Kontrollkästchen, Optionsfelder und mehr.

Wir werden drei Felder zu unserem benutzerdefinierten Testimonials-Block hinzufügen: ein Bildfeld für das Foto des Rezensenten, ein Textfeld für den Namen des Rezensenten und ein Textbereichsfeld für den Testimonial-Text.

Klicken Sie einfach auf die Schaltfläche „+“, um das erste Feld einzufügen.

Dies öffnet einige Optionen für das Feld in der rechten Spalte. Schauen wir uns jede einzelne an.

• Feldbezeichnung: Sie können für die Feldbezeichnung einen beliebigen Namen wählen. Nennen wir unser erstes Feld „Rezensionen-Bild“.
• Feldname: Der Feldname wird automatisch basierend auf der Feldbezeichnung generiert. Wir werden diesen Feldnamen im nächsten Schritt verwenden, stellen Sie also sicher, dass er für jedes Feld eindeutig ist.
• Feldtyp: Hier können Sie den Feldtyp auswählen. Wir möchten, dass unser erstes Feld ein Bild ist, daher wählen wir aus dem Dropdown-Menü „Bild“ aus.
• Feldposition: Sie können entscheiden, ob Sie das Feld zum Editor oder zum Inspektor hinzufügen möchten.
• Hilfetext: Sie können Text hinzufügen, um das Feld zu beschreiben. Dies ist nicht erforderlich, wenn Sie diesen Block für Ihren persönlichen Gebrauch erstellen, kann aber für Blogs mit mehreren Autoren hilfreich sein.

Möglicherweise sehen Sie auch zusätzliche Optionen, je nachdem, welchen Feldtyp Sie auswählen. Wenn Sie beispielsweise ein Textfeld auswählen, erhalten Sie zusätzliche Optionen wie Platzhaltertext und Zeichenbegrenzung.

Nach dem obigen Vorgang fügen wir unserem Testimonials-Block 2 weitere Felder hinzu, indem wir auf die Schaltfläche „+“ klicken.

Wenn Sie die Felder neu anordnen möchten, können Sie dies tun, indem Sie sie mit dem Griff auf der linken Seite jedes Feldnamens ziehen. Um ein bestimmtes Feld zu bearbeiten oder zu löschen, müssen Sie auf den Feldnamen klicken und die Optionen in der rechten Spalte bearbeiten.

Wenn Sie fertig sind, klicken Sie einfach auf die Schaltfläche „Veröffentlichen“ auf der rechten Seite der Seite, um Ihren benutzerdefinierten Gutenberg-Block zu speichern.

Schritt 4: Erstellen Sie eine Blockvorlage

Obwohl Sie den benutzerdefinierten WordPress-Block im letzten Schritt erstellt haben, funktioniert er erst, wenn Sie eine Block- Vorlage erstellen.

Die Blockvorlage bestimmt genau, wie die in den Block eingegebenen Informationen auf Ihrer Website angezeigt werden. Sie entscheiden, wie sie aussieht, indem Sie HTML und CSS oder sogar PHP-Code verwenden, wenn Sie Funktionen ausführen oder andere fortgeschrittene Dinge mit den Daten tun müssen.

Es gibt zwei Möglichkeiten, eine Blockvorlage zu erstellen. Wenn Ihre Blockausgabe in HTML/CSS erfolgt, können Sie den integrierten Vorlageneditor verwenden.

Wenn Ihre Blockausgabe im Hintergrund PHP benötigt, müssen Sie manuell eine Block-Vorlagendatei erstellen und diese in Ihren Theme-Ordner hochladen.

Methode 1: Verwendung des integrierten Vorlageneditors

Wechseln Sie auf dem Bearbeitungsbildschirm für benutzerdefinierte Blöcke einfach zum Tab „Vorlagen-Editor“ und geben Sie Ihr HTML unter dem Tab „Markup“ ein.

Sie können Ihr HTML schreiben und doppelte geschweifte Klammern verwenden, um Werte von Blockfeldern einzufügen.

Zum Beispiel haben wir den folgenden HTML-Code für den oben erstellten Beispielblock verwendet:

<div class="testimonial-item">
<img src="{{reviewer-image}}" class="reviewer-image">
<h4 class="reviewer-name">{{reviewer-name}}</h4>
<div class="testimonial-text">{{testimonial-text}}</div>
</div>

Wechseln Sie danach einfach zum Tab „CSS“, um das Markup Ihrer Blockausgabe zu gestalten.

Hier ist das Beispiel-CSS, das wir für unseren benutzerdefinierten Block verwendet haben:

.reviewer-name { 
    font-size:14px;
    font-weight:bold;
    text-transform:uppercase;
}

.reviewer-image {
    float: left;
    padding: 0px;
    border: 5px solid #eee;
    max-width: 100px;
    max-height: 100px;
    border-radius: 50%;
    margin: 10px;
}

.testimonial-text {
    font-size:14px;
}

.testimonial-item { 
 margin:10px;
 border-bottom:1px solid #eee;
 padding:10px;
}

Methode 2: Manuelles Hochladen von benutzerdefinierten Blockvorlagen

Diese Methode wird empfohlen, wenn Sie PHP verwenden müssen, um mit Ihren benutzerdefinierten Blockfeldern zu interagieren. Sie müssen die Editor-Vorlage direkt in Ihr Theme hochladen.

Zuerst müssen Sie einen Ordner auf Ihrem Computer erstellen und ihn mit dem Slug Ihres benutzerdefinierten Blocknamens benennen.

Zum Beispiel heißt unser Demo-Block Testimonials, also erstellen wir einen Ordner namens testimonials.

Als Nächstes müssen Sie eine Datei namens block.php mit einem einfachen Texteditor erstellen. Hier fügen Sie den HTML / PHP-Teil Ihrer Blockvorlage ein.

Hier ist die Beispielvorlage, die wir für unser Beispiel verwendet haben:

<div class="testimonial-item <?php block_field('className'); ?>">
<img class="reviewer-image" src="<?php block_field( 'reviewer-image' ); ?>" alt="<?php block_field( 'reviewer-name' ); ?>" />
<h4 class="reviewer-name"><?php block_field( 'reviewer-name' ); ?></h4>
<div class="testimonial-text"><?php block_field( 'testimonial-text' ); ?></div>
</div>

Nun haben Sie vielleicht bemerkt, wie wir die Funktion block_field() verwendet haben, um Daten aus einem Blockfeld abzurufen.

Wir haben unsere Blockfelder in das HTML eingeschlossen, das wir zur Anzeige des Blocks verwenden möchten. Wir haben auch CSS-Klassen hinzugefügt, damit wir den Block richtig gestalten können.

Vergessen Sie nicht, die Datei in dem zuvor erstellten Ordner zu speichern.

Als Nächstes müssen Sie eine weitere Datei mit dem einfachen Texteditor auf Ihrem Computer erstellen und sie als block.css im erstellten Ordner speichern.

Wir werden diese Datei verwenden, um das CSS hinzuzufügen, das zur Gestaltung der Anzeige unseres Blocks benötigt wird. Hier ist das Beispiel-CSS, das wir für dieses Beispiel verwendet haben:

.reviewer-name { 
    font-size:14px;
    font-weight:bold;
    text-transform:uppercase;
}

.reviewer-image {
    float: left;
    padding: 0px;
    border: 5px solid #eee;
    max-width: 100px;
    max-height: 100px;
    border-radius: 50%;
    margin: 10px;
}

.testimonial-text {
    font-size:14px;
}

.testimonial-item { 
 margin:10px;
 border-bottom:1px solid #eee;
 padding:10px;
}

Vergessen Sie nicht, Ihre Änderungen zu speichern.

Ihr Block-Vorlagenordner enthält nun zwei Vorlagendateien.

Laden Sie anschließend Ihren Blockordner mit einem FTP-Client oder der Dateimanager-App in der Systemsteuerung Ihres WordPress-Hosting-Kontos auf Ihre Website hoch mithilfe eines FTP-Clients .

Navigieren Sie nach der Verbindung zum Ordner /wp-content/themes/ihr-aktuelles-theme/.

Wenn Ihr Theme-Ordner keinen Ordner namens 'blocks' enthält, erstellen Sie ein neues Verzeichnis und nennen Sie es blocks.

Als Nächstes müssen Sie den Ordner, den Sie auf Ihrem Computer erstellt haben, in den Ordner blocks hochladen.

Das ist alles! Sie haben erfolgreich manuelle Vorlagendateien für Ihren benutzerdefinierten Block erstellt.

Schritt 5: Vorschau Ihres benutzerdefinierten Blocks

Bevor Sie Ihre HTML/CSS-Vorschau anzeigen können, müssen Sie einige Testdaten bereitstellen, die zur Anzeige einer Beispielausgabe verwendet werden können.

Bearbeiten Sie in Ihrem WordPress-Adminbereich Ihren Block und wechseln Sie zum Tab 'Editor-Vorschau'. Hier müssen Sie einige Dummy-Daten eingeben.

Diese Daten werden nicht Teil Ihres benutzerdefinierten Blocks sein und werden nur verwendet, um die von Ihnen mit HTML und CSS vorgenommenen Änderungen in der Vorschau anzuzeigen.

Nachdem Sie die Daten hinzugefügt haben, klicken Sie auf die Schaltfläche „Aktualisieren“, um Ihre Änderungen zu speichern.

Wenn Sie nicht auf die Schaltfläche „Aktualisieren“ klicken, können Sie die Vorschau Ihres benutzerdefinierten Blocks nicht sehen.

Sie können nun zum Tab „Vorschau im Frontend“ wechseln, um zu sehen, wie Ihr Block im Frontend Ihrer WordPress-Website aussehen wird.

Wenn alles gut aussieht, können Sie Ihren Block erneut aktualisieren, um nicht gespeicherte Änderungen zu speichern.

Schritt 6: Fügen Sie Ihren Block in einen Beitrag ein

Sie können Ihren benutzerdefinierten Block jetzt in WordPress wie jeden anderen Block verwenden.

Bearbeiten Sie einfach jeden Beitrag oder jede Seite, auf der Sie diesen Block verwenden möchten. Klicken Sie dann oben links auf die Schaltfläche „Block hinzufügen“ (+), um das Blockmenü zu öffnen.

Verwenden Sie hier die Suchfunktion, um Ihren Block zu finden, indem Sie seinen Namen oder Schlüsselwörter eingeben. Fügen Sie ihn dann zur Seite oder zum Beitrag hinzu.

Nachdem Sie den benutzerdefinierten Block in den Inhaltsbereich eingefügt haben, sehen Sie die zuvor erstellten Blockfelder.

Sie können die Blockfelder nach Bedarf ausfüllen.

Wenn Sie von einem benutzerdefinierten WordPress-Block zu einem anderen wechseln, zeigt der Editor automatisch eine Live-Vorschau Ihres Blocks an.

Sie können Ihren Beitrag und Ihre Seite jetzt speichern und eine Vorschau anzeigen, um Ihren benutzerdefinierten Block auf Ihrer Website in Aktion zu sehen.

So sieht der Testimonials-Block auf unserer Testseite aus.

Bonus: Wiederverwendbare Blockmuster erstellen

Zusätzlich zur Erstellung benutzerdefinierter Blöcke können Sie benutzerdefinierte Blockmuster (früher bekannt als wiederverwendbare Blöcke) für die Blogbeiträge oder Seiten Ihrer Website hinzufügen.

Ein Muster ist ein Layout, das Sie Ihrem Beitrag hinzufügen können, um ihn von anderen Seiten und Inhalten abzuheben. Dies kann Ihre Beiträge ansprechender und visuell attraktiver machen und dazu beitragen, mehr Leads zu generieren.

Sie können ganz einfach ein Muster für alle Ihre Beiträge erstellen, indem Sie einen wiederverwendbaren Gruppenblock erstellen.

Klicken Sie zuerst auf die Schaltfläche „Block hinzufügen“ (+), um den Gruppenblock zum Beitrag hinzuzufügen. Dann können Sie beliebige Blöcke innerhalb der Gruppe hinzufügen, einschließlich Überschriften, Medien und Text, Titelbilder und mehr.

Sobald Sie die Beitragsvorlage erstellt haben, klicken Sie auf das Drei-Punkte-Menü in der Block-Symbolleiste oben im Block. Klicken Sie dann auf die Schaltfläche „Muster erstellen“.

Danach wird Ihr Beitragsmuster als synchronisiertes Muster gespeichert. Sie können darauf zugreifen und es zu jedem Beitrag hinzufügen, indem Sie das Blockmenü (+) öffnen und zum Tab 'Muster' wechseln.

Beachten Sie jedoch, dass diese Methode zum Erstellen benutzerdefinierter Beitrags-Vorlagen nur begrenzte Funktionalität bietet. Um eine schönere benutzerdefinierte Vorlage ohne Programmierung zu erstellen, können Sie SeedProd verwenden, den besten Page Builder auf dem Markt.

Weitere Details finden Sie in unserem Tutorial zum Erstellen benutzerdefinierter Einzelbeitrags-Vorlagen in WordPress.

Häufig gestellte Fragen zu benutzerdefinierten WordPress-Blöcken

Hier sind einige Fragen, die unsere Leser häufig zum Erstellen benutzerdefinierter WordPress-Blöcke gestellt haben:

Wie erstelle ich einen benutzerdefinierten Block in WooCommerce?

Sie können benutzerdefinierte Blöcke für WooCommerce mit Plugins wie WPCode oder Genesis Custom Blocks erstellen, genau wie Sie es für eine Standardseite tun würden. Da WooCommerce den Standard-WordPress-Editor für Produktbeschreibungen und Shop-Layouts verwendet, funktioniert jeder benutzerdefinierte Block, den Sie erstellen, nahtlos in Ihrem Online-Shop.

Kann ChatGPT eine WordPress-Website erstellen?

ChatGPT kann keine WordPress-Website automatisch erstellen, aber es kann den spezifischen Code und Inhalt generieren, den Sie zum Erstellen einer solchen benötigen. Sie können ChatGPT bitten, das für benutzerdefinierte Blöcke oder Themes erforderliche HTML, CSS und PHP zu schreiben, das Sie dann mit Tools wie WPCode in Ihre Website kopieren und einfügen können.

Wie erstelle ich ein benutzerdefiniertes WordPress-Plugin?

Der einfachste Weg, benutzerdefinierte Plugin-Funktionalität zu erstellen, ist die Verwendung eines Code-Snippet-Managers wie WPCode, der die Einrichtung für Sie übernimmt.

Alternativ können Sie einen Ordner auf Ihrem Computer erstellen, der eine PHP-Datei mit einem Standard-Plugin-Header-Kommentar enthält, diesen Ordner zippen und ihn über den Bildschirm Plugins » Neu hinzufügen hochladen.

Wie füge ich einen benutzerdefinierten HTML-Block in WordPress ein?

Sie können benutzerdefiniertes HTML hinzufügen, indem Sie den nativen Block „Benutzerdefiniertes HTML“ aus der WordPress-Blockbibliothek verwenden. Klicken Sie einfach auf die Schaltfläche (+) Block hinzufügen, suchen Sie nach „Benutzerdefiniertes HTML“ und fügen Sie Ihren Code direkt in den Block ein, um ihn auf Ihrer Website anzuzeigen.

Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie ganz einfach benutzerdefinierte Gutenberg-Blöcke für Ihre WordPress-Website erstellen. Möglicherweise möchten Sie auch unseren Leitfaden lesen, wie Sie eine Checkliste für Blogbeiträge im WordPress-Editor hinzufügen, und unsere wichtigen Tipps zur Verwendung von Shortcodes auf Ihrer Website ansehen.

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.