Cómo añadir o editar código HTML en WordPress

El sistema de gestión de contenidos WordPress es una forma sencilla de crear un sitio web sin escribir ni modificar una sola línea de código, pero si tienes experiencia en lenguaje HTML, saber cómo agregar y editar códigos HTML en WordPress es importante para aprovechar tu experiencia en este lenguaje y desarrollar y mejorar tu sitio web, así como identificar y resolver algunos tipos de problemas que puedas enfrentar mientras administras el sitio. En el artículo de hoy te mostraremos cómo editar código HTML en WordPress, y te explicaremos cómo hacerlo correctamente de más de una forma.

¿Cuándo necesitas editar HTML en tu sitio WordPress?

Con la enorme cantidad de temas de WordPress y complementos gratuitos y de pago (complementos de WordPress) que cuentan con diferentes características y funciones, las ocasiones en las que necesitarás editar código HTML son pocas. En lugar de hacer personalizaciones avanzadas en el tema de tu sitio, puedes instalar otro tema que se adapte a tus necesidades, y en lugar de editar el código para resolver un problema, puedes instalar un complemento que lo resuelva automáticamente por ti. Sin embargo, hay momentos en los que agregar código HTML o hacer cambios en el código es mejor que usar otro tema o instalar complementos, y no se pueden enumerar todas estas razones en un solo párrafo, porque los sitios web se construyen con propósitos diferentes. Por esta razón, mencionaremos aquí las razones más importantes que podrían hacer que necesites agregar código HTML a tu sitio o editar el código existente: no hay complementos que realicen la tarea que deseas, ya que a veces puedes necesitar realizar una tarea específica para la cual no hay complementos que te ayuden a ejecutarla automáticamente.

Necesitas hacer personalizaciones específicas en tu sitio, ya que los temas gratuitos disponibles en la sección de temas de WordPress en el sitio oficial ofrecen opciones de personalización relativamente limitadas, y tienes que aceptar lo que hay o hacer cambios en el código por ti mismo. Revisar y editar códigos HTML en WordPress puede ayudarte a identificar y resolver problemas relacionados con el diseño del sitio y cómo aparecen los elementos en sus páginas cuando no hay forma de resolver el problema usando un complemento.

También puedes necesitar modificar código HTML en WordPress en muchos otros casos, y si tienes buena experiencia administrando sitios web usando WordPress, sabrás cuándo necesitarás modificar código HTML en tu sitio por ti mismo. Lee también: Explicación de HTML y CSS y cómo usarlos Editar y agregar código HTML en el editor de bloques Hay varias formas en el editor de bloques de WordPress que te permiten editar y agregar código HTML a la página o artículo, y la primera de estas formas es mediante el uso del bloque (HTML personalizado), que en inglés se llama (Custom HTML), donde este bloque te permite agregar código HTML dentro de la página de edición de manera similar a cómo agregarías cualquier párrafo de texto.

Para usar el bloque Custom HTML para agregar código HTML a la página o artículo, coloca el cursor en el lugar donde deseas colocar el código HTML, luego haz clic en el botón (+) que aparece junto al cursor, e ingresa en el cuadro de búsqueda que aparece en la ventana pequeña que se abre el nombre del bloque y haz clic en él como se muestra en la siguiente imagen. Cómo agregar un bloque Custom HTML a la página o artículo en WordPress se insertará un cuadro de texto en el lugar donde estaba el cursor, y este cuadro representa el bloque Custom HTML donde puedes escribir el código HTML. El lugar donde debes escribir el código HTML en el bloque Custom HTML tenga en cuenta que puedes ver una vista previa del código que estás agregando en Custom HTML haciendo clic en el botón (Vista previa) que aparece encima del bloque cuando lo seleccionas, y también puedes volver a mostrar el código haciendo clic en (HTML).

Por ejemplo, puedes ingresar el siguiente código y hacer clic en (Vista previa), y se te mostrará una lista de dos elementos, que es el mismo resultado que mostrará el navegador al visitante cuando visite la página. Cómo editar código HTML en el editor de bloques

Cómo editar código HTML en el editor clásico

El bloque Custom HTML te mostrará el código anterior cuando hagas clic en (Vista previa) como en esta imagen. Vista previa del código HTML para ver cómo aparecerá al visitante cuando visite la página El editor de bloques no solo proporciona la capacidad de agregar código HTML personalizado, sino que también te permite editar el código de los bloques que insertas en la página, como imágenes, párrafos, listas y otros, es decir, después de agregar un bloque a la página puedes editarlo usando HTML.

Para hacer esto, selecciona el bloque cuyo código deseas mostrar y editar, y haz clic en el botón de opciones (los tres puntos), luego haz clic en (Editar como HTML) del menú desplegable que aparece Cómo mostrar el código HTML de uno de los bloques agregados a la página se te mostrará el código HTML del bloque en un campo designado en el lugar donde el bloque era visible, y podrás hacer los cambios que desees en él para mostrar el elemento mejor al visitante. Y si deseas mostrar y editar el código HTML de todo el contenido de la página o artículo que estás editando, puedes hacerlo cambiando a (Editor de código) haciendo clic en las opciones (los tres puntos en la esquina superior derecha o izquierda de la página de edición), luego seleccionando la opción apropiada de la sección Editor en el menú desplegable que aparece como se muestra en la siguiente imagen.

Cambiar al editor de código en el editor de bloques Una vez que hagas clic en (Editor de código), la sección de la página de edición donde se encuentran los bloques cambiará, donde desaparecerán todos los elementos y aparecerá código HTML en su lugar, y podrás hacer los cambios que desees en el código, así como eliminarlo completamente e insertar otro código en su lugar.

Agregar código HTML personalizado a la barra lateral

El editor de bloques ofrece la capacidad de agregar código HTML a la barra lateral o pie de página, pero solo a la sección de la página que muestra los elementos del artículo o contenido, y esto es porque el editor se especializa en agregar y editar esta sección, pero puedes usar (widgets) para agregar elementos usando HTML a la página en secciones diferentes a la sección donde se muestra el artículo. Agregar código HTML a diferentes áreas (secciones) de la interfaz de usuario ayuda a personalizar esas áreas para aumentar la tasa de conversión atrayendo al visitante para que realice las acciones deseadas, donde puedes insertar los elementos que deseas en diferentes secciones de la interfaz de usuario usando código HTML en ellas.

Para agregar código HTML a la barra lateral o pie de página en WordPress, ve a la página (Widgets) colocando el cursor sobre Apariencia y luego haciendo clic en la opción (Widgets). Haz clic en la opción Widgets para ir a la página de Widgets En la página de Widgets encontrarás una herramienta llamada (HTML personalizado), y cuando hagas clic en esta herramienta se abrirá una pequeña ventana que te pide que selecciones la sección donde deseas agregar la herramienta.

Dependiendo del tema que uses, es posible que puedas insertar el código en el encabezado, barra lateral, pie de página o solo en algunas de estas áreas. De todas formas, selecciona el área donde deseas agregar código HTML personalizado, luego haz clic en el botón (Agregar widget) como se muestra en esta imagen.

Cómo agregar un widget HTML personalizado a una de las áreas de la interfaz de usuario

Nota: También puedes agregar una herramienta HTML personalizado a una de las secciones del sitio mediante arrastrar y soltar, donde arrastras la herramienta y la sueltas en una de las secciones que se encuentran junto a ella, y cada una representa una de las secciones del sitio. Después de hacer clic en el botón (Agregar widget) o agregar una herramienta de código HTML personalizado mediante arrastrar y soltar, puedes determinar dónde deseas que aparezca el resultado del código en el área donde lo agregaste también mediante arrastrar y soltar.

El widget (o herramienta) HTML personalizado aparecerá en la sección de la barra lateral o pie de página en la página de Widgets en forma de dos campos donde ingresa el título de la sección en uno y el código HTML en el otro, teniendo en cuenta que el texto que ingresas en el campo de título aparece tal cual al visitante, mientras que el código que ingresas en el otro campo es interpretado por el navegador y el resultado se muestra al visitante. Después de ingresar el título y el código que deseas en los campos designados, no olvides hacer clic en el botón (Guardar) para aplicar y publicar los cambios.

Agregar código HTML personalizado a la barra lateral en tu sitio WordPress

Observa cómo apareció el resultado del código HTML que ingresamos en la imagen anterior en la barra lateral cuando abrimos la página de inicio del sitio web aparecerá el resultado del código HTML en la barra lateral Vale la pena notar que puedes agregar el código HTML que desees y mostrar los elementos que desees en la barra lateral, pie de página o encabezado, entonces si deseas agregar imágenes, tablas u otros elementos puedes hacerlo.

Cómo editar código HTML en el editor clásico

Si aún estás usando el editor clásico para agregar y editar artículos y páginas en tu sitio, puedes mostrar el código HTML de la página y editarlo haciendo clic en la pestaña (Texto) ubicada en la parte superior del área de edición, y puedes volver a mostrar los elementos de forma visual haciendo clic en la palabra que se encuentra junto a ella (Visual), donde estas dos opciones te permiten alternar entre ver el contenido como código HTML o visualmente (como se mostrará al visitante), y podrás hacer cambios en el contenido en ambos casos. Imagen que muestra cómo alternar entre ver el contenido como código HTML o como aparecerá al visitante Vale la pena notar que el editor clásico no ofrece la capacidad de editar el código HTML de un elemento o bloque individual como lo hace el editor de bloques, sino que solo ofrece editar y agregar al código de la manera que acabamos de explicar arriba.

Cómo editar el código HTML de tu tema Los temas de WordPress se construyen usando HTML, CSS y otros lenguajes, y puedes hacer cambios en el tema en WordPress si lo deseas aunque no te lo recomendamos, porque cualquier error que cometas al editar el código del tema puede destruir tu sitio web e impedir que accedas al panel de control de WordPress, además cuando actualices el tema perderás todos los cambios que hayas realizado en él. De todas formas, si deseas hacer cambios en el código del tema te recomendamos que hagas una copia de seguridad de tu sitio antes de comenzar a realizar los cambios, y puedes aprender cómo hacer una copia de seguridad de tu sitio consultando nuestro artículo donde explicamos varios métodos para hacerlo de manera detallada y práctica (Explicación de cómo hacer una copia de seguridad de tu sitio). Para mostrar el código del tema de WordPress que uses y realizar cambios en él, ve al editor de temas haciendo clic en la opción (Editor de temas) que aparece en el menú desplegable cuando pasas el cursor sobre la opción (Apariencia) en el menú lateral del panel de control de WordPress.

Cómo ir al editor de temas en WordPress aparecerá una pequeña ventana que te dice que es recomendable que no hagas cambios en los archivos del tema directamente, y que cometer errores aquí puede dañar tu sitio e impedir que funcione correctamente. Una vez que hagas clic en el botón (Entiendo) aparecerá la página del editor de temas que te permite editar los códigos de todos los archivos del tema, y la siguiente imagen muestra cómo cambiar entre archivos y dónde aparece el código contenido en el archivo.

Cómo usar el editor de temas para editar el código del tema Con esto terminamos la explicación de cómo editar código HTML en WordPress de varias formas que funcionan en diferentes sitios, e indicamos que hay otras formas que permiten editar el código en WordPress, pero los métodos que explicamos aquí son los mejores, más fáciles y más seguros. Y queremos señalar al final que contratar a un desarrollador de WordPress para que realice los cambios que deseas es una opción mejor que editar códigos de archivos de tema por ti mismo si no tienes mucha experiencia en los lenguajes que se utilizaron para desarrollar el tema.