Mejora el editor visual de WordPress añadiendo un botón de estilo

Aprende a añadir clases al editor visual de WordPress

¿Eres de los que cuando escriben una entrada en tu blog utiliza clases personalizadas para dar formato al texto? ¿Se te quedan cortos los botones de TinyMCE y necesitas más? En este tutorial voy a explicarte de forma muy sencilla cómo añadir clases al editor visual TinyMCE, definidas en una hoja de estilos CSS.

Lo primero que tienes que saber es que TinyMCE se puede customizar totalmente, añadiendo o quitando los botones que tú quieras, pero eso no lo vamos a ver aquí. Para hacerlo sencillo, únicamente vamos a mostrar una característica que por defecto está oculta y puede ser útil para muchos.

Activando el menú desplegable de formato

El primer paso que debemos dar es activar el styleselect, un menú desplegable donde se mostrará varios estilos predefinidos. El código sería algo así (lógicamente lo añadimos en nuestro functions.php, a ser posible en nuestro child theme):

// Con esta función añadimos el 'styleselect' al array de botones mostrados
function custom_mce_buttons_2( $buttons ) {
 array_unshift( $buttons, 'styleselect' );
 return $buttons;
}
add_filter('mce_buttons_2', 'custom_mce_buttons_2');

Lo que tenemos que entender:

  • array_unshift: añade al array de botones el botón que queramos mostrar
  • Estamos mostrándolo en la segunda barra de TinyMCE, podríamos usar mce_buttons para la primera, mce_buttons_3 o mce_buttons4 para el resto. Usamos la segunda porque podemos activarla/desactivarla desde la primera barra, y la tercera o cuarta en wordpress no vienen activadas por defecto (aunque podríamos activarlas si quisiéramos).

Como vemos en la imagen, ya aparece nuestro menú desplegable mostrando los estilos. Ahora vamos a añadir las clases que hemos definido en una hoja de estilos CSS y que utilizamos frecuentemente. Añadiré dos como ejemplo: “.txt_azul” y “.txt_rojo”, que puedo utilizar para cambiar el color de letra o cualquier otra característica que defina mediante CSS. Nuevamente, en nuestro functions.php:

function my_mce_before_init_insert_formats( $init_array ) {  
	// Definimos nuestros estilos en el array
	$style_formats = array(  
		// En cada array definimos un estilo asociado a una clase
		array(  
			'title' => '.Texto Azul',  // Título que queremos darle
			'inline' => 'span',  // Elemento que añadiremos
			'classes' => 'txt_azul',  // Clase que usaremos
		),  
		array(
			'title' => '.Texto Rojo',  
			'inline' => 'span',  
			'classes' => 'txt_rojo',
		),  		
	);
	$init_array['style_formats'] = json_encode( $style_formats );  
	return $init_array;  
} 
add_filter( 'tiny_mce_before_init', 'my_mce_before_init_insert_formats' );

Con esto conseguimos que nuestro menú desplegable muestre estas dos clases y poder aplicarlas a la selección que hagamos en el editor visual. ¿Cómo lo hará? Pondrá nuestra selección de la siguiente manera: <span class=”txt_azul”>texto de ejemplo</span>. Y así con todos los estilos que queramos.

Pero yo quiero añadir la clase a un elemento que  ya existe…

En ese caso, también es muy sencillo! El código es prácticamente el mismo, creo que no hará falta explicarlo demasiado. Únicamente deberemos cambiar la forma en que creamos el array con cada estilo, resultando así:

 array(
 'title' => 'Selector Rojo', 
 'selector' => 'h1, h2, h3, h4, h5, h6, p, strong, em',
 'classes' => 'txt_rojo',
 ),

De esta forma en nuestra selección buscará un elemento similar al que se define en ‘selector’ y, si existe, le añadirá inline la clase.

Mostrando los estilos en el editor visual

Efectivamente, el editor no entiende estas clases que estamos añadiendo, por eso no veremos resultados hasta que hagamos un preview o publiquemos la entrada. Pero sí, hay una forma muy sencilla de conseguir verlos en el editor conforme los utilizamos. Para ello deberemos crear una hoja de estilo nueva (o utilizar la que queramos, yo prefiero tenerlo más organizado) en la que le diremos a TinyMCE cómo interpretar estas clases. Esto es lo que incluiremos en nuestro fichero CSS:

body#tinymce.wp-editor .txt_azul { 
color: #36bae2;
}
body#tinymce.wp-editor .txt_rojo { 
color: #ff6565;
}

Y así con cualquier estilo que queramos visualizar. Por último quedará decirle a TinyMCE dónde se encuentra nuestro fichero CSS, así que por último añadiremos en functions.php nuestras últimas líneas de código.

function add_custom_editor_styles() {
    add_editor_style( 'nuestro-fichero.css' );
}
add_action( 'admin_init', 'add_custom_editor_styles' );

Ahora cuando lo apliquemos podremos ver los resultados en vivo!

Con esto queda explicado, espero que haya sido realmente fácil de entender. Ahora sólo queda ponerlo en práctica y añadir tantos estilos como necesites. Si te ha sido útil o tienes cualquier duda puedes dejar un comentario y trataré de ayudarte.

Comentarios

Deja un comentario

¿Quieres recibir las últimas novedades en tu e-mail?

¡GRACIAS!