Створення стилів користувача у випадаючому меню TinyMCE

за Ніколаєнко Максим · Опубліковано Жовтень 18, 2012 · Оновлено Серпень 20, 2018

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

У папці плагінів, без будь-яких піддиректорій створіть файл під назвою custom-style.php і покладіть у цей файл, наступний код:

/*
Plugin Name: Custom Styles
Plugin URI: https://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
https://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 https://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 );
}

Plugin Name: Custom Styles

Plugin URI: https://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

https://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 https://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 – у розділі плагіни. З редактора TinyMCE, можна буде змінювати стилі у меню Style.

ВАЖЛИВО! Часто використовую плагін TinyMCE Advanced, він допомагає додати нові кнопки до редактора, прибрати зайві кнопки та зробити найпростіші налаштування редактора TinyMCE. За допомогою цього плагіна можна включати список стилів, що випадає, який дозволить вибрати підключений нами раніше стилі.

Зовні плагін TinyMCE Advanced виглядає так: