Usar estilos en el editor visual TinyMCE de WordPress

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

[codesyntax lang=”php” title=”functions.php”]

[/codesyntax]

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)

[codesyntax lang=”css” title=”editor-style.css”]

[/codesyntax]

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

[codesyntax lang=”css” title=”style.css”]

[/codesyntax]

y ya está

Estilos en editor visual TinyMCE wordpress
Los otros estilos que aparecen… me pareció leer por ahí que son propios del entorno y para borrarlos habría que ir a wp-includes/js/tinymce/themes/advanced/skins/wp-theme/content.css y eliminarlos de allí

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

[codesyntax lang=”php” title=”functions.php”]

[/codesyntax]

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

Estilos en editor visual tinymce wordpess
Está última opción le veo mejores posibilidades, solo hay que tocar un archivo, no sobrecargas de plugins, te permite tener los estilos en el orden que tú quieras…

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:

Como los ficheros “style.css” (del tema) y “editor-style.css” están en la misma carpeta, puedes hacer una llamada import desde esta última a tu hoja de estilo principal y te ahorras tener que estar escribiendo todos los estilos. Así:

El fichero “editor-style” solo contiene este código:
@import url(“style.css”);
y carga todos los estilos de “style.css” en tu editor TinyMCE

Nota: Ojo que los estilos anidados del tipo #content .blog_box ol, no se aplicarán.

8 Responses to “Usar estilos en el editor visual TinyMCE de WordPress”

  1. Aprendiz

    Me alegro que te haya servido, la verdad es que a mi me está sirviendo de mucha utilidad el poder añadir los estilos de esta manera, facilita mucho las cosas :)

    Responder
  2. Marcos

    MUCHÍSIMAS GRACIAS!

    Hacía mucho tiempo que necesitaba algo así. Me has ahorrado una montonera de tiempo poniendo los estilos “a mano”..

    Buf, de verdad, te estoy realmente agradecido.

    Usé la segunda opción (y no entra en contradicción con el T. advanced).

    Un gran abrazo.

    Responder
  3. Aprendiz

    Me alegro que te haya servido, si yo también tengo la segunda opción. La verdad son esas cosas que lo buscas cuando te interesa pero luego se te olvida… por eso dije vamos a ponerlo por aquí que siempre es útil tenerlo a mano jeje.

    un saludo :)

    Responder
  4. eee

    TRUCO:
    Como los ficheros “style.css” (del tema) y “editor-style.css” están en la misma carpeta,
    puedes hacer una llamada import desde esta última a tu hoja de estilo principal y te ahorras tener que estar escribiendo todos los estilos. Así:
    El fichero “editor-style” solo contiene este código:
    @import url(style.css);
    y carga todos los estilos de “style.css” en tu editor TinyMCE

    Nota: Ojo que los estilos anidados del tipo
    #content .blog_box ol, no se aplicarán.

    Responder
  5. Miguel

    No es necesario tener instalado el plugin TinyMCE Advanced. Basta añadir lo siguiente al archivo functions.php para que funcione:

    function my_mce_buttons_2($buttons)
    {
    array_unshift($buttons, 'styleselect');
    return $buttons;
    }
    add_filter('mce_buttons_2', 'my_mce_buttons_2');
    add_editor_style('editor-style.css');

    Responder
  6. Aprendiz

    Sí, tienes toda la razón, la verdad que desinstale el advanced por no me acuerdo que motivo, pero seguro que sería por alguna incompatibilidad y los estilos me seguían funcionando igual :)

    Gracias

    Responder

Deja un comentario

  • (will not be published)


9 + 6 =