Möchten Sie eine erstellen WordPress Plugin Einfacher Gutenberg-Block?
Lieben wir nicht alle WordPress? Die Plattform hat seit ihrer Gründung einen enormen Erfolg erlebt, und die Entwickler fügen ständig neue Funktionen hinzu. Eines der herausragenden Features der letzten Zeit ist der WordPress Block Editor, Codename 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 bereits mit dem Blockeditor und dem Konzept der Blöcke vertraut.
Standardmäßig enthält der WordPress-Blockeditor einige Blöcke, mit denen Sie Text, Bilder, Zitate, Audio, Video, Einbettungen usw. einfügen können. Außerdem gibt es eine Menge Gutenberg-Add-Ons, mit denen Sie den Editor erweitern können, ohne ihn zu beschädigen ein Schweiß.
Möglicherweise haben Sie jedoch einen bestimmten Bedarf, der Sie dazu auffordert, Ihre eigenen benutzerdefinierten Blöcke zu erstellen. In diesem Artikel zeigen wir Ihnen in wenigen Absätzen, wie Sie benutzerdefinierte Gutenberg-Blöcke erstellen, die Ihren spezifischen Anforderungen entsprechen.
Fangen wir ohne weiteres an, denn es gibt viel zu lernen.
Aber vorher, wenn Sie WordPress Discover noch nie installiert haben Wie man ein Wordpress-Blog 7 Schritte für die Installation et Wie finden, zu installieren und ein Wordpress-Theme auf Ihrem Blog aktivieren
Dann zurück zu warum wir hier sind.
Was sind überhaupt Blöcke?
Blöcke behandeln Absätze, Überschriften, Medien und Einbettungen als Komponenten, die, wenn sie aneinandergereiht sind, den in der WordPress-Datenbank gespeicherten Inhalt bilden und das traditionelle Konzept von Text durch Medien und integrierte Shortcodes ersetzen.
In der Vergangenheit verließen sich WordPress-Benutzer auf Text 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 Pläne Unterstützung der vollständigen Website-Bearbeitung in der Zukunft.
Das Arbeiten mit Blöcken macht die Inhaltserstellung in WordPress ziemlich erfrischend. Darüber hinaus unterstützen viele vorhandene Plugins den neuen Editor und verfügen über gebrauchsfertige Blöcke, die das Hinzufügen von Inhalten aus diesen Plugins erleichtern. Mit dem Editor können Sie Blöcke per Drag-and-Drop auf eine Seite ziehen, damit Sie schneller auf die Schaltfläche „Veröffentlichen“ klicken können.
Genau wie ein direkt in WordPress integrierter Seitenersteller.
Wenn Sie sich mit dem auskennen Seitenersteller wie Elementor, sind Sie wahrscheinlich mit dem Konzept der Drag-and-Drop-Seitenerstellung vertraut. Gutenberg ist ein Versuch, das Erstellen von Websites per Drag-and-Drop vollständig in den WordPress-Kern zu integrieren.
Kommen wir also zum besten Teil des heutigen Artikels. Lassen Sie uns lernen, wie man einen einfachen Block erstellt. Sie können dies manuell tun oder Plugins wie verwenden Benutzerdefinierte Genesis-Blöcke (ehemals BlockLab), Faule Blöcke ou ACF. Das Erstellen benutzerdefinierter Blöcke ist ein bisschen technisch, daher verwenden wir für den heutigen Artikel ein Plugin.
So erstellen Sie einen benutzerdefinierten Block (mit Genesis Custom Blocks)
Es ist einfacher, den Plugin-Weg zu gehen, da das Erstellen benutzerdefinierter Gutenberg-Blöcke von Grund auf ein gutes Verständnis von HTML, CSS, PHP und vor allem JavaScript erfordert. Sie müssen auch React verstehen.
Für den nächsten Abschnitt verwenden wir benutzerdefinierte Genesis-Blöcke. Die kostenlose Version 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 Erweiterungen> Hinzufügen, Wie nachfolgend dargestellt.
Geben Sie dann " Benutzerdefinierte Genesis-Blöcke in das Keyword-Suchfeld und klicken auf den Knopf jetzt installieren
Danach, aktivieren das Plugin für den Einstieg
Als Nächstes erstellen wir einen neuen benutzerdefinierten Block. Lassen Sie uns zur Veranschaulichung einen benutzerdefinierten Call-to-Action (CTA) erstellen, den wir am Ende jedes von uns veröffentlichten Artikels hinzufügen. Das Beste daran ist, dass Sie die Blöcke wiederverwenden können, damit Sie nicht immer wieder dieselben Blöcke erstellen müssen.
Navigieren Sie in Ihrem WordPress-Admin-Menü zu Benutzerdefinierte Blöcke > Neu hinzufügen, wie wir unten hervorheben.
Dadurch gelangen Sie auf die nächste Seite, auf der Sie alle Optionen zum Erstellen eines benutzerdefinierten Blocks (in unserem Fall ein CTA) finden:
Hier sind ein paar Worte, um zu erklären, was Sie im Screenshot oben sehen. Von oben beginnend, haben Sie es.
Hauptbearbeitungsbereich:
- Baumeister – Sie werden hier wahrscheinlich viel Zeit damit verbringen, Ihren benutzerdefinierten Block zu entwerfen. das Constructeur können Sie Titel, Felder, Slug, Schlüsselwörter und Kategorien hinzufügen und eine Vorschau Ihres benutzerdefinierten Blocks anzeigen. Sie erfahren, wie Sie Felder hinzufügen.
- Vorlageneditor – Nachdem Sie Ihren benutzerdefinierten Block entworfen (d. h. verschiedene Felder hinzugefügt) haben, müssen Sie eine Blockvorlage erstellen (lesen, etwas Code hinzufügen). der Modelleditor. Wir werden mehr erfahren, wenn wir den CTA entwerfen.
- Editor-Vorschau – Sie können eine Vorschau des benutzerdefinierten Blocks im WordPress-Blockeditor anzeigen.
- Frontend-Vorschau – Hier können Sie eine Vorschau anzeigen, wie der benutzerdefinierte Block auf Ihrer Website aussehen wird.
- EditorField – Zeigt Felder im Hauptbearbeitungsbereich eines Beitrags oder einer Seite an (Sie wissen, genau wie Sie Ihre regulären Beiträge im WordPress-Editor sehen)
- InspectorField – Zeigt das Feld in der rechten Seitenleiste unterhalb des Blockinspektors an.
Seitenleistenoptionen
- Schnecke – Es wird automatisch basierend auf dem Titel ausgefüllt, den Sie Ihrem benutzerdefinierten Block geben. Dies ist beim Erstellen des Blockmodells wichtig.
- Symbol – Mit dieser Option können Sie Ihrem benutzerdefinierten Block ein Symbol hinzufügen.
- Kategorie – Sie können Ihrem benutzerdefinierten Block eine Kategorie zuweisen. Sie können Ihren benutzerdefinierten Block mithilfe einer der integrierten Kategorien kategorisieren oder eine völlig neue Kategorie erstellen.
- Stichwörter – Fügen Sie Ihrem benutzerdefinierten Block maximal drei verwandte Schlüsselwörter hinzu, damit Benutzer 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. Dies ist nützlich, wenn Sie einen benutzerdefinierten Block mit vielen Feldern haben.
- Beitrag Typen – Aktivieren Sie das/die Kontrollkästchen, damit Ihr benutzerdefinierter Block für jeden Beitragstyp angezeigt werden kann. Wenn Sie beispielsweise Posts deaktivieren, wird der Block in keinem Post angezeigt.
Erstellen Sie einen benutzerdefinierten Block
Nachdem Sie nun die Benutzeroberfläche und die Funktionen der einzelnen Teile besser verstanden haben, können wir uns an die Arbeit machen.
in Baumeister – Baumeister –, geben Sie Ihrem benutzerdefinierten Block einen geeigneten Titel. Wir werden CTA für diesen auswählen, wie unten gezeigt.
Bevor wir neue Felder hinzufügen, fügen wir ein Symbol und Schlüsselwörter hinzu und wählen eine Kategorie für den benutzerdefinierten Block aus, wie unten gezeigt.
Fügen wir dazu einige Felder zu unserem benutzerdefinierten Block hinzu. Für unseren Beispiel-CTA-Block fügen wir nur drei Felder in der folgenden Reihenfolge hinzu: ein Bild, etwas Text und ein Dateifeld, mit dem Benutzer ein E-Book herunterladen können.
Lesen Sie auch: 5 WooCommerce-Plugins zum Bearbeiten Ihrer Produkte in loser Schüttung
Blockfelder hinzufügen
Im Abschnitt EditorfelderKlicken Sie auf das Pluszeichen (+). um das erste Feld wie unten gezeigt hinzuzufügen.
Als Nächstes fügen wir ein Bildfeld hinzu. Legen Sie in der Seitenleiste die Feldtyp ein Bild und stellen Sie die anderen Optionen ein. Berücksichtigen Sie auch den Slug, da wir ihn beim Erstellen des Blockmodells verwenden werden.
Fügen Sie danach die Text- und Dateifelder auf die gleiche Weise hinzu.
Wechseln zu Vorlageneditor > Markierung.
Hier entwerfen wir, wie unser benutzerdefinierter Block auf Ihrer Website aussehen wird. Der Modelleditor akzeptiert HTML, CSS und Feld-Slugs (die Sie zwischen 2 eckige Klammern setzen müssen). Wenn Sie die PHP-Sprache verwenden müssen, können Sie die Vorlage mit erstellen PHP-Modellierungsmethode
Keine Sorge, es ist einfach.
Tanz der Modelleditorunter Markup-Registerkarte, fügen Sie den folgenden Code hinzu:
<div class="cta-block">
<div class="cta-image">
<img src ="{{image-field}}">
</div>
<div class="text-upload">
<h2>{{text-field}}</h2>
<a href="{{file-field}}">
<button type="button" class="dwnld">Telecharger</button></a>
</div>
</div>Wenn Sie Ihren Code schreiben, werden Sie das bemerken der Modelleditor Automatische Vervollständigung von Feld-Slugs (z. B. {{image-field}} ) für Sie.
Dann gehen Sie zum Abschnitt CSS um einfache Stile mit dem folgenden Code hinzuzufügen:
.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;
}
Sie können diese Stile nach Belieben anpassen,
Klicken Sie auf veröffentlichen :
Um Ihren neuen benutzerdefinierten Block in Aktion zu sehen, gehen Sie zurück zu Ihrem WordPress-Admin-Dashboard und erstellen Sie wie gewohnt einen Beitrag, klicken Sie auf Mehr (+) , um einen neuen Block hinzuzufügen und Ihren neuen benutzerdefinierten Block auszuwählen, wie wir unten hervorheben.
Füllen Sie als Nächstes Ihren benutzerdefinierten Block wie gewünscht aus und posten Sie Ihre Nachricht:
Wenn wir nun unseren neuen benutzerdefinierten CTA-Block im Frontend überprüfen, sehen wir Folgendes.
Unser benutzerdefinierter CTA ist genau da! Machen Sie sich bitte keine Sorgen um unsere Designmöglichkeiten – in einem realen Szenario verbringen Sie natürlich etwas mehr Zeit mit der Anpassung Ihres Blocks. Aber wir hoffen, Sie haben hier etwas gelernt.
Andere empfohlene Ressourcen
Wir laden Sie auch ein, die zu konsultieren Ressourcen unten, um mehr Eigenverantwortung und Kontrolle über Ihre Website und Ihren Blog zu übernehmen.
- 10 Affiliate-WordPress-Plugins zum Erstellen eines Programms
- So fügen Sie mehrere Spalten in WordPress hinzu
- So fügen Sie mehrere Spalten in WordPress hinzu
- Mit verschiedenen Hintergründen Wordpress
- Elementor: So erstellen Sie eine Animation beim Schweben
Zusammenfassung
Das Erstellen benutzerdefinierter Blöcke ist keine leichte Aufgabe. Aber mit Wordpress-Plugins wie unter anderem Genesis Custom Blocks und Lazy Blocks, egal ob Sie ein Anfänger sind oder nicht, Sie werden es schaffen, sie zu erstellen. Von einfach bis komplex, je nach Ihren Bedürfnissen.
Das war es für diesen Artikel, der Ihnen zeigt, wie Sie einer WordPress-Website benutzerdefinierte Schriftarten hinzufügen. Wir laden Sie ein, es zu versuchen. Wenn Sie Bedenken oder Vorschläge haben, teilen Sie uns dies bitte innerhalb mit commentaires.
Sie können jedoch auch unsere RessourcenWenn Sie mehr Elemente benötigen, um Ihre Projekte zur Erstellung von Internetseiten durchzuführen, konsultieren Sie unseren Leitfaden auf der WordPress-Blog-Erstellung oder der eine auf Divi: das beste WordPress-Theme aller Zeiten.
In der Zwischenzeit Teile diesen Artikel in deinen verschiedenen sozialen Netzwerken.
...
