Formatação personalizada do editor TinyMCE no WordPress

Às vezes, ao escrever um bloco de texto usando o editor do WordPress, você precisa que ele tenha uma certa aparência, geralmente fazemos isso adicionando estilos a pedaços de texto, mas nem sempre queremos que nossos clientes tenham que abrir o editor de texto e faça isso manualmente.

Neste exemplo, vamos criar um pequeno filtro que você pode adicionar ao seu functions.phparquivo para dar ao usuário algumas opções extras de formatação, para adicionar um estilo de parágrafo ‘Lead’ personalizado.

Usando a formatação personalizada TinyMCE

Aqui está um exemplo super rápido do filtro em ação. Ele mostra a você:

• Como alternar a barra de ferramentas para que você possa ver o menu Formatos
• Como aplicar a formatação usando o menu Formatos
• Como limpar os estilos

Formatação TinyMCE em ação

O código

O código é realmente simples, basta conectar tiny_mce_before_inite adicionar seu estilo personalizado ao style_formatsarray. Certifique-se de incluir um título, o tipo de elemento que deseja usar e, o mais importante, a classe.

function wholesomecode_tinymce_formatting( $settings) {
    $style_formats = array(
        array(
            'title'   => 'Lead Paragraph',
            'block'   => 'p',
            'classes' => 'lead',
            'wrapper' => false,
        ),
    );
    $settings['style_formats'] = json_encode( $style_formats );
    return $settings;
}
add_filter( 'tiny_mce_before_init', 'wholesomecode_tinymce_formatting' );

Estilos

Claro, nada vai acontecer sem um pouco de estilo. Certifique-se de adicionar os estilos ao seu WordPress principal styles.csspara que seu Lead seja exibido no Front End e também certifique-se de registrar uma folha de estilo do editor para que o código seja exibido no editor (você pode usar add_editor_style()para fazer isso).

.lead {
    font-size: 120%;
}