WordPress: Eigene Styles über den Editor

Mein konkreter Anwendungsfall ist der: Ich möchte in diverse Blogartikel Warnboxen einfügen, die den Leser in vier Kategorien auf besonders wichtige Punkte aufmerksam machen sollen. Dabei soll der Text im WordPress-Editor für Beiträge (basierend auf TinyMCE) geschrieben werden und über ein Dropdown-Menü direkt aus dem Editor formatiert werden.

Erstellen der Vorlagen in CSS

Als erstes muss man die Formatierung in CSS definieren. Dazu muss man sich erstmal festlegen, wie das in HTML umgesetzt werden soll. Ich habe mir das so vorgestellt (die denkbar einfachste Lösung):

<div class="warning">Hier seht die Warnung</div>

Die vier angesprochenen Kategorien (rot, gelb, grün, blau) werden über die Klasse ausgewählt. Mein CSS-Code sieht dabei folgendermaßen aus (er ist stark an diesen hier angelehnt):

.info, .success, .warning, .error {
border: 1px solid;
margin: 10px 0px;
padding:15px 10px 15px 50px;
background-repeat: no-repeat;
background-position: 10px center;
}
.info {
color: #00529B;
background-color: #BDE5F8;
background-image: url('info.png');
}
.success {
color: #4F8A10;
background-color: #DFF2BF;
background-image:url('success.png');
}
.warning {
color: #9F6000;
background-color: #FEEFB3;
background-image: url('warning.png');
}
.error {
color: #D8000C;
background-color: #FFBABA;
background-image: url('error.png');
}

Dieser CSS-Code muss in 2 Dateien eingefügt werden. Zuerst in der style.css des Themes. Diese kann man über den Design-Editor im Backend bearbeiten.

Optional, aber sehr zu empfehlen, ist noch eine zweite CSS-Datei. Diese sorgt dafür, dass die Formatierung auch schon in TinyMCE korrekt angezeigt wird. Die Datei liegt auch im Theme-Ordner und nennt sich editor-style.css (kann notfalls dort angelegt werden).

TinyMCE aufstocken

Style-Einträge hinzufügen

Jetzt müssen die vier neuen Formatvorlagen auch in TinyMCE eingebunden werden, damit man sie ohne Bearbeitung des HTML-Codes anwenden kann. Dazu bearbeitet man die Datei /wp-includes/class-wp-editor.php und fügt folgenden Text hinzu Der folgende Text kann ebenfalls mit dem Theme-Editor in die Datei functions.php eingefügt werden. [Danke Chris für den Hinweis]

// Callback function to filter the MCE settings
function my_mce_before_init_insert_formats( $init_array ) {
// Define the style_formats array
$style_formats = array(
// Each array child is a format with it's own settings
array(
'title' => 'Error',
'block' => 'div',
'classes' => 'error',
'wrapper' => false,
),
array(
'title' => 'Warnung',
'block' => 'div',
'classes' => 'warning',
'wrapper' => false,
),
array(
'title' => 'Info',
'block' => 'div',
'classes' => 'info',
'wrapper' => false,
),
array(
'title' => 'Bestätigung',
'block' => 'div',
'classes' => 'success',
'wrapper' => false,
),
);
// Insert the array, JSON ENCODED, into 'style_formats'
$init_array['style_formats'] = json_encode( $style_formats );
return $init_array;
}
// Attach callback to 'tiny_mce_before_init'
add_filter( 'tiny_mce_before_init', 'my_mce_before_init_insert_formats' );

Jedes der oben angegebenen Arrays ist dann ein neuer Eintrag in der Styles-Liste. „block“ sorgt für die div-Box um unseren Text herum, „classes“ legt die CSS-Klasse fest und „wrapper“ sorgt dafür, dass es nicht als „Absatz“ behandelt wird.

Es gibt noch etliche weitere Konfigurationsmöglichkeiten, die ihr bei Codex nachlesen könnt.

Style-Einträge im Editor anzeigen

Der größte Teil ist schon geschafft. Ab jetzt kommt die Hilfe eines Plugins zum Tragen: TinyMCE Advanced. Damit kann man das Dropdown-Feld Styles in die Bearbeitungsseite holen. Wenn ihr das gemacht habt, sieht euer Editor so aus:

Die neu erstellten Formatvorlagen sind jetzt über eine Dropdown-Liste aufrufbar

Die neu erstellten Formatvorlagen sind jetzt über eine Dropdown-Liste auswählbar

Das Ergebnis

Die vier neu erstellten Boxen sehen so aus:

warnboxen

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *