Aggiungere una Classe CSS al Link nell'Editor TinyMCE

Un'opzione è aggiungere una classe al menu Styleselect in MCE. Adattato dalla pagina Codex "TinyMCE Custom Styles" è necessario prima aggiungere lo style select all'editor:

// Funzione di callback per inserire 'styleselect' nell'array $buttons
function my_mce_buttons_2( $buttons ) {
    array_unshift( $buttons, 'styleselect' );
    return $buttons;
}
// Registriamo la nostra callback al filtro appropriato
add_filter('mce_buttons_2', 'my_mce_buttons_2');

Questo aggiungerà il nuovo menu a tendina all'editor. Poi crei i tuoi stili personalizzati:

// Funzione di callback per filtrare le impostazioni MCE
function my_mce_before_init_insert_formats( $init_array ) {  
    // Definiamo l'array style_formats
    $style_formats = array(  
        // Ogni elemento dell'array è un formato con le proprie impostazioni
        array(  
            'title' => 'La Mia Classe Personalizzata per Link',  
            'selector' => 'a',  
            'classes' => 'my-custom-link-class'             
        )
    );  
    // Inseriamo l'array, CODIFICATO IN JSON, in 'style_formats'
    $init_array['style_formats'] = json_encode( $style_formats );  

    return $init_array;  

} 
// Colleghiamo la callback a 'tiny_mce_before_init' 
add_filter( 'tiny_mce_before_init', 'my_mce_before_init_insert_formats' );

A partire da WordPress 3.9 che includeva un aggiornamento a TinyMCE 4.0, lo style select è molto più robusto e include quella regola selector che significa che puoi definire stili che possono essere applicati solo ai link. È piuttosto utile.

Questa soluzione significa che puoi pre-definire le classi di cui hai bisogno e assicurarti che non ci siano mai errori di battitura o altri problemi.

Come nota il Codex, questo è meglio combinato con un buon file editor-style.css che applicherà i tuoi stili direttamente nell'editor.