Die Werkzeugleiste (Formatierungsleiste) des Visuellen Editors in WordPress

Von am 11. Januar 2011 um 09:01

Gerade Neueinsteiger arbeiten häufig mit dem Visuellen Editor. Dessen insgesamt 29 Buttons erstrecken sich bei einer Neuinstallation über zwei Reihen. Mit der Installation von Plugins können diese Werkzeug- bzw. Formatierungsleisten erweitert werden. Im Folgenden möchte ich jedoch kurz die "Standardleisten" vorstellen. Sie bieten eigentlich alles, was man beim Schreiben eines Artikels benötigt.

Die obere Reihe der Werkzeug- bzw. Formatierungsleiste besteht aus den folgenden Buttons:

Formatierungsleiste (1/2)

Formatierungsleiste (1/2)

  1. Der entsprechende Abschnitt wird als sehr wichtig hervorgehoben bzw. als fett formatiert.
  2. Der entsprechende Abschnitt wird als wichtig hervorgehoben bzw. als kursiv formatiert.
  3. Der entsprechende Abschnitt wird durchgestrichen.
  4. Der entsprechende Abschnitt stellt eine Aufzählungsliste dar.
    • Dies ist
    • eine
    • Beispielliste.
  5. Der entsprechende Abschnitt stellt eine nummerierte Liste dar. (So wie diese hier.)
  6. Der entsprechende Abschnitt wird als Zitat gekennzeichnet.
  7. Linksbündiger Absatz.
  8. Zentrierter Absatz.
  9. Dieser Absatz wird rechtsbündig.
  10. Einen Link einfügen/bearbeiten.
  11. Einen Link entfernen.
  12. "Mehr" bzw. "Weiterlesen-Link"
  13. Die Rechtschreibprüfung. (Über das Dropdown-Feld kann man auch die Sprache auswählen.)
  14. Mit diesem Button de-/aktiviert man den Vollbildmodus des Editors.
  15. Der letzte Button erweitert die Werkzeug- bzw. Formatierungsleiste des visuellen Editors.

Hat man nun auf den letzten Button geklickt, so wird eine zweite Reihe mit Buttons eingeblendet. Man findet hier die folgenden Funktionen:

Formatierungsleiste (2/2)

Formatierungsleiste (2/2)

  1. In der Auswahlliste mit dem Namen "Absatz" befinden sich neun Auswahlmöglichkeiten, mit denen Sie den Inhalt kennzeichnen können: Absatz, Überschriften etc.
  2. Dieser Textabschnitt wird unterstrichen. Ich würde allerdings auf diese Auszeichnung/Formatierung verzichten, da im Web ein unterstrichener Text einen Link symbolisiert. Der Nutzer ist dann evtl. irritiert, wenn manche "Links" anklickbar sind und manche wiederum nicht.
  3. Der entsprechende Textabschnitt bekommt einen Blocksatz. Man sollte dabei allerdings bedenken, dass es im Web bzw. (X)HTML und CSS keine Silbentrennung gibt und der Blocksatz durch vergrößerte Leerzeichen simuliert wird. Dies kann zu unschönen Lücken im Text führen.
  4. Mit diesem Knopf kann man die Textfarbe festlegen.
  5. Einen unformatierten Text einfügen. Hier werden die Formatierungen aus der ursprünglichen Quelle nicht übernommen. Sehr wichtig, wenn man Texte aus einer Textverarbeitung (z. B. Word oder OpenOffice), aber nicht deren Formatierung aus dem Programm übernehmen möchte. Dies entspricht der Funktion "unformatierten Text einfügen" aus MS Word.
  6. Bei dem Knopf mit dem Word-Symbol handelt es sich um die Möglichkeit, einen Text inkl. seiner Formatierungen aus der ursprünglichen Anwendung einzufügen. Hierbei werden die Formatierungen übernommen, soweit dies mit (X)HTML und CSS möglich ist. Besonders hilfreich ist dies wenn man z. B. eine Tabelle einfügen möchte. Der Code, der beim nutzen dieses Buttons generiert wird ist zwar nicht der schönste, aber manchmal kommt es halt doch auf die äußeren Werte an ;-)
  7. Unter dem Knopf mit dem Radiergummi-Symbol verbirgt sich eine Funktion, die Formatierungen für einen Textabschnitt nachträglich entfernt.
  8. Der Button mit der Filmrolle beherbergt die Möglichkeit, diverse Video-Formate (z. B. Flash) einzubetten und zu bearbeiten.
  9. Hinter dem Button mit dem Omegasymbol (Ω) verbirgt sich eine sehr hilfreiche Funktion. Hier hat man die Möglichkeit, ganz einfach und komfortabel Sonderzeichen einzufügen.
  10. Text ausrücken.
  11. Text einrücken.
  12. Ein Bearbeitungsschritt zurück.
  13. Ein Schritt in der Bearbeitung vor.
  14. Die Hilfe zum Editor.

Einige dieser Funktionen können übrigens auch mit Tastenkombinationen aufgerufen werden.

Das Aussehen der Formatierungen ist natürlich immer abhängig von den Angaben in der CSS-Datei. So kann z. B. die Gestaltung von Zitaten o. ä. in unterschiedlichen Blogs sehr von einander abweichen, siehe z. B. ein Zitat auf perun.net und ein Zitat auf Faszination Tolkien.

Diesen Artikel weiterempfehlen:

Deinen XING-Kontakten zeigen

 — 


3 Reaktionen auf diesen Beitrag

Kommentare

  1. Uwe Janssen sagte am
    Mittwoch, 12. Januar 2011 um 09:08 folgendes:

    Hallo das ist für Anfänger die sich gerade mit WordPress beschäftigen ein sehr aufschlussreicher Artikel.Ich würde vieleicht eine Video Anleitung darüber machen.

    Gruß Uwe

Trackbacks und Pingbacks

  1. Die Quicktags des HTML-Editors von WordPress | WordPress-Buch
  2. Welchen WordPress-Editor soll man nutzen? Visuell oder HTML? | WordPress-Buch

Tut mir Leid, die Kommentarfunktion für diesen Beitrag wurde geschlossen.