puis-je ajouter un format personnalisé à l'option de format dans le panneau de texte?

Dans l'éditeur de texte, où vous pouvez définir des en-têtes et d'autres paramètres, est-il possible d'ajouter vos propres styles à utiliser par les clients? et même supprimer les inutiles?

L'éditeur TinyMCE "classique" a deux listes déroulantes: formatselectpour les styles de paragraphe et styleselectpour les styles de caractère - qui peuvent également contenir des styles de paragraphe, pour le rendre plus déroutant. La configuration dans WordPress par défaut affiche uniquement la liste déroulante des formats . Si vous appliquez une feuille de style personnalisée à l'éditeur, TinyMCE peut l'utiliser pour récupérer les noms de classe et les ajouter à la liste déroulante des styles - mais cela n'a pas fonctionné à chaque fois pour moi.

Depuis 3.0, vous pouvez appeler add_editor_style()votre functions.phppour ajouter une feuille de style à l'éditeur. Par défaut, il se trouve editor-style.cssdans votre répertoire de thèmes. Avant 3.0, vous devez vous connecter au mce_cssfiltre pour ajouter l'URL à la feuille de style de votre éditeur. Cela se terminera dans la content_cssvaleur de configuration TinyMCE .

Pour ajouter le menu déroulant de style , l' styleselectoption doit apparaître dans l'un des tableaux de configuration de la barre de boutons ( theme_advanced_buttons[1-4]dans TinyMCE, filtré par mce_buttons_[1-4]dans WordPress). La liste des formats de bloc est contrôlée par l' theme_advanced_blockformatsoption de TinyMCE , que vous pouvez ajouter au tableau de contrôle dans le tiny_mce_before_initfiltre. Si vous souhaitez personnaliser les noms de la liste déroulante de style (pas seulement vos noms de classe CSS), regardez l' theme_advanced_stylesoption . Vous pouvez également utiliser l' style_formatsoption plus avancée qui vous donne plus de flexibilité pour définir les styles.

Le code PHP pertinent avec tous les hooks et la configuration par défaut est wp-admin/includes/post.phpen fonctionwp_tiny_mce() . Dans l'ensemble, votre configuration pourrait ressembler à ceci:

add_action( 'after_setup_theme', 'wpse3882_after_setup_theme' );
function wpse3882_after_setup_theme()
{
    add_editor_style();
}

add_filter('mce_buttons_2', 'wpse3882_mce_buttons_2');
function wpse3882_mce_buttons_2($buttons)
{
    array_unshift($buttons, 'styleselect');
    return $buttons;
}

add_filter('tiny_mce_before_init', 'wpse3882_tiny_mce_before_init');
function wpse3882_tiny_mce_before_init($settings)
{
    $settings['theme_advanced_blockformats'] = 'p,h1,h2,h3,h4';

    // From http://tinymce.moxiecode.com/examples/example_24.php
    $style_formats = array(
        array('title' => 'Bold text', 'inline' => 'b'),
        array('title' => 'Red text', 'inline' => 'span', 'styles' => array('color' => '#ff0000')),
        array('title' => 'Red header', 'block' => 'h1', 'styles' => array('color' => '#ff0000')),
        array('title' => 'Example 1', 'inline' => 'span', 'classes' => 'example1'),
        array('title' => 'Example 2', 'inline' => 'span', 'classes' => 'example2'),
        array('title' => 'Table styles'),
        array('title' => 'Table row 1', 'selector' => 'tr', 'classes' => 'tablerow1'),
    );
    // Before 3.1 you needed a special trick to send this array to the configuration.
    // See this post history for previous versions.
    $settings['style_formats'] = json_encode( $style_formats );

    return $settings;
}

Comme ici , la liste déroulante du format TinyMCE n'affiche plus les aperçus de style

Kara avait raison, vous devez désactiver les styles par défaut pour voir les nouveaux styles ...

unset($init['preview_styles']);

return $settings;