Personnaliser le menu de l’éditeur WordPress

Il arrive fréquemment que l’on ai besoin de personnaliser le menu TinyMCE « Paragraphe », « Titre 1 », « Titre 2 », etc. de WordPress. Soit parce qu’on livre un site à un client et qu’il ne faut pas qu’il utilise le Titre 1 déjà utilisé par le thème, soit parce que l’on souhaite ajouter un aplat de couleur ou quelque chose du genre…

Menu editeur TinyMCE 4

Retirer ou ajouter un élément du menu

WordPress personnalise un peu le menu de TinyMCE. Du coup, pour simplement retirer un élément du menu, c’est assez simple.

Le menu de base se compose comme suit (fichier wp-include/js/tinymce/tinymce.min.js) :

Paragraph=p;Address=address;Pre=pre;Heading 1=h1;Heading 2=h2;Heading 3=h3;Heading 4=h4;Heading 5=h5;Heading 6=h6

Dans le cas où l’on souhaite simplement retirer un élément du menu, il suffira de redéfinir ce tableau en retirant par exemple les titres de niveau 1 et 2 en ajoutant un simple filtre dans le fichier functions.php du thème :

function slt_modif_tinyMCE($arr){
    $arr['block_formats'] = 'Paragraph=p;Address=address;Pre=pre;Heading 3=h3;Heading 4=h4;Heading 5=h5;Heading 6=h6';
    return $arr;
}
add_filter('tiny_mce_before_init', 'slt_modif_tinyMCE');

Bien entendu, ça fonctionne aussi très bien dans l’autre sens pour les balises simples. On aurait tout à fait pu ajouter une balise <code> par exemple :

$arr['block_formats'] = 'Paragraph=p;Address=address;Code=code;Pre=pre;Heading 3=h3;Heading 4=h4;Heading 5=h5;Heading 6=h6';

Ajouter un aplat ou un style manquant

Il arrive aussi très fréquemment que, pour les besoin d’une mise en page, il nous faille ajouter un aplat de couleur, un pavé « attention » ou une « note ». Là, nous aurons besoin d’un petit peu plus de configuration parce que nous allons chercher à ajouter une balise <div> avec une classe particulière.

Il faut savoir que WordPress n’utilise pas le sélecteur par défaut de TinyMCE, le « styleselect », mais il utilise son propre sélecteur, le « formatselect ».

Dans le cas où l’on souhaite ajouter des style à des balises, il nous faudra personnaliser le sélecteur d’origine et remplacer le sélecteur de WordPress.
Comme dans l’exemple précédent, tout se situe au niveau du fichier functions.php de votre thème.

On commence par redéfinir le sélecteur tel qu’on le souhaite :

/**
 * Ajoute des styles personnalisés à l'éditeur WP
 */
if ( !function_exists('slt_mce_before_init')) {
    function slt_mce_before_init( $styles ) {
        // on créé un tableau contenant nos styles
        $style_formats = array (
            // chaque style est un nouveau tableau

            // Style "Paragraphe"
            array(
                'title' => __('Paragraphe'),
                'block' => 'p'
            ),

            // Style "Adresse"
            array(
                'title' => __('Adresse'),
                'block' => 'address'
            ),

            // Style "Pre"
            array(
                'title' => __('Pre'),
                'block' => 'pre'
            ),

            // Style "Titre 3"
            array(
                'title' => __('Titre 3'),
                'block' => 'h3'
            ),

            // Style "Titre 4"
            array(
                'title' => __('Titre 4'),
                'block' => 'h4'
            ),

            // Style "Titre 5"
            array(
                'title' => __('Titre 5'),
                'block' => 'h5'
            ),

            // Style "Retrait"
            array(
                'title' => __('Retrait'),
                'block' => 'div',
                'classes' => 'retrait',
                'wrapper' => true
            )
        );

        // on remplace les styles existants par les nôtres
        $styles['style_formats'] = json_encode( $style_formats );

        return $styles;
    }
}

Dans cette fonction, on peut voir différentes utilisation des balises, des plus simple sous forme de bloc à celles qui utilisent une classe.

Ensuite, on va remplacer le sélecteur de WordPress par le sélecteur d’origine de TinyMCE.

if ( !function_exists('slt_mce_buttons_2')) {
    function slt_mce_buttons_2( $buttons ) {
		// Retrait du bouton de Format de WordPress
		if ( ( $key = array_search('formatselect',$buttons) ) !== false ) {
			unset($buttons[$key]);
		}
		// Ajout du bouton de format TinyMCE d'origine
        array_unshift( $buttons, 'styleselect' );
        return $buttons;
    }
}

Au final, il est beaucoup plus simple d’épurer le menu ou de lui ajouter une ou deux balises simples que de chercher à ajouter une balise avec une classe ou un style particulier.

Ceci étant en cas de besoin, c’est fonctionnel, et si vous trouvez plus simple, je suis preneur !

 

 

Ajouter un commentaire