Добавление пользовательских стилей в WordPress TinyMCE Editor

8 января 2018

Если вы создаете тему WordPress для веб-сайта, который будет обновляться людьми без каких-либо знаний HTML, вы можете добавить пользовательские стили в визуальный редактор TinyMCE и убедиться, что элементы правильно отформатированы.


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

Добавление пользовательских стилей в интерфейс WYSIWYG (TinyMCE) позволит пользователю стилизовать элемент с соответствующим пользовательским CSS без необходимости запоминать какой-либо код. Просто выберите элемент или текст и примените соответствующий формат, используя раскрывающееся меню стиля, доступное в визуальном редакторе. Довольно легко добавить раскрывающийся список «Стили» в «Kitchen Sink» в WordPress. Добавление пользовательских стилей в визуальный редактор в WordPress идеально подходит для добавления таких элементов, как предупреждающие сообщения, кнопки и отзывы.

Примечание. Ниже мы создадим варианты некоторых открытых исходных кодов TinyMCE Kit из репозитория плагина WordPress, который выпущен под лицензией GPL v.2.


Quick Fix

Добавление пользовательских стилей в редактор TinyMCE в WordPress - довольно простой процесс. Ниже представлен простой плагин, который добавляет пользовательские стили, упомянутые в классе массива, к визуальному редактору в раскрывающемся списке «Стили». Стили CSS помещаются в файл в папке плагина. Эта таблица стилей CSS вызывается в визуальном редакторе, а также в интерфейсе веб-сайта.

Код был прокомментирован, чтобы было легко понять. В первой части мы используем функцию TinyMCE, чтобы добавить пользовательскую таблицу стилей в визуальный редактор, чтобы там были видны все стили. Следующая часть добавляет раскрывающийся список «Стили», который заполняется на следующем шаге. Выпадающий список «Стили» («styleselect») добавляется ко второй строке кнопок (theme_advanced_buttons2_add) в начале строки (_ beforefore). Затем этот раскрывающийся список заполняется пользовательскими стилями, которые добавляются через массив $ classes вместо того, чтобы писать непосредственно в формате, предписанном в документации TinyMCE. В заключительной части пользовательская таблица стилей добавляется к интерфейсу с помощью функции wp_enqueue_scripts.

<?php
/*
Plugin Name: Custom Quick Styles
Plugin URI: http://www.speckygeek.com
Description: Add custom styles in your posts and pages content using TinyMCE WYSIWYG editor. The plugin adds a Styles dropdown menu in the visual post editor.
Based on TinyMCE Kit plug-in for WordPress
http://plugins.svn.wordpress.org/tinymce-advanced/branches/tinymce-kit/tinymce-kit.php
*/
/**
 * Apply styles to the visual editor
 */ 
add_filter('mce_css', 'tuts_mcekit_editor_style');
function tuts_mcekit_editor_style($url) {
    if ( !empty($url) )
        $url .= ',';
    // Retrieves the plugin directory URL and adds editor stylesheet
    // Change the path here if using different directories
    $url .= trailingslashit( plugin_dir_url(__FILE__) ) . '/editor-styles.css';
    return $url;
}
/**
 * Add "Styles" drop-dow
 */ 
function tuts_mcekit_editor_buttons($buttons) {
    array_unshift($buttons, 'styleselect');
    return $buttons;
}
add_filter('mce_buttons_2', 'tuts_mcekit_editor_buttons');
/**
 * Add "Styles" drop-down content or classes
 */ 
function tuts_mcekit_editor_settings($settings) {
    if (!empty($settings['theme_advanced_styles']))
        $settings['theme_advanced_styles'] .= ';';   
    else
        $settings['theme_advanced_styles'] = '';
    /**
     * Add styles in $classes array.
     * The format for this setting is "Name to display=class-name;".
     * More info: http://wiki.moxiecode.com/index.php/TinyMCE:Configuration/theme_advanced_styles
     *
     * To be allow translation of the class names, these can be set in a PHP array (to keep them
     * readable) and then converted to TinyMCE's format. You will need to replace 'textdomain' with
     * your theme's textdomain.
     */
    $classes = array(
        __('Warning','textdomain') => 'warning',
        __('Notice','textdomain') => 'notice',
        __('Download','textdomain') => 'download',
        __('Testimonial','textdomain') => 'testimonial box',
    );
    $class_settings = '';
    foreach ( $classes as $name => $value )
        $class_settings .= "{$name}={$value};";
    $settings['theme_advanced_styles'] .= trim($class_settings, '; ');
    return $settings;
}
add_filter('tiny_mce_before_init', 'tuts_mcekit_editor_settings');
/*
 * Add custom stylesheet to the website front-end with hook 'wp_enqueue_scripts'
 * Enqueue the custom stylesheet in the front-end
 */
add_action('wp_enqueue_scripts', 'tuts_mcekit_editor_enqueue');
function tuts_mcekit_editor_enqueue() {
  $StyleUrl = plugin_dir_url(__FILE__).'editor-styles.css';
  wp_enqueue_style( 'myCustomStyles', $StyleUrl );
}
?>

Разработка стиля

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

Мы можем устранить эти ограничения и сделать выпадающий список пользовательских стилей более мощным, поместив стили в массивы с использованием синтаксиса TinyMCE для определения форматов. После этого мы кодируем стили как JSON, а затем добавляем их в настройки TinyMCE. Остальные коды подключаемых модулей остаются неизменными.

В TinyMCE каждый формат имеет набор параметров, которые вы можете указать. (Источник: TinyMCE - форматы)

inline - Имя встроенного элемента для создания, например, «span». Текущий выбор текста будет завернут в этот встроенный element.block - имя элемента блока для создания, например, «h1». Существующие элементы блока в пределах выбора заменяются новым блочным элементом element.selector - CSS 3, чтобы найти элементы в пределах выбора. Это можно использовать для применения классов к определенным элементам или сложным вещам, таким как нечетные строки в таблице. classes - список разделенных пробелами классов для применения выбранных элементов или нового встроенного элемента block.styles - объект значения значения с элементами стиля CSS для примените, например, цвет и т. д. attributes. - Объект значения значения с атрибутами для применения к выбранным элементам или новым встроенным блочным элементом element.exact. Отключает функцию слияния подобных стилей при использовании. Это необходимо для некоторых проблем наследования CSS, таких как text-decoration для underline strikethough.wrapper - State, который сообщает, что текущий формат является форматом контейнера для элементов блока. Например, обертка div или blockquote.

Вот модифицированный плагин для добавления пользовательских стилей в визуальный редактор WordPress.

<?php
/*
Plugin Name: Custom Styles
Plugin URI: http://www.speckygeek.com
Description: Add custom styles in your posts and pages content using TinyMCE WYSIWYG editor. The plugin adds a Styles dropdown menu in the visual post editor.
Based on TinyMCE Kit plug-in for WordPress
http://plugins.svn.wordpress.org/tinymce-advanced/branches/tinymce-kit/tinymce-kit.php
*/
/**
 * Apply styles to the visual editor
 */ 
add_filter('mce_css', 'tuts_mcekit_editor_style');
function tuts_mcekit_editor_style($url) {
    if ( !empty($url) )
        $url .= ',';
    // Retrieves the plugin directory URL
    // Change the path here if using different directories
    $url .= trailingslashit( plugin_dir_url(__FILE__) ) . '/editor-styles.css';
    return $url;
}
/**
 * Add "Styles" drop-dow
 */
add_filter( 'mce_buttons_2', 'tuts_mce_editor_buttons' );
function tuts_mce_editor_buttons( $buttons ) {
    array_unshift( $buttons, 'styleselect' );
    return $buttons;
}
/**
 * Add styles/classes to the "Styles" drop-dow
 */
add_filter( 'tiny_mce_before_init', 'tuts_mce_before_init' );
function tuts_mce_before_init( $settings ) {
    $style_formats = array(
        array(
            'title' => 'Download Link',
            'selector' => 'a',
            'classes' => 'download'
            ),
        array(
            'title' => 'Testimonial',
            'selector' => 'p',
            'classes' => 'testimonial',
        ),
        array(
            'title' => 'Warning Box',
            'block' => 'div',
            'classes' => 'warning box',
            'wrapper' => true
        ),
        array(
            'title' => 'Red Uppercase Text',
            'inline' => 'span',
            'styles' => array(
                'color' => '#ff0000',
                'fontWeight' => 'bold',
                'textTransform' => 'uppercase'
            )
        )
    );
    $settings['style_formats'] = json_encode( $style_formats );
    return $settings;
}
/* Learn TinyMCE style format options at http://www.tinymce.com/wiki.php/Configuration:formats */
/*
 * Add custom stylesheet to the website front-end with hook 'wp_enqueue_scripts'
 */
add_action('wp_enqueue_scripts', 'tuts_mcekit_editor_enqueue');
/*
 * Enqueue stylesheet, if it exists.
 */
function tuts_mcekit_editor_enqueue() {
  $StyleUrl = plugin_dir_url(__FILE__).'editor-styles.css'; // Customstyle.css is relative to the current file
  wp_enqueue_style( 'myCustomStyles', $StyleUrl );
}
?>

Таким образом, у вас есть плагин для добавления пользовательских стилей в визуальный редактор WordPress. Чтобы добавить свои собственные стили, вам нужно заменить существующий массив форматов на свой собственный. Конечно, вам придется добавлять стили в таблицу стилей в каталоге плагинов. Если вам нужно использовать любое изображение в качестве фона, вы можете создать папку с изображением и ссылаться на фоновое изображение оттуда.

Если вы хотите использовать это в своей теме, просто добавьте код подключаемого модуля в функцию functions.php. Обязательно замените plugin_dir_url (__ FILE__) на get_stylesheet_directory_uri () и ссылайтесь на соответствующую таблицу стилей из папки темы.


Заключение

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

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