¿Qué es un editor de texto?

Los desarrolladores y los usuarios avanzados de WordPress suelen usar el editor de texto porque da acceso directo al HTML de una entrada. En la pestaña Texto del Classic Editor, los botones de acceso rápido (quicktags) insertan etiquetas HTML de negritas, cursivas y enlaces. El editor de código del editor de bloques no tiene botones de formato: el marcado lo escribes tú.

Para abrirlo en el editor de bloques (Gutenberg), haz clic en los tres puntos de la esquina superior derecha y selecciona la opción Editor de código (en inglés), o presiona Ctrl+Shift+Alt+M (⇧ + ⌥ + ⌘ + M en Mac). Si usas el Classic Editor, haz clic en la pestaña Texto, en la esquina superior derecha de la pantalla.

Editores de texto comunes

Un editor de texto sirve para cualquier archivo de texto sin formato, no solo HTML: código fuente, archivos de configuración, notas simples. La mayoría de los más populares son gratuitos.

• Notepad viene incluido en todas las copias de Windows. No requiere instalación, pero tampoco resalta la sintaxis.
• Notepad++ es un editor gratuito y extensible para Windows, con resaltado de sintaxis.
• Visual Studio Code es gratuito en Windows, Mac y Linux, y se amplía con plugins.
• Sublime Text funciona en las 3 plataformas, pero requiere una licencia de pago.
• Vim es gratuito y se ejecuta en la terminal, lo que lo vuelve práctico para editar archivos directamente en tu servidor.

Si quieres una comparación a fondo, revisa nuestra guía de los 13 mejores editores de texto.

Diferencias entre editor de texto, editor de código, IDE y procesador de texto

Los nombres se usan como sinónimos, pero las herramientas difieren en cuánto hacen más allá de editar caracteres.

• Un editor de texto plano (Notepad, Nano) edita archivos de texto sin formato oculto. Cada carácter que ves es cada carácter del archivo; por eso el código y los archivos de configuración como wp-config.php y .htaccess se editan aquí.
• Un editor de código fuente (Notepad++, Visual Studio Code, Sublime Text) es un editor de texto con funciones para programadores: resaltado de sintaxis, autocompletado y extensiones.
• Un entorno de desarrollo integrado (IDE, por sus siglas en inglés), como Visual Studio o PhpStorm, reúne en un solo programa un editor de código, un depurador, herramientas de compilación y ejecutores de pruebas.
• Un procesador de texto (Word, Google Docs) guarda formato oculto, y sus comillas tipográficas reemplazan en silencio las comillas rectas que el código necesita.

Usa un editor de texto plano para un cambio rápido en texto sin formato, un editor de código para el trabajo diario con código y un IDE cuando necesites depuración, compilación o pruebas integradas. Nunca edites un archivo de tu sitio en un procesador de texto. Si un archivo de configuración falla justo después de una edición, revisa primero las comillas.

Cuándo usar el editor de texto en WordPress

Para escribir en el día a día, quédate en el editor visual: es un editor WYSIWYG, así que ves el formato conforme lo aplicas. Cambia al editor de texto o de código cuando el trabajo sea el marcado en sí: pegar un código de inserción, corregir HTML roto o agregar un atributo para el que la barra de herramientas no tiene botón. Si solo un bloque necesita código personalizado, el bloque HTML personalizado (en inglés) lo resuelve sin pasar toda la entrada a marcado.

Ejemplo práctico: agregar un atributo nofollow

Supongamos que quieres marcar un enlace con `rel="nofollow"`, que pide a los motores de búsqueda que no lo traten como una recomendación. Google trata el nofollow como una sugerencia y no como una directiva estricta desde septiembre de 2019 (y lo aplica al rastreo y la indexación desde el 1 de marzo de 2020), así que espera que no transfiera valor de posicionamiento, aunque sin garantizarlo. Para enlaces de pago, Google ahora prefiere `rel="sponsored"`, aunque el nofollow sigue siendo aceptable.

La barra de herramientas del editor visual puede crear el enlace, pero no tiene ningún control para atributos rel. Abre el editor de código, localiza el enlace y cambia:

`<a href="https://example.com/">Example</a>`

por:

`<a href="https://example.com/" rel="nofollow">Example</a>`

Vuelve al editor visual y previsualiza la entrada. El enlace se ve exactamente igual que antes; el atributo ahora está en el marcado.

Cuando el marcado editado a mano falla

En el editor de bloques, el marcado de cada bloque tiene que coincidir con lo que WordPress espera. Cuando una edición rompe esa coincidencia, el bloque muestra el aviso "Este bloque contiene contenido inesperado o no válido". Haz clic en Intentar recuperación del bloque y WordPress lo reconstruye a partir de tu marcado; la advertencia también incluye un menú de tres puntos con más opciones.

En el Classic Editor, volver de la pestaña Texto a Visual puede eliminar o reescribir el HTML personalizado. Agrega el marcado en bruto como último paso antes de publicar, y conserva una copia hasta que hayas previsualizado el resultado.