Спеціальне форматування редактора TinyMCE у WordPress

Іноді під час написання блоку тексту за допомогою редактора WordPress вам потрібно, щоб він виглядав певним чином. Зазвичай ми робимо це, додаючи стилі до фрагментів тексту, але ми не завжди хочемо, щоб наші клієнти відкривали текстовий редактор і зробіть це вручну.

У цьому прикладі ми створимо невеликий фільтр, який ви можете додати до свого functions.phpфайлу, щоб надати користувачеві деякі додаткові параметри форматування, щоб додати власний стиль абзацу «Lead».

Використання спеціального форматування 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, щоб ваш Lead відображався на передньому плані, а також обов’язково зареєструйте таблицю стилів редактора, щоб код відображався в редакторі (це можна використовувати add_editor_style()для цього).

.lead {
    font-size: 120%;
}