WordPress eigene Farben und CSS Klassen in den Editor einbauen


Wenn man das Backend customizen und dem TinyMCE Editor eigene Farben und Klassen hinzufügen will, sollte man auf das WordPress Plugin Custom Class Selector zurückgreifen.

Das Plugin ist vom Ansatz her gleich mit der Lösung von WDMAC, welche aber nicht als Plugin verfügbar ist, aber genauso funktioniert und genauso aufwendig zu implementieren ist. Der Vorteil des Plugins ist, dass man auf Updates und Anpassungen  hoffen kann und es deswegen bevorzugen sollte.

Nach der Installation müssen folgende Schritte unternommen werden:

  1. Anlegen einer einer CSS-Datei, z.B. custom-style.css, welche die CSS Klassen enthalten soll, die im TinyMCE Editor hinzugefügt werden sollen. Verlinken des Stylesheets nicht vergessen in der header.php
  2. Kopieren des Codes aus der plugins/custom-class-selector/functions-sample.php in die functions.php des themes
  3. Ändern des kopierten Codes: einfügen der Klassen und des Stylesheet Namens. Bsp:
function CCSConfiguration($configuration) {

    // Define the URL of the stylesheet that holds the CSS definitions for your custom styles
    $configuration['stylesheet_url'] = get_bloginfo('template_url').'/custom-style.css';

    // Define which custom styles are included in the style menu and how each is labeled
    // Format: 'Display Name' => 'classname'
    $configuration['custom_styles'] = array(
        'special gruen' => 'special_gruen',
        'kursiv gruen' => 'kursiv_gruen'
    );

    return $configuration;
}
add_filter('customclassselector_configuration', 'CCSConfiguration');

custom-style.css:

.kursiv_gruen
{
    color:#336666;
    font-style: italic;
}
.special_gruen
{
    color:#336666;
}

Um die Style mit dem Editor wieder löschen zu können, muss man den Button “Formatierungen entfernen” (Radiergummi) benutzen.