WordPress Editor TinyMCE optimieren

This blog post has been published on 2010-10-16 and may be out of date.

In diesem Blog-Post beschreibe ich, wie du den Editor von WordPress verbessern kannst und somit auch deine Beiträge interessanter & übersichtlicher gestalten kannst.

 

1.) TinyMCE Advanced

Als erstes installieren wir “TinyMCE Advanced“, dieses Plugin erweitert den Funktionsumfang des WordPress-Editors.

  • Advanced hr
  • Advanced Image
  • Advanced Link
  • Kontextmenü
  • Emotionen (Smilies)
  • Datum und Uhrzeit
  • IESpell
  • Layer
  • Nonbreaking
  • Drucken
  • “Suchen und Ersetzen”
  • Tabellen
  • Visual Charaktere
  • XHTML Extras
  • […]

Diese Funktionen kannst du nun per “drag and drop” in der TinyMCE-Symbolleisten organisieren, indem du im Admin-Bereich unter “Einstellungen” -> “TinyMCE Advanced” folgende Optionen findest.

Des-weitern hat das Organisieren der Symbole noch den Vorteil, dass man den Editor auch auf kleinen Auslösungen (z.B. mit Netbook) verwenden kann, dazu wird passend zu deiner Auflösung angezeigt, wie viele Symbole du in einer Zeile einstellen kannst. (alternativ kann man auch im “Vollbildschirmmodus” einen Blog-Post erstellen)


TinyMCE Advanced - Optionen
TinyMCE Advanced - Optionen - 1


TinyMCE Advanced - Optionen - 2
TinyMCE Advanced - Optionen - 2




 

 

 

 

 

 

Im linken Bild siehst du, was ich zuvor beschrieben habe (Optionen – 1), unter diesen Optionen findet man auch noch das rechte Bild (Optionen – 2). Dort kannst du “Advanced Image”, “Advanced Link” und das “Kontextmenü” aktivieren, außerdem kannst du eigene CSS-Klassen (Styles) erstellen, welche dann im Editor verwendet werden können. Zu guter letzt kann man dem Editor noch beibringen “p-” / “br”-Tags nicht einfach zu entfernen. ;-)

 

2.) Special Text Boxes

Als nächstes installieren wir “Special Text Boxes“, mit diesem Plugin können wir nun schöne “Warnungen”, “Hinweise” etc. in unseren Blog-Posts einfügen.

 

3.) WP-Syntax & WP-Syntax Button

Als nächstes installieren wir diese beiden Plugin (WP-Syntax & WP-Syntax Button), so dass wir Quelltexte besser darstellen können.

Tipp: Wenn du Probleme beim Einfügen von Quelltexten hast, da WordPress den ganze Code zusammenfasst und die Einrückungen dann weg sind, wechsel einfach in den HTML-Modus und füge dort den Quelltext ein und verwende dort den Button “pre (WP-Syntax)”, um das highliting zu aktivieren.


WP-Syntax
WP-Syntax


Beispiele:

 

 

 

 

 

 

 










Wenn jemand noch weitere hilfreiche Tipps & Tricks zum Thema “WordPress Editor” kennt, würde ich diese gerne hören…

Published by

voku

Lars Moelleken | Ich bin root, ich darf das!

%d bloggers like this: