Aprende un poco más sobre el editor TinyMCE de WordPress

Edita tus publicaciones con estilo y más diseño directo en el editor TINYMCE.

WordPress en sus ultimas versiones ha liberado y extendido la integración de estilos en el editor TINYMCE, esto significa una gran ventaja ya que podemos ampliar la gama de recursos de diseño al crear un artículo.

Ekiline integra los estilos predeterminados de bootstrap y añade otras características para sacar el máximo provecho a todos los componentes.

Extender el editor TinyMCE

  1. En tu panel de edición, ubica el botón que abre las demás herramientas y da clic.
  2. Este inmediatamente te mostrará una segunda fila de iconos y un selector llamado “Formatos”
  3. Este selector presentará cada estilo predeterminado para que trabajes con bootstrap y elementos exclusivos de Ekiline.

Trabajar con el editor TINYMCE requiere práctica y observación para conseguir los resultados deseados.

En ocasiones este se comporta diferente por factores como el ordenador o dispositivo, el sistema operativo, el navegador y su versión.

Una de las mejores prácticas, es que todos los contenidos, previos a publicar, sean planeados y generados en un archivo electrónico independiente, con algún software de procesamiento de textos (como word), y después solo se agreguen en wordpress durante la publicación en linea.

Consejo: al copiar y pegar contenidos, hazlo como texto sin formato. (Existen librerías o plugins compatibles con el editor que pueden auxiliarnos a limpiar estos textos).

Otra característica del editor TINYMCE es la generación de espacios dobles y sencillos, y nos parece importante mencionarlo para que te vuelvas un maestro al dar formato a tus textos:

Después de un párrafo, al teclear ENTER se generará un espacio doble, en HTML esto equivale a un salto de linea entre dos párrafos, es decir; el resultado que obtendrás serán 2 etiquetas de párrafo separadas una de la otra.

<p>mi párrafo uno</p>
<p>mi párrafo dos</p>

Si lo que necesitas es un espacio sencillo, debes teclear SHIFT + ENTER, en HTML esto equivale a un salto de linea sencilla dentro del mismo párrafo.

<p>mi párrafo uno 
<br/> con un salto sencillo</p>
<p>mi párrafo dos</p>

Esta distinción es esencial, pues trabajar con estilos implica conocer si el estilo a asignar será de bloque o individual.


¿Estilos de selección en bloque?

Estos estilos no diferencian un párrafo de otro, tomarán el texto seleccionado aunque sea un fragmento y a todo ese texto le aplicarán un cambio. El ejemplo habitual es cuando creas un listado.

¿Estilos de selección individuales?

Estos estilos solo toman el objeto seleccionado y a este le aplican el estilo o formato. El ejemplo es cuando seleccionas solo una palabra y le asignas un color.

Te recomendamos realizar muchos ejercicios en información que no sea pública.


Estilos incorporados al editor TinyMCE en Ekiline:

Independiente de los estilos y formatos preestablecidos en el editor TinyMCE, existen 8 grupos de estilos CSS y 13 funciones que amplían las capacidades de edición en wordpress.

Con tu cursor sobre cada nombre desplegará un submenú con el que podrás asignar un estilo o característica a los elementos que compondrán tu página.

 

  1. Tipografía
    Da formato HTML a textos, asigna etiquetas de marcado por bloque y selección individual.


  2. Ampliar texto B4
    Crece la proporción del texto con clases de Bootstrap a selecciones individuales.


  3. Colores B4
    Asigna color a textos y añade color a fondos por elemento seleccionado.


  4. Botones B4
    Crea y da formato a los enlaces con estilos de bootstrap.


  5. Alertas B4
    Crea Alertas de bootstrap a un bloque de elementos seleccionados.


  6. Retícula (grid) B4
    Arma y distribuye el formato de la información con contenedores y columnas, asignar márgenes y espacios con el método Bootstrap 4.


  7. Listas y tablas B4
    Da formato a las tablas con Bootstrap 4.


  8. Utilidades B4
    Complementos recurrentes para dar formato a elementos como imágenes o elementos por separado.


 

Referencia: B4 Elemento derivado de Bootstrap 4.