So erstellen Sie einen benutzerdefinierten WordPress-Block (einfacher Weg)

Möchten Sie einen benutzerdefinierten Gutenberg-Block für Ihre WordPress-Website erstellen?

Während WordPress mit vielen grundlegenden Blöcken zum Erstellen von Inhalten ausgestattet ist, benötigen Sie möglicherweise etwas Individuelleres für Ihre Website.

In diesem Artikel zeigen wir dir eine einfache Möglichkeit, benutzerdefinierte Gutenberg-Blöcke für deine WordPress-Seite zu erstellen.

Warum einen benutzerdefinierten WordPress-Block erstellen?

WordPress wird mit einem intuitiven Blockeditor geliefert, mit dem Sie Ihre Beiträge und Seiten einfach erstellen können, indem Sie Inhalte und Layoutelemente als Blöcke hinzufügen.

Standardmäßig wird WordPress mit mehreren häufig verwendeten Blöcken ausgeliefert. WordPress-Plugins können auch ihre eigenen Blöcke hinzufügen, die Sie verwenden können.

Manchmal möchten Sie jedoch möglicherweise Ihren eigenen benutzerdefinierten Block erstellen, um etwas Bestimmtes zu tun, und können kein Block-Plugin finden, das für Sie funktioniert.

In diesem Tutorial zeigen wir Ihnen, wie Sie einen vollständig benutzerdefinierten Block erstellen.

Hinweis : Dieser Artikel richtet sich an fortgeschrittene Benutzer. Sie müssen mit HTML und CSS vertraut sein, um benutzerdefinierte Gutenberg-Blöcke zu erstellen.

Schritt 1: Beginnen Sie mit Ihrem ersten benutzerdefinierten Block

Zuerst müssen Sie das Genesis Custom Blocks-Plugin installieren und aktivieren. Weitere Einzelheiten finden Sie in unserer Schritt-für-Schritt-Anleitung zur Installation eines WordPress-Plugins.

Dieses Plugin wurde von den Leuten hinter dem beliebten Genesis Theme Framework und StudioPress entwickelt und bietet Entwicklern einfache Tools, um schnell benutzerdefinierte Blöcke für ihre Projekte zu erstellen.

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

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

Dadurch gelangen Sie zur Seite Blockeditor.

Von hier aus müssen Sie Ihrem Block einen Namen geben.

Auf der rechten Seite der Seite finden Sie die Blockeigenschaften.

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 basierend auf dem Namen Ihres Blocks automatisch ausgefüllt, sodass Sie ihn nicht ändern müssen. Sie können jedoch bis zu 3 Schlüsselwörter in das Textfeld Schlüsselwörter eingeben, damit Ihr Block leicht gefunden werden kann.

Lassen Sie uns nun einige Felder zu unserem Block hinzufügen.

Sie können verschiedene Arten von Feldern wie Text, Zahlen, E-Mail-Adresse, URL, Farbe, Bild, Kontrollkästchen, Optionsfelder und vieles mehr hinzufügen.

Wir fügen unserem benutzerdefinierten Testimonial-Block drei Felder hinzu: ein Bildfeld für das Bild des Rezensenten, ein Textfeld für den Namen des Rezensenten und ein Textbereichsfeld für den Testimonial-Text.

Klicken Sie auf die Schaltfläche [+] Feld hinzufügen, um das erste Feld einzufügen.

Dies eröffnet einige Optionen für das Feld. Werfen wir einen Blick auf jeden von ihnen.

• Feldbezeichnung : Sie können für die Feldbezeichnung einen beliebigen Namen Ihrer Wahl verwenden. Nennen wir unser erstes Feld „Reviewer Image“.
• Feldname : Der Feldname wird automatisch basierend auf der Feldbezeichnung generiert. Wir verwenden diesen Feldnamen im nächsten Schritt, 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, also wählen wir Bild aus dem Dropdown-Menü 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.

Je nach ausgewähltem Feldtyp erhalten Sie möglicherweise auch einige zusätzliche Optionen. Wenn Sie beispielsweise ein Textfeld auswählen, erhalten Sie zusätzliche Optionen wie Platzhaltertext und Zeichenbegrenzung.

Lassen Sie uns nach dem obigen Prozess zwei weitere Felder für unseren Testimonials-Block hinzufügen, indem Sie auf die Schaltfläche [+] Feld hinzufügen klicken.

Falls Sie die Felder neu anordnen möchten, können Sie dies tun, indem Sie sie mit dem Griff auf der linken Seite jeder Feldbeschriftung ziehen.

Um ein bestimmtes Feld zu bearbeiten oder zu löschen, müssen Sie auf die Feldbezeichnung klicken und die Optionen in der rechten Spalte bearbeiten.

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

Schritt 2: Erstellen Sie eine benutzerdefinierte Blockvorlage

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

Die Blockvorlage bestimmt genau, wie die in den Block eingegebenen Informationen auf Ihrer Website angezeigt werden. Sie können entscheiden, wie es 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 vorliegt, können Sie den integrierten Vorlageneditor verwenden.

Wenn Ihre Blockausgabe andererseits erfordert, dass etwas PHP im Hintergrund ausgeführt wird, müssen Sie manuell eine Blockvorlagendatei erstellen und sie in Ihren Designordner hochladen.

Methode 1. Verwenden des integrierten Vorlageneditors

Wechseln Sie auf dem Bearbeitungsbildschirm für benutzerdefinierte Blöcke einfach zur Registerkarte „Vorlagen-Editor“ und geben Sie Ihren HTML-Code unter der Registerkarte „Markup“ ein.

Sie können Ihren HTML-Code schreiben und doppelte geschweifte Klammern verwenden, um Blockfeldwerte 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 zur Registerkarte CSS, um Ihr Blockausgabe-Markup 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 benutzerdefinierter Blockvorlagen

Diese Methode wird empfohlen, wenn Sie PHP verwenden müssen, um mit Ihren benutzerdefinierten Blockfeldern zu interagieren.

Grundsätzlich müssen Sie die Editor-Vorlage direkt in Ihr Design hochladen.

Zuerst müssen Sie einen Ordner auf Ihrem Computer erstellen und ihn mit Ihrem benutzerdefinierten Blocknamen-Slug benennen. Unser Demo-Block heißt beispielsweise Testimonials, also erstellen wir einen Testimonials-Ordner.

Als nächstes müssen Sie mit einem einfachen Texteditor eine Datei namens block.php 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>

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

Wir haben unsere Blockfelder in den HTML-Code eingeschlossen, den wir zum Anzeigen 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 mit dem Nur-Text-Editor auf Ihrem Computer eine weitere Datei erstellen und sie als block.css in dem von Ihnen erstellten Ordner speichern.

Wir verwenden diese Datei, um CSS hinzuzufügen, das zum Gestalten unserer Blockanzeige erforderlich ist. 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 Blockvorlagenordner enthält jetzt zwei Vorlagendateien.

Danach müssen Sie Ihren Blockordner mit einem FTP-Client oder der Dateimanager-App im Control Panel Ihres WordPress-Hosting-Kontos auf Ihre Website hochladen.

Sobald die Verbindung hergestellt ist, navigiere zum Ordner /wp-content/themes/your-current-theme/ .

Wenn Ihr Themenordner keine Ordnernamenblöcke hat, erstellen Sie ein neues Verzeichnis und nennen Sie es blocks .

Geben Sie nun den Blocks-Ordner ein und laden Sie den Ordner, den Sie auf Ihrem Computer erstellt haben, in den Blocks-Ordner hoch.

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

Schritt 3. Vorschau Ihres benutzerdefinierten Blocks

Bevor Sie nun eine Vorschau Ihres HTML/CSS anzeigen können, müssen Sie einige Testdaten bereitstellen, die zum Anzeigen einer Beispielausgabe verwendet werden können.

Bearbeiten Sie im WordPress-Adminbereich Ihren Block und wechseln Sie zur Registerkarte Editor-Vorschau. Hier müssen Sie einige Dummy-Daten eingeben.

Vergessen Sie nicht, auf die Schaltfläche Aktualisieren zu klicken, um Ihre Änderungen zu speichern, bevor Sie eine Vorschau anzeigen können.

Sie können jetzt auf die Registerkarte Frontend-Vorschau wechseln, um zu sehen, wie Ihr Block im Frontend (öffentlicher Bereich Ihrer WordPress-Website) aussehen wird.

Wenn für Sie alles gut aussieht, können Sie Ihren Block aktualisieren, um alle nicht gespeicherten Änderungen zu speichern.

Schritt 4. Verwenden Sie Ihren benutzerdefinierten Block in WordPress

Sie können jetzt Ihren benutzerdefinierten Block in WordPress verwenden, wie Sie jeden anderen Block verwenden würden.

Bearbeiten Sie einfach jeden Beitrag oder jede Seite, auf der Sie diesen Block verwenden möchten.

Klicken Sie auf die Schaltfläche Neuen Block hinzufügen und suchen Sie nach Ihrem Block, indem Sie seinen Namen oder Schlüsselwörter eingeben.

Nachdem Sie den Block in den Inhaltsbereich eingefügt haben, sehen Sie die Blockfelder, die Sie für diesen benutzerdefinierten Block erstellt haben.

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

Wenn Sie sich von dem Block zu einem anderen Block bewegen, zeigt der Editor automatisch eine Live-Vorschau Ihres Blocks an.

Sie können jetzt Ihren Beitrag und Ihre Seite 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.

Wir hoffen, dass dieser Artikel Ihnen geholfen hat, zu lernen, wie Sie auf einfache Weise benutzerdefinierte Gutenberg-Blöcke für Ihre WordPress-Website erstellen können.

Vielleicht möchten Sie auch unseren Leitfaden zum Erstellen eines benutzerdefinierten WordPress-Themes von Grund auf oder unsere Expertenauswahl der unverzichtbaren WordPress-Plugins für Ihre Website lesen.

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