In WordPress Seiten erstellen mit dem Classic-Editor

Worum geht´s?

Willkommen zurück! Letztes Mal haben wir uns ja eingehend mit dem Gutenberg-Editor und seinen Blöcken beschäftigt – heute ist der traditionelle WordPress Classic-Editor dran! Wir werden das Classic-Editor-Plugin installieren, die Funktionen des Classic-Editors durchgehen und dann unsere Über-mich-Seite vom letzten Mal nachbauen.

Bereit?

Dann lass uns loslegen! Da das WordPress-Entwicklerteam beschlossen hat, den Gutenberg-Editor zum neuen Standard für WordPress werden zu lassen, müssen wir den alten WordPress-Classic-Editor „händisch“ nachinstallieren. Aber das ist ohnehin praktisch für uns, weil wir dann gleich sehen können, wie einfach es in WordPress ist, Plugins (Erweiterungen) zu installieren 🙂

1. Wie du den WordPress Classic Editor installieren kannst

Dazu musst du ins WordPress-Backend (/wp-admin nach der Domain hinzufügen, wie in der letzten Lektion). Dann suchst du links die Menü-Option „Plugins“ (mit so einem Stecker-Symbol) und klickst darauf. Das sollte dich auf den Plugins-Übersichts-Bildschirm bringen:

Dort siehst du vermutlich einige vor-installiertes Plugins, hier z.B. WP Mail SMTP. Was das ist, musst du zum derzeitigen Zeitpunkt nicht wissen. Aber wie du ein neues Plugin installierst, nämlich unseren WordPress Classic-Editor, das schon.

1.1 Wie man in WordPress neue Plugins findet

Das kannst du, indem du entweder auf dem Bildschirm oben auf den blauen „Installieren“-Button klickst oder links im Plugins-Untermenü auf „Installieren“. Beides bringt dich auf den Plugin-Suche-Bildschirm:

Oben kannst du über eine Suchfunktion („Plugins durchsuchen…“) die über 55.000 Plugins die es (Stand 2020 laut Kinsta) gibt durchsuchen. Es gibt eigentlich sogar noch mehr Plugins, die aber hier nicht aufscheinen und die man teilweise auf anderem Weg installieren oder/und für die man extra bezahlen muss. Welche Plugins für dich wichtig sind, das werden wir in späteren Lektionen noch durchgehen. Uns interessiert fürs erste einmal nur das Plugin, das uns den WordPress Classic-Editor aktiviert.

Dieses ist praktischerweise leicht zu finden, weil es unter den 3 am allerhäufigsten installierten Plugins ist, die in WordPress von Webseiten-Betreibern installiert wird. Wahrscheinlich brauchst du es nicht mal in die Suche eingeben, weil es wie bei mir ohnehin gleich auf der ersten Seite zu finden ist.

Nicht alle Webseiten-Betreiber, die WordPress nutzen, sind glücklich mit dem Gutenberg-Editor – darum wurde das Classic-Editor-Plugin auch über 5 Millionen (!) Mal heruntergeladen und aktiviert.

1.2 Wie man in WordPress neue Plugins installiert und aktiviert

Um es zu installieren, musst du nur auf den „Jetzt installieren“-Button klicken. Dann schaltet der um auf „Installiere…“, das dauert dann kurz, und dann ist das Plugin „Installiert“, mit einem Häkchen dran. Ganz am Ende steht dann statt dem Installieren der dunkelblaue „Aktivieren“-Button. Bevor du den drückst, ist das Plugin zwar heruntergeladen und mit deiner WordPress-Seite verbunden, aber noch nicht aktiv.

Das ist deswegen wichtig, weil manche Plugins auch dazu führen können, dass deine WordPress-Seite (vorübergehend) nicht mehr funktioniert. Etwa wenn der Plugin-Entwickler einen Fehler gemacht hat, oder Plugins sich gegenseitig „nicht leiden können“. Dann kannst du als Webseiten-Betreiber ein Plugin von dem du vermutest dass es Probleme machen könnte deaktivieren, ohne es ganz löschen zu müssen. Ist das Plugin „unschuldig“, aktivierst du es einfach wieder, und alle Einstellungen bleiben dir erhalten.

Der WordPress Classic-Editor sollte dir aber diesbezüglich keine Probleme bereiten, den kannst du ohne Bedenken aktivieren. Klicke daher auf den „Aktivieren“-Button. Dann lädt die Seite neu, und du kommst zurück zur Plugin-Übersicht. Dort sollte nun das WordPress Classic-Editor-Plugin ebenso in der Liste zum Sehen sein:

1.3 Wie man in WordPress Plugin-Einstellungen verändert

In der Plugin-Liste findest du nun den WordPress Classic-Editor, und unter dem Plugin-Titel kannst du dieses Plugin „Deaktivieren“ (z.B. wenn du es nicht mehr brauchst oder herausfinden willst, ob es einen Fehler verursacht) und auch weitere „Einstellungen“ vornehmen. Da klickst du als nächstes drauf, das bringt dich dann zu dem Bildschirm, in dem du festlegen kannst, welche Editor-Art du als Standard festlegen willst, und ob du bei Bedarf umschalten können willst:

Hier kannst du bei der dritten Einstellung den Standard-Editor festlegen (ich habe hier beispielsweise den WordPress Classic-Editor ausgewählt).

Bei der vierten Einstellung kannst du festlegen, ob Benutzer zwischen den beiden Editoren wechseln können sollen. Das habe ich bejaht, und wahrscheinlich macht das auch für dich Sinn – so kannst du immer wieder zwischen den beiden Editoren wechseln, um besser herauszufinden, welcher dir mehr liegt.

Etwas weiter unten kannst du theoretisch noch festlegen, wie du über Email Beiträge veröffentlichen kannst. Aber das lassen wir vorerst.

Dann scrollst du ganz nach unten, bis zu zu einem blauen Button kommst, auf dem „Einstellungen speichern“ steht. Da klickst du drauf, dann werden die Einstellungen gespeichert.

Wenn du nun so wie in der letzten Lektion auf Seiten->Erstellen klickst, findest du ein gänzlich anderes Bild als im Gutenberg-Editor von der letzten Lektion vor.

2. Willkommen im WordPress Classic-Editor!

Nachdem du das WordPress Classic-Editor-Plugin installiert und aktiviert hast, sieht dein Editor für Seiten ziemlich anders aus – eher wie im Schreib-Programm Word:

2.1 Den Titel der Seite und Permalink festlegen

Ganz oben, wo „Titel hier eingeben“ steht, kannst du – wenig überraschend – den Titel der Seite festlegen. Das machen wir gleich mal. Nennen wir die Seite einfach wieder „Über mich“, damit wir einen guten Vergleich zum Gutenberg-Editor bekommen.

Sobald wir das getan haben und in den Haupt-Text-Bereich klicken, zeigt uns der Classic-Editor den aus unserem Titel erstellten Perma-Link unter dem eingegebenen Titel an. Aber weil es ja schon eine Seite mit dem Namen „Über mich“ gibt, kann WordPress den Permalink für diese Unterseite nicht einfach „ueber-mich“ nennen wie letztes Mal – jeder Permalink darf ja nur 1x vorkommen. Deswegen fügt WordPress da automatisch eine 2 hinzu (oder eine 3 bei der 3. Seite mit gleichem Namen, usw.).

Wenn du den „Bearbeiten“-Button neben dem Permalink klickst, kannst du ihn auch nachträglich bearbeiten.

2.2 Den Inhalt der Seite festlegen

2.2.1 Texte einfügen und formatieren

Was den Inhalt betrifft, funktioniert der WordPress Classic-Editor recht ähnlich wie das Schreib-Programm Word. Man kann sogar vor-formatierte Texte aus Word einfügen, und der Classic-Editor übernimmt Formatierungen wie z.B. Überschriften, Listen, fett/kursiv, …

Mit Hilfe die Werkzeug-Leiste über dem Text lassen sich die meisten der gängigen Formatierungs-Wünsche (z.B. fett schreiben, Listen, Zitat, Links einfügen, …) gut umsetzen.

Überschriften legst du fest, indem du einen Text-Teil markiers und dann dort wo sonst „Absatz“ steht die entsprechende Überschrift auswählst. Die Zahlen geben dabei die Ebene der Überschrift wieder, daher Überschrift 3 ist eine tiefere Ebene (nicht so groß) wie die Überschrift 2, usw.

Wichtig dabei ist, dass eine Überschrift, die du hier auswählst, WordPress nur sagt, dass es sich um eine Überschrift einer bestimmten Ebene handelt. Das heißt nicht notwendigerweise, dass sie dann für Webseiten-Besucher genauso aussehen wird wie hier im Editor.

Das Aussehen deiner Webseite hängt nämlich von vielen verschiedenen Dingen ab, hauptsächlich aber von dem verwendeten „Theme“, also den jeweiligen Format-Vorlagen. Das hat den Sinn, dass man auf diese Weise an nur einer Stelle etwas umändern muss, um bei größeren Webseiten mit unzähligen Unterseiten diese Änderung überall wirksam werden zu lassen. Ansonsten müsste ich mich auf der bunterrichten-Webseite beispielsweise bei jeder Design-Änderung durch über 400 Unterseiten wühlen, um die Veränderungen überall „händisch“ im Editor durchzuführen.

2.2.2 Bilder einfügen

Was nicht übernommen wird wenn du Texte aus dem Schreibprogramm Word kopierst, sind Bilder. Die musst du extra hochladen, und zwar über den Button „Dateien hinzufügen“ über dem Schreib-Bereich. Dann öffnet sich ein Popup, mit dem du Bilder hochladen kannst – entweder über den „Dateien auswählen“-Button, oder du ziehst das Bild einfach von einem Ordner auf deinem Computer auf die Popup-Fläche. Wenn du das tust, wird die Fläche blau, und wenn du dann loslässt, wird das Bild hochgeladen. Das Ergebnis sieht dann in etwa so aus (in meinem Fall habe ich ein Geister-Bildchen hochgeladen):

Dann kannst du rechts noch einige Daten zum Bild eingeben, wenn du das möchtest. Wichtig ist dabei der „Alternativtext“. Dieser wird blinden Menschen, die das Bild nicht sehen können, von einem sogenannten „Screen Reader“ vorgelesen. Und auch Suchmaschinen verwenden Alternativ-Texte (auch Alt-Texte genannt), um Bildinhalte besser zu verstehen. Den solltest du immer festlegen.

Unter „Bild bearbeiten“ (direkt unter dem Bild, in blau) kannst du dein Bild auch noch zuschneiden, drehen und spiegeln.

Sobald du mit deinen Bild-Einstellungen zufrieden bist, klickst du auf den „In die Seite einfügen“-Button rechts unten, und das Bild ist in deinen Text eingefügt.

Willst du das Bild dann nachträglich bearbeiten oder die Ausrichtung ändern, klickst du einfach einmal auf das Bild, dann kannst du es bearbeiten:

2.2.3 YouTube-Videos einfügen

Du kannst statt Bildern auch z.B. Videos einfügen, wenn du einen Video-Link (z.B. von YouTube) hast. Dazu klickst du ebenso auf „Dateien hinzufügen“ wie bei den Bildern, nur wählst du dann im Popup links „Von URL einfügen“ aus. Dann fügst du den Video-Link ein (in meinem Fall von einem Bruce Springsteen-Konzert), und dann sollte schon eine Vorschau kommen. Dann klickst du wie beiden Bildern „In die Seite einfügen“, und dein YouTube-Video ist schon da 🙂

2.2.4 Sonstige Funktionen einfügen

Im Gutenberg-Editor gab es noch zahlreiche sonstige Funktionen, die du hier im WordPress Classic-Editor nicht mehr so leicht findest – etwa die Möglichkeit, auf einfache Weise Spalten einzufügen.

Einige davon kannst du mit der Installation der passenden Plugins „nachrüsten“, so dass sie auch im WordPress Classic-Editor verfügbar sind. Meist fügen diese Plugins dann sogenannte „Shortcodes“ hinzu, die du im Text-Block des WordPress Classic-Editors verwenden kannst. Das sieht dann z.B. in etwa so aus:

[columns count=2]
[column]Inhalt der ersten Spalte[/column]
[column]Inhalt der zweiten Spalte[/column]

Das Ganze sind jetzt Fantasie-Shortcodes, also bitte nicht einfach ausprobieren 😛 Sie sollen nur demonstrieren, wie so etwas im Classic-Editor aussehen könnte, um die Blöcke vom Gutenberg-Editor „nachzubauen“.

Ist also der Gutenberg-Editor daher „besser“ als der Classic-Editor? Immerhin kann er doch mehr, oder?

Diese Frage werde ich dir am Schluss dieser Lektion beantworten. Erst sehen wir uns noch an, wie wir im WordPress Classic-Editor die Seiten-Einstellungen festlegen können.

2.3 Die Seiten-Einstellungen im WordPress Classic-Editor festlegen, speichern und veröffentlichen

Die Seiten-Einstellungen funktionieren im WordPress Classic-Editor sehr ähnlich wie beim Gutenberg-Editor, nur sind sie (meiner Meinung nach) leichter zu finden. Du findest sie einfach rechts in einer eigenen Spalte.

Dort kannst du beispielsweise wieder eine übergeordnete Seite festlegen, ein Beitragsbild usw.

Außerdem kannst du jetzt neu auch zum Block-Editor (Gutenberg-Editor) wechseln.

Ganz oben in dieser Spalte kannst du deine Seite veröffentlichen und speichern, sowie den Status (Entwurf, Veröffentlicht, Papierkorb) und die Sichtbarkeit (Öffentlich, Privat, Passwort) festlegen.

3. Eine Über-mich-Seite im WordPress Classic-Editor erstellen

Wie schon in der letzten Lektion angekündigt, ist es nun deine Aufgabe, auch hier im Classic-Editor eine Über-mich-Seite zu erstellen.

Die Texte und Bilder kannst du vom letzten Mal wiederverwenden, dann sollte es schneller gehen. Wichtig hierbei ist für dich, den Unterschied in der Bedienung herauszufinden.

Am besten ist es, wenn du auch diese Über-mich-Seite veröffentlichst, und dir dann beide nebeneinander ansiehst. Welche gefällt dir besser? Welche war für dich einfacher zu erstellen? Mit welcher Arbeitsweise fühlst du dich im ersten Eindruck wohler?

4. Was ist nun besser: Der Gutenberg-Editor, oder der WordPress Classic-Editor?

Wie so oft: Es kommt darauf an. Aber weil solche Antworten langweilig sind: Mein persönlicher Favorit ist mit Abstand der WordPress Classic-Editor. Warum, das erkläre ich dir gleich.

Es ist jedoch sehr wahrscheinlich, dass du dich mit dem Gutenberg-Editor mehr anfreunden hast können – einfach weil du relativ einfach direkt kontrollieren kannst, wie etwas aussieht, und zum Beispiel auch recht einfach Spalten anlegen kannst.

Wenn du jemand bist, der im Schreibprogramm Word gerne jede Überschrift einzeln nach deinen Vorlieben einfärbt und einstellt, dann wird dir der Gutenberg-Editor mehr liegen, denn dort kannst du das gut machen.

Wenn du – wie ich – allerdings jemand bist, der am liebsten für ein ganzes Word-Dokument an einer einzigen Stelle Änderungen vornehmen kann, dann ist der WordPress Classic-Editor für dich das effektivere Werkzeug. Denn dort definierst du hauptsächlich, was welche Art von Inhalt sein soll, während die eigentliche Gestaltung (also z.B. „Überschrift 2 bedeutet Schriftgröße/Art XY“) dann woanders (z.B. im Theme) zentral gesteuert wird, und auch zentral verändert werden kann.

Ähnlich wie bei Word-Dokumenten kann es v.A. für kleinere Seiten Sinn machen, den Gutenberg-Editor zu verwenden, weil da Änderungen noch vergleichsweise gut „händisch“ vorgenommen werden können.

Bei größeren Webseiten (wie der meinen, mit über 400 Unterseiten) würde ich mit dem Gutenberg-Editor durchdrehen. Aber ich mag es auch, möglichst viele Abläufe und Prozesse zu automatisieren, und freu mich jedesmal über jeden kleinen Gewinn an effizienterem Arbeiten.

Am allergrößten ist der Vorteil mit dem Classic-Editor, wenn du zumindest ein bisschen programmieren kannst. Weil dann kannst du die vorgefertigten Blöcke, die du sonst im Gutenberg-Editor ohne Programmier-Kenntnisse nutzen kannst, ganz einfach nachprogrammieren wo sie dir sonst fehlen würden.

5. Warum du auch beide WordPress-Editoren benutzen kannst

Nun kommt die beste Nachricht: Du kannst, wenn du den WordPress Classic-Editor installiert hast, zwischen den Editoren wechseln. Wenn du also eine Funktion vom Gutenberg-Editor brauchst (wie z.B. die Spalten), kannst du in den Gutenberg-Editor wechseln, und sie dort einfügen/einrichten. Wenn du damit zufrieden bist, kannst du im Gutenberg-Editor dann auf die drei Punkte rechts oben klicken, und zurück zum WordPress Classic-Editor wechseln. Die Spalten bleiben dir erhalten! 🙂

Nur werden sie im WordPress Classic-Editor möglicherweise nicht ganz richtig angezeigt (weil der ja nicht darauf ausgelegt ist), sondern z.B. untereinander. Aber wenn du dann auf „Vorschau“ klickst, siehst du, dass die Spalten noch da sind.

(Falls du nicht umschalten kannst, hast du diese Option anfangs bei den Einstellungen für das Plugin vom WordPress Classic-Editor nicht aktiviert. Geh dazu nochmal auf Plugins und klicke beim WordPress Classic-Editor auf Einstellungen. Dort findest du dann die Option zum Aktivieren. Dann musst du nur noch die Änderungen speichern, und das mit dem Wechseln zwischen den Editoren sollte klappen.)

So, so viel zu den beiden WordPress-Editoren, und wie man sie verwendet.

Als nächstes werden wir sie verwenden, um eine andere, besondere Art von Unter-Seite zu erstellen: Beiträge. Die funktionieren sehr ähnlich wie Seiten, aber mit ein paar Besonderheiten.

Bis zum nächsten Mal 🙂

Diskussion zum Tutorial