Lieben wir nicht alle WordPress? Die Plattform hat seit ihrer Gründung großen Erfolg gehabt, und Entwickler fügen ständig neue Funktionen hinzu. Eine der bemerkenswertesten Funktionen der letzten Zeit ist der WordPress-Blockeditor mit dem Codenamen Gutenberg.
Gutenberg bietet WordPress-Benutzern eine aufregende neue Möglichkeit, Inhalte zu veröffentlichen und Ihre Website anzupassen. Es ist unglaublich einfach zu bedienen, was sowohl für Anfänger als auch für Entwickler eine großartige Nachricht ist. Wenn Sie die neueste Version von WordPress verwenden, sind Sie mit dem Blockeditor und dem Konzept der Blöcke bereits vertraut.
Standardmäßig enthält der WordPress-Blockeditor einige Blöcke, mit denen Sie Text, Bilder, Zitate, Audio, Videos, Einbettungen usw. einfügen können. Darüber hinaus gibt es eine Menge Gutenberg-Add-Ons, mit denen Sie den Editor erweitern können, ohne ins Schwitzen zu geraten.
Möglicherweise haben Sie jedoch einen bestimmten Bedarf, der Sie dazu auffordert, Ihre eigenen benutzerdefinierten Blöcke zu erstellen. Hier kommt der heutige Beitrag ins Spiel. In ein paar Absätzen erfahren Sie genau, wie Sie benutzerdefinierte Gutenberg-Blöcke erstellen, die Ihren spezifischen Anforderungen entsprechen.
Lassen Sie uns ohne weiteres anfangen, denn es gibt viel zu lernen.
Was sind überhaupt Blöcke?
Wenn Sie der perfekte Anfänger sind, fragen Sie sich wahrscheinlich, was es mit diesem Gutenberg-Geschäft auf sich hat. Ich weiß, ich war ziemlich verwirrt, als Gutenberg wurde vorgestellt. Aber niemand ist schuld, das waren wir alle gewohnt Klassischer Editor dass die Umstellung anfangs unangenehm war.
Trotzdem bleibt der WordPress-Blockeditor hier, ob es uns gefällt oder nicht. Genau aus diesem Grund sollten Sie so viel wie möglich über Gutenberg (und alles, was dazugehört) lernen, um das Beste daraus zu machen.
Blöcke behandeln Absätze, Überschriften, Medien und Einbettungen alle als Komponenten, die, wenn sie aneinandergereiht sind, den in der WordPress-Datenbank gespeicherten Inhalt bilden und das traditionelle Konzept von Freiformtext durch eingebettete Medien und Shortcodes ersetzen. – Block-Editor-Handbuch
In der Vergangenheit verließen sich WordPress-Benutzer auf Freiformtext und Shortcodes, um Inhalte hinzuzufügen. Gutenberg verwendet Blöcke. Mit dem neuen Editor können Sie Blockeinheiten verwenden, um reichhaltige und flexible Layouts zu erstellen, die einfach zu verwalten sind. Derzeit können Sie den Blockeditor für Beiträge und Seiten verwenden, aber es gibt aktive Unterstützungspläne vollständige Website-Bearbeitung in der Zukunft.
Das Arbeiten mit Blöcken macht das Erstellen von Inhalten in WordPress ziemlich erfrischend. Außerdem unterstützen viele vorhandene Plugins den neuen Editor und werden mit gebrauchsfertigen Blöcken geliefert, die das Hinzufügen von Inhalten aus diesen Plugins zum Kinderspiel machen. Mit dem Editor können Sie Blöcke per Drag & Drop auf eine Seite ziehen, damit Sie schneller auf die Schaltfläche „Veröffentlichen“ klicken können.
Genau wie ein Seitenersteller, der direkt in WordPress integriert ist.
Wenn Sie mit visuellen Seitenerstellern wie Elementor vertraut sind, sind Sie wahrscheinlich mit dem Konzept der Drag-and-Drop-Seitenerstellung vertraut. Gutenberg ist ein Versuch, die Websiteerstellung per Drag-and-Drop vollständig in den WordPress-Kern zu integrieren. Sieh dir gerne unsere Schritt-für-Schritt-Anleitung zum Gutenberg Builder für WordPress an, um mehr zu erfahren.
Lassen Sie uns damit zum besten Teil des heutigen Beitrags kommen. Lassen Sie uns lernen, wie man einen einfachen Block erstellt. Sie können dies manuell tun oder Plugins wie z Benutzerdefinierte Genesis-Blöcke (ehemals BlockLab), Faule Blöckeoder ACF. Das Erstellen von benutzerdefinierten Blöcken ist ein bisschen technisch, daher werden wir für den heutigen Beitrag ein Plugin verwenden.
So erstellen Sie einen benutzerdefinierten Block (mit benutzerdefinierten Genesis-Blöcken)
Die Plugin-Route zu gehen ist einfacher, da das Erstellen benutzerdefinierter Gutenberg-Blöcke von Grund auf ein gutes Verständnis von HTML, CSS, PHP und, was noch wichtiger ist, JavaScript erfordert. Sie müssen auch React verstehen, das Anfängern einen Curveball zuwirft.
Für den nächsten Abschnitt verwenden wir die benutzerdefinierten Genesis-Blöcke, die Ihnen unter anderem von StudioPress und WPEngine zur Verfügung gestellt werden. Die kostenlose Version von Genesis Custom Blocks ist im offiziellen WordPress-Repository verfügbar, was bedeutet, dass wir sie im WordPress-Admin-Dashboard installieren können.
Installieren Sie benutzerdefinierte Genesis-Blöcke
Melden Sie sich bei Ihrem WordPress-Admin-Dashboard an und navigieren Sie zu Plugins > Neu hinzufügenWie nachfolgend dargestellt.
Geben Sie als Nächstes „Genesis Custom Blocks“ in das Suchfeld für Schlüsselwörter ein und klicken Sie auf Jetzt installieren Taste:
Danach, aktivieren Sie das Plugin, um die Party in Gang zu bringen.
Ihr geht es gut 🙂
Lassen Sie uns als Nächstes einen neuen benutzerdefinierten Block erstellen. Lassen Sie uns zur Veranschaulichung einen benutzerdefinierten Call-to-Action (CTA) erstellen, den wir am Ende jedes von uns veröffentlichten Beitrags hinzufügen. Das Beste daran ist, dass Sie Blöcke wiederverwenden können, um sich die Mühe zu ersparen, dieselben Blöcke immer wieder zu erstellen.
Navigieren Sie in Ihrem WordPress-Admin-Menü zu Benutzerdefinierte Blöcke > Neu hinzufügenwie wir unten hervorheben.
Dies führt Sie zur folgenden Seite, auf der Sie alle Optionen finden, um unseren benutzerdefinierten Block (in unserem Fall einen CTA) zu erstellen:
Hier sind ein paar Worte, um zu erklären, was Sie im obigen Screenshot sehen. Von oben beginnend, haben Sie.
Hauptbearbeitungsbereich:
- Baumeister – Sie werden wahrscheinlich viel Zeit damit verbringen, Ihren benutzerdefinierten Block zu entwerfen. Der Baumeister ermöglicht es Ihnen, einen Titel, Felder, Slug, Schlüsselwörter, Kategorien hinzuzufügen und eine Vorschau Ihres benutzerdefinierten Blocks anzuzeigen. Sie erfahren, wie Sie Felder hinzufügen.
- Vorlagen-Editor – Nachdem Sie Ihren benutzerdefinierten Block entworfen haben (dh verschiedene Felder hinzugefügt haben), müssen Sie eine Blockvorlage erstellen (lesen, ein wenig Code hinzufügen) in der Vorlagen-Editor. Wir werden mehr erfahren, wenn wir den CTA entwerfen.
- Editor-Vorschau – Auf diese Weise können Sie den benutzerdefinierten Block im WordPress-Blockeditor in der Vorschau anzeigen.
- Frontend-Vorschau – Hier können Sie eine Vorschau anzeigen, wie der benutzerdefinierte Block auf Ihrer Website aussieht.
- Editor-Felder – Zeigt die Felder im Hauptbearbeitungsbereich eines Beitrags oder einer Seite an (Sie wissen, genau wie Sie Ihre regulären Beiträge im WordPress-Editor sehen)
- Inspektor Felder – Zeigt das Feld in der rechten Seitenleiste unter dem Blockinspektor an.
Sidebar-Optionen
- Schnecke – Der Slug wird basierend auf dem Titel, den Sie Ihrem benutzerdefinierten Block geben, automatisch ausgefüllt. Es ist wichtig, wenn Sie die Blockvorlage erstellen.
- Symbol – Mit dieser Option können Sie Ihrem benutzerdefinierten Block ein Symbol hinzufügen.
- Kategorie – Auf diese Weise können Sie Ihrem benutzerdefinierten Block eine Kategorie zuweisen. Sie können Ihren benutzerdefinierten Block mithilfe einer der integrierten Kategorien kategorisieren oder eine brandneue Kategorie erstellen.
- Schlüsselwörter – Fügen Sie maximal drei Schlüsselwörter hinzu, die sich auf Ihren benutzerdefinierten Block beziehen, damit die Leute ihn in der Blockauswahl leicht finden können.
- Blockfelder in einem Modal öffnen, anstatt an Ort und Stelle zu rendern – Aktivieren Sie diese Option, wenn Sie Felder in einem Modal öffnen möchten. Es ist nützlich, wenn Sie einen benutzerdefinierten Block mit vielen Feldern haben.
- Post-Typen – Aktivieren Sie das/die Kästchen, damit Ihr benutzerdefinierter Block für jeden Beitragstyp angezeigt wird. Wenn Sie beispielsweise Posts deaktivieren, wird der Block in keinem Post angezeigt.
Erstellen eines benutzerdefinierten Blocks
Nachdem Sie nun die Benutzeroberfläche und die Funktionen der einzelnen Teile besser verstanden haben, können wir die Ärmel hochkrempeln und uns an die Arbeit machen.
Im Baumeister, geben Sie Ihrem benutzerdefinierten Block einen passenden Titel. Ich gehe mit CTA für dieses, wie unten gezeigt.
Lassen Sie uns vor dem Hinzufügen neuer Felder ein Symbol und Schlüsselwörter hinzufügen und eine Kategorie für den benutzerdefinierten Block auswählen, wie unten gezeigt.
Lassen Sie uns diesem Satz einige Felder zu unserem benutzerdefinierten Block hinzufügen. Für unseren Beispiel-CTA-Block fügen wir nur drei Felder in der folgenden Reihenfolge hinzu: ein Bild, etwas Text und ein Dateifeld, das es Leuten ermöglicht, ein imaginäres E-Book herunterzuladen 🙂
Blockfelder hinzufügen
Auf der Editor-Felder Abschnitt, klicken Sie auf die plus (+) Symbol, um das erste Feld hinzuzufügen, wie unten gezeigt.
Als Nächstes fügen wir ein Bildfeld hinzu. Legen Sie in der Seitenleiste die Feldtyp zu Bild und definieren Sie die anderen Optionen. Beachten Sie auch die Schnecke (ich habe meine auf Bildfeld), weil wir es beim Erstellen der Blockvorlage verwenden werden. Siehe das Bild unten.
Fügen Sie danach die Text- und Dateifelder auf ähnliche Weise hinzu.
Feiern Sie noch nicht, es ist noch ein Schritt zu gehen. Wechseln Sie zu Vorlagen-Editor > Markup:
Hier entwerfen wir, wie Ihr benutzerdefinierter Block auf Ihrer Website aussieht. Der Vorlagen-Editor akzeptiert HTML, CSS und die Feld-Slugs (die Sie in 2 Klammern einschließen müssen). Wenn Sie PHP verwenden müssen, können Sie die Vorlage mithilfe von erstellen PHP-Template-Methode stattdessen.
Keine Sorge, es ist einfach.
Im Inneren des Vorlagen-Editorunter dem Markierung Registerkarte (siehe obiges Bild), fügen Sie das folgende Stück HTML-Markup (Code) hinzu:
<div class="cta-block"> <div class="cta-image"> <img src ="https://www.wpexplorer.com/create-block-plugin/{{image-field}}"> </div> <div class="text-upload"> <h2>{{text-field}}</h2> <a href="{{file-field}}"> <button type="button" class="dwnld">Download</button></a> </div> </div>
Wenn Sie Ihr HTML-Markup schreiben, werden Sie feststellen, dass die Vorlagen-Editor vervollständigt automatisch die Feld-Slugs (z. B. {{image-field}} ) für dich 🙂
Als nächstes gehen Sie zu CSS Abschnitt, um einige einfache Stile hinzuzufügen.
Sie können die gewünschten Stile hinzufügen, aber damit arbeite ich:
.cta-block { text-align:center; background-color:orange; width:100%; height:auto; border: 2px solid orange; } .dwnld { background-color: black; border: 2px solid black; color: green; padding: 5px 10px; text-align: center; display: inline-block; font-size: 20px; margin: 10px 30px; cursor: pointer; border-radius:2px; }
Und du bist fertig! Klicken Veröffentlichen:
Um Ihren neuen benutzerdefinierten Block in Aktion zu sehen, gehen Sie zurück zu Ihrem WordPress-Admin-Dashboard und navigieren Sie zu Beiträge > Neu hinzufügen (Es funktioniert auch mit Seiten):
Erstellen Sie wie gewohnt einen Beitrag, klicken Sie auf plus (+) um einen neuen Block hinzuzufügen, und wählen Sie Ihren neuen glänzenden benutzerdefinierten Block aus, wie wir unten hervorheben.
Füllen Sie als Nächstes Ihren benutzerdefinierten Block wie gewünscht aus und veröffentlichen Sie Ihren Beitrag:
Wenn ich mir jetzt meinen neuen benutzerdefinierten CTA-Block im Frontend ansehe, sehe ich Folgendes:
Mein benutzerdefinierter CTA ist genau da! Bitte haben Sie nichts gegen meine Designfähigkeiten – natürlich möchten Sie in einem realen Szenario etwas mehr Zeit damit verbringen, Ihren Block zu stylen. Aber ich hoffe, Sie haben heute hier etwas gelernt.
Das Erstellen benutzerdefinierter Blöcke muss mit Tools wie Genesis Custom Blocks und Lazy Blocks unter anderem keine schwierige Aufgabe sein. Außerdem können Sie Ihre benutzerdefinierten Blöcke je nach Bedarf komplex oder einfach gestalten. Wenn Sie benutzerdefinierte Blöcke manuell erstellen müssen, befassen Sie sich mit einigen JavaScript-Lektionen. Es wird helfen 🙂
Irgendwelche Gedanken oder Fragen? Bitte teilen Sie uns dies in den Kommentaren unten mit.