Caso você esteja criando Temas WordPress para vender, ou para os seus clientes, é sempre necessário ter em consideração que a grande maioria dos usuários não tem conhecimentos sobre HTML, muito menos de PHP. Para resolver essa questão, você pode adicionar novos estilos ao editor visual TinyMCE, do WordPress, garantindo que esses mesmos elementos funcionem corretamente e permitam aos seus usuários formatar e estilizar corretamente os seus conteúdos, sem necessidade de entenderem de HTML e PHP. Recentemente, os colegas do wptuts falaram desse tipo de estilização e deram algumas dicas de como fazê-los funcionar no seu WordPress.
Como webdesigner, desenvolver web, ou mero curioso do WordPress, você pode criar diversos estilos de formatação para diversos tipos de conteúdos do WordPress. Estes estilos podem ser facilmente adicionados ao seu WordPress usando HTML. Se seus usuários são clientes ou simplesmente usuários comuns, que não entendem nada de HTML, a melhor forma de lhes providenciar essas soluções é integrando essas funcionalidades no editor visual do WordPress. Ao fazer isso, você permitirá ao usuário estilizar os elementos de texto com o CSS correto, sem a preocupação com os códigos que devem usar. O usuário irá selecionar apenas o texto que deseja, e aplicar as estilizações de cor e formatação.
Plugins de estilo
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: 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 );
}
?>
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: 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 );
}
?>
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.