Usar estilos en el editor visual TinyMCE de WordPress

Ya vimos como usar shortcodes en WordPress para crear cajas de texto, otra opción podría ser configurar el editor visual (TinyMCE) de wordpress para usar un estilo que tengamos en nuestro tema, esta vez el estilo se aplica como <p class=”nombrestilo”>

Una opción rápida es instalar el plugin TinyMCE Advanced que aparte darnos alguna funcionalidad extra nos permite agregar un botón de estilos (por defecto no se muestra y habría que ir a Ajustes->TinyMCE Advanced para hacerlo)

después habria que ir al fichero functions.php de tu theme y añadir

functions.php

add_editor_style();

está línea lo que nos permite es poder usar un fichero llamado editor-style.css dentro del editor visual de tal forma que lo que vamos escribiendo y usando lo veamos tal y como lo veríamos en la web. Con este plugin, además, nos permite mostrar en la lista desplegable los estilos aquí mostrados.

Así que creamos el fichero editor-style.css y añadimos los estilos que queremos que se muestren (no hace escribir el código solo con el nombre vale) de esta forma (reconozco que a mi así no me funciona, lo que hago es añadir el css de las clases que me interesen y así sí que me funciona)

editor-style.css

.boxinfo {}

evidentemente el código entero si debe estar dentro de los estilos de nuestra web, por ejemplo en style.css

style.css

.boxinfo    {
	background-color: green;
	width: 500px;
}

y ya está

Otra forma de hacerlo sin necesidad de plugin es añadiendo a functions.php lo siguiente

functions.php

function tinymcelinea2( $buttons ) {
  array_unshift( $buttons, 'styleselect' );
  return $buttons;
}
add_filter( 'mce_buttons_2', 'tinymcelinea2' );
 
function antesdetinymce( $settings ) {
  $settings['theme_advanced_blockformats'] = 'p,a,div,span,h1,h2,h3,h4,h5,h6,tr';
  $style_formats = array(
      array( 'title' => 'nombre clase1',   'inline' => 'span',  'classes' => 'clase1' ),
      array( 'title' => 'nombre clase2',   'inline' => 'span',  'classes' => 'clase2 otraclase' ),
      array( 'title' => 'nombre clase3',   'inline' => 'span',  'classes' => 'clase3' ),
      array( 'title' => 'Otras Opciones' ),
      array( 'title' => 'Box Info',        'block'    => 'div',  'classes' => 'boxinfo' ),
      array( 'title' => 'Box Imp',         'block'    => 'div',  'classes' => 'boximp' )
  );
  $settings['style_formats'] = json_encode( $style_formats );
  return $settings;
}
add_filter( 'tiny_mce_before_init', 'antesdetinymce' );

La primera función añade la lista de estilos a la barra de botones en la segunda linea, al comienzo

La segunda función por un lado nos permite añadir tags a la lista de formato (en mi caso a, span y tr se ven en blanco así que será que no son aceptadas) la siguiente instrucción crea un array con los estilos que queremos que se muestren, fijaros que cada subarray tiene tres parámetros, el primero es el nombre descriptivo de la clase el segundo así por lógica es la forma de actuar al pulsar, es decir… así como las tres primeras clases se pueden usar a palabras sueltas al ser inline, los dos últimos no ya que afecta a todo el bloque al estar en block (span y div se refieren al tag a  usar)  Si por ejemplo usásemos ‘block’=>span pues colocaría todo el bloque de texto entre las etiquetas span.

Finalmente el tercer parámetro es la o las clases a aplicar

Si solo se usa un parámetro titulo como es en el caso de Otras Opciones simplemente colocará una cabecera para las siguientes opciones

El usuario eee nos envía un truco (Cuidado que en el comentario faltan unas comillas para que funcione) que funciona a la perfección lo malo es que incluye todo el css de la web y puede afectar a algo que no queramos: