Añadir desplegable de estilos al editor de WordPress

WordPress incluye el editor WYSIWYG  TinyMCE, pero no incluye todos los botones ni todas las funcionalidades que ofrece este potente editor.

En concreto es muy útil el desplegable de estilos que viene desactivado de serie.

No sólo los editores que no tengan conocimientos de CSS podrán sacar partido de esta nueva funcionalidad, sino que cualquier persona verá mejorada la creación y edición de material ya que de esta forma seleccionamos el texto y aplicamos el estilo viendo inmediatamente como quedará (por eso WYSIWYG).

Al final el objetivo es tener un nuevo desplegable en la barra de herramientas.

desplegable de estilos

Para poder utilizar esta funcionalidad podemos optar por instalar un plugin como tinymce advanced, pero si no nos interesan tantas opciones podemos crearnos un plugin sencillito que añada esta funcionalidad concreta.

Buscando un poco, eso es lo que me encontré, un tutorial donde dice como hacer exactamente eso.

Este post y plugin estan sacados del  tutorial que puedes encontrar en wptuts.

Para empezar, preparamos el plugin en una carpeta, ya que pondremos también ahí los estilos.

plugin-estrucutra

Un buen nombre es custom-css-editor…Dentro del fichero donde pondremos el plugin (custom-css-editor.php) empezamos por que los estilos (custom-editor-styles.css) estén disponibles para el editor.

Utilizamos el filtro concreto que sirve para eso (mce_css).

Luego activamos el selector

Utilizamos el filtro mce_buttons_2 para añadir el selector de estilos al principio de la barra avanzada.

De momento el selector tendrá unos estilos, pero no será los que nosotros queremos, para añadir los estilos que luego incorporaremos en la hoja de estilos hacemos lo siguiente

En esta ocasión el filtro que se ocupa de añadir los estilos es tiny_mce_before_init.

El formato de cada uno de los elementos del array usa la sintaxis de TinyMCE para definir las clases y como serán aplicadas en la selección (formatos de TinyMCE).

Nombre Función
inline Nombre del elemento inline a generar, p.ej “span”. El texto seleccionado se verá envuelto en este elemento inline.
block Nombre del elemento en bloque a generar, por ejemplo “h1″. Los bloques existentes en la selección se verán reemplazados por el nuevo elemento en bloque.
selector Patrón de selección CSS 3 para encontrar los elementos en la selección.
classes Lista separada por espacios de clases a aplicar a los elementos seleccionados o a los nuevos elementos inline/bloque que generemos.
styles Nombre/valor con los estilos CSS a aplicar directamente.
attributes Nombre/valor con atributos a a aplicar a los elementos seleccionados o a los nuevos elementos inline/bloque que generemos.
wrapper Afirmamos que el formato sera un contenedor para elementos de bloque. Por ejemplo, un div o blockquote.

Finalmente hacemos accesible (si no lo esta ya) estos estilos al front-end para que la entrada se vea tal y como en el editor.

Faltan los estilos a aplicar en el fichero custom-editor-styles.css. Esto es a gusto del consumidor. Por ejemplo:

El plugin lo puedes descargar aquí.