Sempre que criei temas para o WordPress, senti a necessidade de permitir aos meus autores que estes também pudessem aplicar aos seus conteúdos, os estilos que criei para o tema em si.

No entanto, os meus estilos, criados especificamente para aquele tema (as minhas classes de CSS), não estavam até agora disponíveis para serem aplicados no painel de edição dos textos, de modo a manter uma coerência entre os conteúdos criados e a linha gráfica do tema.

O objectivo era que estes pudessem faze-lo sem terem que recorrer a tags de HTML ou CSS e sem terem que limitar-se aos estilos predefinidos pelo editor visual (wysiwyg) por omissão, o TinyMCE.

Isso é possível através da adição de algumas linhas de código ao ficheiro functions.php existente num tema, e da criação de um ficheiro .CSS  específico para este fim.

1. Comecemos por criar um novo ficheiro .CSS

A ideia de criar um novo ficheiro .css e não acrescentar as classes ao styles.css serve para permitir que esta técnica seja aplicada em temas que não sejam por nós desenvolvidos e, como tal, passíveis de upgrade ou mudança, não se perdendo deste modo as nossas classes e estilos pessoais existentes, uma vez que estes estarão no nosso próprio ficheiro CSS que não sofrerá alterações com upgrades ou mudanças “alienígenas”.

Chamemos-lhe mycustomstyles.css e será nele onde criaremos os estilos que pretendemos.

Estes estilos abaixo funcionam apenas como exemplos ilustrativos e servem, por exemplo, para posicionar imagens dentro de textos.

/* CSS Document */
============================================ */

.fleft {
float:left;
margin-right:8px;
}
.fright {
float:right;
margin-left:8px;
}

/* Fim de CSS
============================================ */

2. Edição do ficheiro functions.php

Tipicamente todos os temas tem este ficheiro, existente na raiz da pasta do próprio tema.
O que faremos será simplesmente acrescentar o bloco de código abaixo, no final do functions.php antes do fecho do mesmo, ou seja antes da tag ?>

Este bloco de código irá criar uma select-box (uma caixa de selecção) junto dos outros botões do editor de textos do WordPress, onde serão listadas e seleccionáveis as suas classes de CSS.

/* Custom CSS styles on WYSIWYG - Start
======================================= */

if ( ! function_exists( 'myCustomTinyMCE' ) ) :
function myCustomTinyMCE($init) {
$init['theme_advanced_buttons2_add_before'] = 'styleselect'; // Adiciona os botões no incio da linha. (theme_advanced_buttons2_add adiciona-os no fim da linha)
$init['theme_advanced_styles'] = 'Float Left=fleft,Float Right=fright'; // Especifica os estilos a aplicar pela selectbox acima criada, e que já estão definidos no mycustomstyles.css, altere e/ou acrescente os seus.
return $init;
}
endif;

add_filter('tiny_mce_before_init', 'myCustomTinyMCE' );
add_filter( 'mce_css', 'tdav_css' );

// incluir o CSS no tema.
function mycustomStyles(){
wp_enqueue_style( 'myCustomStyles', get_bloginfo('template_url').'/mycustomstyles.css', '','','all' ); // Se tiver dado ao seu ficheiros css um nome diferente do usado no exemplo, altere também aqui o nome do mesmo.
}

add_action('init', 'mycustomStyles');

/* Custom CSS styles on WYSIWYG - End
======================================= */

E com estes dois passos concluídos o seu WordPress está agora apto a permitir que os seus estilos próprios possam ser aplicados pelo editor de texto em todas as suas páginas ou posts.

Passo EXTRA:

No entanto por vezes não queremos apenas aplicar os nossos estilos. Pode haver necessidade de retirar opções ao editor, de modo a que utilizadores menos experientes não se confundam,  deixando apenas o essencial.

Para estes casos existe a possibilidade de  retirar botões ao editor de texto, deixando apenas aqueles que nos forem convenientes.

Para retirar qualquer um deles, utilizaremos uma lógica similar á do passo 2 acima descrito, incluindo mais uma linha de código dentro da condição criada no passo 2.

3. Retirar botões ao editor

Assim ao código criado no passo 2, acrescenta-se a nova linha de código já adicionada abaixo:

if ( ! function_exists( 'myCustomTinyMCE' ) ) :
function myCustomTinyMCE($init) {

// Acrescenta-se esta linha abaixo
$init['theme_advanced_disable'] = 'outdent, indent, justifyleft, justifycenter, justifyright, justifyfull, bullist, numlist, outdent, indent, fontselect, fontsizeselect, forecolor, backcolor, forecolorpicker, backcolorpicker, formatselect';

// Para remover os botões desejados
$init['theme_advanced_buttons2_add_before'] = 'styleselect'; // Adiciona os botões no incio da linha. (theme_advanced_buttons2_add adiciona-os no fim da linha)
$init['theme_advanced_styles'] = 'Float Left=fleft,Float Right=fright'; // Especifica os estilos a aplicar pela selectbox acima criada, e que já estão definidos no mycustomstyles.css, altere e/ou acrescente os seus.
return $init;
}
endif;

Nenhum código criado no ponto 2 sofreu alterações, apenas se acrescentou uma nova linha, tudo o mais deverá ser mantido como estava.

Por defeito estes são os botões existentes no TinyMCE distribuído com o Word-Press (3.0), e que podem ser retirados se assim o desejarem:

/* Botões existentes por default
* bold
* italic
* underline
* strikethrough
* justifyleft
* justifycenter
* justifyright
* justifyfull
* bullist
* numlist
* outdent
* indent
* cut
* copy
* paste
* undo
* redo
* link
* unlink
* image
* cleanup
* help
* code
* hr
* removeformat
* formatselect
* fontselect
* fontsizeselect
* styleselect
* sub
* sup
* forecolor
* backcolor
* forecolorpicker
* backcolorpicker
* charmap
* visualaid
* anchor
* newdocument
* blockquote
* separator ( | is possible as separator, too)
*/

E com isto já têm um considerável controlo sobre aquilo que os vosso users podem fazer ou não no editor de texto.

Espero ter-vos poupado a algumas catástrofes que por vezes acontecem quando damos demasiado poder a quem não o sabe usar, e que os vossos users continuem a produzir bons conteúdos, bem formatados e na linha do que foi por vós idealizado e definido aquando do desenho do tema.