El editor de texto de WordPress es el editor TinyMCE de código abierto y se distribuye bajo licencia LGPL.

Está basado en JavaScript lo que permite que se ejecute en varias plataformas y CMS como WordPress y es compatible con la mayoría de navegadores web.

El editor TinyMCE es un editor WYSIWYG que significa “What You See Is What You Get” o en español “Lo que tú ves es lo que tu obtienes” y significa que podemos escribir mientras vemos el resultado final del texto.

Y en definitiva el editor TinyMCE genera el contenido como texto, imágenes y otros elementos en código HTML y nos lo muestra de forma parecida a como quedara en nuestra página web.

El problema del editor de texto TinyMCE es que es muy básico y se nos puede quedar pequeño en cuanto a funcionalidades.

Y además los desarrolladores de WordPress con el tiempo han decidido desactivar varios botones de funciones que se suponen obsoletas pero útiles para algunos usuarios cómo Justificar texto o Subrayar en WordPress.

Asique vamos a ver un plugin para aumentar las funcionalidades de este editor, pero antes echémosle un vistazo a las opciones del editor de texto TinyMCE de WordPress.

 

TinyMCE el editor de texto de WordPress

editor de texto de wordpress

 

Tipo de Texto: El tipo de texto puede ser títulos y subtítulos, párrafos o preformateado que define un tipo de texto especial sin formato en una caja que puede mostrar tipos de código sin ejecutarlo.

Negrita: resalta el texto con negrita.

Cursiva: resalta el texto con cursiva.

Lista con viñetas: Crea una lista con puntos.

Lista numerada: Crea una lista con numeración.

Cita: Formatea el texto con un estilo en forma de cita.

Alineación izquierda: Alinea el texto a la izquierda.

Alineación centrada: Alinea el texto al centro.

Alineación derecha: Alinea el texto a la derecha.

Insertar Enlace: Crea un enlace mediante una URL en un texto o una imagen.

Borrar Enlace: Elimina un enlace.

Leer Más: Inserta una línea que define un extracto de una entrada con un botón de “Leer Más” en la página de entradas.

Más Herramientas: Muestra la segunda línea de opciones del editor de texto.

Tachado: Tacha el texto.

Línea Horizontal: crea una línea horizontal.

Color de Texto: Cambia el color del texto.

Pegar como Texto: Pega un texto sin el formato.

Limpiar Texto: Quita el formato de un texto.

Carácter Especial: Inserta un carácter especial.

Reducir Sangría: Reduce el espacio blanco del principio de un texto.

Aumentar Sangría: Aumenta el espacio en blanco del principio de un texto.

Deshacer: Deshace el último cambio.

Rehacer: Rehace el último cambio eliminado.

Atajos de Teclado: Muestra todos los atajos de teclado del editor de WordPress.

Modo de escritura sin distracción: Oculta las opciones de WordPress para dejar una lista más limpia para escribir sin distracciones, al mover el ratón hacia un lateral las opciones vuelven a aparecer.

Añadir Objeto: Inserta una imagen, video, audio o archivo de la librería multimedia.

Pestañas Visual / HTML: cambian el editor de texto de Visual a HTML. En la vista HTML podemos ver las etiquetas y el código HTML que se genera cuando le damos formato al texto.

 

editor texto html en wordpress

 

¿Era necesario que explicara la mayoría de estas opciones? Seguramente no jajaja

El caso es que faltan algunas opciones básicas como el justificado de texto y el subrayado y no es que no existan ya que estas opciones siguen funcionando con los atajos de teclado, simplemente es que han deshabilitado los botones de estas opciones.

 

Atajos del teclado de WordPress

Aquí te dejo la lista e atajos de teclado de WordPress y cómo podemos observar si están las opciones de subrayado y justificado como atajos del teclado y funcionan perfectamente.

atajos de teclado de wordpress

 

TinyMCE ADVANCED el editor de texto mejorado para WordPress

TinyMCE advanced es el plugin de WordPress que crea un editor de texto mejorado en WordPress con decenas de opciones básicas que no vienen por defecto o están desactivadas.

tinymce advanced wordpress

 

TinyMCE advanced tiene más de 2 millones de instalaciones activas y no es de extrañar muchos usuarios necesitan cambiar el tipo de letra en WordPress, justificar texto, resaltar texto con un fondo en color y otras muchas opciones que esperamos que tenga un editor de texto.

Y otras opciones un poco más avanzadas como crear tablas en WordPress de una forma sencilla y el maravilloso botón de buscar y remplazar texto.

Y lo mejor de todo es que el contenido que genera sigue siendo en HTML y no con códigos cortos, con lo que podemos usarlo donde queramos sin miedo a que si necesitamos desinstalar el plugin el contenido se elimine o se muestre de forma incorrecta en nuestras páginas y entradas.

TinyMCE advanced es gratuito y se instala desde el repositorio de WordPress Plugin > Añadir nuevo.

 

instalar tinymce advanced

 

Una vez instalado vamos a Ajustes > TinyMCE advanced para personalizar el editor de texto de WordPress y añadir los botones rápidos que necesitemos.

Podemos configurar hasta 4 barras de accesos rápidos con botones y podemos ordenar los botones arrastrándolos por el menú.

 

como justificar texto en wordpress

 

Te explico algunas opciones de TinyMCE advanced:

Menú de Editor: TinyMCE advanced crea un menú en el editor con la mayoría de las opciones para no tener que abusar de los botones de acceso rápido.

Familia de fuente: cambia el tipo de fuente del texto.

Tamaños de la fuente: Cambia el tamaño de la fuente.

Color de fondo: Configura el color del fondo del texto.

Subrayado: Subraya el texto.

Justificar: justifica el texto.

Insertar Tabla en WordPress: Crea una tabla que puedes personalizar.

crear tabla en wordpress

 

Buscar y reemplazar: busca un texto y lo remplaza por otro. (Muy útil para quitar los dobles espacios en blanco que creamos sin querer con la barra espaciadora del teclado).

Mostrar bloques: Muestra los bloques como párrafos o títulos de una forma más visual creando una línea que define cada bloque.

mostrar-los-bloques-del-editor-de-texto-en-wordpress

 

De izquierda a derecha: Cambia el método de escribir de izquierda a derecha.

De derecha a izquierda: Cambia el modo de escribir de derecha a izquierda para adaptarse a idiomas árabes y otros idiomas.

Código fuente: muestra el código HTML en una ventana emergente.

Código: texto resaltado utilizado para mostrar código fuente de programación sin que se ejecute.

Salto de páginas: crea una línea que define subpáginas dentro de una página o entrada de WordPress y también crea enlaces para navegar entre ellas.

 

Más opciones del editor TinyMCE advanced.

También podemos activar varias opciones avanzadas que pueden sernos útiles dentro del editor de texto.

 

opciones editor de texto

 

Opciones de estilo de listas: Añade tipos de listas con cuadrados, discos, mayúsculas o minúsculas.

Menú contextual: al pulsar con el botón derecho del ratón dentro del editor de texto nos mostrara opciones del editor en vez de las opciones del navegador lo que mejora la usabilidad del editor de texto.

Cuadro de dialogo alternativo para enlaces: Sustituye el editor de enlaces de WordPress por otro que incluye crear enlaces “nofolow” desde el editor de enlaces.

Tamaños de fuente: añade más tamaños de fuente al editor.

TinyMCE advanced también permite importar y exportar las opciones del plugin a otras instalaciones de WordPress.

 

editor de texto avanzado de wordpress

 

Editor de texto TinyMCE advanced en maquetadores visuales

Aunque se han conocido varias incompatibilidades de TinyMCE Advanced con varios constructores visuales como Visual Composer estas se han ido solucionando y hoy en día el plugin TinyMCE Advanced es compatible con la mayoría de constructores visuales.

Nota: Aun así es posible encontrar algún tipo de error en algunas plantillas que utilizan constructores visuales con sus propias opciones personalizadas para el texto.

 

TinyMCE Advanced en Visual Composer

tymce advanced visual composer

 

TinyMCE Advanced en Divi Builder

tinymce advanced divi builder

 

TinyMCE Advanced en Site Origin page builder

tynymce advanced site origin page builder

 

Black Studio TinyMCE Widget

El editor de texto de WordPress no se queda pequeño únicamente en páginas y entradas, si no que también muchos usuarios lo echan en falta en el Widget de Texto cuando están diseñando la barra lateral.

Y aunque el Widget de Texto admite HTML y puedes conseguir el diseño del texto o insertar imágenes con este código es un auténtico calvario la verdad.

También podemos crear el diseño del texto en una página borrador y luego copiar el código desde la pestaña HTML para después pegarlo en el Widget de texto pero sigue siendo engorroso.

Así que para solucionar este problema existe el plugin Black StudioMCE Widget que crea un tipo de Widget de texto que incluye el editor TinyMCE de WordPress.

Y lo mejor de todo, también es compatible con TinyMCE Advanced.

Black-Studio-TinyMCE-Widget

 

Y de esta manera podemos tener el editor de texto en la barra lateral para trabajar más cómodamente.

editor-de-texto-en-la-barra-lateral

 

Sinceramente creo que las funciones que crean estos plugin son muy básicas y deberían estar integradas en WordPress ya que miles de usuarios las echan en falta.

¡Fin del tutorial! Enhorabuena y mil gracias si has llegado hasta aquí y espero que te sirva de ayuda para trabajar mas cómodamente con el editor de texto de WordPress.

Pin It on Pinterest

Shares

Esta web utiliza cookies para su funcionamiento. Lee y acepta el aviso legal o abandona la web. más info

Los ajustes de cookies de esta web están configurados para "permitir cookies" y así ofrecerte la mejor experiencia de navegación posible. Si sigues utilizando esta web sin cambiar tus ajustes de cookies o haces clic en "Aceptar" estarás dando tu consentimiento a esto.

Cerrar