Formato personalizado del editor TinyMCE en WordPress

A veces, cuando se escribe un bloque de texto con el editor de WordPress, es necesario que se vea de una determinada manera. Por lo general, hacemos esto agregando estilos a los fragmentos de texto, pero no siempre queremos que nuestros clientes tengan que abrir el editor de texto. y hazlo manualmente.

En este ejemplo, crearemos un pequeño filtro que puede agregar a su functions.phparchivo para darle al usuario algunas opciones de formato adicionales, para agregar un estilo de párrafo de ‘Lead’ personalizado.

Uso del formato TinyMCE personalizado

Aquí hay un ejemplo súper rápido del filtro en acción. Te muestra:

• Cómo alternar la barra de herramientas para que pueda ver el menú Formatos
• Cómo aplicar el formato usando el menú Formatos
• Cómo borrar los estilos

Formato TinyMCE en acción

El código

El código es realmente simple, solo conecte tiny_mce_before_inity agregue su estilo personalizado a la style_formatsmatriz. Asegúrese de incluir un título, el tipo de elemento que desea usar y, lo que es más importante, la clase.

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

Por supuesto, nada pasará sin un poco de estilo. Asegúrese de agregar los estilos a su WordPress principal styles.csspara que su cliente potencial se muestre en el front-end, y también asegúrese de registrar una hoja de estilo del editor para que el código se muestre en el editor (puede usar add_editor_style()para hacer esto).

.lead {
    font-size: 120%;
}