Formatage personnalisé de l’éditeur TinyMCE dans WordPress

Parfois, lorsque vous écrivez un bloc de texte à l’aide de l’éditeur WordPress, vous en avez besoin pour avoir une certaine apparence, nous le faisons généralement en ajoutant des styles aux morceaux de texte, mais nous ne voulons pas toujours que nos clients aient à ouvrir l’éditeur de texte et faites-le manuellement.

Dans cet exemple, nous allons créer un petit filtre que vous pouvez ajouter à votre functions.phpfichier pour donner à l’utilisateur des options de formatage supplémentaires, pour ajouter un style de paragraphe "Lead" personnalisé.

Utilisation du formatage TinyMCE personnalisé

Voici un exemple super rapide du filtre en action. Il vous montre :

• Comment basculer la barre d’outils pour que vous puissiez voir le menu Formats
• Comment appliquer la mise en forme à l’aide du menu Formats
• Comment effacer les styles

Le formatage TinyMCE en action

Le code

Le code est vraiment simple, il suffit de s’y connecter tiny_mce_before_initet d’ajouter votre style personnalisé au style_formatstableau. Assurez-vous d’inclure un titre, le type d’élément que vous souhaitez utiliser et, surtout, la classe.

function wholesomecode_tinymce_formatting( $settings) {
    $style_formats = array(
        array(
            'title'   => 'Lead Paragraph',
            'block'   => 'p',
            'classes' => 'lead',
            'wrapper' => false,
        ),
    );
    $settings['style_formats'] = json_encode( $style_formats );
    return $settings;
}
add_filter( 'tiny_mce_before_init', 'wholesomecode_tinymce_formatting' );

modes

Bien sûr, rien ne se passera sans un peu de style. Assurez-vous d’ajouter les styles à la fois à votre WordPress principal styles.cssafin que votre prospect s’affiche sur le front-end, et assurez-vous également d’enregistrer une feuille de style d’éditeur afin que le code s’affiche dans l’éditeur (vous pouvez utiliser add_editor_style()pour le faire).

.lead {
    font-size: 120%;
}