WordPress maakt standaard gebruik van de TinyMCE JavaScript WYSIWYG editor. Binnen deze editor kunnen gebruikers standaard niet elementen classificeren. Om toch bepaalde elementen te voorzien van een andere opmaak is het classificeren van elementen soms wel erg handig. In dit bericht beschrijf ik hoe je er voor kunt zorgen dat gebruikers eenvoudig elementen kunnen classificeren.
Ik zal als voorbeeld de klasse “Intro” beschikbaar maken binnen de TinyMCE WordPress editor. Op deze manier kunnen gebruikers eenvoudig content classificeren als intro content. Vervolgens kan de opmaak van deze content aangepast worden met behulp van CSS.
Allereerst moeten we een extra knop toevoegen aan de TinyMCE werkbalk. Met behulp van deze knop kunnen gebruikers eenvoudig elementen classificeren. Met onderstaande functie wordt de betreffende knop binnen de TinyMCE editor werkbalk geplaatst. De betreffende functie kun je in je functions.php thema bestand plaatsen:
function prefix_add_styleselect($buttons) { array_unshift($buttons, 'styleselect'); return $buttons; } add_filter('mce_buttons_2', 'prefix_add_styleselect');
Vervolgens passen we de TinyMCE configuratie aan zodat TinyMCE weet welke CSS klassen beschikbaar moeten zijn voor de gebruiker.
function prefix_set_formats($settings) { $settings['theme_advanced_styles'] = 'Lead=lead'; $style_formats = array( array( 'title' => __('Intro Paragraph', 'textdomain'), 'block' => 'p', 'classes' => 'lead' ) ); $settings['style_formats'] = json_encode($style_formats); return $settings; } add_filter('tiny_mce_before_init', 'prefix_set_formats');
Binnen de WordPress WYSIWYG editor zien we nu een extra knop met stijlen verschijnen waarin de klasse “Intro” is opgenomen.
Binnen je CSS bestand kun je vervolgens voor de elementen die geclassificeerd zijn als “Intro” een andere (afwijkende) opmaak definiëren.
4 reacties
Hoe kan je meer knoppen met stijlen aanmaken?
Dit kan op de volgende manier:
Mijn dank is groots! Ga het meteen proberen!
Hier nog een vraagie. weet je miss. hoe je ipv in het dropdown menu, een button extra kan maken die meteen aanklikbaar is? Of is dat niet mogelijk via deze weg?
Grtz Martin
Martin, waarschijnlijk heb je het al opgelost, maar met behulp van onderstaande URL’s kun je je eigen buttons maken binnen de WordPress TinyMCE WYSIWYG editor.
TinyMCE Custom Buttons
WordPress Shortcode TinyMCE Button Tutorial
Het vergt wel wat meer werk als bovenstaande integratie. Wellicht een leuk idee om hier nog even een nette Nederlandse uitleg voor te schrijven.