WordPress: Eigene Blöcke für den Gutenberg-Editor anlegen

Beim Erstellen eines Beitrages in einem WordPress-Blog, hat man die Möglichkeit mit Blöcken zu arbeiten. Ein Block kann z.B. eine Überschrift sein, oder ein vordefinierter Textabschnitt, wie Zitate usw. Das Arbeiten mit Blöcken schafft nicht nur Ordnung, sondern erspart uns Blogger eine Menge Zeit. Vorausgesetzt natürlich, dass der Gutenberg-Editor genutzt wird. In diesem Beitrag werde ich demonstrieren, wie ein Block erstellt und veröffentlicht werden kann. Wir erstellen ein Block mit einem Affiliate-Hinweis.



Zuerst muss der Plugin „Block Lab“ installiert und aktiviert werden:

Nach der Aktivierung erscheint nun der „Block Lab„-Eintrag:

Um einen neuen Block zu erstellen, klicken wir auf „Add New„:

Hier müssen wir nun einige Einträge machen:

Bei „Enter block name here“ geben wir z.B. „Affiliate-Hinweis“ ein. Der Slug wird vom Plugin zwar automatisch eingetragen, kann aber auch von uns geändert werden. Als nächstes wählen wir das Icon für unseren Block aus. Jetzt noch die Kategorie auswählen, und die Keywords eingeben, damit wir  über die Suche unser Block finden können.

Kommen wir nun zum Abschnitt „Field„. Hier hat man die Wahl, einen oder mehrere Fields zu erstellen. Mit Hilfe von Fields kann ein Block dynamisch gestaltet werden. Bei einem URL-Field z.B. müssen wir nur den Hyperlink eintragen, und der Inhalt des Blocks passt sich dann automatisch an. Falls unser Block nur einen statischen, also festen unveränderlichen Inhalt haben soll, so muss man hier kein Field anlegen, der Text wird später in einem Template erfasst.

Statischen Block erstellen

Für den statischen Block muss kein Field eingefügt werden. Nach der Veröffentlichung des Blocks können wir direkt zur Bearbeitung des Templates übergehen (bitte zum Abschnitt „Template bearbeiten“ springen). 

Dynamischen Block erstellen

Hierfür legen wir einen neuen Field an. Dafür klicken wir auf die Schaltfläche „Add Field„:

Bei Field Label geben wir die Bezeichnung für den Field ein, z.B. „Affiliate Link„. Bei Field Name müssen wir einen eindeutigen Namen eingeben, ohne Leerzeichen, z.B. „affiliate-link“. Bei Field Type wählen wir den Typ aus, z.B. Url. Weitere Typen sind: Text, Textarea, Email, Number, Select, Multi-Select, Toggle, Range, Checkbox, Radio. Beim Field Location wählen wir „Editor“ aus. Bei Field instructions geben wir die Beschreibung, bzw. Kurzerklärung ein, z.B. „Bitte geben Sie hier die Url ein!„. Default Value ist der Standardwert, den wir vorgeben können, z.B. „https://einhorn-factory.de„. Bei Placeholder Text kann der Text hinterlegt werden, der angezeigt wird, wenn der Textfeld leer ist, z.B. „hier kommt die Url hin„.

Unser neuer Block kann nun veröffentlicht werden!

Template bearbeiten

Das Template ist eine php-Datei, die im Ordner „/themes/themeName/blocks/block-{slug-name}.php“ verfügbar sein muss. Der Editor, den man unter „Design“ findet, ist zwar in der Lage die Themes-Dateien zu bearbeiten, jedoch kann man mit ihm leider keine neue Ordner und Dateien anlegen. Ich arbeite sehr gerne mit PSPad, das ist ein Client-Editor, der viel mächtiger als Notepad ist. Mit PSPad kann man eine FTP-Verbindung zum Webprovider aufbauen, wo eurer Blog gehostet wird.

Nachdem die FTP-Verbindung zum Server steht, kann der Ordner „blocks“ und die Datei „block-affiliatehinweis.php“ in eurem aktuellen Themes erstellt werden:

Die Datei kann sowohl php-Quellcode, als auch HTML und JavaScript enthalten. Meine Template-Datei hat nun folgenden Inhalt:

<div>In diesem Beitrag wurden sogenannte Affiliate-Links verwendet, die durch (Provision-Link) oder (Affiliate-Link) gekennzeichnet werden. Wenn Du auf so einen Affiliate-Produkt klickst und über diesen Link einen Einkauf tätigst, bekomme ich von dem betreffenden Online-Shop oder Anbieter eine Provision. Für dich ändert sich an dem Preis nichts. Danke für deine Unterstützung!</div>

Wenn unser vordefinierter Block einen Field enthält, so können wir folgendermaßen auf ihn zugreifen: Wir erinnern uns, dass wir für einen dynamischen Block einen Url-Field angelegt haben. Der Field-Name war „affiliate-link„. So können wir den Inhalt des Fields auslesen:

<?php block_field(‚affiliate-link‘); ?>

Angewendet auf unseren vorhandenen Text im Template, sieht es dann so aus:

<div>In diesem Beitrag wurden sogenannte <a href=“
<?php block_field(‚affiliate-link‘); ?>“>Affiliate-Links</a> verwendet, die durch (Provision-Link) oder (Affiliate-Link) gekennzeichnet werden. Wenn Du auf so einen Affiliate-Produkt klickst und über diesen Link einen Einkauf tätigst, bekomme ich von dem betreffenden Online-Shop oder Anbieter eine Provision. Für dich ändert sich an dem Preis nichts. Danke für deine Unterstützung!</div>

Nach dem wir das Template gespeichert haben, kann unser vordefinierter Block verwendet werden. Sobald wir in einem neuen Beitrag einen neuen Block hinzufügen möchten, haben wir unseren vordefinierten Block „Affiliate-Hinweis“ zur Auswahl:

Nach dem Hinzufügen sieht es dann so aus:

Bei einem Block mit einem oder mehreren Fields, müssen die Felder ausgefüllt werden. In unserem Fall müssen wir eine URL hinterlegen. Nach der Eingabe sieht es dann so aus:

Wie ihr seht, wurde die eingegebene Url in den Text eingebaut, d.h. das Wort „Affiliate-Links“ wurde verlinkt. Mit solchen vordefinierten Blöcken kann man sehr viel Zeit sparen, wenn sie sehr oft in vielen Beiträgen verwendet werden.

Schreibe einen Kommentar

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.