WordPress Gutenberg-Tutorial
Veröffentlicht: 2019-03-09Nachdem WordPress jahrzehntelang als das vielseitigste und am einfachsten zu bedienende CMS an Popularität gewonnen hat, konnte es seine Benutzer immer wieder mit häufigen technischen Upgrades beeindrucken. In der neusten Version 5.0 wartet WordPress mit seinem neuen visuellen Editor „Gutenberg“ auf. Lassen Sie uns also Gutenberg und Blocks entmystifizieren. Wie funktioniert das neue System? Ist es besser als der Editor, den wir vorher hatten? Wir werden auf Gutenberg und ein kurzes Tutorial eingehen, um Ihnen zu helfen, alle Vorteile des Gutenberg-Editors zu nutzen.
Was ist „Gutenberg“?
Matt Mullenweg hat auf dem WordCamp Europe 2018 einen neuen Ansatz entwickelt, um den klassischen WordPress-Editor zu ersetzen. Er hieß „Gutenberg“, was als Projektname während der Entwicklung gedacht war. Das mit WordPress 5.0 veröffentlichte Gutenberg-Projekt hieß jetzt „WordPress Editor“ oder „Block Editor“, um genauer zu sein. Der klassische Editor war nach den heutigen Trends der Drag-and-Drop-Webbuilder etwas veraltet. Das Ergebnis war WordPress Gutenberg und ein komplett neuer WordPress-Editor, der ähnlich wie Website- und Page-Builder-Tools konzipiert ist.
Themen, die mit Gutenberg funktionieren
Es sind Tausende von Themen verfügbar, aber viele sind veraltet. Hier sind einige der neuen, großartigen Shops, die Themen für Gutenberg veröffentlichen.
Plugins, die mit Gutenberg funktionieren
Es gibt eine Reihe von Plugins auf dem WordPress-Markt, aber nicht alle funktionieren mit dem Gutenberg-Editor. Hier sind einige, die das tun.
Was sind „Blöcke“?
Blöcke sind einfach Inhalte. Dies kann ein Textabschnitt, eine Audiodatei, ein Foto oder eine Fotogalerie oder sogar ein Video sein. Es ist die Grundlage der Gutenberg-Bearbeitungserfahrung. Blöcke werden verwendet, um Beiträge und Webseiten zu erstellen. Was Benutzer normalerweise in WordPress packen, sind die in Gutenberg eingebauten Standardblöcke, die für jede WordPress-Site verfügbar sind, die den Gutenberg-Editor verwendet. Gutenberg wurde so erstellt, dass es Programmierern ermöglicht, verfügbare Blöcke zu erweitern und zu erweitern. Blöcke können mit Plugins oder Themes hinzugefügt werden. Daher haben Benutzer Zugriff auf zusätzliche Blöcke, anstatt auf Standardblöcke beschränkt zu sein.
Verwenden von Gutenberg als WordPress-Editor
Wenn Sie WordPress 5.0 verwenden, erhalten Sie den „Block-Editor“ oder „Gutenberg-Editor“ als Standard-Texteditor für 5.0 eingebaut. Heute helfen wir Ihnen, sich mit dem neuen Blockeditor vertraut zu machen. Lassen Sie uns eintauchen. Das Wichtigste zuerst, um wie gewohnt einen neuen Beitrag zu erstellen, klicken Sie unter Beiträge auf „Neu hinzufügen“. Sie haben jetzt einen neuen Block, mit dem Sie arbeiten können.
Das sieht ganz anders aus, oder? Vom klassischen Editor ist dort oben keine Symbolleiste vorhanden. Machen wir uns mit den Funktionen und diesen Schaltflächen vertraut.
Oberer Abschnitt:
Mit diesem oberen Abschnitt können Sie neue Blöcke hinzufügen und auch Aktionen wie das Rückgängigmachen und Wiederherstellen von Blockänderungen durchführen. Sie können auch Ihre Inhaltsstrukturinformationen wie die Anzahl der Wörter, Überschriften, Absätze und Blöcke anzeigen. Mit der „i“-Taste können Sie sogar durch Blöcke navigieren.
Einige der grundlegenden Post-Editing-Funktionen wie „Als Entwurf speichern“, „Post-Vorschau“ und „Post veröffentlichen“ sind im oberen Bereich untergebracht. Das Zahnradsymbol zeigt die Einstellung an, die in der rechten Seitenleiste sichtbar ist. Hier können Sie zwischen den Einstellungsansichten „Dokument“ und „Blockieren“ wechseln.
Die Dokumentabschnittsansicht ist klassischen Editoren sehr ähnlich. Hier können Sie auch den Status und die Sichtbarkeit, Kategorien, Tags, Feature-Bilder und Attribute auswählen. In der Blockschnittansicht können Sie die Einstellungen jedes hinzugefügten Blocks ändern. Diese Funktion macht es sehr einfach, die Einstellungen für jeden Block zu ändern und Funktionen wie Schriftgröße, Initialen und vieles mehr zu ändern. Von hier aus können individuelle Hintergrundfarben für jeden Block hinzugefügt und sogar zusätzliche CSS-Klassen für jeden Block einzeln aktiviert werden.
Schließlich zeigen die drei Punkte im oberen Bereich zusätzliche Einstellungen. Von hier aus können Sie das Erscheinungsbild Ihres Blockeditors anpassen. Sie können die Werkzeugansicht von Blöcken auswählen. Sie können sogar zwischen „visuellem Editor“ und „Code-Editor“ wählen. Es gibt auch einige Tools zum Verwalten wiederverwendbarer Blöcke, zum Erstellen von Tastaturkürzeln und zum Kopieren von Inhalten.
Blöcke hinzufügen
Hier kommt die Hauptidee des neuen Editors, dh das Hinzufügen von Blöcken. Wie bereits erwähnt, sind Blöcke das Herzstück des neuen Blockeditors. Sehen Sie oben links auf der Editor-Seite nach. Dadurch erhalten Sie ein Dropdown-Menü, aus dem Sie den gewünschten Blocktyp für bestimmte Zwecke auswählen können. Mithilfe der Suchleiste können Sie die richtigen Blöcke finden, die Ihren Anforderungen entsprechen.
Scrollen Sie außerdem im Menü nach unten und Sie werden einige weitere Blöcke sehen, die auf ihren Grundfunktionen basieren. Dies sind allgemeine Blöcke, Formatierungen, Widgets und Einbettungen usw. Wählen Sie einfach den gewünschten Block mit nur einem Klick aus.
Als nächstes werden Sie auch in eine kleine Symbolleiste eingeführt, sobald Sie mit dem Hinzufügen von Inhalten in Ihrem Block beginnen. Die Funktion dieser Symbolleiste hängt von der Art des ausgewählten Blocks ab. Diese Symbolleisten dienen dazu, die Gestaltung des Inhalts zu bearbeiten, z. B. Ausrichtung, Stil, Verknüpfung und mehr. Die Schaltfläche „Blocktyp ändern“ dient dazu, den aktuellen Blockstil zu ändern. Sie können beispielsweise einen Absatzblock in eine Überschrift, einen vorformatierten Block, eine Liste, ein Zitat oder einen Vers ändern. Die letzten drei Punkte bieten Ihnen weitere Optionen wie das Ausblenden der Blockeinstellung, das Erstellen eines Duplikats, das Bearbeiten als HTML, das Hinzufügen zu wiederverwendbaren Blöcken und natürlich das Entfernen des Blocks. Sie können auch weitere Blöcke einfügen, indem Sie die Optionen Vorher einfügen und Nachher einfügen verwenden. Dies ist praktisch, wenn Sie Inhalte hinzufügen oder ein paar schnelle Korrekturen vornehmen müssen. Abhängig von der gewählten Option wird dadurch einfach ein Block vor oder nach dem ausgewählten Block hinzugefügt. Das System ist sehr intuitiv und ergibt sofort Sinn.
Blockeinstellungen ändern
Jeder Block kann individuell an Ihre Anforderungen angepasst werden. Klicken Sie einfach auf den Block, den Sie anpassen möchten, und Sie erhalten verschiedene Bereiche, in denen Sie Ihren Block in der rechten Seitenleiste anpassen können. Denken Sie daran, dass Sie diese Option entweder über das Zahnrad im oberen Bereich oder über die Symbolleiste des jeweiligen Blocks ein- oder ausblenden können. Die Blockeinstellungen hängen auch von der Art des Blocks ab, den Sie auswählen. Wenn Sie beispielsweise einen Absatzblock verwenden, können Sie in den Blockeinstellungen die Schriftgröße, den Schriftarttyp oder die Hintergrundfarbe auswählen. Sie haben alle Möglichkeiten, Ihren Block anzupassen, von denen Sie normalerweise annehmen würden, dass sie vorhanden sind. Gutenberg ist sehr benutzerfreundlich und für neue Entwickler leicht zu erlernen.
Abschluss des WordPress Gutenberg-Tutorials
Wir hoffen, dass Ihnen dieses kurze WordPress-Gutenberg-Tutorial dabei geholfen hat, sich mit dem neuen Editor von WordPress 5.0 vertraut zu machen. Wir sind der festen Überzeugung, dass Sie nach der Lektüre dieses Ratgebers kein Neuling mehr mit „Gutenberg“ sein werden. Der neue Blockeditor ist nicht nur einfach zu bedienen, sondern auch leistungsstark, da er Websites mit so vielen Optionen so schnell erstellen kann. Das Erstellen benutzerdefinierter Blöcke und die Verwendung von Tools zum Anpassen des Aussehens und Verhaltens sind leistungsstarke Funktionen dieses Blockeditors. Es gibt auch die benutzerfreundliche Oberfläche zum Hinzufügen neuer Blöcke und zum Hinzufügen von Inhalten. Wenn Sie feststellen, dass Ihnen der alte Editor tatsächlich besser gefällt und Sie den neuen Editor nicht mögen, dann machen Sie sich keine Sorgen. Sie können jederzeit wieder zum klassischen Editor wechseln. Dies ist das Beste aus beiden Welten und ermöglicht es den Benutzern, den Editor zu verwenden, der sie am produktivsten macht.