Tworzenie niestandardowych stylów w menu rozwijanym TinyMCE

przez Nikołajenko Maksym · Opublikowany Październik 18, 2012 · Zaktualizowano Sierpień 20, 2018

Jeśli tworzysz motyw WordPress dla strony internetowej, które wypełnią osoby nieznające HTML, możesz dodawać do nich niestandardowe style dla wygody pracy z nimi. edytor wizualny TinyMCE.

W folderze wtyczek, bez żadnych podkatalogów utwórz plik o nazwie custom-style.php i umieść w tym pliku, następujący kod:

/*
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 );

}

Po dodaniu kodu aktywuj wtyczkę w panelu administracyjnym WordPress – w sekcji wtyczek. Od redaktora TinyMCE, możliwa będzie zmiana stylów w rozwijanym menu Styl.

WAŻNY! Często korzystam z wtyczki Zaawansowany TinyMCE, pomaga dodawać nowe przyciski do edytora, usuń niepotrzebne przyciski i wprowadź proste ustawienia edytora TinyMCE. Dzięki tej wtyczce możesz włączyć rozwijaną listę stylów., który pozwoli ci wybrać wcześniej połączone style.

Zewnętrznie wtyczka TinyMCE Advanced wygląda tak:

Tak wygląda konfiguracja wtyczki TinyMCE Advanced:

Czytaj więcej w języku angielskim: wp.tutsplus.com

Usługi korepetycji online. Lista kursów, które prowadzę

Podstawowy kurs projektowania stron internetowych;
Układ stron;
Ogólny kurs CMS WordPress oraz kontynuacja kursu dotyczącego tworzenia szablonów;
Tworzenie stron internetowych w PHP.

Czytaj więcej na stronie Nauczyciel WordPressa