Möchten Sie einen benutzerdefinierten Gutenberg-Block für Ihre WordPress-Site erstellen? Nach dem WordPress 5.0-Update müssen Sie Blöcke verwenden, um Inhalte im neuen WordPress-Blockeditor zu erstellen.
WordPress wird mit mehreren nützlichen Blöcken geliefert, die Sie beim Schreiben von Inhalten verwenden können. Viele WordPress-Plugins werden auch mit eigenen Blöcken geliefert, die Sie verwenden können.
Manchmal möchten Sie jedoch möglicherweise Ihren eigenen benutzerdefinierten Gutenberg-Block erstellen, um etwas Bestimmtes zu tun.
Wenn Sie nach einer einfachen Lösung suchen, um benutzerdefinierte Gutenberg-Blöcke für Ihre WordPress-Site zu erstellen, dann sind Sie hier richtig.
In dieser Schritt-für-Schritt-Anleitung zeigen wir Ihnen, wie Sie auf einfache Weise einen benutzerdefinierten WordPress-Block für Gutenberg erstellen.
Notiz: Dieser Artikel ist für fortgeschrittene Benutzer. Sie müssen mit HTML und CSS vertraut sein, um benutzerdefinierte Gutenberg-Blöcke zu erstellen.
Schritt 1: Legen Sie los
Das erste, was Sie tun müssen, ist die Installation und Aktivierung des Blocklabor Plugin.
Es ist ein WordPress-Plugin, mit dem Sie ohne großen Aufwand benutzerdefinierte Blöcke aus Ihrem Admin-Panel erstellen können.
Um das Plugin zu installieren, können Sie unserer Einsteigeranleitung zur Installation eines WordPress-Plugins folgen.
Sobald das Plugin aktiviert ist, können Sie mit dem nächsten Schritt zum Erstellen Ihres ersten benutzerdefinierten Blocks fortfahren.
Schritt 2: Erstellen Sie einen neuen Block
Für dieses Tutorial erstellen wir einen ‚Testimonials‘-Block.
Gehen Sie zuerst zu Lab blockieren » Neu hinzufügen aus der linken Seitenleiste Ihres Admin-Panels.
Auf dieser Seite müssen Sie Ihrem Block einen Namen geben. Sie können einen beliebigen Namen in das Textfeld „Blocknamen hier eingeben“ eingeben.
Wir nennen unseren benutzerdefinierten Block: Testimonials.
Auf der rechten Seite der Seite finden Sie die Blockeigenschaften. Hier können Sie ein Symbol für Ihren Block auswählen und eine Blockkategorie aus der Dropdown-Box Kategorie auswählen.
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.
Jetzt fügen wir unserem Block einige Felder hinzu. Sie können verschiedene Arten von Feldern wie Text, Zahlen, E-Mail, 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 Textfeld für den Testimonial-Text.
Klicken Sie auf + Feld hinzufügen Schaltfläche, um das erste Feld einzufügen.
Dies öffnet einige Optionen für das Feld. Werfen wir einen Blick auf jeden von ihnen.
- Feldbezeichnung: Sie können einen beliebigen Namen für die Feldbeschriftung verwenden. Nennen wir unser erstes Feld als 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 aus Bild aus dem Dropdown-Menü.
- Feldstandort: Sie können entscheiden, ob Sie das Feld zum Editor oder zum Inspektor hinzufügen möchten.
- Hilfstext: 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.
Je nach ausgewähltem Feldtyp können Sie auch einige zusätzliche Optionen erhalten. Wenn Sie beispielsweise ein Textfeld auswählen, erhalten Sie zusätzliche Optionen wie Platzhaltertext und Zeichenbegrenzung.
Sie können auf die klicken Feld schließen Schaltfläche, sobald Sie mit dem Bildfeld fertig sind.
Nach dem obigen Vorgang fügen wir 2 weitere Felder für unseren Testimonials-Block hinzu, indem wir auf klicken + Feld hinzufügen Taste.
Falls Sie die Felder neu anordnen möchten, können Sie dies tun, indem Sie sie mit dem Hamburger-Symbol auf der linken Seite jeder Feldbeschriftung ziehen.
Um ein bestimmtes Feld zu bearbeiten oder zu löschen, müssen Sie mit der Maus über die Feldbeschriftung fahren, um die Bearbeitungs- und Löschoptionen anzuzeigen.
Wenn Sie fertig sind, klicken Sie auf Veröffentlichen Schaltfläche auf der rechten Seite der Seite, um Ihren benutzerdefinierten Gutenberg-Block zu speichern.
Schritt 3: Erstellen Sie eine Blockvorlage
Obwohl Sie im letzten Schritt den benutzerdefinierten WordPress-Block erstellt haben, funktioniert er erst, wenn Sie eine Blockvorlage namens block-testimonials.php erstellen und in Ihren aktuellen Themenordner hochladen.
Die Blockvorlagendatei teilt dem Plugin mit, wie es Ihre Blockfelder im Editor anzeigen soll. Das Plugin sucht nach der Vorlagendatei und verwendet sie dann, um den Blockinhalt anzuzeigen.
Wenn Sie diese Datei nicht haben, wird eine Fehlermeldung angezeigt, die besagt, dass die Vorlagendatei blockt/block-testimonials.php nicht gefunden wurde.
Lassen Sie uns die Vorlagendatei unseres Blocks erstellen.
Erstellen Sie zunächst einen Ordner auf Ihrem Desktop und benennen Sie ihn Blöcke. Sie erstellen Ihre Blockvorlagendatei in diesem Ordner und laden sie dann in Ihr aktuelles WordPress-Themeverzeichnis hoch.
Um die Vorlagendatei zu erstellen, können Sie einen Nur-Text-Editor wie Notepad verwenden.
Jedes Mal, wenn Sie Ihrem benutzerdefinierten Block ein neues Feld hinzufügen, müssen Sie Ihrer Blockvorlagendatei den folgenden PHP-Code hinzufügen:
<?php block_field( 'add-your-field-name-here' ); ?>
Denken Sie daran, zu ersetzen fügen Sie-Ihren-Feldnamen-hier hinzu mit dem Feldnamen.
Der Name unseres ersten Felds lautet beispielsweise Reviewer-Image, daher fügen wir der Vorlagendatei die folgende Zeile hinzu:
<?php block_field( 'reviewer-image' ); ?>
Einfach, nicht wahr? Machen wir dasselbe für den Rest unserer Felder:
<?php block_field( 'reviewer-image' ); ?> <?php block_field( 'reviewer-name' ); ?> <?php block_field( 'testimonial-text' ); ?>
Als Nächstes fügen wir dem obigen Code einige HTML-Tags zu Gestaltungszwecken hinzu.
Sie können beispielsweise das Bild des Prüfers in ein img-Tag einschließen, um das Bild anzuzeigen. Andernfalls zeigt WordPress die Bild-URL an, die nicht das ist, was Sie wollen, oder?
Sie können Ihren HTML-Tags auch Klassennamen hinzufügen und Ihren Code in einen div-Container einschließen, um Ihren Blockinhalt zu gestalten (was wir in diesem nächsten Schritt tun werden).
Hier ist also unser endgültiger Code für unsere Blockvorlage:
<div class="testimonial-block clearfix"> <div class="testimonial-image"> <img src ="<?php block_field( 'reviewer-image' ); ?>"> </div> <div class="testimonial-box"> <h4><?php block_field( 'reviewer-name' ); ?></h4> <p><?php block_field( 'testimonial-text' ); ?></p> </div> </div>
Benennen Sie die Datei schließlich als block-testimonials.php und speichern Sie sie im Blöcke Mappe.
Schritt 4: Gestalten Sie Ihren benutzerdefinierten Block
Möchten Sie Ihren benutzerdefinierten Block stylen? Sie können dies mit Hilfe von CSS tun.
Öffnen Sie einen Nur-Text-Editor wie Notepad und fügen Sie den folgenden Code hinzu:
.testimonial-block { width: 100%; margin-bottom: 25px; } .testimonial-image { float: left; width: 25%; padding-right: 15px; } .testimonial-box { float: left; width: 75%; } .clearfix::after { content: ""; clear: both; display: table; }
Benennen Sie die Datei anschließend als block-testimonials.css und speichern Sie sie im Blöcke Mappe.
Schritt 5: Blockvorlagendatei in den Themenordner hochladen
Jetzt laden wir die hoch Blöcke Ordner, der unsere benutzerdefinierte Blockvorlagendatei enthält, in unseren WordPress-Themeordner.
Dazu müssen Sie sich über einen FTP-Client mit Ihrer WordPress-Site verbinden. Hilfe finden Sie in unserer Anleitung zum Hochladen von Dateien auf Ihre WordPress-Site mit FTP.
Sobald Sie verbunden sind, gehen Sie zum Ordner /wp-content/themes/. Von hier aus müssen Sie Ihren aktuellen Themenordner öffnen.
Laden Sie jetzt die . hoch Blöcke Ordner, der die Blockvorlagendatei und die CSS-Datei enthält, in Ihr Themenverzeichnis.
Sobald Sie fertig sind, können Sie mit dem letzten Schritt fortfahren, um Ihren benutzerdefinierten Block zu testen.
Notiz: Mit dem Block Lab-Plugin können Sie themenspezifische Blöcke erstellen. Wenn Sie Ihr WordPress-Theme ändern, müssen Sie den Blocks-Ordner in Ihr neues Theme-Verzeichnis kopieren.
Schritt 6: Testen Sie Ihren neuen Block
Es ist Zeit, unseren benutzerdefinierten Testimonials-Block zu testen. Sie können dies tun, indem Sie zu gehen Seiten » Neue hinzufügen um eine neue Seite zu erstellen.
Klicken Sie anschließend auf das Block hinzufügen (+) Symbol und suchen Sie nach dem Testimonials-Block. Wenn Sie ihn gefunden haben, klicken Sie darauf, um den benutzerdefinierten Block zu Ihrem Seiteneditor hinzuzufügen.
Sie können dieser Seite jetzt mithilfe Ihres benutzerdefinierten Blocks ein Testimonial hinzufügen. Um weitere Testimonials hinzuzufügen, können Sie jederzeit neue Testimonialblöcke einfügen.
Wenn Sie fertig sind, können Sie die Seite in der Vorschau anzeigen oder veröffentlichen, um zu überprüfen, ob sie richtig funktioniert oder nicht.
Das ist alles! Sie haben erfolgreich Ihren ersten benutzerdefinierten WordPress-Block für Ihre Site erstellt.
Wussten Sie, dass Sie mit wiederverwendbaren Blöcken in Ihrem Editor Zeit sparen können? In unserer Anleitung erfahren Sie, wie Sie einfach wiederverwendbare Blöcke im WordPress-Blockeditor erstellen und auf anderen Websites verwenden.
Vielleicht möchten Sie auch unsere Anleitung zum Erstellen eines benutzerdefinierten WordPress-Themes lesen, ohne Code zu schreiben.