Zu WordPress als Content Mangement System gehört auch ein Editor, mit dem man Seiten so stylen kann, wie sie später erscheinen sollen.
Wie ich Hintergrundbilder oder Hintergrundfarben im Editor darstelle, habe ich hier schon beschrieben. Jetzt geht es um Google Fonts. Dazu gibt es auch zwei Plugins, um alles mal auszuprobieren.
English summary for „WordPress + Google Font Faces in Tinymce Editor“:
A Short description how to implement Google Font Faces in your tinymce editor and and plugins for download
Google Font Faces
Ich möchte hier die Schrift ‚Nobile‘ im Editor (wie auch auf dieser Webseite) verwenden.
Ausserdem soll sie im auch noch unter ‚Schriftname‘ ausgewählt werden können.
Der Code des Plugins sieht so aus:
if ( !class_exists( 'tinymce_add_google_fonts' ) ) {
class tinymce_add_google_fonts {
function tinymce_add_google_fonts() {
add_action( 'admin_head',array(&$this, 'tinymce_add_google_fonts_init'));
}
function tinymce_add_google_fonts_init() {
if (get_user_option('rich_editing') == 'true') {
add_filter('tiny_mce_before_init',array(&$this,'nf_add_google_fonts'));
}
}
public function nf_add_google_fonts ($initArray) {
$nf_stylesheet=trailingslashit( get_stylesheet_directory_uri() ) . 'css/editor/editor-style.css';
if (array_key_exists('content_css', $initArray) && !empty($initArray['content_css'])) $initArray['content_css'].=",".$nf_stylesheet;
else $initArray['content_css'] = $nf_stylesheet;
$initArray['theme_advanced_fonts'] = 'Nobile=Nobile,sans-serif;Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings,zapf dingbats';
return $initArray;
}
}
$tinymce_add_google_fonts = new tinymce_add_google_fonts();
}
Mit $initArray[‚content_css‘]=… wird eine neue css Datei für den Editor angelegt. Da drin könnt ihr alles so stylen, wie ihr es wünscht. Die Datei liegt im Plugin unter stylesheets. Man muss an dieser Stelle etwas aufpassen, dass man bereits mit anderen Plugins eingefügte css Dateien nicht überschreibt.
$initArray[‚theme_advanced_fonts‘]=… enthält alle verfügbaren Schriften. Wenn ihr hier nur die Nobile angebt, ist auch nur noch Nobile im Dropdown vorhanden. Daher sollte man die Standardschriften des Editors hinten anfügen.
Hier ist ein Auszug aus der editor-style.css
@import url("http://fonts.googleapis.com/css?family=Nobile");
body, td, pre {color:#000; font-family:Nobile,sans-serif; font-size:75%; margin:8px;}
Nobile wird als Standard festgelegt und per Import von Google geladen. So funktioniert das auch bei verschiedenen Browsern, weil Google stets die passenden Formate schickt.
