Pot adăuga un format personalizat la opțiunea de format din panoul de text?

Editorul "clasic" TinyMCE are două meniuri derulante: formatselect pentru stiluri de paragraf și styleselect pentru stiluri de caractere - care pot conține și stiluri de paragraf, ceea ce poate fi confuz. Configurația implicită în WordPress afișează doar meniul derulant pentru format. Dacă aplicați o foaie de stil personalizată editorului, TinyMCE o poate folosi pentru a prelua numele claselor și a le adăuga în meniul derulant pentru stil - dar acest lucru nu a funcționat întotdeauna pentru mine.

Începând cu versiunea 3.0, puteți apela add_editor_style() în fișierul functions.php pentru a adăuga o foaie de stil editorului. Implicit, aceasta este editor-style.css în directorul temei dumneavoastră. Înainte de versiunea 3.0, trebuie să utilizați filtrul mce_css pentru a adăuga URL-ul foii de stil a editorului. Acesta va fi inclus în valoarea de configurare content_css a TinyMCE.

Pentru a adăuga meniul derulant pentru stil, opțiunea styleselect trebuie să apară într-unul dintre vectorii de configurare a barei de butoane (theme_advanced_buttons[1-4] în TinyMCE, filtrat prin mce_buttons_[1-4] în WordPress). Lista de formate de bloc este controlată de opțiunea theme_advanced_blockformats a TinyMCE, pe care o puteți adăuga în vectorul de control din filtrul tiny_mce_before_init. Dacă doriți să personalizați numele din meniul derulant pentru stil (nu doar numele claselor CSS), consultați opțiunea theme_advanced_styles. De asemenea, puteți utiliza opțiunea mai avansată style_formats, care vă oferă mai multă flexibilitate în definirea stilurilor.

Codul PHP relevant cu toate cârligele și configurația implicită se află în wp-admin/includes/post.php, în funcția wp_tiny_mce(). În ansamblu, configurația dumneavoastră ar putea arăta astfel:

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';

    // Preluat de la http://tinymce.moxiecode.com/examples/example_24.php
    $style_formats = array(
        array('title' => 'Text îngroșat', 'inline' => 'b'),
        array('title' => 'Text roșu', 'inline' => 'span', 'styles' => array('color' => '#ff0000')),
        array('title' => 'Antet roșu', 'block' => 'h1', 'styles' => array('color' => '#ff0000')),
        array('title' => 'Exemplu 1', 'inline' => 'span', 'classes' => 'example1'),
        array('title' => 'Exemplu 2', 'inline' => 'span', 'classes' => 'example2'),
        array('title' => 'Stiluri de tabel'),
        array('title' => 'Rând de tabel 1', 'selector' => 'tr', 'classes' => 'tablerow1'),
    );
    // Înainte de versiunea 3.1, era necesar un truc special pentru a trimite acest vector la configurație.
    // Consultați istoricul acestui post pentru versiunile anterioare.
    $settings['style_formats'] = json_encode( $style_formats );

    return $settings;
}