How to Edit HTML in WordPress code editor

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

¿Busca una manera fácil de editar el 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 el contenido de sus páginas web. La edición del código 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é debería editar HTML en WordPress?

Contents

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 temas tienen sus limitaciones y es posible que no ofrezcan las funciones exactas que busca. Por lo tanto, es posible que no pueda diseñar su sitio web de la manera deseada. Aquí es donde la edición HTML es realmente útil. Puede realizar fácilmente una personalización avanzada utilizando código HTML. Ofrece mucha flexibilidad y control sobre el aspecto y el funcionamiento de su sitio. Además, aprender a editar código HTML también puede ayudarlo a identificar y corregir errores en su sitio web de WordPress cuando no tiene acceso al tablero.
Notar: Si no desea editar el código 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, echemos un vistazo a las diferentes formas de editar código HTML en un sitio web de WordPress. Veremos cómo editar HTML usando el Editor de bloques y el Editor clásico, y también le mostraremos una forma sencilla de agregar código a su sitio. Puede hacer clic en los enlaces a continuación para ir directamente 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 código 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, vaya a su panel de WordPress y luego agregue una nueva publicación / página o edite una publicación 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
Luego 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 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 editar código HTML en el editor de bloques de WordPress es editar el código HTML de un bloque en particular. Para hacer esto, simplemente seleccione un bloque existente en su contenido y luego haga clic en el menú de tres puntos. Luego 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 código 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 su publicación completa, 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» en las opciones desplegables.
Accede al editor de código

Cómo editar HTML en WordPress Classic Editor

Si está utilizando el editor clásico de WordPress, puede editar fácilmente el código 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 código HTML de su artículo.
Haga clic en Texto en el editor clásico para editar el código HTML
Después de eso, puede editar el código 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, etc.

Cómo editar código 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 integrar 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 desea agregar el widget HTML personalizado y elegir una posición. El área de widgets dependerá del tema de WordPress que esté utilizando. Por ejemplo, es posible que pueda 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 el código HTML personalizado
Ahora puede visitar su sitio web para ver el widget HTML personalizado en acción.
Vista previa HTML personalizada

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

Otra forma de editar el código HTML de su sitio web es utilizar el 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 evitar que acceda al panel de WordPress. Además, si actualiza su tema, se perderán todos los cambios. Dicho esto, si planea editar el código HTML con el editor de temas, es una buena idea hacer una copia de seguridad de su sitio web antes de realizar cambios. Entonces dirígete a Apariencia »Editor de temas desde su panel de WordPress. Ahora verá un mensaje de advertencia sobre la modificación directa de archivos de tema.
Advertencia del editor de temas de WordPress
Una vez que haga clic en el botón «Entiendo», verá los archivos y el código de su tema. Desde allí, puede elegir el archivo que desea editar y realizar sus cambios.
Editor de temas de WordPress

Cómo editar HTML en WordPress usando FTP

Otro método alternativo para modificar el código HTML en los archivos de temas de WordPress es utilizar 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 quedará atascado en su panel de WordPress si algo se rompe mientras edita el código HTML. Para comenzar, primero deberá seleccionar un software FTP. Usaremos FileZilla en este tutorial porque es un cliente FTP gratuito y fácil de usar para Windows, Mac y Linux. Después de seleccionar su cliente FTP, ahora debe conectarse al servidor FTP de su sitio. Puede encontrar la información de inicio de sesión en el panel de control de su proveedor de alojamiento. Una vez que haya iniciado sesión, verá varias 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 cambiar.
Acceda a sus archivos de tema en el cliente FTP
Luego, puede hacer clic derecho en un archivo de tema para editar el código 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 cargarlo automáticamente después de realizar 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 modificar el código HTML, puede reemplazar el archivo original. Para obtener más detalles, le recomendamos que siga nuestra guía sobre el uso de FTP para cargar archivos en WordPress.

Una forma fácil de agregar código en WordPress

La forma más fácil de agregar código a su WordPress es usar el complemento Insertar encabezados y pies de página de WordPress. El equipo de MundoCMS diseñó este complemento, para que pueda agregar código fácilmente a su sitio en minutos, y lo hemos hecho 100% gratis. 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 modificar el código manualmente. Otra ventaja es que no tiene que preocuparse de que se borre su código si decide actualizar o cambiar su tema. Lo primero que debe 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 complemento de WordPress. Una vez que el complemento esté activo, puede ir a Parámetro »Insertar encabezados y pies de página desde su panel de administración. Luego, puede agregar el código HTML a su sitio web en las áreas 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 código HTML mediante el complemento Insertar encabezados y pies de página
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 complemento. 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 el costo real de construir 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 para ver tutoriales en video de WordPress. También puede encontrarnos en Twitter y Facebook.

Leave a Reply