Vor kurzem habe ich eine Website für eine Privatklinik mit WordPress erstellt. Um die Verwaltung der Website so einfach wie möglich zu gestalten, habe ich ein paar benutzerdefinierte WordPress-Blöcke hinzugefügt. Hier zeige ich Ihnen, wie Sie einen einfachen WordPress-Block selbst erstellen können.
Mit den richtigen Tools kannst du in wenigen Minuten einen benutzerdefinierten WordPress Gutenberg-Editor-Block erstellen. Hier erfährst du, wie du das machst.
Erstellen eines benutzerdefinierten WordPress-Blocks, ohne das WordPress-Admin-Panel zu verlassen
Um einen benutzerdefinierten Block in WordPress zu erstellen, müssen Sie ein kostenloses WordPress-Plugin namens Genesis Benutzerdefinierte Blöcke. Keine Sorge, Sie müssen kein Genesis Framework basiertes Theme verwenden, um dieses Plugin zu nutzen – es funktioniert mit jedem Theme, das WordPress-Blöcke unterstützt.
Erster Schritt – Installieren Sie das Plugin für benutzerdefinierte WordPress-Blöcke
Gehen Sie zu Plugins >> Neu hinzufügen, und installieren Sie das Genesis Custom Blocks Plugin.
Sobald das Plugin aktiviert ist, finden Sie die Einstellungen unter WordPress Admin Panel >> Benutzerdefinierte Blöcke.
Zweiter Schritt – Erstellen von benutzerdefinierten WordPress-Blockfeldern
Sobald das Plugin aktiviert ist, gehen Sie zu Custom Blocks >> Add New, um mit der Erstellung Ihres ersten benutzerdefinierten Gutenberg-Editor-Blocks zu beginnen.
Jetzt befinden Sie sich auf der Registerkarte Builder, wo Sie die eigentliche Blockstruktur erstellen und den Namen des Blocks festlegen werden:
- Geben Sie oben einen benutzerdefinierten WordPress-Blocknamen ein
- Wählen Sie ein Symbol für einen Block aus – der Name und das Symbol werden in einer Seite oder einem Beitrag für Website-Redakteure angezeigt.
- WordPress-Redakteure suchen in der Regel nach einem Block, indem sie den Namen des Blocks eingeben. Sie können zusätzliche Schlüsselwörter angeben, um sicherzustellen, dass Website-Redakteure den Block, den sie benötigen, so einfach wie möglich finden können.
- Wählen Sie aus, ob der Block in Seiten, in Beiträgen oder in beiden Arten von Inhalten angezeigt werden soll.
Ein WordPress-Block ist im Grunde eine Liste von Feldern. In diesem Beispiel werden wir vier Felder in unserem Block erstellen:
- Bildfeld für das Bild des Arztes
- Textfeld für den Namen des Arztes
- Textarea-Feld für die Kurzbiographie des Arztes
- Dateifeld für den Lebenslauf des Arztes – der Website-Redakteur kann eine PDF-Datei direkt in den Block hochladen.
Um ein neues Feld zu erstellen, klicken Sie auf die Schaltfläche + und wählen Sie Feldeinstellungen:
- Feldbezeichnung eingeben
- Feldname / Slug eingeben (wird in der HTML-Vorlage verwendet)
- feldtyp
- feldbreite
Einige Blöcke haben zusätzliche Einstellungen wie Platzhalter, Hilfetext usw. So können Sie sogar Anweisungen hinzufügen, wie das Feld direkt im WordPress-Editor zu verwenden ist.
Sobald Sie alle Felder hinzugefügt haben, klicken Sie auf Veröffentlichen.
Nach dem Veröffentlichen des benutzerdefinierten Blocks werden Sie benachrichtigt, dass Sie diese Datei zu Ihrem Theme hinzufügen können (indem Sie auf das Symbol im roten Quadrat klicken), oder Sie können zur Registerkarte Template Editor wechseln und dort den HTML- und CSS-Code des Blocks erstellen.
Dritter Schritt – Erstellen von benutzerdefiniertem WordPress-Block-HTML-Markup und CSS
Sobald wir unsere benutzerdefinierte WordPress-Block-Struktur eingerichtet haben, müssen wir als Nächstes eine HTML-Vorlage dafür erstellen. Die Vorlage wird verwendet, um den benutzerdefinierten Block für Website-Besucher anzuzeigen.
Wenn Sie sich auf der Registerkarte Template Editor befinden, klicken Sie auf Markup und erstellen Sie die gewünschte HTML-Struktur.
Um Feldwerte anzuzeigen, schließen Sie den Feldnamen in 2 Klammern ein. Zum Beispiel {{doctor-image}}, {{cv-file}}, usw.
Weitere Informationen über die Verwendung von Feldern und Markup finden Sie in der offiziellen Plugin-Dokumentation hier.
Um Ihrem Block ein CSS-Styling hinzuzufügen, klicken Sie auf CSS in der gleichen Registerkarte des Vorlageneditors.
Das war’s – Ihr benutzerdefinierter WordPress-Block ist jetzt einsatzbereit.
Wenn Sie jemals Styling, HTML-Markup oder benutzerdefinierte Felder bearbeiten möchten, können Sie Ihren benutzerdefinierten WordPress-Block jederzeit in der Liste der benutzerdefinierten Blöcke bearbeiten. Machen Sie sich also keine Sorgen, wenn Sie nicht sicher sind, wie Ihr Block aussehen soll – Sie können ihn später aktualisieren.
Wie man den benutzerdefinierten WordPress-Block in Seiten und Beiträgen verwendet
Um Ihren erstellten Block in WordPress zu verwenden, gehen Sie einfach auf die gewünschte Seite oder den gewünschten Beitrag und fügen Sie den Block auf dieselbe Weise wie jeden anderen Block hinzu.
Klicken Sie auf + an der Stelle, an der der Block erscheinen soll, geben Sie den Blocknamen ein und wählen Sie ihn aus.
Füllen Sie Ihren neuen Block aus. Die Daten werden auf die gleiche Weise wie in den nativen WordPress-Blöcken sichtbar sein, so dass die Administratoren der Website Ihres Kunden keine Probleme haben werden, sie zu verwenden.
Sie können so viele benutzerdefinierte Blöcke auf einer Seite oder in einem Beitrag hinzufügen, wie Sie möchten.
Viel Spaß mit Ihrem neuen benutzerdefinierten Block in WordPress!
Wie Sie sehen, ist das Hinzufügen neuer benutzerdefinierter Blöcke in WordPress wirklich einfach und unkompliziert. Sie brauchen nur das richtige Plugin und einige grundlegende HTML- und CSS-Kenntnisse, und Sie können alles mit WordPress erstellen, ohne umständliche Seitenerstellungsprogramme von Drittanbietern.
Sie können so viele benutzerdefinierte WordPress-Blöcke erstellen, wie Sie möchten, ihnen im WordPress-Admin ein Styling hinzufügen und benutzerdefinierte WordPress-Websites erstellen, ohne das WordPress-Admin-Panel zu verlassen.
