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

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

El lenguaje de marcado de hipertexto o HTML es un código que le dice a un navegador web cómo mostrar el 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.

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

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

Sin embargo, plugins y los temas tienen sus limitaciones y es posible que no ofrezcan las funciones exactas que está buscando. Como resultado, es posible que no pueda diseñar su sitio web de la manera que desea que se vea.

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

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

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

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 le mostraremos una manera fácil de agregar código a su sitio. Puede hacer clic en los enlaces a continuación para pasar a su sección preferida.

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 un bloque HTML personalizado en su contenido para agregar código HTML.

Para comenzar, diríjase a su panel de WordPress y luego agregue una nueva publicación / página o edite un artículo existente. Después de eso, haga clic en el signo más (+) en la esquina superior izquierda y agregue un bloque ‘HTML personalizado’.

Agregar un bloque HTML personalizado en WordPress

A continuación, siga adelante e ingrese su código HTML personalizado en el bloque. También puede hacer clic en la opción ‘Vista previa’ para verificar si el código HTML funciona 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 código HTML en el editor de bloques de WordPress es editando el HTML de un bloque en particular.

Para hacer eso, simplemente seleccione un bloque existente en su contenido y luego 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 bloque individual. Continúe y edite el HTML de su contenido. Por ejemplo, puede agregar un enlace nofollow, cambiar el estilo de su texto o agregar otro código.

Edita el HTML de un bloque individual

Si desea editar el HTML de toda su 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.

Acceder 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 fácilmente el HTML en la vista 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 de su artículo.

Haga clic en Texto en el Editor clásico para editar HTML

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

Cómo editar HTML en 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 un widget HTML personalizado puede ayudarlo a personalizar su barra lateral, pie de página y otras áreas de widgets. Por ejemplo, puede insertar formularios de contacto, Google Maps, botones de llamada a la acción (CTA) y otro contenido.

Puede comenzar dirigiéndose a su panel de administración de WordPress y luego ir a Apariencia »Widgets. Después de eso, continúe y agregue un widget HTML personalizado haciendo clic en el botón ‘Agregar’.

Agregar un widget HTML personalizado

A continuación, deberá seleccionar dónde le gustaría agregar el widget HTML personalizado y elegir una posición. El área de widgets dependerá del tema de WordPress que esté utilizando. Por ejemplo, puede agregarlo a su pie de página, encabezado u otras áreas.

Seleccione el área y la posición de su widget HTML personalizado

Una vez que haya seleccionado el área y la posición del widget, continúe y haga clic en el botón ‘Guardar widget’.

Después de eso, puede hacer clic en su widget HTML personalizado, ingresar el código HTML y luego 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 su sitio web es a través del Editor de temas de WordPress (Editor de código).

Sin embargo, no recomendamos que edite directamente el código en el Editor de temas. El más mínimo error al ingresar el código puede romper su sitio web y bloquear su acceso al panel de WordPress.

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

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

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

Advertencia del editor de temas en WordPress

Una vez que haga clic en el botón ‘Entiendo’, verá los archivos y el código de su tema. Desde aquí, puede elegir qué archivo desea editar y realizar los cambios.

Editor de temas de WordPress

Cómo editar HTML en WordPress usando FTP

Otro método alternativo para editar HTML en los archivos de tema de WordPress es mediante FTP, también conocido como 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 utilizar FTP en lugar del editor de código es que puede solucionar problemas fácilmente utilizando el cliente FTP. De esta manera, no se le bloqueará su panel de WordPress si algo se rompe al editar HTML.

Para comenzar, primero deberá seleccionar un software de 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 su cliente FTP, ahora deberá iniciar sesión en el servidor FTP de su sitio. Puede encontrar los detalles de inicio de sesión en el panel de control de su proveedor de alojamiento.

Una vez que haya iniciado sesión, verá diferentes carpetas y archivos de su sitio web en la columna ‘Sitio remoto’. Continúe y navegue hasta los archivos de su tema yendo a wp-content »tema.

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

Navegue a sus archivos de tema en el cliente FTP

A continuación, puede hacer clic con el botón derecho en un archivo de tema para editar el HTML. Por ejemplo, si desea realizar cambios en 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 el archivo y cargarlos automáticamente una vez que haya realizado los cambios. En FileZilla, puede hacer esto haciendo clic en la opción ‘Ver / Editar’.

Descarga y edita tu archivo de tema

Sin embargo, le sugerimos 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 obtener más detalles, recomendamos seguir nuestra guía sobre cómo usar FTP para cargar archivos en WordPress.

Manera fácil de agregar código en WordPress

La forma más fácil de agregar código a su WordPress es usando el Insertar encabezados y pies de página WordPress plugin.

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

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

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

Lo primero que deberá hacer es instalar y activar el Insertar encabezados y pies de página plugin en tu sitio web. Para obtener más detalles, puede seguir nuestro tutorial detallado sobre cómo instalar un WordPress plugin.

Una vez el plugin está activo, puedes dirigirte a Configuración »Insertar encabezados y pies de página desde su panel de administración.

A continuación, puede agregar el 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. Simplemente puede ingresar el código HTML en el cuadro ‘Secuencias de comandos en el cuerpo’ y hacer clic en el botón Guardar.

Agregar el código HTML usando Insertar encabezados y pies de página plugin

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

Para obtener más detalles, puede ver 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 web de WordPress, o ver las razones más importantes por las que debería usar WordPress para su sitio web.

Si le gustó este artículo, suscríbase a nuestro Canal de Youtube . También puedes encontrarnos en Twitter y Facebook.

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

Fuente: wpbeginner

Entradas relacionadas

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *