¿Está buscando una manera fácil de editar HTML en su sitio web de WordPress?
El lenguaje de marcado de hipertexto o HTML es un código que indica 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 solució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 complementos para cambiar la apariencia de su sitio web y personalizar diferentes elementos sin tocar una sola línea de código.
Sin embargo, los complementos y 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 editar 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 ayudarte a identificar y corregir errores en tu sitio web de WordPress cuando no tienes acceso al panel de control.
Nota: Si no desea editar HTML, pero aún desea opciones de personalización completas, le recomendamos usar un generador 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 forma fácil de agregar código a su sitio. Puedes hacer clic en los enlaces de abajo para ir a la sección que prefieras.
- 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 Widgets de WordPress
- Cómo Editar HTML en el Editor de temas de WordPress
- Cómo Editar HTML en WordPress Mediante FTP
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.
En primer lugar, puede usar un bloque HTML personalizado en su contenido para agregar código HTML.
Para comenzar, 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 ‘HTML personalizado’.
A continuación, ingrese su código HTML personalizado en el bloque. También puedes hacer clic en la opción «Vista previa» para comprobar si el código HTML funciona 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, siga adelante y haga clic en la opción ‘Editar como HTML’.
Ahora verás el HTML de un bloque individual. Sigue adelante y edita el HTML de tu contenido. Por ejemplo, puede agregar un enlace nofollow, cambiar el estilo de su texto o agregar otro código.
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. A continuación, seleccione ‘Editor de código’ en las opciones desplegables.
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 de texto.
Para acceder a la vista de texto, simplemente edite una publicación de blog o agregue 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, puede editar el HTML de su contenido. Por ejemplo, puede 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 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 ayudarte a personalizar la barra lateral, el pie 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 otro contenido.
Puede comenzar dirigiéndose a su panel de administración de WordPress y luego ir a Widgets de apariencia. Después de eso, siga adelante y agregue un widget HTML personalizado haciendo clic en el botón «Agregar».
A continuación, deberá seleccionar dónde desea agregar el widget HTML personalizado y elegir una posición. El área de widgets dependerá del tema de WordPress que estés usando. Por ejemplo, es posible que pueda agregarlo a su pie de página, encabezado u otras áreas.
Una vez que haya seleccionado el área y la posición del widget, siga adelante 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».
Ahora puede visitar su 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 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 introducir código puede romper su sitio web y bloquearle el acceso al panel de WordPress.
Además, si actualizas tu tema, todos tus cambios se perderán.
Dicho esto, si está considerando editar HTML con el editor de temas, es una buena idea hacer una copia de seguridad de su sitio web antes de realizar cualquier cambio.
A continuación, dirígete al Editor de temas «Apariencia» desde tu panel de WordPress. Ahora verá un mensaje de advertencia sobre la edición directa de archivos de tema.
Una vez que haga clic en el botón «Entiendo», verá los archivos y el código del tema. Desde aquí, puede elegir qué archivo desea editar y realizar los cambios.
Cómo editar HTML en WordPress Mediante FTP
Otro método alternativo para editar HTML en los archivos de temas de WordPress es mediante el uso de 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.
El beneficio de usar FTP en lugar del editor de código es que puede solucionar fácilmente los problemas utilizando el cliente FTP. De esta manera, no quedará bloqueado en su panel de WordPress si algo se rompe al editar HTML.
Para comenzar, primero deberá 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 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». Siga adelante y navegue a sus archivos de tema yendo al tema wp-content».
Ahora verás diferentes temas en tu sitio web. Siga adelante y seleccione el tema que desea editar.
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 secundario en el pie de página.archivo php.
Muchos clientes FTP le permiten ver y editar el archivo y cargarlo automáticamente una vez que haya realizado los cambios. En FileZilla, puede hacer esto haciendo clic en la opción ‘Ver / Editar’.
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.
Forma fácil de Agregar Código en WordPress
La forma más fácil de agregar código a tu WordPress es usando el plugin de WordPress Insertar encabezados y pies de página.
El equipo de WPBeginner diseñó este complemento, para que pueda agregar código fácilmente a su sitio en minutos, y lo hemos hecho 100% de uso gratuito.
También ayuda a organizar el código, ya que está almacenado en un solo lugar. Además, evita los errores que se pueden causar al editar 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 tendrá que hacer es instalar y activar el complemento Insertar encabezados y pies de página en su sitio web. Para obtener más detalles, puede seguir nuestro tutorial detallado sobre cómo instalar un plugin de WordPress.
Una vez que el complemento esté activo, puede dirigirse 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 alertas en su sitio web. Simplemente puede ingresar el código HTML en el cuadro «Scripts en el cuerpo» y hacer clic en el botón Guardar.
Además, 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 mediante el complemento.
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 te 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 construir un sitio web de WordPress, o ver las razones más importantes por las que debe usar WordPress para su sitio web.
Si te gustó este artículo, suscríbete a nuestro canal de YouTube para tutoriales en vídeo de WordPress. También nos puedes encontrar en Twitter y Facebook.