Haben Sie schon von Gutenberg gehört, dem neuen visuellen Editor für WordPress für den herkömmlichen HTML-Editor?
Wenn nicht, werden Sie es bald haben, 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 Endziel ist, dass Gutenberg eine vollständige Anpassung der Website bietet und mit den großartigen Seitenerstellern konkurriert.
Schließlich können Sie Ihre gesamte Site mit Gutenberg erstellen.
Klingt Gutenberg für Sie gut?
Es sind wirklich aufregende Zeiten, um ein WordPress-Blogger zu sein.
Dieser Artikel bietet Ihnen eine sehr einfache Gutenberg-Anleitung, die Ihnen einige Grundlagen vermittelt, um Ihnen den Einstieg zu erleichtern und Ihnen zu zeigen, was mit dem neuen Editor derzeit gut und was schlecht 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 in WordPress zu Ihrem Dashboard und dann zu
- Ergänzungen
- Wählen Sie "Neu hinzufügen"
- Suche Gutenberg Visual 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 auf dem Weg enthüllen
Ihr Gutenberg-Leitfaden – Erste Einführung blockieren
Gutenberg hat ein sehr seitenbildendes Gefühl, wenn Sie zum ersten Mal mit der Erstellung von Inhalten beginnen.
Jedes Element, das Sie einer Seite oder einem Beitrag hinzufügen, wird jetzt als "Block" 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:
- Text
- Bilder
- Video
- Widgets (ja, Sie können dasselbe Seitenleisten-Widget für Seiten und Beiträge hinzufügen)
- Tabellen
- Usw.
Dies sehen Sie, wenn Sie einen neuen Beitrag oder eine neue Seite starten.
Der visuelle / HTML-Editor, mit dem wir alle vertraut sind, hat sich jetzt für ein sehr minimalistisches Aussehen entschieden.
Beginnen wir also mit meinem einfachen Gutenberg-Leitfaden
Ich habe diese vollständige Anleitung erstellt, die Sie mit Gutenberg lesen, und wie oben 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 auch alle Tipps und Tricks weitergeben, die Sie unterwegs entdecken. Befolgen Sie diese also unbedingt.
Und ich werde diesen Beitrag auch auf dem neuesten Stand halten. Setzen Sie also ein Lesezeichen oder verlinken Sie uns, damit Sie leicht zurückfinden.
Fangen wir an
Wenn Ihnen der obige Titelbildschirm angezeigt wird, fügen Sie bitte Ihren Titel für Ihren Beitrag hinzu.
Ich werde den vorläufigen Titel "Gutenberg Getting Started Guide" verwenden.
Fügen Sie dann Ihre erste Einführung zu Ihrem Artikel in einem Textblock hinzu, wie im folgenden Screenshot gezeigt.
Hinzufügen von Bildern zu Gutenberg
Nachdem ich eine Einführung geschrieben habe, 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 dann 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. Durch Ändern des Blockeditors 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.
Nach meinem Verständnis bearbeiten Sie beim Bearbeiten eines Bilds über die Medienbibliothek das Bild so, wie es auf der angehängten Seite angezeigt wird oder mit anderen Worten, wo das Bild gespeichert ist. (Korrigieren Sie mich, wenn ich falsch liege)
Die Anhangsseite ist eine sehr dünne Inhaltsseite, es handelt sich im Grunde nur um 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 Anhänge Das stellte sich für einige Benutzer als großes SEO-Problem heraus.
Während ich mit Gutenberg einen Artikel erstelle, kann 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.
Es gibt derzeit auch keine einfache Möglichkeit, einen Link an ein Bild anzuhängen, sodass es anklickbar ist.
Wenn Sie beispielsweise ein Banner hinzufügen möchten, müssen Sie das Banner wie oben gezeigt als Bildblock hinzufügen, dann zum Quellcode zurückkehren und die URL als HTML-Code hinzufügen.
Fügen Sie Zitate und Links hinzu
Wie Sie oben sehen können, habe ich innerhalb eines Blockzitats 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.
So habe ich es gemacht:
- Klicken Sie auf die Schaltfläche +, um den Blockbereich zu öffnen.
- Wählen Sie einen Angebotsblock
- Fügen Sie Ihren Angebotstext hinzu
- Fügen Sie bei Bedarf einen Link hinzu
Wenn Sie ein Beobachter sind, werden Sie feststellen, dass sich das obige Beispiel für ein Blockquote-Screenshotbild von dem in diesem Beitrag gezeigten tatsächlichen Blockquote 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, mussten 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üpfungsbeschriftungsschaltfläche H (Überschrift). Wenn Sie jedoch darauf klicken, wird ein neuer Block geöffnet, in dem auch die Überschrift angewendet werden kann.
Sie können derzeit keine Überschrift innerhalb eines Budgetblocks anwenden.
Wenn Sie ein Textblog erstellen, können Sie auch keinen Header in die Mitte eines Textblocks einfügen. Sie müssen einen neuen Textblock erstellen, damit Sie den Header am Anfang des neuen Blocks hinzufügen und dann Ihren Artikel weiter schreiben können.
Alle Links, die Sie standardmäßig hinzufügen, sind nachfolgende Links. Derzeit können Sie nicht verhindern, 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 Blockbereich und scrollen Sie nach unten zu Einbetten. Dann sehen Sie den Blockbildschirm unten
Klicken Sie auf die Art des Inlays, das Sie verwenden möchten. Ein Linkfeld dient zum Hinzufügen Ihres Codes.
Ich habe die YouTube-Option ausgewählt, da ich diese hauptsächlich beim Erstellen von Inhalten verwenden würde, um Ihnen 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 bei Tageslicht erschrecken. Aber je mehr ich das Blocksystem benutze, desto mehr gefällt es mir.
Ich habe kürzlich die Content-Kurations-Site Wakelet verwendet, um sehr einfache Blog-Artikel zum Sichern meiner Infobunny-Site zu erstellen. Wenn Sie Wakelet verwenden, stellen Sie fest, dass Sie Blogs auf sehr ähnliche Weise erstellen können wie mit Gutenberg-Blöcken .
Mit Wakelet Sie können Text-, Video- und Berechtigungslinks hinzufügen, um Ihre Inhalte, Bilder und sogar PDF-Dateien zu bewerten.
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 es nicht einfach Blöcke zusammen mit anderen fehlenden Funktionen, die professionelle Seitenersteller bieten, per Drag & Drop verschieben kann.
Um ehrlich zu sein, bevorzuge ich den HTML-Editor im alten Stil, aber das liegt daran, dass ich daran gewöhnt bin.
Hoffentlich haben wir die Möglichkeit, zwischen Gutenberg und dem aktuellen HTML-Editor WYSIWYG zu klicken, und der Zugriff auf beide Systeme würde Webmastern das Beste aus beiden Welten bieten.
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 landet.
Und so lernst du ein neues System, indem du zuerst springst.
Gutenberg soll die Erstellung von Inhalten vereinfachen.
Und ich bin sicher, es wird für diejenigen sein, die einfache Inhalte erstellen. Aber für diejenigen, die ein bisschen mehr tun möchten, wird es eine größere Lernkurve geben und es wird sicherlich einige Problemumgehungen für diejenigen geben, die ihre SEO lieben.
SEO-Bildoptimierung ist derzeit ein Problem.
Wenn Gutenberg den Bildoptimierungsprozess gestartet hat, wird es hoffentlich viel einfacher.
Und wenn das Gutenberg-Entwicklungsteam keine bessere Lösung bietet, wird es sicher kein Ende von Drittentwicklern geben, die bereit sind, einige wirklich coole Block-Widget-Lösungen anzubieten.
Eine große Frage, die ich habe, lautet: "Sind Gutenberg-Seiten und -Postings kompatibel mit AMP – Beschleunigte mobile Seiten?
Oder es werden kompliziertere Funktionen zugunsten der Geschwindigkeit hinzugefügt.
