Как сохранить форматирование в текстовом редакторе WordPress

Работа с текстовым редактором WordPress часто сопровождается проблемами с сохранением форматирования. Особенно это актуально, когда вставляешь текст из внешних источников, или когда нужно использовать сложные стили и HTML-разметку. В этой статье рассмотрим, как сохранить нужное форматирование в редакторе WordPress, какие плагины помогут, а также приведём полезные примеры кода для решения типичных задач.

Почему WordPress удаляет или меняет форматирование текста

Стандартный визуальный редактор WordPress (TinyMCE) и блоковый редактор Gutenberg по умолчанию фильтруют и очищают HTML, чтобы избежать потенциальных проблем с безопасностью и некорректным отображением. Поэтому при вставке текста из Word, Google Docs или других источников часто теряется часть стилей, например, отступы, цвет, шрифты или списки.

Также WordPress автоматически преобразует некоторые символы, меняет кавычки и удаляет неразрешённые теги. Это может привести к тому, что сложное форматирование «ломается» и выглядит иначе, чем ожидалось.

Чтобы решить эти проблемы, нужно понимать, как работает фильтрация WP и как её можно обойти или настроить под свои нужды.

Использование плагинов для сохранения форматирования

Плагин TinyMCE Advanced (Advanced Editor Tools)

Этот плагин расширяет возможности классического редактора TinyMCE, добавляя новые кнопки и функции для работы с форматированием. Он позволяет включать и отключать определённые элементы форматирования, управлять стилями, таблицами, шрифтами и цветами.

После установки и активации плагина можно настроить панель инструментов и разрешить сохранение нужных HTML-тегов. Это помогает сохранить форматирование при редактировании и вставке контента.

Скачать и ознакомиться с плагином можно по ссылке: TinyMCE Advanced на WPShop.

Плагин Raw HTML

Если нужно вставлять сложный HTML-код, который не должен изменяться редактором, стоит обратить внимание на плагин Raw HTML. Он позволяет добавлять шорткод [raw] и [/raw], внутри которого код сохраняется без изменений.

Это удобно для вставки таблиц, стилей и других элементов, которые редактор обычно убирает или изменяет.

Использование пользовательских функций для сохранения форматирования

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

function wptemy_disable_wpautop_for_content( $content ) {
    if ( is_singular('post') ) { // Можно изменить на нужный тип записи
        remove_filter('the_content', 'wpautop');
        remove_filter('the_content', 'wptexturize');
    }
    return $content;
}
add_filter( 'the_content', 'wptemy_disable_wpautop_for_content', 0 );

Эта функция отключает автоматическую вставку тегов <p> и преобразование кавычек в умные для постов. Это помогает сохранить исходное форматирование текста без изменений.

Важно использовать такую функцию с осторожностью, чтобы не нарушить общую структуру страниц.

Работа с Gutenberg: сохранение кастомного форматирования

В блоковом редакторе Gutenberg форматирование реализуется через блоки, которые автоматически обрабатываются. Иногда нужно вставить нестандартный HTML или сохранить стили внутри блока.

Для этого можно использовать блок «Код» или плагин «Custom HTML», который позволяет вставлять чистый HTML без изменений.

Если нужно более гибкое форматирование, можно создать собственный блок с помощью JavaScript и React, но это уже более сложная задача.

Пример создания простого кастомного блока для сохранения форматирования

Ниже пример регистрации блока, который выводит произвольный HTML, переданный через атрибут:

function wptemy_register_custom_block() {
    wp_register_script(
        'wptemy-custom-block',
        plugins_url('block.js', __FILE__),
        array('wp-blocks', 'wp-element', 'wp-editor')
    );
    register_block_type('wptemy/custom-html-block', array(
        'editor_script' => 'wptemy-custom-block',
        'render_callback' => 'wptemy_render_custom_html_block',
        'attributes' => array(
            'content' => array(
                'type' => 'string',
                'default' => '',
            ),
        ),
    ));
}
add_action('init', 'wptemy_register_custom_block');

function wptemy_render_custom_html_block( $attributes ) {
    return $attributes['content'];
}

Такой блок позволяет сохранять и выводить произвольный HTML без изменений, что гарантирует сохранение форматирования.

Советы по вставке текста из внешних источников

Если вы часто копируете контент из Word, Google Docs или других редакторов, советуем использовать промежуточный блокнот или редактор типа Notepad++, чтобы удалить лишние стили и теги. Это уменьшит количество проблем с форматированием.

Можно также использовать онлайн-сервисы очистки HTML, которые помогут получить чистый код перед вставкой в WordPress.

В дополнение к этому, рекомендуется использовать плагины, которые умеют импортировать текст с сохранением базового форматирования, например, Clearfy Pro — он содержит множество инструментов для оптимизации контента и управления форматированием.

Заключение: комбинируем методы для идеального результата

Сохранение форматирования в текстовом редакторе WordPress — задача, требующая комплексного подхода. Используйте плагины для расширения функционала редактора, применяйте пользовательские фильтры для контроля работы WordPress с контентом и аккуратно вставляйте тексты из внешних источников.

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