Inhalte in WordPress eingeben

In WordPress gibt es einen einfachen Editor um seine Inhalte einzupflegen: TinyMCE. In den meisten Fällen ist dieser Editor mehr als ausreichend. Wenn man sich noch mit HTML auskennt, dann kann man auf die „Text“-Ansicht wechseln und dort auch HTML eingeben. Nachdem ich bei den meisten meiner Kunden WordPress im Einsatz habe, kommen auch immer wieder Anfragen zur Inhaltspflege. Ich möchte daher die Gelegenheit nutzen, um dies mal hier im Blog näher zu beschreiben.

Externe Editoren

Gerne werden Texte in Programmen wie Microsoft Word, LibreOffice oder Apache OpenOffice vorbereitet. In neueren Word-Versionen gibt es sogar eine Option, direkt in WordPress zu veröffentlichen, habe ich aber noch nicht ausprobiert. Ich bevorzuge es, die Texte direkt in WordPress zu schreiben. Und es gibt auch keine Gründe mehr, dies nicht zu tun. WordPress speichert den Eintrag automatisch alle paar Sekunden im Hintergrund, also muss man auch keine Angst vor Abstürzen mehr haben. Der Inhalt wird – je nachdem, wie gut das Theme gemacht wird – auch gleich so angezeigt, wie er auf der Seite erscheinen wird. Zudem sind dann auch nur die Formatierungen enthalten, die man auch benötigt. Bei Inhalten, die beispielsweise aus Word rauskopiert werden, kommen auch immer irgendwelche Formatierungen mit, die Probleme bereiten. Daher meine Empfehlung: Inhalte immer direkt in WordPress pflegen.

Zeilenumbrüche und Leerzeilen

Beim Arbeiten in WordPress denke ich immer in Block-Elementen. Das sind beispielsweise Absätze oder Überschriften. Das Gegenstück dazu sind die Inline-Elemente wie beispielsweise ein Link innerhalb eines Absatzes. Beim Drücken der Return-Taste wird automatisch ein neuer Absatz angefangen. Absätze haben eigentlich immer Abstände nach oben und unten, um sich von anderen Absätzen abzuheben. Ein Zeilenumbruch hingegen bekommt man einfach über ein Shift + Return. Der nachfolgende Text ist dann noch im gleichen Absatz.

An dieser Stelle verursachen externe Editoren auch gerne Probleme. So wird gerne der HTML-Tag <div> als Block-Element verwendet. Ein <div> ist ein generisches Element, welches erstmal keine eigenen Formatierungen haben sollte (anders als ein Absatz „<p>“ (Paragraph), welches oben und unten Abstände hat). Texte die mit einem <div>-Element nach WordPress kopiert wurden, erzeugen auch bei einem Return wieder ein <div>-Element. Somit würden auch mehrere Returns auf der Website nur mehrere leere <div>s erzeugen, die im Browser nicht angezeigt werden. Sehr verstörend.

Im Editor steht links unten immer der „Pfad“ der jeweiligen Elemente.

Pfad mit einem div
Pfad mit einem div

Was kann man nun dagegen tun? Man muss die <div>-Elemente entfernen.

Inhalte Über Notepad einfügen

Wenn ich aus anderen Programmen Inhalte nach WordPress kopiere, dann öffne ich immer Notepad, füge den Inhalt dort erst ein und kopiere ihn dann weiter nach WordPress. Dadurch werden die Formatierungen entfernt.

Formatierung über die erweiterte Toolbar anpassen

Die Toolbar des TinyMCE ist in der Standardeinstellung einzeilig. Über das letzte Icon kann man eine zweite Werkzeugleiste einblenden und auch wieder ausbleden. In der zweiten Werkzeugleiste gibt es eine Auswahlliste mit Blockelementen. Das <div>-Element wird automatisch durch einen Absatz ersetzt, wenn man den Cursor in den jeweiligen Text setzt und dann in der Auswahlliste Absatz auswählt.

Die erweiterte Werkzeugleiste
Die erweiterte Werkzeugleiste

Dies muss für jedes Block-Element einzeln gemacht werden. Und reicht in einigen Fällen (z.B. bei verschachtelten <div>s) nicht aus.

Händisch über den „Text“-Modus

Rechts oben gibt es zwei Tabs „Visuell“ und „Text“. Hinter Text verbirgt sich der reduzierte HTML-Code des Inhalts. Nicht wundern, dass ihr dort keine <p> und <br>-Tags seht. WordPress ersetzt bei der Anzeige automatisch einfache Zeilenumbrüche durch <br> und bei doppelten Zeilenumbrüchen fängt ein neuer Absatz (<p>) an. Dadurch ist der HTML-Code leichter lesbar und kann auch dort korrigiert werden. Bei Inhalten, die über externe Editoren reinkopiert wurden, wird man aber durch die Vielzahl der Tags verschreckt. Wenn nur <div> und </div> vorhanden ist, kann man diese bedenkenlos rauswerfen.

Die Werkzeugleisten

Die Werkzeugleiste hatte ich ja bereits erwähnt. Weitere Funktionen lassen sich leicht über entsprechende Plugins nachrüsten. Ich hatte mal einige ausprobiert, bin aber beim Standard-Editor geblieben. Ich verwendet meist nur Fett und Verlinkungen, gelegentlich auch mal Listen. Das B („Bold“) steht für fett auszeichnen. Es kann auch einfach über Strg + B ausgeführt werden. Das I („Italics“) steht für die kursive Auszeichnung von Text und kann auch über Strg + I erzeugt werden. Mit dem nächsten Symbol ABC kann der Text als gelöscht ausgezeichnet werden und wir dann durchgestrichen angezeigt. Für reine Blogs sicherlich ein interessantes Stilelement, für die meisten Websites ist dies aber weniger geeignet. Dann gibt es noch die unsortierte (mit Listenpunkten) und sortierte (nummerierte) Liste. Das Anführungszeichen steht für Zitate und sollte auch nur dafür verwendet werden. Natürlich kann man auch noch entscheiden, ob der Text innerhalb eines Absatzes links, zentriert oder rechtsbündig ausgerichtet wird. Der Blocksatz steht in der erweiterten Werkzeugleiste zur Verfügung. Grundsätzlich würde ich den Text immer linksbündig lassen. Die zwei Kettensymbole stehen für Verlinkung einfügen bzw. entfernen.

Über das vorvorletzte Symbol lässt sich ein „Weiterlesen“-Link einbauen. Damit lässt sich ein Inhalt in zwei Teile aufteilen. Diese Funktion ist nur bei Beiträgen sinnvoll. In der Blog-Übersicht oder in Kategorien wird dann nur der obere Teil angezeigt. Den Rest des Inhaltes sieht man erst, wenn man auf die Detailseite des Beitrags geht. Dies funktioniert daher ähnlich wie der „Auszug“, bei dem man aber nicht formatieren kann. Ich nutze diese Funktion auch nur selten.

Die letzten beiden Symbole haben keinen Einfluss auf den Inhalt, sondern auf den Editor. Man kann den Editor in einem Vollbildmodus öffnen, bei dem alle aktuell unwichtigen Steuerelemente (z.B. die Navigation links) ausgeblendet wird. Dadurch kann man sich stärker auf den Inhalt konzentrieren. Über das letzte Symbol wird die zweite Werkzeugleiste ein- bzw. ausgeblendet.

In der zweiten Werkzeugleiste sind noch einige ergänzende Funktionen zu finden. Die Auswahlliste für Format ist dann hilfreich, wenn man einen längeren Inhalt sinnvoll mit Überschriften strukturieren möchte. Grundsätzlich sollte ein Überschrift der Stufe 1 nur einmal auf einer Seite vorkommen – und dies sollte bereits vom Theme her vordefiniert sein. Also hier Finger weg von Überschrift 1! Überschriften im Inhalt fangen ab Stufe 2 an. Über Themes und Plugins können auch weitere Formate hinzugefügt werden. Das U für unterstrichenen Text würde ich nur in Ausnahmefällen verwenden, da unterstrichener Text meist für Verlinkungen steht und Besucher verwirren könnte. Ein Blocksatz schaut zwar in Zeitungen und Büchern gut aus, im Web sollte es meiner Meinung aber nicht so oft vorkommen. Das Symbol mit dem unterstrichenen A ist gefährlich. Damit lässt sich die Textfarbe ändern und den Farbcode dabei frei wählen. Idealerweise sind die Textfarben über das Theme bereits ausreichend definiert. Wenn man mehrere Farben benötigt, sollte man sich die zusätzlichen Farbcodes rausschreiben und immer darauf achten, dass man auch genau diese Farbcodes verwendet. Sonst hat man am Ende z.B. unterschiedliche Rottöne.

Über die beiden Clipboard-Symbole mit T und W lassen sich Inhalte als reinen Text (T) oder von Word (W) einfügen. Ob über „Aus Word einfügen“ die Formatierungen auch wirklich entfernt werden, kann ich nicht sagen, da ich kein Word habe. Der Radiergummi dient dazu, um Formatierungen zu entfernen – funktioniert bei <div>s aber leider nicht. Das Omega öffnet die Zeichentabelle mit den ganzen Sonderzeichen (Wer weiß schon auswendig, wie man ein ® einfügt?). Schließlich gibt es noch die Aus- und Einrücken-Symbole, die man für verschachtelte Listen benötigt.

Die letzten drei Symbole steht für Rückgängig, Wiederholen und für Hilfe.

Bilder einfügen

Bilder einfügen kann in WordPress gelegentlich Probleme bereiten. Auch ich muss dann gelegentlich zum Textmodus wechseln, um meinen Blog-Eintrag sinnvoll weiterschreiben zu können. Bilder lassen sich über den Knopf „Dateien hinzufügen“ hochladen und einfügen. Wenn man am Ende des Inhaltes ein Bild mit Beschreibung einfügt, dann steht der Cursor innerhalb der Beschreibung. Beim Weitertippen wird dann die Beschreibung erweitert und nicht ein neuer Text angefügt. Das lässt sich damit umgehen, dass man zuerst den kompletten Text schreibt und erst am Ende das Bild einfügt. Es reicht aber auch aus, unterhalb der Stelle, wo das Bild eingefügt werden soll, einen paar Zeichen zu schreiben. Nach dem einfügen des Bildes kann man die Zeichen unterhalb dann auswählen und weitertippen.

Kommentare

3 Antworten zu „Inhalte in WordPress eingeben“

  1. Hallo Florian,

    danke für Deinen Post, der das derzeit aktuellste zu diesem Thema ist.

    Ich füge Post oft Bilder ein, plane in Zukunft Posts, die teilweise nur aus Fotos und ein paar Sätzen dazu bestehen. Leider ist es mir noch nicht gelungen, bei WP Absätze direkt unter den Fotos zu erzwingen. Texte speichert WP stets direkt Kants auf Kante unterhalb des Fotos ab.

    Hast Du einen Tipp? den ich auch als Nicht-Technikerin gut umsetzen kann?
    Vielen Dank, Martina

  2. Hallo Martina,

    Das mit dem neuen Absatz nach Fotos (oder auch Gallerien) ist leider noch immer nicht sauber gelöst.

    Ich füge den neuen Absatz nach einem Bild dann meist über den Text-Modus hinzu – was aber nur eine Lösung für Personen ist, die keine Angst vor HTML haben.

    Ansonst empfehle ich immer, vor dem Einfügen des Bildes bereits den neuen Absatz anzufangen oder erstmal den kompletten Text zu schreiben und erst dann die Bilder einzufügen.

    Vielleicht gibt es auch ein Plugin, mit dem im Editor am Ende des Inhaltes ein neuer Absatz hinzugefügt werden kann?

    Schöne Grüße,
    Florian

  3. Hallo Florian,
    schön, mal wieder einen längeren, substantiellen Artikel zu finden, der auch noch gut lesbar ist – statt der häufigen dreizeiligen „Luftblasen“ im www.

    Beim Umstellen einer älteren Site auf WordPress als CMS (kein Blog) wäre es am einfachsten, beim Anlegen der Seiten in WP jeweils nur den Code als Ganzes in den Editor einzufügen. Theoretisch wäre dann außer dem Anpassen der Bilderpfade nichts mehr zu machen, Links haben alle absolute Urls.

    Würdest du das so empfehlen? p und br wird zwar übernommen, bleibt aber unsichtbar, oder? Ich würde zwar lieber direkt in WP sehen können, wo Absätze und Zeilenumbrüche sind, aber gut… Gibt es noch andere Tags, die bei diesem Vorgehen (Code einfach reinkopieren) Probleme machen könnten? Links, Bilder, div, span, italic, bold, strong, Überschriften, blockquote und q kommen sonst noch vor. Wie üblich bei textlastigen Seiten mit ein paar Bildern und Überschriften drin.

    Grüße,

    Martin