Cómo usar el editor de WordPress

¿Qué es el editor de WordPress?

Técnicamente, hay tres editores de WordPress entre los que puede elegir. Con el lanzamiento de WordPress 5.0, el editor cambió del entonces predeterminado TinyMCE al Block Editor que tenemos hoy. En medio de ese cambio, el complemento del editor de Gutenberg se lanzó como un puente para probar en versión beta nuevas funciones para el Editor de bloques antes de convertirlo en WordPress Core.

Si bien el Editor de bloques está predeterminado en WP a partir de 5.0, puede elegir usar cualquiera de los tres que desee. Puede instalar el complemento Editor clásico para mantener el TinyMCE de antaño, el complemento Gutenberg para mantener las características más nuevas (aunque potencialmente inestables) en su editor, o puede mantener el Editor de bloques predeterminado.

Dados los pasos adicionales involucrados en el uso de cualquier cosa que no sea el editor predeterminado (y la inestabilidad inherente y la naturaleza cambiante del complemento de Gutenberg), nos centraremos únicamente en el Editor de bloques predeterminado en esta publicación. Sin embargo, debe tener en cuenta que los fundamentos son los mismos con Gutenberg, y el TinyMCE contenido en el complemento Editor clásico tiene paridad de características básicas con cualquier editor de texto enriquecido o software de procesamiento de textos, sin mencionar cualquier funcionalidad específica de WP que discutimos lleva encima, generalmente difieren solo en la estética, no en la función.

Dicho todo esto, aprendamos a usar el editor de WordPress.

Los fundamentos del editor de WordPress

Cada vez que cree una página o una publicación (o un tipo de publicación personalizada), utilizará el Editor de bloques. Se le presenta un tutorial modal sobre cómo abrirlo, y puede aprender los conceptos básicos siguiéndolo a través de las 4 diapositivas que ofrece. Ciérrelo y podrá ver el editor básico.

El editor de bloques básico de WordPress consta de 5 elementos. Se pueden agregar más mediante varios complementos, pero estos proporcionan la funcionalidad básica con la que trabajará día tras día.

1. Bloque de título : lo que ingrese aquí se mostrará como la etiqueta H1 principal de la publicación/página.
2. Bloque/Área de contenido : esta es el área en la que agregará los diversos bloques que componen el contenido de su publicación o página.
3. Botón Agregar bloque : cada vez que vea un + en un círculo, puede hacer clic en él para agregar un nuevo bloque. Aparecerá un menú desplegable, desde el cual elige el tipo que desea insertar. Todos funcionan exactamente igual, por lo que si hace clic en uno a la derecha de un bloque, debajo de un bloque o en la esquina de la pantalla, obtendrá las mismas opciones.
4. Pestaña Opciones de documento : en esta pestaña, encontrará todo, desde categorías, etiquetas, enlaces permanentes, cambios de activación/desactivación de comentarios y más. Los complementos pueden agregar opciones aquí, pero siempre se aplican a la página general o a la publicación en sí.
5. Pestaña de opciones de bloque : esta pestaña maneja las opciones para cualquier bloque que resaltes. Si hace clic en un bloque de párrafo , edita las opciones para ese bloque solamente . Ningún otro bloque, ni el propio documento cambian.

A continuación, lo guiaremos a través de los detalles de estas áreas y cómo puede usarlas para crear el mejor contenido posible.

¿Qué son los Bloques?

Ya nos has visto mencionar Bloques en esta publicación, pero ¿qué son? Un bloque es un elemento único y personalizable de una página o una publicación. Puede ser un solo párrafo, una lista, una imagen o una galería. Estos bloques se pueden mover y ajustar a su gusto, personalizarlos individualmente y brindarle un control granular sobre su contenido de una manera que un editor WYSIWYG simplemente no puede. (Si eres un usuario de Divi , ya estás familiarizado con el concepto porque nuestros Módulos funcionan de la misma manera).

Como puede ver arriba, cada elemento de la página está contenido en su propio bloque. Puede ver una lista completa de los bloques de WordPress en la documentación de soporte de WordPress.

Cómo crear un grupo de bloques

Un grupo de bloques es una colección de bloques que configura para funcionar como un solo bloque. Los mueve y los aplica estilo como si fueran una sola unidad, pero el grupo está formado por varios elementos.

Crear un grupo es fácil. Simplemente haga clic en un bloque, luego mantenga presionada la tecla Mayús o CTRL y haga clic en otro. Si desea agrupar todos los bloques en la publicación, puede presionar CTRL/CMD – A para seleccionarlos todos. Luego, cuando vea que el ícono en la parte superior izquierda cambia a un cuadrado formado por pequeños bloques, puede hacer clic en él y seleccionar Transformar en grupo .

Si necesita desagruparlos, simplemente haga clic en el botón desplegable de tres puntos y seleccione desagrupar.

Los bloques ahora volverán a funcionar como individuos.

¿Qué son los bloques reutilizables?

Puede convertir cualquier bloque de un bloque único en un bloque reutilizable desde el menú de configuración. Un bloque reutilizable no es una plantilla, sino un bloque global para su sitio. Crea un bloque o grupo de bloques y luego hace clic en Agregar a bloques reutilizables .

Cualquier cambio o edición realizada en ese bloque reutilizable se refleja en todo el sitio, cambiando cada instancia del bloque en lugar de solo la que editó. Tenemos una guía completa de bloques reutilizables que puedes consultar para obtener más información sobre el tema .

El bloque de título

El bloque de título, como se muestra arriba, es la etiqueta H1 principal de su publicación o página. También generará el slug de enlace permanente para la publicación, pero eso se puede editar una vez que haya guardado la publicación al menos una vez. Esto también será de lo que extraerán los selectores de CSS como .post-title y .entry-title . (Sin embargo, sus complementos de SEO le permiten configurar lo que se muestra en los motores de búsqueda).

Este es el único bloque dentro del editor de WordPress que no puede eliminar ni reposicionar. Debe usar CSS o la configuración de un creador de páginas externo para ajustar más.

Área de bloque/contenido

Fundamentalmente, puede considerar que el área de contenido es donde escribe. Si lo desea, puede comenzar a escribir, escribir una publicación completa sin siquiera considerar los bloques. En todas las formas principales, esto reemplaza el área WYSIWYG simple de TinyMCE y es el mayor cambio en el editor de WordPress desde… bueno… nunca.

Sin embargo, con el Editor de bloques, puede hacer mucho más que eso. Cada vez que presione «enter» o «return», agregará un nuevo bloque de párrafo. Para agregar un tipo diferente de bloque (de cualquier tipo), haga clic en el + en un círculo y obtendrá un menú desplegable de cada bloque disponible. Asegúrese de desplazarse porque también están configurados en diferentes categorías. También puede buscar un bloque específico si sabe qué tipo desea.

Puede agregar bloques de video de YouTube, imágenes, galerías, reproductores de audio, listas, citas y mucho más. Cada uno de ellos tiene su propia configuración y opciones de estilo. Además, cuanto más use un bloque, el editor de WordPress lo reconocerá como uno de uso común y lo incluirá en Más usados ​​para que no tenga que desplazarse o buscarlo más. Los Bloques reutilizables y los Grupos de bloques también pueden aparecer en Más usados.

Si observa las imágenes en esta sección, el (1) apunta a los botones de reordenación que obtiene para cada bloque cuando se selecciona (simplemente haga clic en él para seleccionar). El (2) apunta al menú desplegable que le permite eliminar el bloque, así como editar su contenido como HTML, clonarlo o agregar nuevos bloques a su alrededor.

Estas opciones y configuraciones, sin embargo, son diferentes de la pestaña Opciones de bloque en la esquina superior derecha de la pantalla que mencionamos anteriormente y discutimos en la siguiente sección a continuación.

Esquema del documento, recuento de palabras y otra información

En la barra de herramientas superior de la página, tiene una i en un círculo. Haga clic en él y se le presentará un resumen completo de en qué consiste su documento.

Siempre que haya utilizado bloques de encabezado, aparecerá un esquema de documento además del recuento de palabras, el número de párrafo y el recuento de bloques. Si no tiene bloques de encabezado, esa sección no estará allí. Puede hacer clic en cualquiera de los elementos del esquema del documento para ir directamente a ese bloque. Esta característica es invaluable en documentos más largos.

Si hace clic en el ícono de la lista anidada junto a ese, también verá una lista ordenada de todos los bloques en la publicación, en lugar de solo encabezados para un esquema.

Nuevamente, puede hacer clic en cualquier cosa en la lista para navegar directamente y seleccionar ese bloque.

Ficha Opciones de bloque

En la esquina superior derecha del editor de WordPress, verá una pestaña que dice Bloquear . Siempre que tenga un bloque seleccionado, obtendrá un conjunto contextual de opciones para ese tipo de bloque. Sin embargo, cualquier cambio que realice afectará solo al bloque que haya seleccionado.

Puede cambiar el tamaño de la miniatura de una imagen en esta pestaña, agregar un fondo de color a un párrafo para crear una alerta o ajustar el tamaño de fuente en un encabezado, por ejemplo. Si tiene abierta la pestaña Bloque , las opciones cambian al bloque específico que seleccione. Si tiene resaltado el bloque de párrafo, verá esto.

Tener un Bloque de imagen seleccionado cambiará la pestaña Bloque a esto.

Cada bloque tendrá opciones específicas que puede ajustar dentro de ellos que solo se aplican a ese tipo de bloque (y solo se procesarán en ese bloque específico). Sin embargo, cada bloque tiene una sección Avanzada en la pestaña que le permite aplicar clases de CSS a ese bloque. Luego puede diseñarlos como mejor le parezca utilizando hojas de estilo y código externos.

Ficha Opciones de documento

A la izquierda de la pestaña Opciones de bloque se encuentra la pestaña Opciones de documento . Si ha usado WordPress en el pasado, esto le resultará familiar. Aquí, podrá ajustar las categorías de su publicación, las etiquetas, agregar una imagen destacada, ajustar el slug del enlace permanente, agregar un extracto para el uso del tema/SEO y habilitar o deshabilitar los comentarios.

Cada una de estas secciones es prácticamente idéntica a dónde y qué estaban en el editor TinyMCE WYSIWYG. Se aplican a toda la publicación o página y no a un solo bloque o a todo el sitio. Además, como puede ver en la imagen de arriba, hay un cuadro de opciones de WP Rocket . Algunos complementos aplicarán cuadros a esta área, pero siempre se relacionarán directamente con el documento en sí, no tanto con el contenido o los bloques.

Metaboxes de publicaciones adicionales

Los metaboxes para la publicación son donde los complementos agregarán nuevas opciones y capacidades para el contenido en sí. Aparecen al final del área de contenido, debajo de los bloques.

Lo que aparece en esta sección (si acaso) dependerá de los complementos que haya instalado (o cualquier característica del tema que pueda hacer uso del área). Los complementos de SEO aprovechan mucho esta área y cualquier otra cosa que le permita interactuar de alguna manera con el contenido de la página, en lugar de los detalles del documento.

Menú desplegable de opciones del editor de WordPress

Si hace clic en el icono desplegable de tres puntos en la esquina superior derecha de la pantalla, aparecerá un gran menú desplegable vertical. Puede ajustar una serie de configuraciones aquí, todas las cuales se aplican al editor en sí, en lugar del documento, los bloques o el contenido.

En su mayor parte, son opciones bastante sencillas, como administrar sus bloques reutilizables o proporcionar una lista de atajos de teclado o reabrir la guía de bienvenida que mencionamos al principio.

Sin embargo, algunas de las opciones más utilizadas se encuentran cerca de la parte superior. Específicamente, los conmutadores para la barra de herramientas superior , el modo de pantalla completa y los modos Visual/Editor de código .

La barra de herramientas superior significa que, en lugar de que las opciones para un bloque seleccionado aparezcan como un menú contextual cerca de la parte superior izquierda del bloque, como mencionamos anteriormente, estarán en un área fija en la parte superior de la pantalla.

El modo de pantalla completa activa o desactiva el panel de administración de WordPress. Si deshabilita el Modo de pantalla completa, verá la barra lateral izquierda que incluye las opciones típicas del tablero, como Publicaciones, Páginas, Apariencia, Configuración, Herramientas, etc.

Y los conmutadores Visual/Editor de código funcionan exactamente igual que en el editor TinyMCE. Los ejemplos en esta publicación hasta ahora han sido con el Editor visual. Es decir, ves una representación visual de la publicación a medida que la escribes. Obtiene botones para presionar, menús contextuales y una representación en tiempo real de la configuración a medida que la cambia. Sin embargo, el Editor de código es solo eso: código. Tendrás un cuadro de texto simple en el que escribirás en texto plano y HTML.

Esto generalmente se hace para solucionar problemas con el editor o para ajustar una sola área o bloque. O tal vez para pegar contenido que se escribió en un editor externo que no tendría el formato correcto en varios bloques.

El editor de bloques usa etiquetas HTML específicas para decirle a WordPress qué tipo de bloques renderizar, así que asegúrate de mantener intacto cualquier código que se parezca a <!– wp:paragraph –> . De lo contrario, las cosas pueden complicarse bastante.

Accesos directos globales del editor de bloques de WordPress

El Editor de bloques también viene con su propio conjunto de atajos ingeniosos. No todos son iguales a TinyMCE, pero son igualmente útiles e importantes de aprender. Memorizar los más útiles te ahorrará mucho tiempo y problemas, hablando por experiencia. Puede presionar Shift+Alt+H para mostrar la siguiente lista de accesos directos en el propio editor de WordPress.

Accesos directos a documentos

• Cambiar entre el editor visual y el editor de código: Ctrl+Shift+Alt+M
• Abrir el menú de navegación de bloques: Shift+Alt+O
• Mostrar u ocultar la barra lateral de configuración: Ctrl+Shift+,
• Navegar a la siguiente parte del editor: Ctrl+` o Shift+Alt+N
• Navegar a la parte anterior del editor: Ctrl+Shift+` o Shift+Alt+P
• Ir a la barra de herramientas más cercana: Alt+F10
• Guarde sus cambios – Ctrl+S
• Deshacer los últimos cambios: Ctrl+Z
• Rehace tu último deshacer – Ctrl+Shift+Z

Accesos directos de selección

• Seleccione todo el texto al escribir. Presiona de nuevo para seleccionar todos los bloques – Ctrl+A
• Borrar selección – ESC

Bloquear accesos directos

• Duplicar el(los) bloque(s) seleccionado(s) – Ctrl+Shift+D
• Eliminar los bloques seleccionados: Mayús+Alt+Z
• Insertar un nuevo bloque antes de los bloques seleccionados: Ctrl+Alt+T
• Insertar un nuevo bloque después de los bloques seleccionados: Ctrl+Alt+Y
• Quitar varios bloques seleccionados: suprimir o retroceder
• Cambiar el tipo de bloque después de agregar un nuevo párrafo – /

Atajos de texto

• Poner el texto seleccionado en negrita – Ctrl+B
• Poner el texto seleccionado en cursiva – Ctrl+I
• Convertir el texto seleccionado en un enlace – Ctrl+K
• Quitar un enlace: Ctrl+Shift+K
• Subrayar el texto seleccionado – Ctrl+U

Terminando

El editor de WordPress ha recorrido un largo camino en la última década, y el Editor de bloques actual es definitivamente lo suficientemente poderoso como para llevarnos a través de la próxima. Con el poder de controlar granularmente cada elemento de la página, puede crear contenido de forma más rápida, fácil y mucho más eficiente que antes. Sin embargo, si el Editor de bloques actual no es para ti, existe el complemento Editor clásico , y si eres uno de los que está a la vanguardia, el complemento Gutenberg se mantiene algunas versiones por delante del editor predeterminado en el núcleo de WordPress. Así que no importa de qué manera prefiera crear, WordPress lo tiene cubierto.

¿Tienes algún consejo y truco que te gustaría compartir sobre el editor de WordPress? ¡Cuéntanos en los comentarios!