LightNode Logo

Cómo añadir HTML al body en WordPress

2024-09-29

Introducción

Añadir HTML personalizado al body de tu sitio WordPress puede mejorar su funcionalidad y apariencia. Esta guía te mostrará varios métodos para lograr esta tarea.

Usando un plugin

  1. Instala y activa el plugin "Header and Footer Scripts".
  2. Ve a Ajustes > Header and Footer Scripts.
  3. Desplázate hasta la sección "Scripts in Body".
  4. Pega tu código HTML en este campo.
  5. Haz clic en "Guardar cambios".

Editando el archivo functions.php de tu tema

  1. Accede a tus archivos de WordPress mediante FTP o el Administrador de archivos en cPanel.
  2. Navega hasta wp-content/themes/nombre-de-tu-tema/.
  3. Abre el archivo functions.php.
  4. Añade el siguiente código al final del archivo:
function add_custom_body_html() {
    echo '<div>Tu HTML personalizado aquí</div>';
}
add_action('wp_body_open', 'add_custom_body_html');
  1. Reemplaza 'Tu HTML personalizado aquí' con el HTML que desees.
  2. Guarda el archivo.

Usando un bloque de HTML personalizado (Editor Gutenberg)

  1. Edita la página o entrada donde quieres añadir HTML.
  2. Añade un nuevo bloque y elige "HTML personalizado".
  3. Introduce tu código HTML en el bloque.
  4. Actualiza o publica tu página.

Mejores prácticas

  • Siempre haz una copia de seguridad de tu sitio antes de realizar cambios.
  • Prueba tu HTML personalizado en un entorno de pruebas primero.
  • Asegúrate de que tu HTML sea válido para evitar romper el diseño de tu sitio.

Cómo añadir HTML al body en WordPress

Preguntas frecuentes

P: ¿Por qué necesitaría añadir HTML personalizado al body de mi sitio WordPress?

R: Añadir HTML personalizado al body puede ayudarte a implementar funciones como scripts personalizados, códigos de seguimiento o elementos de diseño que no son fácilmente alcanzables a través de los ajustes estándar de WordPress o las opciones de tu tema.

P: ¿Afectará el añadir HTML personalizado al rendimiento de mi sitio?

R: Depende del HTML que estés añadiendo. El HTML simple no debería afectar notablemente al rendimiento. Sin embargo, si estás añadiendo scripts complejos o grandes cantidades de código, podría potencialmente ralentizar tu sitio. Siempre prueba los cambios en un sitio de pruebas primero.

P: ¿Es seguro editar el archivo functions.php?

R: Editar archivos del tema como functions.php puede ser arriesgado si no estás familiarizado con PHP. Siempre haz una copia de seguridad de tu sitio antes de realizar cambios y, si es posible, utiliza un tema hijo para hacer personalizaciones.

P: ¿Cuál es la diferencia entre añadir HTML al header y al body?

R: El HTML en el header se utiliza típicamente para metaetiquetas, CSS y algunos scripts que necesitan cargarse temprano. El HTML en el body es generalmente para contenido que aparece en la página o scripts que pueden cargarse después de que la página comience a renderizarse.

P: ¿Puedo añadir HTML diferente a diferentes páginas?

R: Sí, usando el Método 3 (Bloque de HTML personalizado) puedes añadir HTML específico a páginas o entradas individuales. Para HTML en todo el sitio, los Métodos 1 o 2 son más adecuados.

P: ¿Qué debo hacer si el HTML añadido rompe mi sitio?

R: Si tu sitio se rompe después de añadir HTML personalizado, puedes:

  1. Volver a una copia de seguridad si hiciste una.
  2. Eliminar el plugin si usaste el Método 1.
  3. Borrar el código que añadiste a functions.php si usaste el Método 2.
  4. Eliminar el bloque de HTML personalizado si usaste el Método 3.