Eigene CSS-Klassen im TinyMCE von WordPress

Es gibt mehrere Möglichkeiten, eigene CSS-Klassen in den WordPress-Editor einzubinden. Die einfachste, wie ich finde, bietet das Plugin Custom Editor Styles. Es muss wohl mehrere Plugins mit diesem Namen geben. Denn das Custom Editor Styles Plugin, von dem hier die Rede ist, ist nicht auf der offiziellen WP-Plugn-Seite zu finden und hat mit dem Custom Editor Styles offenbar nichts zu tun.

Vorgehen:

1. Klassen-DropDown im TinyMCE anzeigen lassen (z.B. mit TinyMCE Advanced).

2. Das Plugin Custom Editor Styles von Aliso the Geek‘s Seite herunterladen (Link zum Artikel; Download-Link).

3. Das ZIP-Archiv unter /wp-content/plugins/ entpacken.

4. Das Plugin im WP-Backend aktivieren.

5. Elemente im Array der in der /wp-content/plugins/custom-editor-styles/custom-editor-styles.php befindlichen tiny_mce_before_init(…) definieren (s.u.).

public function tiny_mce_before_init( $settings ) {
	$style_formats = array(
		array(
			'title'		=> 'My Block',
			'block'		=> 'div',
			'classes'	=> 'myClass',
			'wrapper'	=> true
		),
		...
	);
	...
}

Klassen in der /wp-content/plugins/custom-editor-styles/custom-styles.css definieren (s.u.).

div.myClass {
	background: #cc0000;
}

Tags: , , , ,

1 comment

  1. Ich bin gleicher Auffassung wie mein Vorredner – besonders informativ dargelegter Beitrag. So könnt ihr weitermachen!