Cómo modificar los estilos css del editor TinyMCE en Wordress

Hay veces que necesitamos modificar el estilo del editor TinyMCE de WordPress, ya que muchos usuarios finales tienen problemas para hacerse una idea de como quedará el contenido de la web antes de publicarla.

Pues es muy sencillo. Debemos añadir al archivo functions.php de nuestro tema (o tema hijo) la siguiente linea

//añado esta línea para crear un estilo propio para el editor TinyMCE
add_editor_style();

y después creo una archivo llamado «editor-style.css», donde podré modificar los estilos que necesite, por ejemplo:

html .mceContentBody {
	max-width:584px;
}
h2 {
	font-size: 1.5em;
	color: #960;
}

Y esto es todo, un pequeño truco que puede ser muy útil

 

 

4 comentarios en “Cómo modificar los estilos css del editor TinyMCE en Wordress”

  1. Rastrillo de Artesania

    Hola Jordi,

    Primero muchas gracias por estas informaciones. Luego, una duda. Yo no encuentro en mi Tinymce ese fichero de «functions.php». El único .php que encuentro en la carpeta del plugin es: default.php.

    Seguramente es una pregunta muy básica, pero es que no tengo ni idea de esto y voy aprendiendo como los monos, a costa de repetir lo que hacen otros.

    Muchas gracias.

  2. Rastrillo de Artesania

    Perdona, y otros dos más; TADV-Admin y Tinymce-Advance. Igual la diferencia está en que el pluggin es TinyMCE Advance?

    Muchas gracias de nuevo y siento ser tan plasta.

    1. Hola amigo de Rastrillo de artesanía. No has de añadirlo en ningún archivo de la carpeta del plugin. Debes buscar tu archivo functions.php dentro del tema que usas. Si es el por defecto de WordPress 3.4 está en: wp-content/themes/twentyeleven.
      Te recomiendo mucho que trabajes con temas hijos («child themes»), ya que cualquier actualización que recibas de WordPress como de sus temas, no te afectarán sobre las modificaciones que hagas.
      Espero que te sirva de ayuda

  3. Rastrillo de Artesania

    Ah!, vale. El tema que utilizo (no es el de rastrillo, sino otro el que estaba modificando), creo que ya tiene eso por defecto, porque el diseñador y desarrollador, recomienda hacer todas las modificaciones en dicho fichero.

    Muchíiiisimas gracias.

Deja un comentario

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

14 + 8 =

Empiezapori es agente digitalizador de la ayuda Kit Digital

Somos agente digitalizador de la ayuda Kit Digital. Te ayudamos en la creación de tu sitio web o comercio electrónico y gestionamos tus redes sociales.
Llámanos (93 470 00 37) o rellena el formulario y nos pondremos en contacto contigo. Te ayudamos a gestionar la ayuda.
Para más información y contacto haz clic en el siguiente enlace.

Scroll al inicio