El editor visual de WordPress es una herramienta útil que te da una idea de cómo se verá tu contenido una vez publicado. Está equipado con funciones para ayudar a agilizar el proceso de creación y formato de contenido para su sitio. Sin embargo, aunque el editor visual es una herramienta valiosa, tiene sus limitaciones.
Este artículo le mostrará cómo aprovechar al máximo el editor visual de WordPress y señalará algunos complementos y ajustes de CSS que pueden mejorar aún más su funcionalidad.
Empecemos con lo básico. Si ya conoce el editor visual estándar de principio a fin, puede avanzar y aprender cómo agregar funciones personalizadas .
Editor visual vs. Editor de texto
La pantalla de edición de WordPress está equipada con editores visuales y de texto. El editor de texto le muestra texto sin procesar con marcado HTML, lo que hace que el texto sea completamente personalizable si se siente cómodo con HTML:
Dentro del propio editor de texto, puede manipular directamente las imágenes y otros medios como alternativa al uso del botón Agregar medios .
El editor visual es una especie de editor de Lo que ves es lo que obtienes (WYSIWYG). Le da una idea mucho mejor de cómo se verá su contenido una vez publicado, aplicando formato de texto y mostrando imágenes dentro del editor. Sin embargo, de forma predeterminada, no le muestra exactamente cómo se verá una página o publicación dentro de su tema en particular, ni cosas como el ancho de la publicación, el estilo del texto y el color del hipervínculo.
Ya sea que esté editando en el editor visual o en el editor de texto, siempre está editando el mismo bloque de contenido, solo viéndolo de manera diferente. Los cambios que realice dentro del editor visual cambiarán el marcado HTML de su publicación, simplemente no verá esas etiquetas en el editor visual como lo hace en el editor de texto.
Dado que los cambios se producen independientemente del editor que utilice, puede alternar entre ellos a lo largo del proceso de creación de contenido. Cambiar del editor visual al de texto (o viceversa) es tan simple como hacer clic en la pestaña correspondiente en la esquina superior derecha del editor de publicaciones:
De forma predeterminada, el editor visual muestra una fila de botones. Para mostrar la segunda fila, puede pulsar el icono Alternar barra de herramientas , a menudo denominado botón Fregadero de cocina . Cada botón en la barra de herramientas muestra un ícono, pero puede revelar una útil información sobre herramientas al pasar el mouse sobre él:
Si bien las funciones de la mayoría de los botones se explican por sí mismas, otras son menos intuitivas. Echemos un vistazo a los botones con los que quizás no esté familiarizado.
Cita en bloque
El botón Blockquote se usa para mostrar el texto citado. La forma en que esto se muestre realmente en la interfaz dependerá de su tema. Por ejemplo, así es como se ve una cita en bloque de forma predeterminada en la interfaz de Divi :
Otros temas pueden usar un cuadro a todo color o comillas grandes. Lo mejor es comprobar que te gusta el aspecto del estilo blockquote antes de publicar. Si no está satisfecho con la apariencia de sus citas en bloque, se pueden personalizar. Para obtener más información sobre cómo personalizar las comillas en bloque, puede consultar esta publicación de nuestro blog.
Insertar Leer más etiqueta
Este botón inserta una línea horizontal como se muestra en la siguiente imagen:
La línea Leer más no se representa en el front-end del sitio cuando publica la publicación. Simplemente controla la longitud del extracto que se muestra en el feed de tu publicación y se detendrá donde sea que coloques la línea.
Pegar como texto
El botón Pegar como texto se usa para limpiar el texto que está pegando desde otras ubicaciones. Cuando simplemente copia y pega, el texto puede aparecer en un formato diferente al esperado. El botón Pegar como texto elimina cualquier formato especial y etiquetas HTML.
Formato claro
Puede usar este botón para eliminar todo el formato (incluidos negrita, cursiva, subrayado y colores) de una sección de texto resaltada:
Personaje especial
El botón de caracteres especiales le permite insertar caracteres que normalmente no se encuentran en su teclado y, al hacer clic en el botón, aparecerá una ventana emergente:
Atajos de teclado
Al hacer clic en el botón Métodos abreviados de teclado , aparecerá una ventana emergente que muestra los métodos abreviados integrados en el editor. Puede usarlos para acelerar el proceso de completar ciertas tareas:
Los accesos directos también ofrecen algunas opciones que faltan en la barra de herramientas, como Copiar , Pegar y Codificar . El atajo de Código se usa para resaltar secciones de código dentro de su texto:
Modo de escritura sin distracciones
Para algunas personas, el desorden que rodea al editor puede ser una distracción no deseada. Si desea un espacio de trabajo más limpio, haga clic en este botón para deshacerse de las barras laterales izquierda y derecha para que pueda concentrarse en su contenido.
2. Agregar funcionalidad personalizada
El editor visual estándar tiene todas las funciones básicas que necesita para crear y dar formato a las publicaciones. Sin embargo, hay muchas otras formas en las que puede querer formatear su contenido. Puede hacer esto en el editor de texto marcando el texto con las etiquetas HTML adecuadas. Por supuesto, muchas personas no se sienten cómodas con el código, mientras que otras simplemente prefieren hacer su trabajo en el editor visual.
Afortunadamente, es posible agregar funcionalidad al editor visual de forma rápida y sencilla mediante complementos. En esta sección, veremos dos excelentes complementos para mejorar su editor visual.
Tenga en cuenta que algunas de las funciones agregadas dependen del complemento para su funcionalidad. Si usa funciones que se implementan con un código abreviado, o que dependen del complemento para funcionar, esas funciones dejarán de funcionar tras la desactivación. Significa que tendrá que hacer una limpieza de formato después de haber eliminado el complemento.
TinyMCE Avanzado
Con más de un millón de instalaciones, TinyMCE Advanced es muy popular entre los usuarios de WordPress. Es un complemento liviano y fácil de usar que puede mejorar drásticamente su experiencia de edición de WordPress. Este complemento le permite agregar, reorganizar y eliminar botones de la barra de herramientas del editor visual de WordPress. También le permite configurar hasta cuatro filas de botones y se puede personalizar para satisfacer sus necesidades.
Los botones adicionales incluyen Familia de fuentes , Tamaños de fuente , Insertar fecha/hora , Salto de página y más. Con TinyMCE Advanced , crear y editar tablas también es mucho más fácil, y también tienes más opciones para elegir al momento de insertar listas. El complemento también le permite habilitar un menú de edición, que ofrece aún más opciones para el proceso de creación y formato de contenido.
Tenga en cuenta que los botones adicionales no aparecerán automáticamente después de la instalación, por lo que deberá acceder a la pantalla de configuración del complemento para configurar su nueva barra de herramientas. Una vez configurado, la pantalla de su editor se verá así:
Características clave:
- Botones de arrastrar y soltar para personalizar su barra de herramientas.
- Crear y editar tablas.
- Opciones adicionales para insertar listas.
- Función de buscar y reemplazar.
- Justificar la opción de texto.
- Posibilidad de insertar saltos de página.
- Opción para agregar emoticones.
Precio: Gratis | Más información
Editar WP
Si bien no es tan popular como TinyMCE Advanced, WP Edit tiene más de 100,000 instalaciones activas y ofrece una gran cantidad de funciones. La versión gratuita agrega muchas funciones al editor visual e incluye opciones de diseño que se pueden aplicar tanto a las publicaciones como a las páginas.
La versión premium, WP Edit Pro , incluye dos filas adicionales de botones y funciones premium como 80 estilos predefinidos, integración con Dropbox y Google Fonts . También puede usar fuentes personalizadas y crear estilos de editor personalizados para aplicar a cualquiera de sus contenidos.
Características clave:
- Inserte fácilmente medios como imágenes, videos y clip art.
- Crear y personalizar tablas.
- Fácil acceso a los códigos cortos relevantes.
- Inserte columnas en áreas de contenido a través de códigos cortos.
- Agregue un editor personalizado a extractos y descripciones de perfil.
- Permitir códigos abreviados en extractos y áreas de widgets.
Precio: el complemento básico es gratuito y la versión premium comienza en $ 17.50 | Más información
3. Personalice el editor para que se parezca a la interfaz
Hay una limitación importante con el editor visual de WordPress que no se resuelve por completo con los complementos que hemos cubierto. Si bien el editor visual le da una idea de cómo se verá su contenido, todavía hay discrepancias entre lo que ve en el editor y cómo se ve su contenido en la interfaz de su sitio. Si bien el uso del botón Vista previa para verificar la interfaz es una opción, es posible que le resulte inconveniente.
Por supuesto, sería bueno si el editor visual pudiera mostrarle su contenido tal como aparecería en la interfaz. Si se siente cómodo con la personalización de sus archivos de WordPress, hay formas de ajustar el aspecto del editor visual para que coincida mejor con su tema. Para aprender a personalizar el editor visual para que coincida con la interfaz de usuario de su sitio, consulte estos artículos de WPBeginner y WPMU DEV .
Otra solución para la edición sin código es utilizar un editor frontal como la nueva interfaz visual de Divi 3.0 . Este editor intuitivo le permite editar cualquier página o elemento de publicación directamente en la interfaz de su sitio web, sin código.
Conclusión
Aunque el editor visual de WordPress es una herramienta útil, tiene sus limitaciones. Al aplicar los consejos descritos en este artículo, puede mejorar el editor visual y mejorar el proceso de creación de contenido. Recapitulemos:
- Aproveche al máximo el editor visual estándar: el editor visual estándar tiene muchas funciones, especialmente si está familiarizado con la interfaz.
- Agregue funcionalidad personalizada: complementos como TinyMCE Advanced y WP Edit pueden mejorar la funcionalidad del editor visual de WordPress.
- Personalice el editor para que se parezca a la interfaz: si se siente cómodo con el código, la personalización adicional es bastante sencilla. Si prefiere no meterse con el código, Divi 3.0 hace que la edición frontal sea una realidad.
¿Tienes algún consejo para personalizar el editor visual de WordPress? ¡Háganos saber en la sección de comentarios a continuación y suscríbase a la conversación!
Imagen en miniatura del artículo de mahfud21 / shutterstock.com