WordPress

Inscreva-se em nosso canal no Youtube Daviwp

Como adicionar novos estilos ao editor visual do WordPress

27/07/2012 WordPress (0) comentário

Olá amigos mais um post legal para vocês, como Adicionar estilos customizados ao editor TinyMCE do WordPress é um processo bem simples. Abaixo você encontra um código para criar um plugin que adiciona estilos customizados que aparecem por meio de um dropdown “Styles” no editor visual do seu WordPress, conforme mostra a imagem acima. Os estilos CSS são colocados num ficheiro à parte, dentro da pasta do plugin. Esta folha de estilos CSS é chamada pelo editor visual, como também pelo front-end do blog.

<?php
/*
Plugin Name: Custom Quick 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 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: https://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 );
}
?>

Elaborando a folha de estilos
O código abaixo é apenas uma solução de estilos customizados para aplicar no seu editor visual do WordPress, mas apresenta algumas limitações. Ele não irá limitar um estilo a um elemento HTML específico, por exemplo. Poderemos remover essas limitações e criar nossos próprios códigos de estilização, incluindo os estilos em matrizes, usando a sintaxe do TinyMCE para definir os formatos. Depois disso, poderemos codificar os estilos como JSON e depois adicioná-los às opções do TinyMCE. Todo o restante do código do plugin, permanece como está.

O editor TinyMCE, tem diversos formatos e parâmetros que você pode configurar. Você pode consultar todos eles em: TinyMCE – formatos.

<?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 );
}
?>

Com ambos os códigos, você fica com um plugin para adicionar estilos customizados ao seu editor visual do WordPress. Para acrescentar os seus próprios estilos, você precisa substituir os formatos de estilo existentes pelos seus próprios, ou simplesmente acrescentar novos estilos. Não esqueça que precisará de acrescentar os estilos ao CSS também.

Post: Paulo Faustino

daviwp

Meu nome é Davi Alves desenvolvedor web e WordPress developer, residente de Belo Horizonte, sou um dos organizadores do WordCamp evento oficial do WordPress em BH e co-fundador do Belo Horizonte WordPress Group juntamente com o fundador Mateus Neves, sou articulista de alguns sites, e fundador do daviwp.com, aqui compartilho conhecimentos para toda galera aficionada em WordPress.