Bei meinen bisherigen Anpassungen von WordPress habe ich meist einen weiten Bogen um den grafischen Editor, den TinyMCE, gemacht. Für die meisten Belange ist dieser WYSIWYG-Editor völlig ausreichend. Und an manchen Stellen bietet er mir (bzw. vor allem meinen Kunden) bereits zu viele Möglichkeiten. Anpassungen an dieser Komponente sind schwierig, aufgrund der Komplexität der Einbindung. Außerdem ist bei mir immer im Hinterkopf, dass sich die Hooks, über die man Anpassungen vornehmen kann, jederzeit ändern können.

Daran hat sich auch nichts geändert. Allerdings setze ich in letzter Zeit deutlich mehr Systeme mit WordPress um. D.h. auch, dass ich mehr Schulungen durchführen muss. Und die Probleme und Verständnisschwierigkeiten die der TinyMCE manchmal hervorruft kosten dann natürlich auch Zeit.

Zwei Änderungen wurden daher notwendig:

1. Das Ausblenden von “Adresse”, “Monospace”, “Überschrift 1″ und “Überschrift 2″ aus dem Format Auswahlfeld (formatselect).
   Ziel ist es dem Benutzer die Möglichkeit der Formatierung zu erlauben, allerdings nur so, dass es ins Gesamtdesign und den Seitenaufbau passt.
2. Einige Formatierung der Vorschau des WYSIWYG-Editors.
   Der Benutzer soll eine genauere Rückmeldung bekommen mit welcher Formatierung er gearbeitet hat und wie der Text auf der Seite aussieht.

Hier eine Vorschau auf das Ergebnis:

Bitte anklicken zum Vergrößern

Die Änderungen werden ausschließlich mit CSS abgewickelt. Zum Einbinden des CSS-Codes ist aber natürlich PHP notwendig. Da ich nicht jede kleine Anpassung in ein Plugin packen will, und kein Fan von Sammel-Plugins bin, kommt der PHP-Code in die functions.php des aktuellen WordPress-Themes. Die beiden benötigten CSS-Dateien kommen ebenfalls ins aktuelle Theme-Verzeichnis. Wer es anders machen will kann es gern tun.

So wird’s gemacht:

Folgender Code bindet die CSS-Datei für die Button-Leiste (oder besser für den gesamten Admin-Bereich) ein:

function tm_CustomAdminCSS() {
    echo '<link rel="stylesheet" href="'
         . get_bloginfo('template_directory')
         . '/my_admin.css" type="text/css" media="all" />
';
}
add_action('admin_head', 'tm_CustomAdminCSS');

Über den Hook “admin_head” wird die Datei “my_admin.css” eingebunden in der nun alle CSS-Anpassungen gesammelt werden die für den Administrationsbereich gelten sollen. Da ich lediglich ein paar Einträge aus dem MCE entfernen und die anderen Einträge formatieren will, sieht meine Datei so aus:

.mce_pre,
.mce_address,
.mce_h1,
.mce_h2 {
    display: none;
}
#menu_content_content_formatselect_menu_tbl .mceMenuItemTitle {
    display: none;
}
#menu_content_content_formatselect_menu_tbl .mceText {
    font-size: 1.3em;
    font-weight: normal;
}
#menu_content_content_formatselect_menu_tbl .mce_h4 .mceText,
#menu_content_content_formatselect_menu_tbl .mce_h5 .mceText,
#menu_content_content_formatselect_menu_tbl .mce_h6 .mceText {
    color: #97bf0d;
    font-weight: bold;
}

Der TinyMCE arbeitet intern mit einem iframe, in dem er Benutzer ein grafisches Editorfeld vorgauckelt. Um für dieses iframe CSS-Daten zu übergeben ist folgender PHP-Code nötig:

function tm_custom_tinymce_css($wp) {
    $wp .= ',' . get_bloginfo('template_directory')
               . '/advanced_tinymce.css';
    return trim($wp, ' ,');
}
add_filter( 'mce_css', 'tm_custom_tinymce_css');

Das WYSIWYG-Fenster erhält seine CSS-Daten gepackt. Mit dem Filter “mce_css” kann an das PHP-Script, welches die CSS-Dateien packt, eine weitere Datei angehangen werden.

Die CSS-Datei “advanced_tinymce.css” enthält folgenden Code:

* {
    font-family: Arial,sans-serif;
}
h3 {
    font-size: 1.4em;
    font-weight: normal;
    margin-bottom: 0em;
}
h4,h5,h6 {
    color: #97bf0d;
    font-size: 1.3em;
    margin-bottom: 0em;
}

Die Standartschrift wird auf Arial gesetzt und die Formatierung der Überschriften wird angepasst. Da die CSS-Datei lediglich angehangen wird, bleiben alle sonstigen Formatierungen erhalten. Damit die Änderungen aktiv werden muss der Browsercache geleert werden.

Fazit

Mit wenigen Zeilen PHP- und CSS-Code lässt sich bereits einiges Erreichen. Da die Anpassungen nicht im Kern des Systems vorgenommen werden, sondern per Hooks und Filtern, überleben sie auch das nächste Update. Erst wenn sich die Hooks oder die angesteuerten CSS-Klassen ändern, kommt es zu Problemen. Aber das kommt zum Glück nicht alle Tage vor.

Quellen & Links:

• Frank Bültge gibt Tipps, und stellt verschiedenen Methoden zur Erweiterung des Backends vor.
• TinyMCE Advanced ist ein umfangreiches Plugin zum Erweitern des Editors. Hier habe ich mir die Methoden zum Einbinden des WYSIWYG-CSS-Codes abgeschaut.