¿Está buscando una manera fácil de editar HTML en su sitio de WordPress?

El lenguaje de marcado de hipertexto, o HTML, es un código que le dice a un navegador web cómo mostrar contenido en sus páginas web. La edición de HTML es útil para la personalización avanzada y la resolución de problemas.

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

Cómo editar HTML en el editor de código de WordPress

¿Por qué editar HTML en WordPress?

WordPress ofrece miles de temas y complementos para cambiar el aspecto de su sitio web y personalizar diferentes elementos sin tocar una sola línea de código.

Sin embargo, los complementos y los temas tienen sus limitaciones y es posible que no proporcionen la funcionalidad exacta que está buscando. Como resultado, es posible que no pueda diseñar su sitio web de la manera que desea.

Aquí es donde la edición de HTML realmente ayuda. Puede realizar fácilmente una personalización avanzada utilizando código HTML. Proporciona mucha flexibilidad y control sobre cómo se ve y funciona su sitio web.

Además, aprender a editar HTML también puede ayudarlo a identificar y corregir errores en su sitio de WordPress cuando no puede acceder a su tablero.

notas: Si no desea editar HTML, pero aún necesita opciones de personalización completas, le recomendamos que utilice un generador de páginas de WordPress de arrastrar y soltar, como SeedProd.

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

Cubriremos cómo editar HTML usando el editor de bloques y el editor clásico, y le mostraremos una manera fácil de agregar código a su sitio. Puede saltar a la sección que desee haciendo clic en el enlace a continuación.

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 su publicación o página.

Primero, puede usar bloques HTML personalizados en su contenido para agregar código HTML.

Primero, vaya a su panel de control de WordPress y agregue una nueva publicación/página o edite una existente. Después de eso, haga clic en el signo más (+) en la esquina superior izquierda y agregue el bloque “HTML personalizado”.

Agregar bloques HTML personalizados en WordPress

A continuación, continúe e ingrese su código HTML personalizado en el bloque. También puede hacer clic en la opción Vista previa para verificar que el código HTML funcione correctamente y cómo se verá su contenido en su sitio web en vivo.

Código HTML personalizado en el editor de WordPress

Otra forma de agregar o cambiar el código HTML en el editor de bloques de WordPress es editar el HTML de un bloque específico.

Para hacer esto, simplemente seleccione un bloque existente en su contenido y haga clic en el menú de tres puntos. A continuación, continúe y haga clic en la opción “Editar como HTML”.

Haga clic en los tres puntos y seleccione Editar como HTML

Ahora verá el HTML de un solo bloque. Continúe y edite el HTML del contenido. Por ejemplo, puede agregar enlaces nofollow, cambiar estilos de texto o agregar otro código.

Edite el HTML de un solo bloque

Si desea editar el HTML de toda la publicación, puede usar el “Editor de código” en el editor de bloques de WordPress.

Puede acceder al editor de código haciendo clic en la opción de tres puntos en la esquina superior derecha. Luego seleccione “Editor de código” de las opciones desplegables.

Accede al editor de código

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

Si está utilizando el editor clásico de WordPress, puede editar HTML fácilmente en la vista de texto.

Para acceder a la vista de texto, simplemente edite una publicación de blog o agregue una nueva. Cuando esté en el editor clásico, haga clic en la pestaña Texto para ver el HTML del artículo.

Haga clic en el texto en el editor clásico para editar HTML

Después de eso, puede editar el HTML del contenido. Por ejemplo, puede poner en negrita diferentes palabras para que se destaquen, usar un estilo de cursiva en su texto, crear listas, agregar una tabla de contenido y más.

Cómo editar HTML en los widgets de WordPress

¿Sabía que puede agregar y editar código HTML en el área de widgets de su sitio?

En WordPress, el uso de widgets HTML personalizados puede ayudarlo a personalizar las barras laterales, los pies de página y otras áreas de widgets. Por ejemplo, puede incrustar formularios de contacto, mapas de Google, botones de llamada a la acción (CTA) y más.

Puede comenzar yendo a su panel de administración de WordPress, luego vaya a Apariencia » WidgetsDespués de eso, continúe y agregue un widget HTML personalizado haciendo clic en el botón Agregar.

Agregar widgets HTML personalizados

A continuación, debe elegir dónde desea agregar su widget HTML personalizado y elegir una ubicación. El área de widgets dependerá del tema de WordPress que esté utilizando. Por ejemplo, puede agregarlo a un pie de página, encabezado u otra área.

Elija el área y la ubicación del widget HTML personalizado

Después de seleccionar el área y la ubicación del widget, continúe y haga clic en el botón “Guardar widget”.

Después de eso, puede hacer clic en el widget HTML personalizado, ingresar el código HTML y hacer clic en el botón Guardar.

Ingrese HTML personalizado

Ahora puede visitar su sitio web para ver el widget HTML personalizado en acción.

Vista previa HTML personalizada

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 editar el código directamente en el editor de temas. El más mínimo error al ingresar el código puede dañar su sitio web y evitar que acceda a su panel de control de WordPress.

Además, si actualiza el tema, todos sus cambios se perderán.

Dicho esto, si está considerando editar HTML con un editor de temas, es una buena idea hacer una copia de seguridad de su sitio antes de realizar cualquier cambio.

A continuación, vaya a Apariencia » Editor de temas desde tu panel de WordPress. Ahora verá un mensaje de advertencia sobre la edición directa del archivo de tema.

Advertencias del editor de temas en WordPress

Después de hacer clic en el botón “Entiendo”, verá el archivo y el código de su tema. Desde aquí, puede seleccionar el archivo que desea editar y realizar cambios.

Editor de temas de WordPress

Cómo editar HTML en WordPress usando FTP

Otra alternativa a la edición de HTML en los archivos de temas de WordPress es usar FTP, también conocido como el servicio de Protocolo de transferencia de archivos.

Esta es una característica estándar que viene con todas las cuentas de alojamiento de WordPress.

La ventaja de usar FTP en lugar de un editor de código es que puede solucionar problemas fácilmente usando un cliente FTP. De esta manera, no se bloqueará su panel de control de WordPress si algo sale mal mientras edita su HTML.

Primero, primero debe elegir un software FTP. Usaremos FileZilla para este tutorial porque es un cliente FTP gratuito y fácil de usar para Windows, Mac y Linux.

Después de elegir un cliente FTP, ahora debe iniciar sesión en el servidor FTP de su sitio. Puede encontrar sus datos de inicio de sesión en el panel de control del panel de control de su proveedor de alojamiento.

Después de iniciar sesión, verá las diferentes carpetas y archivos de su sitio web en la columna Sitio remoto.Continúe y navegue a su archivo de tema por wp-content » temas.

Ahora verá diferentes temas en su sitio web. Continúe y elija el tema que desea editar.

Navegue a su archivo de tema en un cliente FTP

A continuación, puede hacer clic derecho en el archivo del tema para editar el HTML. Por ejemplo, si desea cambiar el pie de página, haga clic con el botón derecho en el archivo footer.php.

Muchos clientes FTP le permiten ver y editar archivos y cargarlos automáticamente después de realizar cambios. En FileZilla, puede hacer esto haciendo clic en la opción Ver/Editar.

Descarga y edita tu archivo de tema

Sin embargo, le recomendamos que descargue el archivo que desea editar en su escritorio antes de realizar cualquier cambio.

Después de editar el HTML, puede reemplazar el archivo original. Para más detalles, te recomendamos que sigas nuestra guía sobre cómo subir archivos en WordPress usando FTP.

La Manera Fácil de Agregar Código en WordPress

La forma más fácil de agregar código a WordPress es usar el complemento Insertar encabezado y pie de página de WordPress.

El equipo de AprenderWP diseñó este complemento para que pueda agregar fácilmente código a su sitio web en minutos, y lo hemos hecho 100% gratuito.

También ayuda a organizar su código porque está almacenado en un solo lugar. Además, previene los errores que se pueden producir al editar manualmente el código.

Otro beneficio es que no tiene que preocuparse de que se elimine su código si decide actualizar o cambiar el tema.

Lo primero que debe hacer es instalar y activar el complemento Insertar encabezado y pie de página en su sitio web. Para obtener más detalles, puede seguir nuestro tutorial detallado sobre cómo instalar complementos de WordPress.

Después de activar el complemento, puede ir a Configuración » Insertar encabezado y pie de página desde tu panel de administración.

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

Por ejemplo, supongamos que desea mostrar una barra de alerta en su sitio web. Todo lo que necesita hacer es ingresar el código HTML en el cuadro “Script en el cuerpo” y hacer clic en el botón “Guardar”.

Agregue código HTML usando el complemento Insertar encabezado y pie de página

Además de esto, puede agregar el código de seguimiento de Google Analytics y el píxel de Facebook en el encabezado, o usar el complemento para agregar un botón de Pinterest en el pie de página de su sitio web.

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

Esperamos que este artículo le haya ayudado a aprender a editar HTML en el editor de código de WordPress. También puede consultar nuestra guía sobre cuánto cuesta realmente crear un sitio de WordPress, o las razones más importantes por las que debe usar WordPress en su sitio web.

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

Los datos expuestos en este sitio web son de índole informativo, no necesariamente están actualizados. Esta información es una recopilación de información de internet.