Adăugare clasă CSS pentru link în editorul TinyMCE

O opțiune este de a adăuga o clasă la meniul Styleselect în MCE. Adaptat de pe pagina Codex "TinyMCE Custom Styles", mai întâi trebuie să adăugați selecția de stil în editor:

// Funcție callback pentru a insera 'styleselect' în array-ul $buttons
function my_mce_buttons_2( $buttons ) {
    array_unshift( $buttons, 'styleselect' );
    return $buttons;
}
// Înregistrăm funcția callback la filtrul corespunzător
add_filter('mce_buttons_2', 'my_mce_buttons_2');

Aceasta va adăuga un nou meniu drop-down în editor. Apoi vă creați stilurile personalizate:

// Funcție callback pentru a filtra setările MCE
function my_mce_before_init_insert_formats( $init_array ) {  
    // Definim array-ul style_formats
    $style_formats = array(  
        // Fiecare element al array-ului este un format cu propriile setări
        array(  
            'title' => 'Clasa Mea Personalizată pentru Link',  
            'selector' => 'a',  
            'classes' => 'my-custom-link-class'             
        )
    );  
    // Introducem array-ul, CODAT JSON, în 'style_formats'
    $init_array['style_formats'] = json_encode( $style_formats );  

    return $init_array;  

} 
// Atasăm funcția callback la 'tiny_mce_before_init' 
add_filter( 'tiny_mce_before_init', 'my_mce_before_init_insert_formats' );

Începând cu WordPress 3.9, care a inclus o actualizare la TinyMCE 4.0, selecția de stil este mult mai robustă și include această regulă selector care înseamnă că puteți defini stiluri care se aplică doar link-urilor. Este destul de util.

Această soluție înseamnă că puteți pre-defini clasele de care aveți nevoie și vă asigurați că nu există greșeli de tastare sau alte probleme.

Așa cum notează Codex, aceasta este cel mai bine combinată cu un fișier editor-style.css bun care va aplica stilurile direct în editor.