So verwenden Sie den WordPress-Editor

WordPress als CMS verfügt über unglaublich robuste Funktionen. Die Plugins und Widgets ziehen die Leute auf die Plattform, aber sobald sie drin sind, kommt die wahre Kraft vom WordPress-Editor selbst. Unabhängig davon, was Ihr Ziel mit der Plattform ist, werden Sie den Post-/Seiten-Editor in großem Umfang verwenden. Daher möchten wir Ihnen zeigen, wie Sie den WordPress-Editor in vollem Umfang nutzen, damit Ihre Inhalte glänzen und Ihre Seite aufblüht.

Abonnieren Sie unseren Youtube-Kanal

Was ist der WordPress-Editor?

Technisch gesehen gibt es drei WordPress-Editoren, aus denen Sie wählen können. Mit der Veröffentlichung von WordPress 5.0 änderte sich der Editor vom damals standardmäßigen TinyMCE zum Block-Editor, den wir heute haben. Inmitten dieser Änderung wurde das Gutenberg-Editor-Plugin als Brücke zum Betatest neuer Funktionen für den Block-Editor veröffentlicht, bevor es in WordPress Core aufgenommen wird.

Während der Blockeditor in WP ab 5.0 standardmäßig vorhanden ist, können Sie einen der drei gewünschten verwenden. Sie können das Classic Editor-Plugin installieren, um das alte TinyMCE beizubehalten, das Gutenberg-Plugin, um die neuesten Funktionen (wenn auch potenziell instabil) in Ihrem Editor zu erhalten, oder Sie können den standardmäßigen Block-Editor beibehalten.

Angesichts der zusätzlichen Schritte, die bei der Verwendung von allem außer dem Standard-Editor erforderlich sind (und der inhärenten Instabilität und der sich ändernden Natur des Gutenberg-Plugins), konzentrieren wir uns in diesem Beitrag ausschließlich auf den Standard-Block-Editor. Sie sollten jedoch beachten, dass die Grundlagen bei Gutenberg die gleichen sind, und das im Classic Editor-Plugin enthaltene TinyMCE hat grundlegende Funktionsgleichheit mit jedem beliebigen Rich-Text-Editor oder jeder Textverarbeitungssoftware – ganz zu schweigen von den WP-spezifischen Funktionen, die wir diskutieren über, unterscheiden sich im Allgemeinen nur in der Ästhetik, nicht in der Funktion.

Lassen Sie uns nach all dem lernen, wie Sie den WordPress-Editor verwenden.

Die Grundlagen des WordPress-Editors

Jedes Mal, wenn Sie eine Seite oder einen Beitrag (oder einen benutzerdefinierten Beitragstyp) erstellen, verwenden Sie den Block-Editor. Beim Öffnen wird Ihnen ein Tutorial-Modal präsentiert, und Sie können die Grundlagen erlernen, indem Sie ihm durch die 4 angebotenen Folien folgen. Schließen Sie es und Sie können den grundlegenden Editor sehen.

Der grundlegende WordPress Block Editor besteht aus 5 Elementen. Weitere können durch verschiedene Plugins hinzugefügt werden, aber diese bieten die Basisfunktionalität, mit der Sie Tag für Tag arbeiten werden.

1. Titelblock – Was auch immer Sie hier eingeben, wird als primäres H1-Tag des Beitrags/der Seite angezeigt.
2. Block-/Inhaltsbereich – Dies ist der Bereich, in dem Sie die verschiedenen Blöcke hinzufügen, aus denen der Inhalt Ihres Beitrags oder Ihrer Seite besteht.
3. Schaltfläche „Block hinzufügen“ – Jedes Mal, wenn Sie ein + in einem Kreis sehen, können Sie darauf klicken, um einen neuen Block hinzuzufügen. Es erscheint eine Dropdown-Liste, aus der Sie den Typ auswählen, den Sie einfügen möchten. Sie funktionieren alle genau gleich. Egal, ob Sie rechts neben einem Block, unter einem Block oder in der Ecke des Bildschirms auf eines klicken, Sie erhalten die gleichen Optionen.
4. Registerkarte „ Dokumentoptionen“ – Unter dieser Registerkarte finden Sie alles von Kategorien, Tags, Permalink, Kommentaren ein-/ausschalten und mehr. Plugins können hier Optionen hinzufügen, aber sie gelten immer für die gesamte Seite oder den Beitrag selbst.
5. Registerkarte Blockoptionen – Diese Registerkarte behandelt die Optionen für jeden Block, den Sie markieren. Wenn Sie in einen Absatzblock klicken, bearbeiten Sie nur die Optionen für diesen Block . Weder andere Blöcke noch das Dokument selbst ändern sich.

Im Folgenden führen wir Sie durch die Besonderheiten dieser Bereiche und wie Sie sie verwenden können, um den bestmöglichen Inhalt zu erstellen.

Was sind Blöcke?

Sie haben gesehen, wie wir in diesem Beitrag bereits Blöcke erwähnt haben, aber was sind sie eigentlich? Ein Block ist ein einzelnes, anpassbares Element einer Seite oder eines Beitrags. Dies kann ein einzelner Absatz, eine Liste, ein Bild oder eine Galerie sein. Diese Blöcke können nach Belieben verschoben und angepasst werden, individuell angepasst werden und geben Ihnen eine granulare Kontrolle über Ihre Inhalte, die ein WYSIWYG-Editor einfach nicht kann. (Wenn Sie Divi-Benutzer sind, kennen Sie das Konzept bereits, da unsere Module auf die gleiche Weise funktionieren.)

Wie Sie oben sehen können, ist jedes Element der Seite in einem eigenen Block enthalten. Eine vollständige Liste der WordPress-Blöcke finden Sie in der WordPress-Supportdokumentation.

So erstellen Sie eine Gruppe von Blöcken

Eine Gruppe von Blöcken ist eine Sammlung von Blöcken, die Sie so einstellen, dass sie als einzelner Block funktionieren. Sie verschieben sie und gestalten sie so, als ob sie eine einzelne Einheit wären, aber die Gruppe besteht aus mehreren Elementen.

Das Erstellen einer Gruppe ist einfach. Sie klicken einfach auf einen Block, halten dann die Umschalt- oder STRG-Taste gedrückt und klicken auf einen anderen. Wenn Sie alle Blöcke im Beitrag gruppieren möchten, können Sie STRG/CMD – A drücken, um alle auszuwählen. Wenn Sie dann sehen, dass sich das Symbol oben links in ein Quadrat aus kleinen Blöcken ändert, können Sie darauf klicken und In Gruppe umwandeln auswählen.

Wenn Sie die Gruppierung aufheben müssen, klicken Sie einfach auf die Dropdown-Schaltfläche mit den drei Punkten und wählen Sie Gruppierung aufheben.

Die Blöcke werden nun wieder als Individuen funktionieren.

Was sind wiederverwendbare Blöcke?

Über das Einstellungsmenü können Sie jeden Block von einem einmaligen Block in einen wiederverwendbaren Block umwandeln. Ein wiederverwendbarer Block ist keine Vorlage, sondern ein globaler Block für Ihre Site. Sie erstellen einen Block oder eine Gruppe von Blöcken und klicken dann auf Zu wiederverwendbaren Blöcken hinzufügen .

Alle Änderungen oder Bearbeitungen, die an diesem wiederverwendbaren Block vorgenommen werden, werden dann auf der gesamten Site widergespiegelt, wobei jede Instanz des Blocks geändert wird, anstatt nur die von Ihnen bearbeitete. Wir haben eine vollständige Anleitung zu wiederverwendbaren Blöcken, die Sie für weitere Informationen zu diesem Thema lesen können.

Der Titelblock

Der oben gezeigte Titelblock ist das primäre H1-Tag Ihres Beitrags oder Ihrer Seite. Es generiert auch den Permalink-Slug für den Beitrag, der jedoch bearbeitet werden kann, sobald Sie den Beitrag mindestens einmal gespeichert haben. Davon ziehen auch CSS-Selektoren wie .post-title und .entry-title . (Mit Ihren SEO-Plugins können Sie jedoch festlegen, was in Suchmaschinen angezeigt wird.)

Dies ist der einzige Block im WordPress-Editor, den Sie nicht entfernen oder neu positionieren können. Sie müssen CSS- oder externe Seitenerstellungseinstellungen verwenden, um weitere Anpassungen vorzunehmen.

Block-/Inhaltsbereich

Grundsätzlich können Sie den Inhaltsbereich als Eingabebereich betrachten. Wenn Sie möchten, können Sie mit der Eingabe beginnen, einen ganzen Beitrag schreiben, ohne jemals Blöcke zu berücksichtigen. Dies ersetzt in jeder Hinsicht den einfachen WYSIWYG-Bereich des TinyMCE und ist die größte Änderung des WordPress-Editors seit … nun … überhaupt.

Mit dem Blockeditor können Sie jedoch noch viel mehr tun. Jedes Mal, wenn Sie „Enter“ oder „Return“ drücken, fügen Sie einen neuen Absatzblock hinzu. Um eine andere Art von Block (jeglicher Art) hinzuzufügen, klicken Sie auf das + in einem Kreis, und Sie erhalten eine Dropdown-Liste mit jedem verfügbaren Block. Achten Sie darauf, zu scrollen, da sie auch in verschiedenen Kategorien eingerichtet sind. Sie können auch nach einem bestimmten Block suchen, wenn Sie wissen, welche Art Sie möchten.

Sie können YouTube-Videoblöcke, Bilder, Galerien, Audioplayer, Listen, Zitate und vieles mehr hinzufügen. Jeder von ihnen hat seine eigenen Einstellungen und Styling-Optionen. Außerdem erkennt der WordPress-Editor, je öfter Sie einen Block verwenden, diesen als einen häufig verwendeten und listet ihn unter Most Used auf, sodass Sie nicht mehr scrollen oder danach suchen müssen. Wiederverwendbare Blöcke und Blockgruppen können auch unter "Meist verwendet" angezeigt werden.

Wenn Sie sich die Bilder in diesem Abschnitt ansehen, zeigt (1) auf die Neuordnungsschaltflächen, die Sie für jeden Block erhalten, wenn er ausgewählt ist (klicken Sie einfach darauf, um ihn auszuwählen). (2) zeigt auf das Dropdown-Menü, mit dem Sie den Block löschen sowie seinen Inhalt als HTML bearbeiten, klonen oder neue Blöcke hinzufügen können.

Diese Optionen und Einstellungen unterscheiden sich jedoch von der Registerkarte Blockoptionen in der oberen rechten Ecke des Bildschirms, die wir oben erwähnt haben und im nächsten Abschnitt weiter unten erläutert werden.

Dokumentgliederung, Wortzahl und andere Informationen

In der oberen Symbolleiste der Seite haben Sie ein i in einem Kreis. Klicken Sie darauf, und Sie erhalten eine vollständige Übersicht über den Inhalt Ihres Dokuments.

Solange Sie Überschriftenblöcke verwendet haben, wird zusätzlich zur Wortanzahl, Absatznummer und Blockanzahl eine Dokumentgliederung angezeigt . Wenn Sie keine Überschriftenblöcke haben, ist dieser Abschnitt nicht vorhanden. Sie können auf eines der Elemente der Dokumentgliederung klicken, um direkt zu diesem Block zu gelangen. Diese Funktion ist bei längeren Dokumenten von unschätzbarem Wert.

Wenn Sie auf das verschachtelte Listensymbol daneben klicken, sehen Sie auch eine geordnete Liste aller Blöcke im Beitrag und nicht nur Überschriften für eine Gliederung.

Auch hier können Sie auf alles in der Liste klicken, um direkt zu diesem Block zu navigieren und ihn auszuwählen.

Registerkarte Blockoptionen

In der oberen rechten Ecke des WordPress-Editors sehen Sie eine Registerkarte mit der Aufschrift Block . Solange Sie einen Block ausgewählt haben, erhalten Sie einen kontextbezogenen Satz von Optionen für diesen Blocktyp. Alle von Ihnen vorgenommenen Änderungen wirken sich jedoch nur auf den einzelnen ausgewählten Block aus.

Auf dieser Registerkarte können Sie die Miniaturansichtsgröße eines Bilds ändern, einem Absatz einen farbigen Hintergrund hinzufügen, um eine Warnung zu erstellen, oder beispielsweise die Schriftgröße in einer Überschrift anpassen. Wenn Sie die Registerkarte Block geöffnet haben, ändern sich die Optionen zu dem von Ihnen ausgewählten Block. Wenn Sie den Absatzblock markiert haben, sehen Sie dies.

Wenn ein Bildblock ausgewählt ist, ändert sich die Registerkarte Block in diese.

Jeder Block hat spezifische Optionen, die Sie in ihm anpassen können, die nur für diesen Blocktyp gelten (und nur in diesem bestimmten Block gerendert werden). Jeder Block verfügt jedoch auf der Registerkarte über einen Abschnitt Erweitert , mit dem Sie CSS-Klassen auf diesen Block anwenden können. Sie können sie dann mit externen Stylesheets und Code nach Belieben gestalten.

Registerkarte Dokumentoptionen

Auf der linken Seite des Blocks Registerkarte Optionen ist die Dokumentoptionen Registerkarte. Wenn Sie in der Vergangenheit WordPress verwendet haben, werden Ihnen diese bekannt vorkommen. Hier können Sie die Kategorien Ihres Beitrags und die Tags anpassen, ein vorgestelltes Bild hinzufügen, den Permalink-Slug anpassen, einen Auszug für die Verwendung von Themen/SEO hinzufügen und Kommentare aktivieren oder deaktivieren.

Jeder dieser Abschnitte ist ziemlich identisch mit dem, wo und was er im TinyMCE WYSIWYG-Editor war. Sie gelten für den gesamten Beitrag oder die gesamte Seite und nicht für einen einzelnen Block oder die gesamte Site. Darüber hinaus gibt es, wie Sie im Bild oben sehen können, eine WP Rocket Options-Box. Einige Plugins wenden Kästchen auf diesen Bereich an, aber sie beziehen sich immer direkt auf das Dokument selbst, nicht so sehr auf den Inhalt oder die Blöcke.

Zusätzliche Post-Metaboxen

In den Metaboxen für den Beitrag fügen Plugins neue Optionen und Fähigkeiten für den Inhalt selbst hinzu. Sie erscheinen ganz am Ende des Inhaltsbereichs unter den Blöcken.

Was in diesem Abschnitt angezeigt wird (wenn überhaupt), hängt davon ab, welche Plugins Sie installiert haben (oder von Themenfunktionen, die diesen Bereich nutzen). SEO-Plugins nutzen diesen Bereich und alles andere, was es Ihnen ermöglicht, auf irgendeine Weise mit dem Inhalt der Seite zu interagieren, anstatt mit den Dokumentdetails.

Dropdown-Menü der WordPress-Editor-Optionen

Wenn Sie oben rechts auf dem Bildschirm auf das Dropdown- Symbol mit den drei Punkten klicken , wird ein großes vertikales Dropdown-Menü angezeigt. Hier können Sie eine Reihe von Einstellungen vornehmen, die sich alle auf den Editor selbst beziehen und nicht auf das Dokument, die Blöcke oder den Inhalt.

In den meisten Fällen handelt es sich um recht einfache Optionen, z.

Einige der am häufigsten verwendeten Optionen befinden sich jedoch ganz oben. Insbesondere die Umschalter für die obere Symbolleiste , den Vollbildmodus und den visuellen/Code-Editor- Modus.

Die Top Toolbar Toggle bedeutet , dass anstatt die Optionen für einen ausgewählten Block als Kontextmenü in der Nähe der oberen linken Ecke des Blocks erscheinen, wie oben erwähnt, ist es in einem festen Bereich am oberen Rand des Bildschirms sein.

Der Vollbildmodus schaltet das WordPress-Admin-Dashboard ein oder aus. Wenn Sie den Vollbildmodus deaktivieren, sehen Sie die linke Seitenleiste mit den typischen Dashboard-Optionen wie Beiträge, Seiten, Darstellung, Einstellungen, Tools usw.

Und die Umschalter des Visual/Code-Editors funktionieren genau wie im TinyMCE-Editor. Die Beispiele in diesem Beitrag waren bisher mit dem Visual Editor. Das heißt, Sie sehen eine visuelle Darstellung des Beitrags, während Sie ihn schreiben. Sie erhalten Schaltflächen zum Drücken, Kontextmenüs und eine Echtzeitdarstellung der Einstellungen, wenn Sie diese ändern. Der Code-Editor ist jedoch genau das – Code. Sie haben ein einfaches Textfeld, in das Sie in Klartext und HTML schreiben.

Dies geschieht normalerweise, um Probleme mit dem Editor zu beheben oder einen einzelnen Bereich oder Block zu verfeinern. Oder um vielleicht Inhalte einzufügen, die in einem externen Editor geschrieben wurden, der über mehrere Blöcke hinweg nicht richtig formatiert wurde.

Der Block-Editor verwendet bestimmte HTML-Tags, um WordPress mitzuteilen, welche Art von Blöcken gerendert werden sollen. Stellen Sie also sicher, dass Sie jeden Code, der wie <!– wp:paragraph –> aussieht, intakt halten. Sonst kann es ziemlich chaotisch werden.

Globale Verknüpfungen für den WordPress-Blockeditor

Der Block-Editor verfügt auch über einen eigenen Satz raffinierter Tastenkombinationen. Sie sind nicht alle gleich wie das TinyMCE, aber sie sind genauso nützlich und genauso wichtig zu lernen. Wenn Sie die nützlichsten im Gedächtnis speichern, sparen Sie viel Zeit und Ärger, da Sie aus Erfahrung sprechen. Sie können Umschalt+Alt+H drücken, um die folgende Liste von Verknüpfungen im WordPress-Editor selbst anzuzeigen.

Dokumentverknüpfungen

• Wechseln Sie zwischen visuellem Editor und Code-Editor – Strg+Umschalt+Alt+M
• Öffnen Sie das Blocknavigationsmenü – Umschalt+Alt+O
• Ein- oder Ausblenden der Seitenleiste der Einstellungen – Strg+Umschalt+,
• Navigieren Sie zum nächsten Teil des Editors – Strg+` oder Umschalt+Alt+N
• Navigieren Sie zum vorherigen Teil des Editors – Strg+Umschalt+` oder Umschalt+Alt+P
• Gehe zur nächsten Symbolleiste – Alt+F10
• Speichern Sie Ihre Änderungen – Strg+S
• Machen Sie Ihre letzten Änderungen rückgängig – Strg+Z
• Wiederholen Sie Ihr letztes Rückgängigmachen – Strg+Umschalt+Z

Auswahl-Kurzbefehle

• Wählen Sie bei der Eingabe den gesamten Text aus. Drücken Sie erneut, um alle Blöcke auszuwählen – Strg+A
• Auswahl löschen – ESC

Verknüpfungen blockieren

• Ausgewählte(n) Block(e) duplizieren – Strg+Umschalt+D
• Ausgewählte(n) Block(e) entfernen – Umschalt+Alt+Z
• Fügen Sie einen neuen Block vor den ausgewählten Blöcken ein – Strg+Alt+T
• Fügen Sie einen neuen Block nach den ausgewählten Blöcken ein – Strg+Alt+Y
• Entfernen Sie mehrere ausgewählte Blöcke – Entf oder Rücktaste
• Ändern Sie den Blocktyp nach dem Hinzufügen eines neuen Absatzes – /

Textverknüpfungen

• Markiere den ausgewählten Text fett – Strg+B
• Machen Sie den ausgewählten Text kursiv – Strg+I
• Konvertieren Sie den ausgewählten Text in einen Link – Strg+K
• Link entfernen – Strg+Umschalt+K
• Unterstreiche den markierten Text – Strg+U

Einpacken

Der WordPress-Editor hat in den letzten zehn Jahren einen langen Weg zurückgelegt, und der aktuelle Block-Editor ist definitiv mächtig genug, um uns durch den nächsten zu führen. Mit der Möglichkeit, jedes Element auf der Seite granular zu steuern, können Sie Inhalte schneller, einfacher und weitaus effizienter als je zuvor erstellen. Wenn der aktuelle Block-Editor jedoch nicht für Sie ist, gibt es das Classic Editor-Plugin, und wenn Sie auf dem neuesten Stand sind, bleibt das Gutenberg-Plugin dem Standard-Editor im WordPress-Kern einige Versionen voraus. Egal, welche Art und Weise Sie am liebsten erstellen, WordPress bietet Ihnen alles.

Hast du Tipps und Tricks, die du zum WordPress-Editor teilen möchtest? Lass es uns in den Kommentaren wissen!