Пользовательские стили для Wordpress TinyMCE

Question

Я прочитал несколько руководств по добавлению пользовательских стилей в редактор WYSIWYG (TinyMCE). Ни один из них, похоже, не работает в новейших версиях Wordpress. Я использую v3.3.2. instructions from the codex работает, но ограниченным образом ...

ПРИМЕЧАНИЕ: Чтобы быть на 100% ясным, я пытаюсь добавить раскрывающийся список «Стили», который автор может использовать для применения моих пользовательских стилей к тексту. (Пожалуйста, не путайте мой вопрос с тем, как стилизовать редактор самостоятельно, используя editor-style.css ...)

Мне удалось заставить код работать, но только с использованием строки с комментариями в my_mce_before_init(). Проблема с этой версией заключается в том, что она добавляет класс с общим <span>. Я пытаюсь использовать более мощную версию кода (как показано ниже), но что-то не так. Появится раскрывающийся список стилей, но он пуст. Если я нажму на него, то первый элемент говорит «Стили», но ничего не делает. Я подозреваю, что что-то случилось с моим массивом. Надеюсь, кто-то более знающий, чем я, может установить меня прямо.

Вот соответствующий код в functions.php моей теме в ...

Вот как добавить кнопку:

// Add the Style selectbox to the second row of MCE buttons 
function my_mce_buttons_2($buttons) 
{ 
    array_unshift($buttons, 'styleselect'); 
    return $buttons; 
} 
add_filter('mce_buttons_2', 'my_mce_buttons_2'); 

Вот как я добавить стили (она работает, когда я раскомментировать):

//Define the actual styles that will be in the box 
function my_mce_before_init($init_array) 
{ 
    // add classes using a ; separated values 
    //$init_array['theme_advanced_styles'] = "Section Head=section-head;Sub Section Head=sub-section-head"; 

    $temp_array['theme_advanced_styles'] = array(
     array(
      'title' => 'Section Head', 
      'block' => 'h3', 
      'classes' => 'section-head' 
     ), 
     array(
      'title' => 'Sub Section Head', 
      'block' => 'h4', 
      'classes' => 'sub-section-head' 
     )  
    ); 

    $styles_array = json_encode($temp_array['theme_advanced_styles']); 

      // THIS IS THE PROBLEM !!!! READ BELOW 
    $init_array['theme_advanced_styles'] = $styles_array; 

    return $init_array; 
} 
add_filter('tiny_mce_before_init', 'my_mce_before_init'); 

UPDATE: Я понял это (см мой ответ ниже). Прежде чем прокручивать вниз, обратите внимание на код выше, theme_advanced_styles - это неправильный ключ. Он должен быть style_formats при определении пользовательских стилей так, как я это делаю. Я подозреваю, что это распространенная ошибка.

Answer 1

AHA!

Я нашел проблему: две разные версии определения пользовательских классов должны быть добавлены к различным ключам в массиве параметров.

Эта версия ...

"Section Head=section-head;Sub Section Head=sub-section-head"; 

...должно быть значение .

Принимая во внимание эту версию ...

$style_formats = array(
array(
    'title' => 'Column', 
    'block' => 'div', 
    'classes' => 'col', 
    'wrapper' => true 
    ), 
); 

... должно быть значение 'style_formats' в настройках массива TinyMCE.

Я изменился во второй стиль, но не заметил различного ключа для массива.

Answer 2

Кажется, вы используете это (удивительный) учебник: http://alisothegeek.com/2011/05/tinymce-styles-dropdown-wordpress-visual-editor/
работал большой для меня, поэтому я сравнил свой код с моим: вы, кажется, не хватает

'wrapper' => true 

в качестве четвертого параметра каждый суб-массив. Это необходимо для добавления класса в родительский элемент вашего выбора (он может расширить ваш выбор), а не создавать новый элемент вокруг вашего точного выбора, прежде чем добавлять его в класс.
Таким образом, если вы выберете часть абзаца или часть из 2-х абзацев, он выберет весь абзац (не так уверен в двух пунктах, пожалуйста, проверьте), но по крайней мере он не будет создавать встроенный элемент вокруг вашего точного выбора).

Из документации (по ссылке выше):

wrapper [optional, default = false] 
    if set to true, creates a new block-level element 
    around any selected block-level elements 

Моих настройки:

$style_formats = array(
    array(
     'title' => 'Column', 
     'block' => 'div', 
     'classes' => 'col', 
     'wrapper' => true 
    ), 
    array(
     'title' => 'Some div with a class', 
     'block' => 'div', 
     'classes' => 'some_class', 
     'wrapper' => true 
    ), 
    array(
     'title' => 'Title with other CSS', 
     'selector' => 'h3', 
     'classes' => 'other_style' 
    ), 
    array(
     'title' => 'Read more link', 
     'selector' => 'a', 
     'classes' => 'more' 
    ) 
); 

Надеется, что это работает для вас

Answer 3

Wordpress предоставляет функцию для добавления пользовательских стилей в редакцию: http://codex.wordpress.org/Function_Reference/add_editor_style