Пользовательское форматирование редактора TinyMCE в WordPress

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

В этом примере мы создадим небольшой фильтр, который вы можете добавить в свой functions.phpфайл, чтобы предоставить пользователю дополнительные параметры форматирования, чтобы добавить собственный стиль абзаца «Ведущий».

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

Вот очень быстрый пример фильтра в действии. Он показывает вам:

• Как переключить панель инструментов, чтобы вы могли видеть меню «Форматы»
• Как применить форматирование с помощью меню «Форматы»
• Как очистить стили

Форматирование TinyMCE в действии

Код

Код действительно прост, просто подключитесь tiny_mce_before_initи добавьте свой собственный стиль в style_formatsмассив. Обязательно укажите заголовок, тип элемента, который вы хотите использовать, и, самое главное, класс.

function wholesomecode_tinymce_formatting( $settings) {
    $style_formats = array(
        array(
            'title'   => 'Lead Paragraph',
            'block'   => 'p',
            'classes' => 'lead',
            'wrapper' => false,
        ),
    );
    $settings['style_formats'] = json_encode( $style_formats );
    return $settings;
}
add_filter( 'tiny_mce_before_init', 'wholesomecode_tinymce_formatting' );

Стили

Конечно, без небольшой укладки ничего не получится. Обязательно добавьте стили в ваш основной WordPress styles.css, чтобы ваш лид отображался во внешнем интерфейсе, а также обязательно зарегистрируйте таблицу стилей редактора, чтобы код отображался в редакторе (вы можете использовать add_editor_style()для этого).

.lead {
    font-size: 120%;
}