Як налаштувати TinyMCE4 в WP 3.9 - старий спосіб для стилів і форматів вже не працює

До WP 3.9 у функціяхphph.php були застосовані два фільтри:

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

function mce_mod( $init ) {
    $init['theme_advanced_blockformats'] = 'p,h3,h4';
    $init['theme_advanced_styles'] = "Header gross=mus-bi news-single-bighead; Header klein=mus-bi news-single-smallhead; Link=news-single-link; List Items=news-single-list";
    return $init;
}
add_filter('tiny_mce_before_init', 'mce_mod');

так що спадне формат абзацу показує лише p, h3 та h4, тоді як випадаючі користувальницькі стилі показують "вала заголовка", "заголовка klein" тощо. Але, на жаль, wp і tinymce більше не турбуються, оскільки wp 3.9, я бачу лише спадання стандартних форматів абзацу зараз

а також стандартне спадання формату стилів:

Поки що я не знайшов жодної документації про те, чи змінилися якісь гачки з оновленням на tinymce 4. Хтось знає? З найкращими побажаннями Ральф

Оновлення: Гаразд, базуючись на трохи більше досліджень та коментарів, які я маю на увазі, я зрозумів:

//Creating the style selector stayed the same
function my_mce_buttons( $buttons ) {
   array_unshift( $buttons, 'styleselect' );
   return $buttons;
}
add_filter('mce_buttons', 'my_mce_buttons');

function mce_mod( $init ) {
   //theme_advanced_blockformats seems deprecated - instead the hook from Helgas post did the trick
   $init['block_formats'] = "Paragraph=p; Heading 3=h3; Heading 4=h4";

   //$init['style_formats']  doesn't work - instead you have to use tinymce style selectors
   $style_formats = array(
    array(
        'title' => 'Header 3',
        'classes' => 'mus-bi news-single-bighead'
    ),
    array(
        'title' => 'Header 4',
        'classes' => 'mus-bi news-single-smallhead'
    ),
    array(
        'title' => 'Link',
        'block' => 'a',
        'classes' => 'news-single-link',
        'wrapper' => true
    )
   );
   $init['style_formats'] = json_encode( $style_formats );
   return $init;
}
add_filter('tiny_mce_before_init', 'mce_mod');

Якщо ви заглянете все, class-wp-editor.phpви побачите, що фільтр, який ви використовуєте, все ще є, однак налаштування відрізняються.

self::$first_init = array(
                    'theme' => 'modern',
                    'skin' => 'lightgray',
                    'language' => self::$mce_locale,
                    'formats' => "{
                        alignleft: [
                            {selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li', styles: {textAlign:'left'}},
                            {selector: 'img,table,dl.wp-caption', classes: 'alignleft'}
                        ],
                        aligncenter: [
                            {selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li', styles: {textAlign:'center'}},
                            {selector: 'img,table,dl.wp-caption', classes: 'aligncenter'}
                        ],
                        alignright: [
                            {selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li', styles: {textAlign:'right'}},
                            {selector: 'img,table,dl.wp-caption', classes: 'alignright'}
                        ],
                        strikethrough: {inline: 'del'}
                    }",
                    'relative_urls' => false,
                    'remove_script_host' => false,
                    'convert_urls' => false,
                    'browser_spellcheck' => true,
                    'fix_list_elements' => true,
                    'entities' => '38,amp,60,lt,62,gt',
                    'entity_encoding' => 'raw',
                    'keep_styles' => false,
                    'paste_webkit_styles' => 'font-weight font-style color',

                    // Limit the preview styles in the menu/toolbar
                    'preview_styles' => 'font-family font-size font-weight font-style text-decoration text-transform',

                    'wpeditimage_disable_captions' => $no_captions,
                    'wpeditimage_html5_captions' => current_theme_supports( 'html5', 'caption' ),
                    'plugins' => implode( ',', $plugins ),
                );

Я здогадуюсь, але я думаю, що вам потрібно змінити ключ масиву, на який ви орієнтовані formats.

EDIT Залишаючи це на місці, але ОП підтверджує, що це не робить того, чого він намагається.

function mce_mod( $init ) {
        $init['formats'] = "{
                            alignleft: [
                                {selector: 'p,h3,h4,td,th,div,ul,ol,li', styles: {textAlign:'left'}},
                                {selector: 'img,table,dl.wp-caption', classes: 'alignleft'}
                            ],
                            aligncenter: [
                                {selector: 'p,h3,h4,td,th,div,ul,ol,li', styles: {textAlign:'center'}},
                                {selector: 'img,table,dl.wp-caption', classes: 'aligncenter'}
                            ],
                            alignright: [
                                {selector: 'p,h3,h4,td,th,div,ul,ol,li', styles: {textAlign:'right'}},
                                {selector: 'img,table,dl.wp-caption', classes: 'alignright'}
                            ],
                            strikethrough: {inline: 'del'}
                        }";
    return $init;
}
add_filter('tiny_mce_before_init', 'mce_mod');

Майте на увазі, що це абсолютно не перевірено, тому ваш пробіг може відрізнятися. (І не використовуйте на виробничому майданчику, поки ви не протестували його).

Продовжуючи далі

Копання глибших форматів виглядає як власна кнопка tinyMCE. Ви можете бачити, що formatselectкнопка додана mce_buttons_2в class-wp-editor.php. А потім я відстежив це tinymce.js:

    editor.addButton('formatselect', function() {
        var items = [], blocks = createFormats(editor.settings.block_formats ||
            'Paragraph=p;' +
            'Address=address;' +
            'Pre=pre;' +
            'Heading 1=h1;' +
            'Heading 2=h2;' +
            'Heading 3=h3;' +
            'Heading 4=h4;' +
            'Heading 5=h5;' +
            'Heading 6=h6'
        );

Зважаючи на це, я думаю, що новим завданням буде 1. (в ідеалі) змінити editor.settings.block_formatsабо 2. видалити цю кнопку, фільтруючи mce_buttons_2та додаючи власну власну версію.

Випробуваний та працюючий

function mce_mod( $init ) {
    $init['block_formats'] = 'Paragraph=p;Heading 3=h3;Heading 4=h4';

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

    $init['style_formats'] = json_encode( $style_formats );

    $init['style_formats_merge'] = false;
    return $init;
}
add_filter('tiny_mce_before_init', 'mce_mod');

function mce_add_buttons( $buttons ){
    array_splice( $buttons, 1, 0, 'styleselect' );
    return $buttons;
}
add_filter( 'mce_buttons_2', 'mce_add_buttons' );

Невеликий застереження : я не впевнений, куди можна додати стилі для самих елементів, що випадають. У зразку TinyMCE параметр "Червоний заголовок" - червоний. Я не міг цього зрозуміти. Якщо ви, будь ласка, дайте мені знати.