Ein Leitfaden für benutzerdefinierte Gutenberg-Blöcke
Veröffentlicht: 2022-11-08Falls Sie zu spät zur WordPress-Party kommen, Blöcke sind in .
WordPress entwickelt sich weiter und verbessert das Gutenberg-Erlebnis, was viele Entwickler dazu veranlasst, sich zu fragen, ob sie benutzerdefinierte Gutenberg-Blöcke erstellen sollten.
In diesem Beitrag sehen wir uns an, wie benutzerdefinierte Blöcke funktionieren, wann sie verwendet werden, alternative Optionen zum Erstellen Ihrer Website und wie Sie Gutenberg-Blöcke erstellen.
Was sind benutzerdefinierte Gutenberg-Blöcke?
Blöcke sind die Grundeinheit zum Erstellen von Seiten und Beiträgen in WordPress. WordPress hat Blöcke mit der Gutenberg-Bearbeitungserfahrung im Jahr 2018 eingeführt. WordPress enthält viele Standard-Inhaltstypblöcke, einschließlich Beitragstitel, Bilder und Galerien. Darüber hinaus fügen Plugins Ihrer Bearbeitungserfahrung auch ihre eigenen Blöcke hinzu. Beispielsweise haben einige der neuesten WooCommerce-Versionen neue Blöcke eingeführt, um das Hinzufügen von Produkten und E-Commerce-Funktionen zu jeder Seite oder jedem Beitrag in WordPress zu vereinfachen.
Das Erstellen eines benutzerdefinierten Gutenberg-Blocks ermöglicht es Ihnen, diesen Block auf jeder Seite oder jedem Post auf Ihrer Website zu verwenden. Sie könnten beispielsweise einen Block erstellen, der Kundenreferenzen abruft und anzeigt.
Wenn Sie sich geweigert haben, Blockaden vollständig anzunehmen, verpassen Sie etwas. Alle neuesten WordPress-Funktionen konzentrieren sich auf die Verbesserung des Blockeditor-Erlebnisses. Sie müssen Blöcke verwenden, um viele der aktuellen und kommenden WordPress-Funktionen nutzen zu können.
Laden Sie unser E-Book zu den ersten Schritten mit der vollständigen Site-Bearbeitung herunter, um mehr darüber zu erfahren, wie Sie Blöcke zum Erstellen und Bearbeiten Ihrer gesamten Site verwenden können.
Wann benutzerdefinierte Gutenberg-Blöcke verwendet werden sollten
Sie können einen benutzerdefinierten Gutenberg-Block erstellen, wenn die vorhandenen Blockoptionen nicht Ihren Anforderungen entsprechen und Sie mit Ihren Plugins oder Designs keine praktikable Alternative finden können.
Das Erstellen eines benutzerdefinierten Gutenberg-Blocks ist normalerweise kein anfängerfreundliches Projekt. Die beiden häufigsten Gründe, Ihre eigenen benutzerdefinierten Gutenberg-Blöcke zu codieren, sind, wenn Sie ein Plugin entwickeln oder Ihr eigenes Design erstellen.
Das Erstellen eines Blocks ist kein Projekt, das die meisten Leute für eine einzelne Website durchführen, es sei denn, es handelt sich um ein Projekt auf Unternehmensebene mit einem dedizierten Entwickler oder Entwicklungsteam. Wir teilen einige alternative Methoden, die möglicherweise besser funktionieren, wenn Sie einen benutzerdefinierten Block nur für eine Website benötigen.
Alternativen zur Verwendung von benutzerdefinierten Gutenberg-Blöcken
Bevor Sie sich die ganze Arbeit machen, um benutzerdefinierte Blöcke herauszufinden, überlegen Sie, ob eine dieser Alternativen für Sie funktionieren könnte.
Blockmuster oder wiederverwendbare Blöcke
Wenn Sie keine dynamischen Inhalte abrufen müssen und wirklich nur möchten, dass ein Block ein Layout repliziert, verwenden Sie stattdessen die neue Blockmusterfunktion oder wiederverwendbare Blöcke. Diese Option ist anfängerfreundlich und kann mit wenig bis gar keinem Codeschreiben erreicht werden.
Muster sind wie eine Mini-Vorlage, die Sie überall auf Ihrer Website verwenden können. Sie können es auf einer Seite einfügen und dann bearbeiten. Wiederverwendbare Blöcke funktionieren auf ähnliche Weise. Der große Unterschied besteht darin, wie sie behandelt werden, nachdem Sie sie auf einer Seite oder in einem Beitrag verwendet haben.
Ein Muster ist ein Ausgangspunkt. Sobald es sich auf einer Seite befindet, gelten alle Änderungen, die Sie vornehmen, nur für diese Seite. Wenn Sie das Muster später ändern, ändert es sich nicht dort, wo es bereits verwendet wurde.
Wiederverwendbare Blöcke bleiben miteinander verknüpft. Wenn Sie den Block aktualisieren, gelten die Änderungen für jeden Ort, an dem Sie diesen Block verwendet haben.
Codeblock
Verwenden Sie den Codeblock, um benutzerdefinierten Code auf der Seite einzufügen. Theme- und Plugin-Entwickler erstellen benutzerdefinierte Blöcke, die auf mehreren Websites verwendet werden können. Wenn Sie an einer einzelnen Website arbeiten, können Sie dasselbe Ziel wahrscheinlich in kürzerer Zeit erreichen, indem Sie ein benutzerdefiniertes Code-Snippet hinzufügen. Beide Optionen erfordern das gleiche Maß an technischem Fachwissen.
Der einzige Fall, in dem es sich lohnen könnte, einen eigenen benutzerdefinierten Block zu erstellen, ist, wenn Sie ein Entwickler sind, der die Website an einen Kunden übergeben möchte. Der Client kann möglicherweise mit Ihrem benutzerdefinierten Block mit dem Gutenberg-Editor arbeiten, würde jedoch beim Versuch, Ihren Code zu bearbeiten, völlig verloren gehen.
So erstellen Sie einen benutzerdefinierten Gutenberg-Block
Sie haben zwei Möglichkeiten, einen benutzerdefinierten Gutenberg-Block zu erstellen. Sie können es selbst codieren oder ein Blockerstellungs-Plugin verwenden. Beide Optionen erfordern etwas Codierung. Sie sollten die Grundlagen der Webentwicklung auffrischen, bevor Sie es versuchen.
Codieren Sie es selbst
Das Erstellen benutzerdefinierter Blöcke erfordert Entwicklungserfahrung. Wenn Sie sich gerne an WYSIWIG-Editoren halten und Ihr Herz rast, wenn Sie versehentlich auf die Option Code anzeigen klicken, ist dies nichts für Sie.
Das Erstellen benutzerdefinierter Blöcke erfordert fortgeschrittene Kenntnisse in HTML, CSS, JavaScript und React.
Beginnen Sie mit der Einrichtung Ihrer Entwicklungsumgebung und Tools. Sie benötigen eine WordPress-Umgebung, Node, NPM und einen Code-Editor. Folgen Sie danach diesem Tutorial zum Erstellen Ihres ersten Blocks aus dem offiziellen Handbuch des WordPress-Blockeditors.
Verwendung eines Plugins
Wenn Sie mit HTML, CSS und JavaScript vertraut sind, aber nicht bereit sind, alles von Grund auf neu zu programmieren, sollten Sie den Plugin-Ansatz in Betracht ziehen. Die Verwendung eines Plugins zum Erstellen benutzerdefinierter Blöcke ist eine großartige Option, wenn Sie einen benutzerdefinierten Block für die Verwendung auf einer einzelnen Website benötigen.
Das Genesis Custom Blocks Plugin ist das beliebteste Plugin zum Erstellen von benutzerdefinierten Blöcken. Sie erstellen die Blockfelder mit der vertrauten WordPress-Oberfläche. Nachdem Sie die Felder eingerichtet haben, müssen Sie die HTML-, CSS-, JavaScript- und PHP-Vorlage bereitstellen, damit der Block funktioniert.
Obwohl es einfacher ist, erfordert es immer noch etwas Codierung. Der Unterschied besteht darin, dass Sie alles von Ihrem WordPress-Admin aus erledigen können, ohne eine lokale Entwicklungsumgebung einzurichten. Das Plugin erleichtert auch das Testen und Anzeigen einer Vorschau des Blocks, um sicherzustellen, dass er ordnungsgemäß funktioniert.
Was auch immer Sie bauen, wir können Ihnen helfen
Unabhängig davon, wie Sie Ihre Website erstellen, mit benutzerdefinierten Blöcken oder wenn Sie ein Holdout sind, der immer noch den klassischen Editor verwendet, benötigen Sie einen zuverlässigen Host. Pressable ist stolz darauf, der Ort zu sein, an dem WordPress für alle am besten funktioniert, vom Solopreneur bis zum Team fortgeschrittener Entwickler.
Pressable bietet eine benutzerfreundliche Oberfläche, erstklassige Sicherheit und blitzschnelle Geschwindigkeiten. Mit dem Hosting von Pressable ist Ihre Website einfach zu aktualisieren und für Ihre Kunden einfach zu finden und zu verwenden.
Melden Sie sich noch heute an und beginnen Sie mit dem Aufbau Ihrer Website oder erfahren Sie mehr über die Übertragung einer vorhandenen Website. Wir helfen Ihnen gerne bei der Migration Ihrer Websites!
