Añadir estilos personalizados al editor TinyMCE de WordPress

estilos formatos wordpressCuando construimos un sitio web que posteriormente va a manejar una persona sin conocimientos en CSS o HTML, el editor de WordPress puede quedar escaso. ¿Qué ocurre si el usuario quiere un título con un determinado color, un determinado margen y un determinado tamaño que no aparece en los estilos por defecto? Añadiendo unas líneas de código podremos hacer que aparezca un menú desplegable en el editor con todos los formatos de estilo que deseemos añadir.

Paso 1: Añade lo siguiente a functions.php:

add_filter( 'mce_buttons_2', 'my_mce_buttons_2' );

function my_mce_buttons_2( $buttons ) {
    array_unshift( $buttons, 'styleselect' );
    return $buttons;
}

Paso 2: Justo debajo añade un array con tus estilos personalizados:

add_filter( 'tiny_mce_before_init', 'my_mce_before_init' );

function my_mce_before_init( $settings ) {

    $style_formats = array(
    	array(
    		'title' => 'Enlace',
    		'selector' => 'a',
    		'classes' => 'enlace'
    	),
        array(
        	'title' => 'Caja',
        	'block' => 'div',
        	'classes' => 'caja',
        	'wrapper' => true
        ),
        array(
        	'title' => 'Negrita y rojo',
        	'inline' => 'span',
        	'styles' => array(
        		'color' => '#f00',
        		'fontWeight' => 'bold'
        	)
        )
    );

    $settings['style_formats'] = json_encode( $style_formats );

    return $settings;

}

Observa que en el array podemos incluir las siguientes opciones:

  1. title [obligatorio]: nombre del estilo que aparecerá en el editor.
  2. selector | block | inline [obligatorio]: selector limita el estilo a una etiqueta HTML específica, block crea un nuevo elemento bloque al que aplicarle el estilo, mientras que inline crea un nuevo elemento en línea.
  3. classes [opcional]: lista de clases, separadas por espacios, que se pueden aplicar al elemento.
  4. styles [opcional]: array de estilos en línea para aplicar al elemento (los atributos formados por dos palabras se escriben así: font-weight > fontWeight).
  5. attributes [opcional]: asigna atributos al elemento con la misma sintaxis que los estilos.
  6. wrapper [opcional, false por defecto]: si se establece a true, crea un nuevo bloque alrededor de cualquier elemento bloque seleccionado.

Nota: classes y styles son opcionales, pero uno de los dos debe estar presente en el array.

Paso 3: A continuación, crea un archivo llamado editor-style.css en la carpeta de tu tema y añádelo al editor visual:

add_action( 'admin_init', 'add_my_editor_style' );

function add_my_editor_style() {
	add_editor_style();
}

Todos los estilos que contenga editor-style.css serán los que se aplicarán en el editor visual. Deben tener el mismo nombre que anteriormente le hemos dado classes o styles en el array, por ejemplo:

enlace{
        color: #DDD;
        font-size: 18px;
        text-transform: uppercase;
}
¿Te ha gustado el artículo?
1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (1 votos, promedio: 4,00 sobre 5)
Loading...
Artículo escrito por

¡Exprésate! Dejanos tu comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

2 Comentarios

Derzz Ale

Genial

Carlos

Voy a probarlo, tiene muy buena pinta y llevo tiempo buscándolo....