Alguma vez você precisou utilizar uma cor customizada em seus textos no WordPress e esta não ficava fixada na paleta de cores? Esses dias eu precisei editar alguns textos e tive que anotar a cor hexadecimal aqui para digitar quando eu precisava, perdi a paciência e fui pesquisar como adicionar cores à paleta do editor WYSIWYG sem utilizar plugins.

Adicionando cores customizadas ao editor WYSIWYG do WordPress

Vale ressaltar que por conta das últimas atualizações no WordPress essa modificação só funciona a partir da versão 3.9.

Também é possível editar o número de linhas e colunas da paleta, achei super prático.

Paleta de cores do editor com quantidade de linhas e colunas modificadas e com cor personalizada adicionada.

Pode parecer bobagem, mas foi difícil encontrar essa solução, por isso acredito que vá ajudar muita gente que trabalha com o WordPress. Para adicionar cores e modificar número de colunas e linhas na paleta do editor, você vai precisar editar o arquivo FUNCTIONS.PHP do tema adicionando as linhas abaixo no final do arquivo.

function my_mce4_options( $init ) {
$default_colours = ‘
“000000”, “Black”,
“993300”, “Burnt orange”,
“333300”, “Dark olive”,
“003300”, “Dark green”,
“003366”, “Dark azure”,
“000080”, “Navy Blue”,
“333399”, “Indigo”,
“333333”, “Very dark gray”,
“800000”, “Maroon”,
“FF6600”, “Orange”,
“808000”, “Olive”,
“008000”, “Green”,
“008080”, “Teal”,
“0000FF”, “Blue”,
“666699”, “Grayish blue”,
“808080”, “Gray”,
“FF0000”, “Red”,
“FF9900”, “Amber”,
“99CC00”, “Yellow green”,
“339966”, “Sea green”,
“33CCCC”, “Turquoise”,
“3366FF”, “Royal blue”,
“800080”, “Purple”,
“999999”, “Medium gray”,
“FF00FF”, “Magenta”,
“FFCC00”, “Gold”,
“FFFF00”, “Yellow”,
“00FF00”, “Lime”,
“00FFFF”, “Aqua”,
“00CCFF”, “Sky blue”,
“993366”, “Brown”,
“C0C0C0”, “Silver”,
“FF99CC”, “Pink”,
“FFCC99”, “Peach”,
“FFFF99”, “Light yellow”,
“CCFFCC”, “Pale green”,
“CCFFFF”, “Pale cyan”,
“99CCFF”, “Light sky blue”,
“CC99FF”, “Plum”,
“FFFFFF”, “White”
‘;
$custom_colours = ‘
“fe5e08”, “Cor do H1”
‘;
$init[‘textcolor_map’] = ‘[‘.$default_colours.’,’.$custom_colours.’]’;
$init[‘textcolor_rows’] = 6; // Número de Linhas
$init[‘textcolor_cols’] = 10; // Número de Colunas

return $init;
}
add_filter(‘tiny_mce_before_init’, ‘my_mce4_options’);

Vejam que na primeira parte estão as cores padrões (default) do editor e na segunda parte a cor personalizada que eu adicionei, nomeada como “Cor do H1”. Para novas cores você pode adicionar novas linhas.

No final do código estão as linhas que definem o número de linhas e colunas.

Espero que essa dica sirva para vocês.