Der hauseigene WordPress-Editor bietet eine Vielzahl an Formatierungsmöglichkeiten. Manchmal möchte man aber auch zusätzliche eigene Styles verwenden. Im Beispiel soll es möglich sein, bestimmte Wortmarken in speziellen Formatierungen erscheinen zu lassen. Eine gute Gelegenheit, eigene Styles zu ergänzen!

Als erstes wird die Formatierung in CSS definiert, nämlich in der style.css des jeweils aktivierten Themes, also etwa:

.marker {
     font-size: 125%;
     font-weight: bold;
}

Diesen Style kann man zusätzlich in der editor-style.css anlegen, damit man auch im Editor die Änderung optisch sehen kann (fehlt die Datei im Theme-Ordner, kann diese einfach erzeugt werden).

Im zweiten Schritt muss der Editor Kenntnis erhalten von den neuen Styles. Dazu ergänzt man die functions.php des Themes um folgende Zeilen:

function my_mce_before_init_insert_formats( $init_array ) {
     $style_formats = array(
     // Each array child is a format with it's own settings
     array(
          'title' => 'marker',
          'block' => 'div',
          'classes' => 'marker',
          'wrapper' => false,
     )
     );
     $init_array['style_formats'] = json_encode( $style_formats );
     return $init_array;
}
add_filter( 'tiny_mce_before_init', 'my_mce_before_init_insert_formats' );

Möchte man mehrere Styles ergänzen, wiederholt man einfach den array-Block kommasepariert mit den jeweiligen Angaben.

Im Beispiel erhält nun der ganze Absatz den Style marker als div-Klasse. Eigentlich gewollt war jedoch, dass einzelne Worte markiert und hervorgehoben dargestellt werden. Hierfür muss das zweite Argument im Array von block auf inline umgestellt werden und die Eigenschaft span erhalten. Also:

array(
     'title' => 'marker',
     'inline' => 'span',
     'classes' => 'marker',
     'wrapper' => false,
)

Et voilà: Nun verhält sich der Editor wie gewünscht. Weitere Einstellungen für den Editor gibt es unter http://codex.wordpress.org/TinyMCE_Custom_Styles.