O editor "clássico" TinyMCE tem dois menus suspensos: formatselect
para estilos de parágrafo e styleselect
para estilos de caracteres - que também podem conter estilos de parágrafos, para fazer É mais confuso. A configuração no WordPress, por padrão, mostra apenas o menu suspenso formato . Se você aplicar uma folha de estilo personalizada ao editor, o TinyMCE poderá usá-la para pegar os nomes das classes e adicioná-los ao menu suspenso estilo - mas isso não funcionou toda vez para mim.
Desde a versão 3.0, você pode chamar add_editor_style()
no seu functions.php
para adicionar uma folha de estilo ao editor. Por padrão, é editor-style.css
no diretório do seu tema. Antes de 3.0, você precisa se conectar ao filtro mce_css
para adicionar o URL à sua folha de estilo do editor. Isso terminará em o valor de configuração content_css
TinyMCE .
Para adicionar o menu suspenso estilo , a opção styleselect
deve aparecer em uma das matrizes de configuração da barra de botões ( theme_advanced_buttons[1-4]
no TinyMCE, filtrado por mce_buttons_[1-4]
no WordPress). A lista de formatos de blocos é controlada por a opção theme_advanced_blockformats
do TinyMCE , que você pode adicionar para o array de controle no filtro tiny_mce_before_init
. Se você quiser personalizar os nomes do menu suspenso estilo (não apenas os nomes das classes CSS), veja a opção theme_advanced_styles
. Você também pode usar a opção style_formats
mais avançada, que oferece mais flexibilidade para definir os estilos .
O código PHP relevante com todos os ganchos e configuração padrão está em wp-admin/includes/post.php
, na função wp_tiny_mce()
. Tudo junto, sua configuração poderia ser assim:
add_action( 'after_setup_theme', 'wpse3882_after_setup_theme' );
function wpse3882_after_setup_theme()
{
add_editor_style();
}
add_filter('mce_buttons_2', 'wpse3882_mce_buttons_2');
function wpse3882_mce_buttons_2($buttons)
{
array_unshift($buttons, 'styleselect');
return $buttons;
}
add_filter('tiny_mce_before_init', 'wpse3882_tiny_mce_before_init');
function wpse3882_tiny_mce_before_init($settings)
{
$settings['theme_advanced_blockformats'] = 'p,h1,h2,h3,h4';
// From http://tinymce.moxiecode.com/examples/example_24.php
$style_formats = array(
array('title' => 'Bold text', 'inline' => 'b'),
array('title' => 'Red text', 'inline' => 'span', 'styles' => array('color' => '#ff0000')),
array('title' => 'Red header', 'block' => 'h1', 'styles' => array('color' => '#ff0000')),
array('title' => 'Example 1', 'inline' => 'span', 'classes' => 'example1'),
array('title' => 'Example 2', 'inline' => 'span', 'classes' => 'example2'),
array('title' => 'Table styles'),
array('title' => 'Table row 1', 'selector' => 'tr', 'classes' => 'tablerow1'),
);
// Before 3.1 you needed a special trick to send this array to the configuration.
// See this post history for previous versions.
$settings['style_formats'] = json_encode( $style_formats );
return $settings;
}