Você não pode aprimorar a lista suspensa formatselect . Mas você pode melhorar com o gancho tiny_mce_before_init o segundo drop down styleselect , há esconder em uma instalação padrão do WordPress.
A documentação lista todos os padrões e possibilidades.
- inline - Nome do elemento inline para produzir, por exemplo, “span”. A seleção atual de texto será envolvida nesse elemento in-line.
- block - Nome do elemento de bloco a ser produzido, por exemplo, "h1". Os elementos de bloco existentes na seleção são substituídos pelo novo elemento de bloco.
- seletor - padrão de seletor CSS 3 para encontrar elementos na seleção por. Isso pode ser usado para aplicar classes a elementos específicos ou coisas complexas, como linhas ímpares em uma tabela.
- classes - Lista de classes separadas por espaços para aplicar os elementos selecionados ou o novo elemento inline / block.
- styles - Nome / objeto de valor com itens de estilo CSS para aplicar, como cores, etc.
- attributes - Nome / valor do objeto com atributos a serem aplicados aos elementos selecionados ou ao novo elemento inline / block.
- exact - Desativa os estilos semelhantes de mesclagem recurso quando usado. Isso é necessário para alguns problemas de herança CSS como decoração de texto para sublinhado / rasurado.
- wrapper - Estado que informa que o formato atual é um formato de contêiner para bloco elementos. Por exemplo, um wrapper div ou blockquote.
O botão Estilo
Observe que, por padrão, a lista suspensa Estilo está oculta no WordPress. No início, adicione o botão para formatos personalizados a uma barra de menu do TinyMCE, na linha de exemplo 2 com o gancho mce_buttons_2 .
add_filter( 'mce_buttons_2', 'fb_mce_editor_buttons' );
function fb_mce_editor_buttons( $buttons ) {
array_unshift( $buttons, 'styleselect' );
return $buttons;
}
Os estilos personalizados
Em seguida, aprimore o menu suspenso desse botão. Também é útil a aprovação por meio de valor adicional na matriz, consulte o códice para este exemplo.
/**
* Add styles/classes to the "Styles" drop-down
*/
add_filter( 'tiny_mce_before_init', 'fb_mce_before_init' );
function fb_mce_before_init( $settings ) {
$style_formats = array(
array(
'title' => 'Download Link',
'selector' => 'a',
'classes' => 'download'
),
array(
'title' => 'My Test',
'selector' => 'p',
'classes' => 'mytest',
),
array(
'title' => 'AlertBox',
'block' => 'div',
'classes' => 'alert_box',
'wrapper' => true
),
array(
'title' => 'Red Uppercase Text',
'inline' => 'span',
'styles' => array(
'color' => 'red', // or hex value #ff0000
'fontWeight' => 'bold',
'textTransform' => 'uppercase'
)
)
);
$settings['style_formats'] = json_encode( $style_formats );
return $settings;
}
Resultado
Menususpensoavançado
Vocêtambémpodeaprimoraromenususpensocomummenuemárvore.Crieovardafontedeexemploacimacommaisestruturanamatriz,comoafonteaseguir.
$style_formats=array(array('title'=>'Headers','items'=>array(array('title'=>'Header1','format'=>'h1','icon'=>'bold'),array('title'=>'Header2','format'=>'h2','icon'=>'bold'))),array('title'=>'DownloadLink','selector'=>'a','classes'=>'download'));Para mais possibilidades e parâmetros, veja os valores padrão do campo suspenso Formato de estilo (escreva em javascript).
var defaultStyleFormats = [
{title: 'Headers', items: [
{title: 'Header 1', format: 'h1'},
{title: 'Header 2', format: 'h2'},
{title: 'Header 3', format: 'h3'},
{title: 'Header 4', format: 'h4'},
{title: 'Header 5', format: 'h5'},
{title: 'Header 6', format: 'h6'}
]},
{title: 'Inline', items: [
{title: 'Bold', icon: 'bold', format: 'bold'},
{title: 'Italic', icon: 'italic', format: 'italic'},
{title: 'Underline', icon: 'underline', format: 'underline'},
{title: 'Strikethrough', icon: 'strikethrough', format: 'strikethrough'},
{title: 'Superscript', icon: 'superscript', format: 'superscript'},
{title: 'Subscript', icon: 'subscript', format: 'subscript'},
{title: 'Code', icon: 'code', format: 'code'}
]},
{title: 'Blocks', items: [
{title: 'Paragraph', format: 'p'},
{title: 'Blockquote', format: 'blockquote'},
{title: 'Div', format: 'div'},
{title: 'Pre', format: 'pre'}
]},
{title: 'Alignment', items: [
{title: 'Left', icon: 'alignleft', format: 'alignleft'},
{title: 'Center', icon: 'aligncenter', format: 'aligncenter'},
{title: 'Right', icon: 'alignright', format: 'alignright'},
{title: 'Justify', icon: 'alignjustify', format: 'alignjustify'}
]}
];
Adicionar folha de estilo personalizada ao editor
Agora é o último ponto, que você inclui o css personalizado para este formato, através do gancho mce_css .
/**
* Apply styles to the visual editor
*/
add_filter( 'mce_css', 'fb_mcekit_editor_style');
function fb_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__ ) ) . '/my-editor-styles.css';
return $url;
}
Não se esqueça de adicionar também estas regras de estilo à folha de estilo do front-end.
Remover o botão "Formatar"
Como acessório, você pode remover o botão suspenso formatselect através da verificação do valor na matriz de botões. Adicione a seguinte fonte à função fb_mce_editor_buttons no gancho mce_buttons_2 .
$value = array_search( 'formatselect', $buttons );
if ( FALSE !== $value ) {
foreach ( $buttons as $key => $value ) {
if ( 'formatselect' === $value )
unset( $buttons[$key] );
}
}