Статьи

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

Январь 5, 2019

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

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

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

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

Быстрая починка

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

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

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<?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.
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__) ) .
 
    return $url;
}
 
/**
 * Add «Styles» drop-down
 */
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.
     * 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». Текущее выделение текста будет заключено в этот встроенный элемент.
  • block — Имя элемента блока, который нужно создать, например, «h1». Существующие элементы блока в выделении заменяются новым элементом блока.
  • selector — шаблон selector CSS 3 для поиска элементов в выделении. Это может быть использовано для применения классов к определенным элементам или сложным вещам, таким как нечетные строки в таблице.
  • classes — разделенный пробелами список классов для применения выбранных элементов или нового элемента inline / block.
  • styles — Имя / значение объекта с элементами стиля CSS для применения, такими как цвет и т. д.
  • attributes — имя / значение объекта с атрибутами для применения к выбранным элементам или новому элементу inline / block.
  • exact — отключает функцию слияния похожих стилей при использовании. Это необходимо для некоторых проблем наследования CSS, таких как оформление текста для подчеркивания / зачеркивания.
  • wrapper — Состояние, сообщающее, что текущий формат является контейнерным форматом для элементов блока. Например, div-обертка или цитата.

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

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<?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.
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__) ) .
 
    return $url;
}
 
/**
 * Add «Styles» drop-down
 */
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-down
 */
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’;
  wp_enqueue_style( ‘myCustomStyles’, $StyleUrl );
}
?>

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

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

Вывод

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

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

50
Share: