Cómo usar el editor de WordPress

WordPress como CMS tiene un conjunto de características increíblemente robusto. Los complementos y widgets atraen a las personas a la plataforma, pero una vez dentro, el poder real proviene del propio editor de WordPress. Independientemente de cuál sea su objetivo con la plataforma, utilizará el editor de publicaciones / páginas en gran medida. Por eso, queremos mostrarle cómo utilizar el editor de WordPress al máximo para que su contenido brille y su sitio prospere.

Suscríbete a nuestro canal de Youtube

¿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 Editor de bloques que tenemos hoy. En medio de ese cambio, el complemento del editor de Gutenberg se lanzó como un puente para probar las nuevas funciones del editor de bloques antes de convertirlo en WordPress Core.

Si bien el Editor de bloques es predeterminado en WP a partir de 5.0, puede elegir usar cualquiera de los tres que desee. Puede instalar el complemento Classic Editor para mantener el antiguo TinyMCE, el complemento Gutenberg para mantener las funciones 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 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 Classic Editor tiene una paridad de características básicas con cualquier editor de texto enriquecido o software de procesamiento de texto, sin mencionar las funciones específicas de WP que analizamos. sobre, generalmente difiriendo sólo 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

Siempre 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 tutorial 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 brindan la funcionalidad básica con la que trabajará día tras día.

1. Bloque de título : todo lo que ingrese aquí se mostrará como la etiqueta H1 principal de la publicación / página.
2. Área de bloque / contenido : esta es el área en la que agregará los distintos 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 eliges el tipo que deseas 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á de 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 en general o a la publicación en sí.
5. Pestaña Opciones de bloque : esta pestaña maneja las opciones para cualquier bloque que resalte. Si hace clic en un bloque de párrafo, edita las opciones para ese bloque solo . Ningún otro bloque, ni el documento en sí cambia.

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 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 es usuario de Divi, ya está 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 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 configuras para que funcionen como un solo bloque. Los mueve y les da estilo como si fueran una sola unidad, pero el Grupo se compone de múltiples 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 seleccionar todos. Luego, cuando vea que el icono 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 de una sola vez 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 puede 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á la barra de enlace permanente para la publicación, pero se puede editar una vez que haya guardado la publicación al menos una vez. Esto también será de lo que extraen 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 utilizar CSS o la configuración del creador de páginas externo para ajustar más.

Área de bloque / contenido

Básicamente, 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 "entrar" o "regresar", 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 enumerará en Más usados para que ya no tenga que desplazarse o buscarlo. 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 está seleccionado (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.

Sin embargo, estas opciones y configuraciones 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 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 parte de 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 la pestaña Bloquear abierta, las opciones cambian al bloque específico que seleccione. Si tiene el Bloque de párrafo resaltado, 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 renderizarán en ese bloque específico). Cada bloque, sin embargo, tiene una sección Avanzada en la pestaña que le permite aplicar clases CSS a ese bloque. A continuación, 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 está la pestaña Opciones de documento . Si ha utilizado WordPress en el pasado, estos le resultarán familiares. Aquí, podrá ajustar las categorías de su publicación, las etiquetas, agregar una imagen destacada, ajustar la barra de 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 ni 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 pertenecerán directamente al documento en sí, no tanto al contenido ni a 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 aparezca en esta sección (en todo caso) dependerá de los complementos que haya instalado (o de las características del tema que puedan 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 ícono desplegable de tres puntos en la esquina superior derecha de la pantalla, aparecerá un menú desplegable vertical grande. 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 alternancia de 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á 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 de Visual / Code Editor funcionan exactamente como en el editor TinyMCE. Los ejemplos de esta publicación hasta ahora han sido con el Editor visual. Es decir, ves una representación visual de la publicación mientras la escribes. Obtiene botones para presionar, menús contextuales y una representación en tiempo real de las configuraciones a medida que las 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 quizás pegar contenido que se escribió en un editor externo que no formatearía correctamente en varios bloques.

El editor de bloques usa etiquetas HTML específicas para decirle a WordPress qué tipo de bloques representar, así que asegúrese de mantener intacto cualquier código que parezca <! - 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 son todos iguales a los de TinyMCE, pero son igualmente útiles y tan importantes de aprender. Memorizar los más útiles le 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 editor visual y editor de código: Ctrl + Shift + Alt + M
• Abra el menú de navegación del bloque: Mayús + Alt + O
• Mostrar u ocultar la barra lateral de configuración - Ctrl + Shift +,
• Navegue a la siguiente parte del editor: Ctrl + ` o Shift + Alt + N
• Navegue 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
• Deshaga sus últimos cambios - Ctrl + Z
• Rehaga su última operación de deshacer - Ctrl + Shift + Z

Atajos de selección

• Seleccione todo el texto al escribir. Presione nuevamente para seleccionar todos los bloques - Ctrl + A
• Borrar selección - ESC

Bloquear atajos

• Duplicar los bloques seleccionados - 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
• Eliminar varios bloques seleccionados - o del retroceso
• 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
• Eliminar un vínculo: Ctrl + Shift + K
• Subrayar el texto seleccionado - Ctrl + U

Terminando

El editor de WordPress ha recorrido un largo camino durante la última década, y el editor de bloques actual es definitivamente lo suficientemente poderoso como para llevarnos a través del siguiente. Con el poder de controlar de forma granular cada elemento de la página, puede crear contenido más rápido, más fácil y mucho más eficiente de lo que era posible antes. Sin embargo, si el editor de bloques actual no es para usted, existe el complemento Classic Editor, y si está a la vanguardia, el complemento Gutenberg se mantiene algunas versiones por delante del editor predeterminado en el núcleo de WordPress. Entonces, no importa de qué forma prefiera crear, WordPress lo tiene cubierto.

¿Tiene algún consejo o truco que le gustaría compartir sobre el editor de WordPress? ¡Háznoslo saber en los comentarios!