Eigene Schriftarten/-größen im TinyMCE 4.0

Inhaltsverzeichnis

Auswahlfeld für Schriftart und Schriftgröße

Mit Wordpress 3.9 haben es viele kleine Verbesserungen in das CMS geschafft, unter anderem auch der neue TinyMCE 4.0. Der bringt für die Zukunft einige interessante Möglichkeiten mit, kommt aber auch optisch etwas schicker und vor allem schlichter, eben einfach klarer daher, integriert sich so besser in das neue Dashboard von Wordpress. Mit der API vom TinyMCE ist außerdem noch einiges möglich, zum Beispiel neue Buttons, weitere Einstellungen, eben allerlei Zusätze. So kann mit einem Snippet beispielsweise das Auswahlfeld für Schriftarten und Schritgrößen hinzugefügt werden. Auch eigene Schriftgrößen sind möglich, genau wie eigene Fonts, sogar Google Fonts können eingebunden werden. Wie das geht? Mit den Snippets unten, die ihr einfach in die functions.php eures Themes kopiert.

1. Schriftart und Schriftgröße

Mit diesem Snippet fügt ihr ganz einfach das Auswahlfeld für Schriftart und Schriftgröße hinzu, welches im TinyMCE 4.0 von Wordpress standardmäßig ausgeblendet wird.

if ( ! function_exists( 'fastwp_mce_buttons' ) ) {
	function fastwp_mce_buttons( $buttons ) {
		array_unshift( $buttons, 'fontselect' ); // Add Font Select
		array_unshift( $buttons, 'fontsizeselect' ); // Add Font Size Select
		return $buttons;
	}
}
add_filter( 'mce_buttons_2', 'fastwp_mce_buttons' );

2. Eigene Schriftgrößen

Die Standardschriftgrößen sind nicht unbedingt das, was ihr für eure Artikel oder Schlagwörter benötigt? Dann nutzt dieses Snippet und passt es nach euren Wünschen an (einfach den Bereich “1px 2px 3px 4px 5px” mit eigenen Größen füllen), um eigene Vorgaben im Schriftgrößen Feld einzufügen.

if ( ! function_exists( 'fastwp_mce_text_sizes' ) ) {
	function fastwp_mce_text_sizes( $initArray ){
		$initArray['fontsize_formats'] = "1px 2px 3px 4px 5px";
		return $initArray;
	}
}
add_filter( 'tiny_mce_before_init', 'fastwp_mce_text_sizes' );

3. Eigene Schriftarten

Die Standards sind ganz nett, doch Web Fonts von Google wären noch viel besser. Im Beispiel wird die Schriftart Open Sans in den TinyMCE 4.0 eingefügt, die ihr fortan im Editor auswählen könnt. Für eigene Schriftarten, müsst ihr erst den bereich “Open Sans= Open Sans;” ändern (Dort könnt ihr auch Standards wie Arial etc. einfügen) und anschließend den Link zu der neuen Font hinzufügen, wo jetzt noch “http://fonts.googleapis.com/css?family=Open+Sans:400,300,700” angegeben ist. Ganz einfach eigentlich.

if ( ! function_exists( 'fastwp_mce_google_fonts_array' ) ) {
	function fastwp_mce_google_fonts_array( $initArray ) {
	    $initArray['font_formats'] = 'Open Sans= Open Sans;';
            return $initArray;
	}
}
add_filter( 'tiny_mce_before_init', 'fastwp_mce_google_fonts_array' );

if ( ! function_exists( 'fastwp_mce_google_fonts_styles' ) ) {
	function fastwp_mce_google_fonts_styles() {
	   $font_url = 'http://fonts.googleapis.com/css?family=Open+Sans:400,300,700';
           add_editor_style( str_replace( ',', '%2C', $font_url ) );
	}
}
add_action( 'init', 'fastwp_mce_google_fonts_styles' );

Mehr Auswahl im TinyMCE 4

Die Snippets sind nun recht minimalistisch angelegt, wobei das ganze mit Google Fonts natürlich schon etwas intensiver wird. Für mich perönlich sind die Schritgrößen aber eh am wichtigsten. So lassen sich sehr einfach eigene Größen erstellen, sodass bestimmte Sätze oder Schlagwörter auf einfache Art Weise vergrößert dargestellt werden können. Wer dann noch weiter gehen will und für bestimmte Passagen bzw. Sätze eigene Schriftarten braucht, kann das mit dem anderen Snippet, aber derartiges würde ich dann doch lieber über die CSS regeln und nur für Zitate oder ähnliches verwenden. Mehrere Schriftarten in einem Artikel, das ist nicht unbedingt notwendig und nur Beiwerk was auf die Ladezeiten geht. Schriftgrößen hingegen, die können praktisch sein.

Christian Pust
WordPress & Onlinemarketing Experte mit über 15 Jahren Erfahrung. Entwickler & CEO von Trackboxx – der Google Analytics Alternative.

Schreibe einen Kommentar

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

Das könnte dich auch interessieren

Du benötigst Unterstützung bei deinem WordPress Projekt?

Dein Ansprechpartner
Christian