Редактор TinyMCE портит мой HTML-код

Независимо от того, что вы настроили как допустимые дочерние элементы, WordPress обрабатывает теги <p> и переносы строк очень своеобразно. Вы, вероятно, со временем заметите (если еще не заметили), что при переключении с текстового редактора на визуальный и обратно ваши теги <p> удаляются, подобно тому, что происходит на фронтенде. Способ предотвратить это — добавить тегу <p> пользовательский класс.

<p class="text">Этот тег p не будет удален</p>.

Хотя ↑ этот ↑ метод предотвратит удаление вашего тега <p>, он не решит проблему, так как разметка на фронтенде все равно будет испорчена. Вы можете ОТКЛЮЧИТЬ функцию wpautop. Если вы сделаете это И включите p в допустимые дочерние элементы, это РЕШИТ ВАШУ ПРОБЛЕМУ.

ВАРИАНТ 1: Отключить Autop и задать допустимые дочерние элементы

remove_filter( 'the_content', 'wpautop' );
add_filter('tiny_mce_before_init', 'modify_valid_children', 99);
function modify_valid_children($settings){     
    $settings['valid_children']="+a[div|p|ul|ol|li|h1|span|h2|h3|h4|h5|h5|h6]";
    return $settings;
}

Однако предупреждаю: как только вы переключитесь с HTML-редактора обратно в TinyMCE, ваш HTML будет разрушен. Обходной путь — полностью отключить TinyMCE для определенных типов записей, как в варианте 2 ниже.

ВАРИАНТ 2: Отключить Auto P, TinyMCE и задать допустимые дочерние элементы

remove_filter( 'the_content', 'wpautop' );
add_filter('tiny_mce_before_init', 'modify_valid_children', 99);
function modify_valid_children($settings){     
    $settings['valid_children']="+a[div|p|ul|ol|li|h1|span|h2|h3|h4|h5|h5|h6]";
    return $settings;
}
add_filter('user_can_richedit', 'disable_wyswyg_to_preserve_my_markup');
function disable_wyswyg_to_preserve_my_markup( $default ){
  if( get_post_type() === 'post') return false;
  return $default;
}

Однако для большинства людей ↑ этот ↑ вариант не подходит.

Какие еще есть варианты? Один из обходных путей, который я обнаружил, — использовать тег span с классом и убедиться, что между HTML-тегами нет пробелов. Если сделать так, можно использовать вариант 1 выше и избежать необходимости полностью отключать TinyMCE. Только не забудьте добавить CSS в таблицу стилей, чтобы span отображался корректно.

ВАРИАНТ 3: Вариант 1 + Стилизованные теги Span

HTML

<a href="#"><img src="https://placehold.it/300x200?text=Don%27t+P+On+Me" alt="Не добавляйте теги P" /><span class="noautop">Какой-то замечательный описательный текст</span></a>

CSS в таблице стилей

.noautop {
    display: block;
}

Вариант 4: Использовать встроенный шорткод медиазагрузчика

Изначально я забыл об этом, но шорткод [caption] будет выглядеть так:

[caption id="attachment_167" align="alignnone" width="169"]
    <img class="size-medium wp-image-167" src="http://example.com/example.png" alt="" width="169" height="300" />
    замечательная подпись
[/caption]

Результат будет выглядеть так:

<figure id="attachment_167" style="width: 169px" class="wp-caption alignnone">
    <img class="size-medium wp-image-167" src="http://example.com/example.png" alt="" width="169" height="300" />
    <figcaption class="wp-caption-text">Какой-то замечательный описательный текст</figcaption>
</figure>

Если вам не нужны теги figure, можно использовать плагин, например custom content shortcode, который позволяет делать так:

[raw] <p>этот контент не будет отфильтрован WordPress</p> [/raw]

Почему редактор просто не может работать так, как я хочу?

Я потратил бесчисленные часы, пытаясь заставить это работать правильно за последние пару лет. Иногда мне удавалось найти идеальное решение, но затем WordPress выпускал обновление, которое снова все ломало. Единственное решение, которое полностью работало как надо, привело меня к лучшему ответу.

Вариант 5: Preserved HTML Editor Markup Plus

Так что избавьтесь от головной боли и просто используйте этот плагин. По умолчанию Preserved HTML Editor Markup Plus влияет только на новые страницы. Если нужно изменить уже созданные страницы, перейдите по адресу www.example.com/wp-admin/options-writing.php и отредактируйте настройки плагина. Там же можно изменить поведение переносов строк по умолчанию.

Примечание: Если решите использовать этот плагин, обязательно проверяйте ветку поддержки после выхода новых обновлений WordPress. Иногда изменения могут сломать функциональность, поэтому лучше убедиться, что плагин работает в новых версиях.

Дополнительно: Отладка проблемы / Редактирование других настроек TinyMCE

Если хотите проверить и легко отредактировать настройки TinyMCE вручную, как с фильтрами, установите плагин advanced TinyMCE config. Он позволяет просматривать ВСЕ настройки TinyMCE и редактировать их через простой интерфейс. Также можно добавлять новые параметры, как с фильтрами. Это значительно упрощает понимание.

Например, у меня установлены и этот плагин, и Preserved HTML Editor Markup Plus. На скриншоте ниже показана страница настроек Advanced TinyMCE Config. Хотя скриншот обрезает 90% реального содержимого, видно, какие допустимые дочерние элементы доступны для редактирования и какие добавил Preserved HTML Editor Markup Plus.

Это крайне полезный способ не только полностью настроить редактор, но и понять, что происходит. Возможно, вы даже сможете определить причину проблемы. Изучив параметры при включенном Preserved HTML Editor Markup, я заметил дополнительные опции, которые можно добавить в пользовательский фильтр.

function fix_tiny_mce_before_init( $in ) {

    // Можно отладить это без необходимости включать Advanced Tinymce Config:
    // print_r( $in );
    // exit();

  $in['valid_children']="+a[div|p|ul|ol|li|h1|span|h2|h3|h4|h5|h5|h6]";
    $in[ 'force_p_newlines' ] = FALSE;
    $in[ 'remove_linebreaks' ] = FALSE;
    $in[ 'force_br_newlines' ] = FALSE;
    $in[ 'remove_trailing_nbsp' ] = FALSE;
    $in[ 'apply_source_formatting' ] = FALSE;
    $in[ 'convert_newlines_to_brs' ] = FALSE;
    $in[ 'verify_html' ] = FALSE;
    $in[ 'remove_redundant_brs' ] = FALSE;
    $in[ 'validate_children' ] = FALSE;
    $in[ 'forced_root_block' ]= FALSE;

    return $in;
}
add_filter( 'tiny_mce_before_init', 'fix_tiny_mce_before_init' );

К сожалению, этот метод не сработал. Вероятно, есть какое-то регулярное выражение или JavaScript, которое выполняется при обновлении записи или переключении между редакторами. Если посмотреть исходный код Preserved HTML Editor, видно, что он выполняет JavaScript-работу на стороне админки, поэтому последний совет — изучить, как работает плагин, если хотите добавить эту функциональность в свою тему.

В любом случае, извините, если вы дочитали до этого места. Просто хотел поделиться своим опытом работы с редактором WordPress, чтобы другие, возможно, не тратили столько времени на решение этой проблемы, как я!