WordPress - Eigen stijlen toevoegen aan wysiwyg editor


De wysiwyg editor van WordPress kan worden uitgebreid met eigen stijlen om bepaalde opmaak te realiseren. Denk bijvoorbeeld aan het kunnen geven van een bepaalde opmaak aan een link of aan een tabel. Hiervoor kan de knop 'Formaten' worden ingeschakeld.

De knop kan met de onderstaande code worden geactiveerd. In de code hieronder zie je op een gegeven moment 'title' => __('Buttons'), staan, dit is het menu item dat onder de knop Formaten in beeld zal komen. Direct eronder zie je dan verschillende stijlen die zijn ingesteld. Het gaat in dit geval dus om buttons die een verschillende kleur kunnen krijgen.

Als eerste zie je de titel, bijvoorbeeld title' => __('Oranje'), en eronder staat dan het type element dat zal worden ingevoegd, in dit geval een span. Als laatste is dan ingesteld dat deze span twee classes mee zal gaan krijgen, button en button-orange.

De code kan aangepast en uitgebreid worden naar wens. Plaats de code in het functions.php bestand van het gebruikte thema of in een nieuwe plugin. Zorg dan dat er in het CSS bestand bepaalde opmaak wordt gekoppeld aan de opgegeven classnamen.

function format_button($buttons) {
        array_push($buttons, 'styleselect');
        return $buttons;
}
add_filter('mce_buttons', 'format_button');

function format_styles($styles_array) {
        $styles = array(
                array(
                        'title' => __('Buttons'),
                        'items' => array(
                                array(
                                        'title' => __('Oranje'),
                                        'inline' => 'span',
                                        'classes' => 'button button-orange',
                                ),
                                array(
                                        'title' => __('Wit'),
                                        'inline' => 'span',
                                        'classes' => 'button button-white',
                                ),
                                array(
                                        'title' => __('Zwart'),
                                        'inline' => 'span',
                                        'classes' => 'button button-black',
                                ),
                        ),
                ),
                array(
                        'title' => __('Tabel' ),
                        'items' => array(
                                array(
                                        'title' => __('Rood'),
                                        'selector' => 'td',
                                        'classes' => 'red',
                                ),
                        ),
                ),
        );
        $styles_array['style_formats'] = json_encode($styles);
        return $styles_array;
}
add_filter( 'tiny_mce_before_init', 'format_styles');