Cómo agregar 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 ni una sola línea de código, pero si tienes experiencia en lenguaje de marcado 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 para explorar 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 de WordPress?

Con la gran cantidad de temas de WordPress y complementos gratuitos y de pago (complementos de WordPress) que tienen características y propiedades diferentes, los momentos en los que necesitarás editar código HTML son pocos, ya que en lugar de realizar 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. Sin embargo, hay ocasiones en las que agregar código HTML o realizar modificaciones en el código es mejor que usar otro tema o instalar complementos, y no es posible enumerar todas estas razones en un párrafo, ya que los sitios web se crean con diferentes objetivos. Por esta razón, mencionaremos aquí las razones más importantes que pueden 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 implementarla automáticamente.

Necesitas realizar personalizaciones precisas en tu sitio, los temas gratuitos disponibles en la sección de temas de WordPress del sitio oficial ofrecen opciones de personalización relativamente limitadas, y tienes que conformarte con lo que existe o realizar modificaciones en el código tú mismo. Ver y editar códigos HTML en WordPress puede ayudarte a explorar 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 muchas otras situaciones, y si tienes buena experiencia administrando sitios usando WordPress, sabrás cuándo necesitarás modificar código HTML en tu sitio tú 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 a través del uso del bloque (HTML personalizado), que en inglés se llama (Custom HTML), este bloque te permite agregar código HTML dentro de la página de edición de una manera similar a agregar un párrafo de texto.

Para usar el bloque Custom HTML para agregar código HTML en la página o artículo, coloca el cursor en el lugar donde deseas agregar el código HTML, luego haz clic en el botón (+) que aparece junto al cursor, ingresa en el cuadro de búsqueda que aparece en la pequeña ventana que se muestra 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, este cuadro representa el bloque

Custom HTML donde puedes escribir tu código HTML. El lugar donde debes escribir el código HTML en el bloque Custom HTML Ten en cuenta que puedes obtener una vista previa del código que estás agregando en Custom HTML haciendo clic en el botón (vista previa) que aparece sobre el bloque cuando haces clic en él, y también puedes volver a mostrar el mismo 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 compuesta por 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 saber 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 (tres puntos), luego haz clic en (editar como HTML) en el 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 estaba visible, y podrás realizar las modificaciones que desees 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 al (editor de código) haciendo clic en las opciones (tres puntos ubicados en la parte superior derecha o izquierda de la página de edición), luego selecciona la opción apropiada de la sección del editor en el menú desplegable que te 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á, todos los elementos desaparecerán y en su lugar aparecerá código HTML, y podrás realizar las modificaciones que desees en el código, y también podrás eliminarlo completamente e insertar otro código en su lugar.

Agregar código HTML personalizado a la barra lateral no

El editor de bloques proporciona 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, 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 distintas de 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 ejecute las acciones requeridas, ya que puedes insertar los elementos que deseas en las diferentes secciones de la interfaz de usuario mediante 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 de (Widgets) colocando el cursor del mouse 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 en solo algunas de estas áreas. De cualquier forma, 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 personalizada a una de las secciones del sitio mediante arrastrar y soltar, donde arrastras la herramienta y la sueltas en una de las secciones ubicadas a su lado, y cada una de ellas representa una de las secciones del sitio. Después de hacer clic en el botón (Agregar widget) o de agregar una herramienta de código HTML personalizado mediante arrastrar y soltar, puedes determinar el lugar donde 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 barra lateral o pie de página en la página de Widgets como dos campos donde ingresas 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 de WordPress

Ten en cuenta 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 Apareció el resultado del código HTML en la barra lateral Vale la pena mencionar que puedes agregar el código HTML que desees y mostrar los elementos que deseas en la barra lateral, pie de página o encabezado, así que 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 usas 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 visualmente haciendo clic en la palabra ubicada junto a ella (Visual), donde estas dos opciones cambian entre mostrar el contenido como código HTML o visualmente (como se mostrará al visitante), y podrás realizar ediciones en el contenido en ambos casos. Imagen que muestra cómo cambiar entre mostrar el contenido como código HTML o como aparecerá al visitante Vale la pena mencionar que el editor clásico no proporciona la capacidad de editar el código HTML de un elemento o bloque individual como lo hace el editor de bloques, sino que solo proporciona editar y agregar el 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 y CSS y otros lenguajes, y puedes realizar 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. De cualquier forma, si deseas realizar cambios en el código del tema, te recomendamos que hagas una copia de seguridad de tu sitio antes de comenzar con las modificaciones, y puedes saber cómo hacer una copia de seguridad de tu sitio revisando nuestro artículo en el que explicamos varias formas de hacerlo en detalle y de manera 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 usas 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 del mouse sobre la opción (Apariencia) en el menú lateral del panel de control de WordPress.

Cómo ir al editor de temas en WordPress Se te mostrará una pequeña ventana informándote que es aconsejable no realizar cambios directamente en los archivos del tema, 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), se te mostrará 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 el lugar donde aparece el código en el archivo.

Cómo usar el editor de temas para editar el código del tema Aquí terminamos la explicación de cómo editar código HTML en WordPress de varias formas que funcionan en diferentes sitios, y señalamos 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 nos gustaría señalar al final que contratar a un desarrollador de WordPress para realizar los cambios que deseas es una opción mejor que editar códigos de archivos de tema tú mismo si no tienes mucha experiencia en los lenguajes utilizados para desarrollar el tema.