Cómo editar HTML en el editor de código de WordPress (Guía para principiantes)

¿Buscas más control sobre el diseño y la función de tu sitio de WordPress? Aprender a editar HTML es la respuesta.

HTML (HyperText Markup Language) es el código que estructura tu contenido, indicando a los navegadores web cómo mostrar tus páginas. Editarlo directamente es útil para personalizaciones avanzadas, agregar funcionalidades específicas y solucionar problemas.

A menudo escuchamos a usuarios de WPBeginner que les da nervios tocar código, pero editar HTML dentro de WordPress es más fácil de lo que crees.

En este artículo, te mostraremos cómo editar HTML en el editor de código de WordPress utilizando varios métodos diferentes.

¿Por qué deberías editar HTML en WordPress?

WordPress ofrece miles de temas y plugins para cambiar la apariencia de tu sitio web y personalizar diferentes elementos sin tocar una sola línea de código.

Sin embargo, los plugins y temas tienen sus limitaciones y podrían no ofrecer las características exactas que buscas. Como resultado, es posible que no puedas estilizar tu sitio web de la manera que deseas.

Aquí es donde editar HTML es realmente útil. Puedes realizar fácilmente personalizaciones avanzadas usando código HTML. Proporciona mucha flexibilidad y control sobre cómo se verá y funcionará tu sitio.

Además, aprender a editar HTML también puede ayudarte a identificar y corregir errores en tu sitio web de WordPress cuando no tienes acceso al panel de administración.

Dicho esto, veamos diferentes formas de editar HTML en un sitio web de WordPress.

Cubriremos cómo editar HTML usando el editor de bloques y el editor clásico, y también te mostraremos una forma sencilla de agregar código a tu sitio. Puedes hacer clic en los enlaces a continuación para saltar a tu sección preferida.

• Cómo editar HTML en el editor de bloques de WordPress
• Cómo editar HTML en el editor clásico de WordPress
• Cómo editar HTML en los widgets de WordPress
• Cómo editar HTML en el editor de temas de WordPress
• Cómo editar HTML en WordPress usando FTP
• Forma sencilla de agregar código en WordPress

Cómo editar HTML en el editor de bloques de WordPress

En el editor de bloques de WordPress, hay varias formas de editar el HTML de tu publicación o página.

Primero, puedes usar un bloque de HTML personalizado en tu contenido para agregar código HTML.

Para empezar, dirígete a tu panel de WordPress y luego agrega una nueva publicación/página o edita un artículo existente. Después de eso, haz clic en el signo más (+) en la esquina superior izquierda y agrega un bloque de 'HTML personalizado'.

A continuación, ingresa tu código HTML personalizado en el bloque.

También puedes hacer clic en la opción ‘Vista previa’ para verificar si el código HTML está funcionando correctamente y cómo se verá tu contenido en tu sitio web en vivo.

Otra forma de agregar o cambiar código HTML en el editor de bloques de WordPress es editando el HTML de un bloque en particular.

Para hacer eso, simplemente selecciona un bloque existente en tu contenido y luego haz clic en el menú de tres puntos. A continuación, procede a hacer clic en la opción ‘Editar como HTML’.

Ahora verás el HTML de un bloque individual. Continúa y edita el HTML de tu contenido.

Por ejemplo, puedes agregar un enlace nofollow, cambiar el estilo de tu texto o agregar otro código.

Si deseas editar el HTML de toda tu publicación, puedes usar el ‘Editor de código’ en el editor de bloques de WordPress.

Puedes acceder al editor de código haciendo clic en la opción de tres puntos en la esquina superior derecha. Luego selecciona ‘Editor de código’ de las opciones desplegables.

Cómo editar HTML en el editor clásico de WordPress

Si estás usando el editor clásico de WordPress, entonces puedes editar fácilmente el HTML en la vista de Texto.

Para acceder a la vista de Texto, simplemente edita una entrada de blog o agrega una nueva. Cuando estés en el editor clásico, haz clic en la pestaña 'Texto' para ver el HTML de tu artículo.

Después de eso, puedes editar el HTML de tu contenido. Por ejemplo, puedes poner en negrita diferentes palabras para hacerlas prominentes, usar el estilo cursiva en el texto, crear listas, agregar una tabla de contenido y más.

Cómo editar HTML en los widgets de WordPress

¿Sabías que puedes agregar y editar código HTML en el área de widgets de tu sitio?

En WordPress, usar un widget de HTML personalizado puede ayudarte a personalizar tu barra lateral, pie de página y otras áreas de widgets. Por ejemplo, puedes incrustar formularios de contacto, botones de llamada a la acción (CTA), Google Maps y otro contenido.

Puedes comenzar dirigiéndote a tu panel de administración de WordPress y luego ir a Apariencia » Widgets. Después de eso, haz clic en el ícono de 'Más' en cualquier área de widget donde quieras agregar código HTML.

Las áreas de widgets disponibles dependerán del tema de WordPress que estés utilizando. Por ejemplo, es posible que puedas agregarlo a tu pie de página, encabezado u otras áreas.

A continuación, busca el widget HTML personalizado en el menú de bloques de widgets y haz clic en él para agregarlo automáticamente al área de widgets.

Después de eso, puedes hacer clic en tu widget HTML personalizado e ingresar el código HTML.

Cuando hayas terminado, no olvides hacer clic en el botón 'Actualizar' en la esquina superior derecha de la pantalla.

Ahora puedes visitar tu sitio web para ver el widget HTML personalizado en acción.

Cómo editar HTML en el editor de temas de WordPress

Otra forma de editar el HTML de tu sitio web es a través del Editor de temas de WordPress (Editor de código).

Sin embargo, no recomendamos que edites directamente el código en el Editor de temas. El más mínimo error al ingresar código puede dañar tu sitio web y bloquearte el acceso al panel de administración de WordPress.

Además, si actualizas tu tema, todos tus cambios se perderían.

Dicho esto, si estás considerando editar HTML usando el editor de temas, entonces es una buena idea hacer una copia de seguridad de tu sitio web antes de realizar cualquier cambio.

A continuación, dirígete a Apariencia » Editor de temas desde tu panel de administración de WordPress. Ahora verás un mensaje de advertencia sobre la edición directa de los archivos del tema.

Una vez que hagas clic en el botón 'Entiendo', verás los archivos y el código de tu tema.

Desde aquí, puedes elegir qué archivo deseas editar y realizar tus cambios.

Cómo editar HTML en WordPress usando FTP

Otro método alternativo para editar HTML en los archivos del tema de WordPress es usando FTP, también conocido como servicio de protocolo de transferencia de archivos.

Esta es una función estándar que viene con todas las cuentas de hosting de WordPress.

El beneficio de usar FTP en lugar del editor de código es que puedes solucionar problemas fácilmente usando el cliente FTP. De esta manera, no te quedarás fuera de tu panel de administración de WordPress si algo se rompe al editar HTML.

Para empezar, primero necesitarás seleccionar un software FTP. Usaremos FileZilla en este tutorial, ya que es un cliente FTP gratuito y fácil de usar para Windows, Mac y Linux.

Después de seleccionar tu cliente FTP, ahora necesitarás iniciar sesión en el servidor FTP de tu sitio. Puedes encontrar los detalles de inicio de sesión en el panel de control de tu proveedor de hosting.

Una vez que hayas iniciado sesión, verás diferentes carpetas y archivos de tu sitio web en la columna 'Sitio remoto'. Continúa y navega a los archivos de tu tema yendo a wp-content » theme.

Ahora verás diferentes temas en tu sitio web. Continúa y selecciona el tema que deseas editar.

A continuación, puedes hacer clic derecho en un archivo de tema para editar el HTML. Por ejemplo, si quieres hacer cambios en el pie de página, haz clic derecho en el archivo footer.php.

Muchos clientes FTP te permiten ver y editar el archivo y subirlos automáticamente una vez que hayas realizado los cambios. En FileZilla, puedes hacer esto haciendo clic en la opción 'Ver/Editar'.

Sin embargo, te sugerimos que descargues el archivo que deseas editar a tu escritorio antes de realizar cualquier cambio.

Después de editar el HTML, puedes reemplazar el archivo original. Para más detalles, te recomendamos seguir nuestra guía sobre cómo usar FTP para subir archivos en WordPress.

Forma sencilla de agregar código en WordPress

La forma más fácil de agregar código en WordPress es usando WPCode, el mejor plugin de fragmentos de código del mercado.

El equipo de WPBeginner diseñó este plugin para que incluso los principiantes completos puedan agregar código personalizado a su sitio en minutos. Además, hay una versión lite del plugin que es 100% gratuita de usar.

Ayuda a organizar tu código ya que se almacena en un solo lugar. Además, previene errores que pueden ocurrir al editar código manualmente.

Otro beneficio es que no tienes que preocuparte de que tu código se borre si decides actualizar o cambiar tu tema.

Lo primero que necesitarás hacer es instalar y activar el plugin gratuito WPCode en tu sitio web. Para más detalles, puedes seguir nuestro tutorial detallado sobre cómo instalar un plugin de WordPress.

Una vez que el plugin esté activo, puedes dirigirte a Fragmentos de código » Encabezado y pie de página desde tu panel de administración.

A continuación, puedes agregar el código HTML a tu sitio web en los cuadros de encabezado, cuerpo y pie de página.

Por ejemplo, digamos que quieres mostrar una barra de alerta en tu sitio web. Simplemente puedes ingresar el código HTML en el cuadro 'Cuerpo' y hacer clic en el botón 'Guardar cambios'.

Además de eso, puedes agregar un código de seguimiento de Google Analytics, píxel de Facebook y píxel de anuncios de TikTok en el encabezado. O, puedes agregar un botón de Pinterest en el pie de página de tu sitio web usando el plugin.

Con WPCode, también es fácil decidir dónde se muestran los fragmentos de código. Por ejemplo, puedes mostrar automáticamente algún código HTML al principio o al final de cada publicación.

Para más detalles, puedes ver nuestra guía sobre cómo agregar código en el encabezado y pie de página en WordPress.

Esperamos que este artículo te haya ayudado a aprender cómo editar HTML en el editor de código de WordPress. También puedes consultar nuestra guía sobre cómo agregar formularios HTML en WordPress, o ver las razones más importantes por las que deberías usar WordPress para tu sitio web.

Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.