Як додати свої стилі у WordPress редакторі TinyMCE

Якщо ви створюєте тему WordPress для сайту, який оновлюватиметься людьми без знання HTML, ви можете додати свої стилі у візуальний редактор TinyMCE та бути впевненими, що елементи будуть відформатовані правильно.

Як веб-дизайнер або розробник, ви можете створити свої стилі для різних елементів вмісту WordPress сайту. Ці стилі можна легко додати, редагуючи HTML. Але якщо кінцевий користувач сайту або автор не знайомі з HTML? Що, якщо автор забув, який елемент потрібен для стилю?

Додавання своїх стилів до інтерфейсу WYSIWYG редактора (TinyMCE) дозволить відформатувати потрібний елемент за допомогою CSS без необхідності запам'ятовувати будь-який код. Користувач зможе просто вибрати елемент або текст і застосувати відповідний формат, використовуючи меню, що випадає, яке є у візуальному редакторі. Додати меню, що випадає "Стилі" WordPress дійсно просто. Це ідеальне рішення для таких елементів як попередження, кнопки і відгуки.

Зверніть увагу: Далі ми створюватимемо варіації деякого відкритого коду, який називається TinyMCE Kit із репозиторію плагінів WordPress.

Швидке рішення

Додавання своїх стилів до редактора TinyMCE – досить простий процес. Нижче описаний простий плагін, який додає стилі користувача, вказані в масиві, в випадаючий список 'Стилі' візуального редактора. CSS стилі поміщені у файл у папці плагіна. Ця таблиця стилів CSS викликається у візуальному редакторі та на самому сайті.

У коді додані коментарі, щоб спростити розуміння. У першій частині ми використовуємо функцію TinyMCE щоб додати свою таблицю стилів до візуального редактора, щоб стилі були там видимі. Наступна частина додає список, що випадає 'Стилі', що заповнюється на наступному кроці.

Список 'Styles' ('styleselect') додається до другого ряду кнопок (theme_advanced_buttons2_add) на початку ряду (_before). Цей список, що випадає, потім наповнюється своїми стилями, які додаються через масив $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-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. 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. Решта коду плагіна залишається незмінним. У TinyMCE кожен формат встановлює набір параметрів, які можна визначити (TinyMCE – формати):

• вбудований – назва вбудованого елемента, який створить, наприклад, "spanВибраний в даний момент текст буде укладено в цей вбудований елемент.
• блок – назва для блокового елемента, щоб створити, наприклад, "h1Існуючі блокові елементи всередині обраної частини будуть замінені на новий блоковий елемент.
• селектор – CSS3 селектор для знаходження елементів у вибраному. Може використовуватися для застосування класів до певних елементів або комплексу, наприклад, непарним рядків у таблиці.
• класів – розділений пробілами список класів, які використовуються для вибраних елементів для нових вбудованих/блочних елементів.
• Стилі – назва/значення об'єкта з елементами CSS, які мають застосовуватися, наприклад, колір тощо.
• Атрибути – назва/значення об'єкта з атрибутами, які повинні застосовуватися до вибраних елементів або до нового вбудованого/блочного елемента.
• точний - Вимикає злиття схожих стилів. Це потрібно для деяких проблем CSS, наприклад, оформлення тексту для підкреслення/закреслення.
• обгортка – вказує на те, що поточний формат – формат контейнера для блокових елементів. Наприклад, wrapper або 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-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'; // Customstyle.css is relative to the current file
  wp_enqueue_style( 'myCustomStyles', $StyleUrl );
}
?>

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

Якщо ви хочете використовувати ці додаткові стилі на своєму сайті, просто додайте код плагіна до файлу functions.php вашої теми. Обов'язково замініть plugin_dir_url(__FILE__) на get_stylesheet_directory_uri() та зверніться до потрібної таблиці стилів із папки теми.

Висновок

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

Джерело: WP.tutsplus.com

Олексій Шевченко

редактор wpcafe

Вивчає сайтобудування з 2008 року. Практикуючий вебмайстер, що спеціалізується на створенні сайтів WordPress. Задати питання Олексію можна на https://profiles.wordpress.org/wpthemeus/