De WYSIWYG editor bij je theme laten passen

Gepost op 19 februari 2010 om 15:45u, door hiranthi | geen reacties | reageren

De WYSIWYG-editor (TinyMCE) van WordPress wil klanten nog weleens in de war brengen. Het gebruikte lettertype (en tekstkleur) kunnen namelijk sterk afwijken van hetgeen op de voorkant van de website wordt gebruikt. Aangeven bij de klant dat dit 'automatisch wordt omgezet' helpt vaak niet, omdat zij nu eenmaal geen kennis hebben van CSS en dus ook niet begrijpen hoe dat werkt.

Gelukkig kun je heel makkelijk een stylesheet koppelen aan de WYSIWYG-editor en dat ga ik in een voorbeeld laten zien.

Editor stylesheet

Allereerst maken we een nieuwe stylesheet aan. Het laten inladen van de standaard theme-css heeft namelijk geen zin, hier zitten namelijk veel stijlen in die de klant nooit zal gebruiken.

html .mceContentBody { font-family:Arial, Helvetica, sans-serif; font-weight:normal; color:#000; font-size:1em; }
 
a { color:#000; font-weight:bold; }
a:hover { color:#ea1e25; }
 
h1, h2 { color:#365eab; font-size:200%; line-height:normal; margin-bottom:10px; }
h2 { font-size:160%; }
h3 { font-size:140%; }
h4 { font-size:120%; }
 
p { margin:0 0 20px; font-weight:normal; color:#000; font-size:1em; }

Bovenstaande CSS slaan we op in een nieuw CSS bestand, style-editor.css genaamd. En dit is uiteraard alleen maar een voorbeeld van standaard stijling die je er in kunt zetten.

Stylesheet koppelen aan de WYSIWYG-editor

Om de stylesheet ook daadwerkelijk te koppelen aan de WYSIWYG-editor voegen we de volgende code toe aan de functions.php van onze theme:

<?php
 
add_filter('mce_css', 'my_editor_style');
function my_editor_style($url)
{
	if ( !empty($url) )
		$url .= ',';
 
	// Change the path here if using sub-directory
	$url .= trailingslashit( get_stylesheet_directory_uri() ) . 'style-editor.css';
 
	return $url;
}
 
?>

Bovenstaande code heb ik gevonden, toen ik het zocht voor een klant, op Andrew Ozz z'n website. Hij linkt er ook naar een voorbeeld-pakket die je kunt gebruiken voor in je theme.

Laat een reactie achter

Klik hier om je antwoord te annuleren.

Naam (vereist)

E-mailadres (wordt niet gepubliceerd) (vereist)

Website (inclusief http://)

Hou me op de hoogte van nieuwe reacties op deze post