Haben Sie schon von Gutenberg gehört, dem neuen visuellen Editor für WordPress, der den herkömmlichen HTML-Editor ersetzt?
Andernfalls haben Sie es bald, denn wenn WordPress Version 5.0 veröffentlicht wird, wird Gutenberg den aktuellen Editor ersetzen.
Gutenberg ist mehr als nur ein ästhetisches Design-Update.
Der aktuelle Fokus mag auf der Erstellung von Inhalten liegen, aber das ultimative Ziel ist, dass Gutenberg eine vollständige Anpassung der Website bietet und mit den großartigen Seitenerstellern konkurriert.
Schließlich können Sie die gesamte Site mit Gutenberg erstellen.
Ist Gutenberg in Ordnung mit dir?
Es sind wirklich aufregende Zeiten, um ein WordPress-Blogger zu werden.
Dieser Artikel bietet eine sehr einfache Gutenberg-Anleitung, die einige Grundlagen enthält, um Ihnen den Einstieg zu erleichtern und Ihnen zu zeigen, was mit dem neuen Editor richtig und was falsch ist.
Wenn Sie nicht warten können, bis Gutenberg eine Probefahrt blockiert, können Sie sie sofort herunterladen.
Wie man Gutenberg herunterlädt
Gehen Sie zu Ihrem Dashboard in WordPress und dann zu
- Zubehör
- Wählen Sie “Neu hinzufügen”
- Suchen Sie nach Visual Gutenberg Editor
- Wählen Sie “Download” und aktivieren Sie das Plugin.
Jetzt wo du Gutenberg hast
Lassen Sie uns also einen Artikel aus dem Gutenberg-Leitfaden zusammenstellen und Ihnen zeigen, was Sie mit Gutenberg tun können und was nicht, und hoffentlich einige Tipps und Tricks entdecken
Ihr Gutenberg-Leitfaden – Erste Schritte – Beginnen Sie mit dem Block
Gutenberg wirkt sehr konstruktiv auf die Seiten, wenn Sie Inhalte erstellen.
Jedes Element, das Sie einer Seite oder einem Beitrag hinzufügen, wird jetzt als “Blockieren” bezeichnet.
Mit Gutenberg-Blöcken können Sie komplexere Layouts erstellen, als dies in der heutigen WordPress-Editor-Umgebung zulässig ist
Sie können Blöcke haben, um:
Dies sehen Sie, wenn Sie einen neuen Beitrag oder eine neue Seite starten.
Der visuelle / HTML-Editor, mit dem wir alle vertraut sind, bevorzugte jetzt ein sehr minimales Aussehen.
Beginnen wir also mit meinem einfachen Gutenberg-Leitfaden
Ich habe diese vollständige Anleitung erstellt, die Sie mit Gutenberg lesen, und wie bereits erwähnt, verwende ich zum ersten Mal die neue Bearbeitungsumgebung.
Dann werden Sie sofort mit mir herausfinden, was ich an den Gutenberg-Blöcken mag und was ich hasse. Ich werde Ihnen auch Tipps und Tricks auf dem Weg weitergeben. Befolgen Sie diese also unbedingt.
Ich werde diesen Beitrag auch auf dem neuesten Stand halten. Denken Sie daran, uns ein Lesezeichen zu setzen oder einen Link zu erstellen, damit Sie problemlos navigieren können.
Lasst uns beginnen
Wenn Sie den obigen Titelbildschirm erhalten, fügen Sie bitte Ihren Titel zu Ihrem Beitrag hinzu.
Ich werde den Arbeitstitel “Gutenberg Getting Started Guide” verwenden.
Fügen Sie dann Ihre erste Einführung zu Ihrem Artikel in einem Textblock hinzu, wie in der Abbildung unten gezeigt.
Hinzufügen von Bildern zu Gutenberg
Nach dem Schreiben einer Einführung möchte ich ein Bild für ein Bild hinzufügen, in diesem Fall den Screenshot, den Sie oben sehen.
Es gibt drei Methoden, um ein Bild hinzuzufügen.
- Sie können Ihr Bild über die Symbolleiste hinzufügen, auf die Sie zugreifen, indem Sie auf das Pluszeichen + klicken und einen Bildblock auswählen.
- Sie können Bilder auch über die Verknüpfungsschaltfläche unter Ihrem Textfeld hinzufügen.
- Und natürlich können Sie Quellcode hinzufügen. Ändern Sie den Blockeditor in Code.
Nachdem Sie Ihr Bild hinzugefügt haben, können Sie darauf klicken, um die Ausrichtungsoptionen anzuzeigen.
Sie können nach links ausrichten, das Bild in die Mitte oder nach rechts verschieben.
Es besteht auch die Möglichkeit, Ihr Bild über die Medienbibliothek zu bearbeiten. Hier beginnen die Probleme mit Gutenberg.
Ich verstehe, dass Sie beim Bearbeiten eines Bilds über die Medienbibliothek das Bild so bearbeiten, wie es auf der angehängten Seite oder mit anderen Worten dort, wo das Bild gespeichert ist, angezeigt wird. (Korrigieren Sie mich, wenn ich falsch liege)
Die Anhangsseite ist eine sehr dünne Inhaltsseite, im Grunde ist es nur das Bild und nichts anderes, und aus SEO-Gründen sind die Anhangsseiten für SEO sehr schlecht, wenn Google sie bemerkt.
Yoast SEO hatte kürzlich ein Problem mit angehängte Dokumente Dies stellte sich für einige Benutzer als großes SEO-Problem heraus.
Während ich an der Erstellung eines Artikels mit Gutenberg arbeitete, konnte ich immer noch keine andere Möglichkeit finden, Alternativtext- oder Bildtitelattribute hinzuzufügen, als zum Quellcode zurückzukehren, um den erforderlichen HTML-Code hinzuzufügen, oder zum klassischen Editor zurückzukehren.
Unsere Freunde bei WPBeginner erklären die Unterschiede zwischen Image Alt Text und Image Title mit einem ausgezeichneten Artikel mit dem Titel:
Das Hinzufügen von Beschreibungen und Alt-Tags war eine Bildbearbeitungsfunktion, die auf Knopfdruck im ursprünglichen visuellen Editor verfügbar war.
Dies sind keine guten Nachrichten für die SEO-Bildoptimierung.
Im Moment gibt es auch keine einfache Möglichkeit, einen Link an ein Bild anzuhängen, sodass darauf geklickt werden kann.
Wenn Sie beispielsweise ein Banner hinzufügen möchten, müssen Sie es wie oben gezeigt als Bildblock hinzufügen. Kehren Sie dann zum Quellcode zurück und fügen Sie die URL als HTML-Code hinzu.
Fügen Sie Zitate und Links hinzu
Wie Sie oben sehen können, habe ich in einem Blockzitat eine Verknüpfung zu einer Ressource (WPBeginner) hergestellt.
Blockzitate eignen sich hervorragend zum Aufteilen großer Textblöcke, die das Lesen eines Artikels erleichtern.
Sie bieten ein großartiges visuelles Element für Artikel.
Ich habe es so gemacht:
- Klicken Sie auf die Schaltfläche +, um den Sperrbereich zu öffnen.
- Wählen Sie einen Budgetblock
- Fügen Sie den Text Ihres Zitats hinzu
- Fügen Sie bei Bedarf einen Link hinzu
Wenn Sie ein Beobachter sind, werden Sie feststellen, dass sich das Beispiel im obigen Screenshot von dem in diesem Beitrag gezeigten Beispiel unterscheidet.
Das endgültige Zitat enthält einen Ankertext, an den aus SEO-Gründen ein h3-Header angehängt ist.
Um das h3-Tag hinzuzufügen, müssen Sie zum Rohquellcode zurückkehren und das h3-Tag auf den Ankertext des Blockzitats anwenden.
Wie Sie im obigen Screenshot sehen können, gibt es eine Verknüpfungstaste H (Kopfzeile). Wenn Sie jedoch darauf klicken, wird ein neuer Block geöffnet, in dem auch die Kopfzeile angewendet werden kann.
Sie können derzeit keine Überschrift innerhalb eines Budgetblocks anwenden.
Wenn Sie ein Textblog erstellen, können Sie auch keine Überschrift in der Mitte eines Textblocks hinzufügen. Sie müssen einen neuen Textblock erstellen, um die Überschrift am Anfang des neuen Blocks hinzuzufügen und den Artikel weiter zu schreiben.
Alle standardmäßig hinzugefügten Links sind Links auf der rechten Seite. Derzeit kann nicht verhindert werden, dass sie fortgesetzt werden, ohne das Attribut “Nicht folgen” als Code hinzuzufügen.
Sie haben die Möglichkeit, einen Link in einem neuen Fenster zu öffnen, indem Sie einen Link hinzufügen.
Fügen Sie Gutenberg eingebettete Inhaltsblöcke hinzu
Um einem Beitrag eingebetteten Inhalt hinzuzufügen, klicken Sie in den Sperrbereich und scrollen Sie nach unten zu Einbetten. Dann sehen Sie den Sperrbildschirm unten
Klicken Sie auf den Inlay-Typ, den Sie verwenden möchten. Ein Linkfeld dient zum Hinzufügen Ihres Codes.
Ich habe die YouTube-Option ausgewählt, da dies hauptsächlich zum Erstellen von Inhalten verwendet wird, um den Vorgang des Hinzufügens eines Videos zu zeigen.
Füge einfach die URL zu deinem YouTube-Video hinzu und du hast die Videofunktionalität in deinem Beitrag.
Was halten wir von WordPress Gutenberg?
Nun, Gutenberg wird einige Blogger angesichts des Tages erschrecken. Aber je öfter ich das Blocksystem benutze, desto mehr gefällt es mir.
Vor kurzem habe ich die Wakelet-Website zur Kuration von Inhalten verwendet, um sehr einfache Blog-Artikel zum Sichern meiner Infobunny-Website zu erstellen. Wenn Sie Wakelet verwenden, stellen Sie fest, dass Sie Blogs auf sehr ähnliche Weise erstellen können wie mit Gutenberg blockiert.
Mit Wakelet Sie können Text-, Video- und Berechtigungslinks hinzufügen, um Ihre Inhalte, Bilder und sogar PDF-Dateien zu klassifizieren.
Fügen Sie einfach alles als einzelne Beiträge zu Wakelet hinzu und ordnen Sie es bei Bedarf neu an, um Ihren fertigen Artikel zu erstellen. So funktioniert Guttenberg Lock im Grunde.
Hier ist ein Beispiel aus einem meiner Wakelet-Blogs: Wie wichtig sind die Anhänger sozialer Netzwerke?
Wenn Sie es gewohnt sind Seitenersteller Beim Erstellen von Posts und Seiten haben Sie keine Probleme mit Gutenberg.
Gutenberg wird jedoch nicht wirklich zum Seitenersteller, da Sie Blöcke nicht einfach zusammen mit anderen fehlenden Funktionen, die professionelle Seitenersteller bieten, per Drag & Drop verschieben können.
Um ehrlich zu sein, bevorzuge ich den alten HTML-Editor, aber das liegt daran, dass ich daran gewöhnt bin.
Glücklicherweise haben wir die Möglichkeit, zwischen Gutenberg und dem aktuellen WYSIWYG-HTML-Editor zu klicken. Wenn wir auf beide Systeme zugreifen können, erhalten Webmaster das Beste aus beiden Welten.
Wenn ich über Gutenberg lese, verstehe ich, dass der herkömmliche Editor als Add-On verfügbar sein wird.
Dieser Gutenberg-Leitfaden wurde erstellt, um mir eine Vorstellung davon zu geben, wie Gutenberg funktioniert.
Ich wollte bereit sein für die unvermeidliche Veröffentlichung des neuen Blocksystems, wenn WordPress 5.0 eintrifft.
Und so lernst du ein neues System, indem du einfach zuerst springst.
Gutenberg wurde entwickelt, um die Erstellung von Inhalten zu vereinfachen.
Und ich bin sicher, es wird für diejenigen sein, die einfache Inhalte erstellen. Aber für diejenigen, die etwas mehr tun möchten, wird es eine längere Lernkurve geben und es wird sicherlich einige Problemumgehungen für diejenigen geben, die ihre SEO lieben.
SEO-Bildoptimierung ist derzeit ein Problem.
Glücklicherweise wird es viel einfacher sein, wenn Gutenberg den Bildoptimierungsprozess startet.
Und wenn das Gutenberg-Entwicklungsteam keine bessere Lösung bietet, wird es sicher keine externen Entwickler mehr geben, die bereit sind, einige wirklich coole Block-Widget-Lösungen anzubieten.
Eine große Frage, die ich habe, ist “Gutenberg-Seiten und -Postings sind kompatibel mit AMP: beschleunigte mobile Seiten?
Oder es werden kompliziertere Funktionen zugunsten der Geschwindigkeit hinzugefügt.
