TechBlogSD - Alles für WordPress und WEB-Entwicklung
WEB- und WordPress-Anleitungen, Neuigkeiten, Rezensionen zu Themes und Plugins

Gutenberg WordPress Editor – Die erste Bewertung

19

WordPress ist für viele von uns die erstklassige Blogging- und Publishing-Plattform. Das größere Problem ist jedoch das technische Know-how, das zum Betrieb einer WordPress- Site erforderlich ist. Andernfalls müssen Sie viel Zeit und Geld aufwenden, um die grundlegenden Dinge zu ändern. Selbst die einfache Aufgabe, einen Beitrag oder eine Seite in WordPress zu erstellen und zu veröffentlichen, ist mit verschiedenen Layouts und Spalten nicht so einfach. Dies führt zum Wachstum von Hunderten von Unternehmen und Websites, die Page Builder-Dienste anbieten. Gute Beispiele sind Visual Composer, SiteOrigin Page Builder, Beaver Page Builder usw. Diese Page Builder wurden nur deshalb populär, weil WordPress standardmäßig einen ungeschickten Editor hat.

Klassischer WordPress-Post-Editor

Der klassische WordPress-Posteditor sieht langweilig aus und basiert auf Klartext. Sie können sehr minimale Dinge wie den Wechsel in den ‘Text’-Modus optimieren und etwas Inline-HTML/CSS hinzufügen. Es ist nicht möglich, Spaltenlayouts oder Blöcke hinzuzufügen. Wenn Sie beispielsweise ein Textfeld wie ein Produktangebot oder einen kostenlosen E-Book-Download haben, müssen Sie denselben Inhalt auf allen Seiten manuell hinzufügen. Andernfalls müssen Sie möglicherweise die PHP-Dateien ändern oder benutzerdefinierten Code schreiben, der für Anfänger keine Option ist.

Gutenberg – Der Weg der Zukunft

Wenn Sie es bemerkt haben, zeigt WordPress in Version 4.9.8 eine Benachrichtigung an, um den Gutenberg-Editor zu installieren und zu testen. An dieser Stelle müssen Sie Gutenberg als Plugin installieren, um den Editor zu ändern. Aber bald ab Version 5.0 wird WordPress standardmäßig über einen Gutenberg-Editor verfügen. Wenn Sie ein Kompatibilitätsproblem haben oder immer noch den alten Editor verwenden möchten, müssen Sie das klassische Editor-Plugin installieren, um mit dem alten Editor fortzufahren.

Da sich das Layout des Editors mit Gutenberg ändert, sollten alle Plugins und Themes, die Metaboxen im Post- / Seiteneditor verwenden, neu gestaltet werden, um mit dem Gutenberg-Editor zu funktionieren. Plugins wie Yoast SEO bieten bereits die kompatible Version und wir glauben, dass alle anderen Entwickler dem Beispiel folgen sollten, ohne dass andere Optionen übrig bleiben. Unten ist die Popup-Meldung von WooCommerce zum Ausprobieren mit dem Gutenberg-Editor.

Gutenberg WordPress Editor – Die erste Bewertung

WooCommerce Gutenberg-Widget

Was ist Gutenberg?

Wenn Sie jemals am Bootstrap Site Builder oder Weebly Editor gearbeitet haben, werden Sie überrascht sein. Ja, Gutenberg ist ein Drag-and-Drop-Site-Builder, der auf dem Blockkonzept basiert. Sie können einfach auf den Block klicken, um ihn auf der Seite hinzuzufügen, und mit der Erstellung Ihres Inhalts beginnen. Dies ist vergleichbar mit dem Bootstrap- oder Weebly-Editor

Die Verwendung von Gutenberg kann für einfache Textbeiträge / -seiten ein langwieriger Prozess sein. Aber für diejenigen, die unterschiedliche Layouts und wiederverwendbare Blöcke auf mehreren Seiten haben möchten, ist Gutenberg die einfache Lösung.

Blöcke von Gutenberg

Sie können die folgenden Blöcke mit dem Gutenberg-Editor hinzufügen:

Gutenberg WordPress Editor – Die erste Bewertung

Gutenberg-Blöcke

  • Gemeinsame Blöcke – Absatz, Bild, Überschrift, Galerie, Liste, Zitat, Audio, Titelbild, Zwischenüberschrift, Video.
  • Formatierungsblöcke – Code, klassisches, benutzerdefiniertes HTML, vorformatiert, Pullquote, Tabelle, Vers.
  • Layoutelemente – Schaltfläche, Spalten, mehr, Seitenumbruch, Trennzeichen, Abstandshalter.
  • Widgets – Shortcode, Archive, Kategorien, neueste Kommentare, neueste Beiträge.
  • Einbettungen – Einbetten von fast jeder Social-Networking-Site wie Twitter, YouTube, Facebook, Instagram usw.
  • Der Abschnitt „Meist verwendete Blöcke” listet die Blöcke auf, auf die häufig zugegriffen wird, um einen schnellen Zugriff zu ermöglichen.
  • Wiederverwendbare Blöcke – Wenn Sie möchten, dass derselbe Inhalt auf vielen Seiten enthalten ist, speichern Sie ihn als wiederverwendbaren Block.

Das Layout des Gutenberg-Editors verstehen

Unten sehen Sie, wie der Gutenberg-Editor aussieht, wenn Sie einen Beitrag erstellen.

Gutenberg WordPress Editor – Die erste Bewertung

Gutenberg-Redakteur

  1. Das erste Element ist immer ein Titel für Ihren Beitrag. Sie können dieses Element nicht löschen.
  2. Sie haben den Inhaltsbereich, in dem Sie Blöcke hinzufügen können.
  3. Klicken Sie entweder im Post-Editor oder in der oberen linken Ecke des Editors auf die Schaltfläche +, um mit dem Hinzufügen von Blöcken zu beginnen.
  4. Bewegen Sie den Cursor nach links von einem beliebigen Element, um die Auf- und Abwärtspfeile anzuzeigen. Klicken Sie auf den Pfeil, um das gesamte Element nach oben oder unten zu verschieben.
  5. Bewegen Sie die Maus über die rechte Seite des Elements, um die Schaltfläche mit den drei Punkten anzuzeigen, die weitere Optionen bietet. Klicken Sie darauf, um den Block als HTML zu bearbeiten oder visuell anzuzeigen. Von hier aus können Sie den Block zur wiederverwendbaren Liste hinzufügen.
  6. Klicken Sie auf das Blockelement, um weitere Inline-Optionen wie Formatierung und Ausrichtung für Textinhalte anzuzeigen.
  7. Die obere Leiste enthält Optionen auf hoher Ebene wie – Rückgängig, Wiederholen, Vorschau, Veröffentlichen, Entwurf speichern, Ein- oder Ausblenden der Seitenleiste, Einstellungen zum Umschalten des visuellen und Code-Editors und andere Optionen.
  8. Die Seitenleiste hat zwei Abschnitte – einer ist für die Post-Ebene als ‘Dokument’. Es bietet Optionen zum Hinzufügen von vorgestellten Bildern, Kategorien, Tags, Postformat, Autor usw.
  9. Die Registerkarte ‘Block’ enthält spezifische Optionen für das ausgewählte Blockelement.

Hinzufügen von Blöcken in Post

Lassen Sie uns einen Beitrag mit einigen Elementen erstellen, um zu sehen, wie einfach oder schwierig der Gutenberg-Editor zu verwenden ist.

  • Fügen Sie einen Titel im Standardtitelbereich hinzu.
  • Klicken Sie hier, um benutzerdefinierten HTML-Code hinzuzufügen und einige Inhalte hinzuzufügen.
  • Fügen Sie ein Spaltenlayoutelement hinzu, fügen Sie Text und Anführungszeichen in zwei Spalten hinzu.

Gutenberg WordPress Editor – Die erste Bewertung

Blöcke hinzufügen und Statistiken prüfen

Wenn Sie derzeit ein Layout mit Spalten haben möchten, benötigen Sie einen benutzerdefinierten Shortcode aus dem Thema oder verwenden ein separates Plugin.

Metaboxen

Wie Sie auf dem Layout sehen können, haben wir aufgrund des Themas und der Plugins auf der Demo-Site viele Metaboxen im Post-Editor. Nun, da es einige Metaboxen gibt, bleiben sie immer noch in der Seitenleiste hängen und einige werden unter den Inhalt des Beitrags verschoben. Stellen Sie also sicher, dass Sie Ihr Theme und Ihre Plugins testen, bevor Sie den Gutenberg-Editor verwenden. Andernfalls müssen Sie möglicherweise das klassische Post-Editor-Plugin installieren, um Abwärtskompatibilität zu haben, und Ihren Entwickler informieren, das Thema / Plugin zu aktualisieren.

Zusatzfunktionen

  • Klicken Sie auf das Info-Symbol in der oberen Leiste, um die Statistiken des Beitragsinhalts wie Anzahl der Wörter, Sätze, Überschriften usw. zu überprüfen .
  • Sie können die Tipps erhalten, um sich mit dem Editor vertraut zu machen. Klicken Sie oben rechts in der oberen Leiste auf die Schaltfläche mit den drei Punkten und wählen Sie die Option "Tipps anzeigen".
  • Klicken Sie auf das Blockelement und gehen Sie in der rechten Seitenleiste zum Tab "Block". Im Abschnitt "Erweitert" können Sie benutzerdefinierte CSS- Klassen hinzufügen, die nur dieses Element im Textfeld "Zusätzliche CSS-Klasse" betreffen. Sie müssen die CSS-Klasse in Ihrem Haupt-Stylesheet oder im Abschnitt "Darstellung > Anpassen > Zusätzliches CSS" definieren.

Verbesserungen

WordPress hat mehrere Verbesserungen des ursprünglichen Gutenberg-Editors veröffentlicht. Jetzt können Sie mit nofollow Links zur Schaltfläche hinzufügen, der Tabellenblock reagiert und zeigt horizontale Leiste auf mobilen Geräten an, Sie können wiederverwendbare Blöcke verwalten und nicht verwendete Blöcke und Metaboxen im Post-Editor deaktivieren. Version 5.8 führte auch eine vollständige Website-Bearbeitungsfunktion ein, die die gesamte Landschaft der Website-Erstellung mit WordPress als Content-Management-System ändern kann. Bei all diesen Dingen ist es eine gute Idee, es auszuprobieren, wenn Sie noch den klassischen Editor verwenden.

Zusammenfassung

Ob der Gutenberg WordPress-Editor Ihre Produktivität verbessert oder nicht, es ist höchste Zeit, den langweiligen alten Editor loszuwerden. Obwohl jede Aktion jetzt zwei Klicks benötigt, ist dies der richtige Weg. Auf der anderen Seite wird dies die Begeisterung für dedizierte Page Builder-Plugins beenden und Optionen zum Hinzufügen benutzerdefinierter Blöcke als Teil des WordPress-Kerns eröffnen.

Vorteile

  • Einfaches Hinzufügen verschiedener Blöcke. Ziemlich sicher, dass in Zukunft viele Plugins angezeigt werden, um benutzerdefinierte Blöcke hinzuzufügen.
  • Sie können jede Art von Layout erstellen und auf verschiedenen Seiten Ihrer Site unterschiedliche Layouts verwenden.
  • Das Neuanordnen der Blöcke ist einfach und Sie können wiederverwendbare Blöcke erstellen.

Nachteile

  • Auf den Namen der Benutzererfahrung müssen Sie jetzt zweimal klicken, die zuvor mit einem einzigen Klick ausgeführt wurden. Mit dem klassischen Editor können Sie beispielsweise einfach auf das ‘Featured Image’ klicken und ein Bild hochladen. Jetzt müssen Sie bei Gutenberg zuerst auf das Dropdown-Menü "Featured Image" klicken und dann auf den Link klicken, um das Bild hochzuladen.
  • Wir konnten "Bildschirmoptionen" nicht sehen, um den Editor anzupassen. Sieht aus, was du sehen solltest, was auch immer gezeigt wird.
  • Der neue Editor macht alle bestehenden Tutorials ungültig und erfordert einen enormen Aufwand für Dokumente von Tausenden von Herausgebern und Entwicklern.

Aufnahmequelle: www.webnots.com
Hinterlasse eine Antwort

Diese Website verwendet Cookies, um Ihre Erfahrung zu verbessern. Wir gehen davon aus, dass Sie damit einverstanden sind, Sie können sich jedoch abmelden, wenn Sie möchten. Annehmen Weiterlesen