Caso você esteja criando Temas WordPress para vender, quer você esteja apenas criando temas para os seus clientes e/ou para os seus projetos na internet, é sempre necessário ter em consideração que a grande maioria dos usuários não tem conhecimentos sobre HTML, muito menos de PHP. Seus clientes provavelmente não têm, correto? Para o ajudar a ultrapassar essa questão, e providenciar diversos tipos de estilos diferentes que tanto os seus usuários como os seus clientes possam usar, você pode adicionar novos estilos ao editor visual TinyMCE do WordPress, garantindo que esses mesmos elementos estão funcionando corretamente, e permitem 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ções, e deram algumas dicas de como os colocar a trabalhar em cima do seu WordPress, facilmente.
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 simplesmente HTML. Se seus usuários são clientes ou simplesmente usuários comuns que não entendem nada de HTML e esquecem rapidamente quais os códigos HTML para estilizarem melhor seus conteúdos, a melhor forma de lhes providenciar essas soluções, é integrando essas funcionalidades no editor visual do WordPress. Adicionar estilizações no editor WYSIWYG (TinyMCE) do WordPress, irá permitir ao usuário estilizar os elementos de texto com o CSS correto, sem que na verdade tenham de ser preocupar com os códigos a usar. O usuário irá seleccionar apenas o texto que deseja, e aplicar as estilizações de cor e formatação que bem desejar.
PLUGIN DE ESTILOS
Adicionar estilos customizados ao editor TinyMCE do WordPress é um processo na verdade bem simples. Em baixo 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 em cima. Os estilos CSS são colocados num ficheiro à parte, dentro da pasta do plugin. Esta folha de estilos CSS é chamado do 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
A solução abaixo é uma apenas uma solução de estilos customizados para aplicar no seu editor visual do WordPress, mas apresenta algumas limitações. O código abaixo 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 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.
Até Já!
