WordPress WYSIWYG editor


  • Escribe un documento y previsualiza el resultado
  • Consigue más opciones de maquetación para tus contenidos

Qué es el editor WYSIWYG WordPress

WordPress ha sido elegido por más de 74 millones de páginas web, en gran parte por su facilidad de uso y su poder de edición de textos. WordPress cuenta con el editor HTML en el que podemos insertar imágenes, definir estilos, etc. sin tener que introducir las etiquetas de HTML que corresponden a cada estilo o elemento. Es el propio editor el que traduce desde el modo visual las etiquetas en HTML, nosotros solo tenemos que escribir el contenido o diseñar las páginas como si estuviésemos usando un procesador de texto. El editor WYSIWYG hace todo el trabajo de edición por ti.

Este tipo de editores HTML se llaman WYSIWYG (acrónimo de What You See Is What You Get), ya que cuando estás editando un texto, el cambio que haces y ves con el editor es lo que obtienes luego cuando visualizas la entrada en tu página web.

WordPress usa un plugin en javascript llamado TinyMCE para instalar el editor WYSIWYG. Se trata de un editor con múltiples botones y opciones para escribir contenido. Muchas de las opciones son las mismas que te encuentras cuando escribes un texto en Word –negritas, cursivas, listas enumeradas, etc.


Cómo usar el editor WYSIWYG de WordPress

El WordPress WYSIWYG editor es la ventana principal de cualquier página de contenido de WordPress.

editor wysiwyg

Primera fila del editor WYSIWYG de WordPress


La primera vez que abrimos el editor en WordPress en español solo veremos una primera fila con botones. Estas son las opciones que encontrarás:

  • Añadir elemento:Con este botón podrás subir documentos, imágenes, galerías, etc.
  • Cambio de la visión del contenido: La ventana del editor cuenta con dos opciones la visual y el editor en HTML.
  • Negrita: Activando o subrayando un texto se transformará en negrita. En HTML se usa la etiqueta < strong >.
  • Cursiva: El texto subrayado se pone en cursiva. En HTML se usa la etiqueta < em >.
  • Tachado: Podrás tachar una palabra o una frase. En HTML se usa < del >.
  • Lista con viñetas: El texto indicado se convertirá en una lista con viñetas. En HTML se usa la etiqueta < ul > y < li > para cada uno de los elementos.
  • Lista numerada: Parecido al anterior, salvo que en este caso la lista es numerada. En HTML, la etiqueta que se usa es < ol >.
  • Cita: Con esto podrás citar un texto literalmente de otra fuente o de otro autor. El elemento en HTML es < blockquote >.
  • Línea horizontal: Con este botón podrás añadir una línea horizontal para diferenciar distintas partes en un texto. En HTML se usa la etiqueta < hr >.
  • Alineación a la izquierda, central y a la derecha: Estos botones alinearán el texto según tus preferencias. TinyMCE añade una < p > en cada párrafo con “ style=align: [direction]; ”.
  • Insertar/editar enlace: El icono del link Hacer clic sobre el texto seleccionado, lo que redirige a tus lectores a una página diferente. Puedes personalizarlo de modo que, al hacer clic, se abra la página en otra pestaña o se abra en la misma página. La etiqueta de HTML es < a href=”http://example.com”>Link Text.

  • Borrar enlace: Te permite eliminar los enlaces que has insertado en el texto.
  • Insertar etiqueta “Leer más”: WordPress tiene la opción de separar el texto en dos secciones, por ejemplo, introducción y cuerpo del texto.
  • Más herramientas: Con este botón activas la segunda línea de botones de edición.
  • Pantalla completa: Para ampliar el editor y no ver las barras de herramientas de administración de WordPress.

En la segunda fila del WYSIWYG editor, encontraremos los siguientes iconos:


editor wysiwyg 2

Editor WYSIWYG de WordPress completo


  • Menú de estilos: Este menú desplegable nos muestra diferentes títulos y estilos.
  • Subrayado: Para subrayar un texto. En HTML, la etiqueta es < ins >.
  • Justificar: Para justificar la alineación del texto.
  • Color de texto: Podrás escoger el color del texto. Aparecerá una paleta de colores, pero también puedes personalizar tus propios colores.
  • Pegar como texto: Es un botón muy útil ya que te permite pegar un texto dentro de tu editor sin formatos.
  • Limpiar formato: Elimina los formatos aplicados sobre el texto subrayado.
  • Carácter especial: Para añadir símbolos y caracteres especiales.
  • Reducir y aumentar sangría: Reduce o aumenta el espacio del margen en el texto. No existe una etiqueta HTML para esto, así que TinyMCE añade “ style="margin-left: 30px ".
  • Deshacer o rehacer: Al igual que en Word, encontramos dos botones para volver atrás o rehacer lo que hemos eliminado.
  • Atajos de teclado: Encontrarás las combinaciones de teclas o shortcodes para editar el texto de manera más rápida.

Plugins para ampliar las funciones de WordPress WYSIWYG editor

Existen una serie de plugins que nos permiten mejorar o hacer más completo el editor WYSIWYG de WordPress. Estos son algunos de ellos:

Rich text editor

Al instalar Rich text editor nos encontraremos con un editor mucho más completo, más cercano a lo que nos ofrece Word. Algunas de las diferencias que encontrarás respecto al editor WYSIWYG básico son poder habilitar el tipo de letra y el tamaño de la misma, tener más opciones para hacer listas, soporte para crear tablas y editarlas y contar con la función “Buscar y reemplazar”, entre otras funciones.

TinyWYM Editor

Este plugin añade flexibilidad al editor. Con TinyWYM Editor, podrás crear y editar elementos de HTML. Así como añadir atributos, distinguir y cortar y pegar elementos, entre otras funciones. También podemos escribir código CSS de una manera más sencilla.

Tras la instalación del plugin, solo verás un par de botones adicionales en tu editor. Para activarlos todos, es necesario ir a la página de Ajustes y seleccionar las herramientas que quieras incluir. Para hacerlo, solo tienes que arrastrar y soltar los “Botones sin usar” a cualquiera de las dos filas de las barras de herramientas.

Easy WYSIWYG Style

Easy WYSIWYG Style nos permite añadir elementos al editor que viene predeterminado en WordPress, como añadir tablas, esquematizar celdas, columnas y filas. Perfecto para cualquier blog.

WP Editor

Con este plugin, no cambiaremos la interfaz del editor predeterminado de WordPress. También reemplazaremos el editor de temas. La mayoría de los cambios que incluye están dirigidos a programadores o diseñadores web.

El consumo de WordPress depende de los plugins que tenemos instalados. Si quieres ampliar las funcionalidades predeterminadas de esta potente plataforma de blogging, necesitarás un buen hosting para WordPress con suficiente memoria y procesos PHP, como el hosting para WordPress de STRATO.

Si tienes dudas sobre la instalación de WordPress o qué tarifa elegir en Strato.es, ponte en contacto con nuestro servicio de Atención al Cliente.

Hosting para WordPress