Añadir código HTML en un sitio web es una tarea muy frecuente y existen muchas formas diferentes de hacerlo.
Te comparto como es que un Experto en WordPress lo añade, sin necesidad de instalar plugins adicionales.
¿Por que insertar código HTML en HTML?
Existen varias situaciones por las que necesitas añadir código personalizado en tu sitio wordpress, como insertar un formulario de Hubspot, crear un botón flotante de WhatsApp o para usar un mapa de calor.
Pero el uso más común del código personalizado es para incluir pixeles de seguimiento, que te ayudan a analizar como interactuan las personas con tus campañas de anuncios.
Recomendación: Usa Site Kit para insertar el código de Google
¿Pensabas añadir un código HTML de Google? Entonces tengo una recomendación: usa el plugin de Google Site Kit.
Con Site Kit puedes configurar diferentes servicios de Google, lo mejor de todo es que inserta automáticamente el código HTML necesario para vincular Search Console o para el seguimiento de Analytics.
Es una extensión oficial desarrollada por Google y es ideal para este tipo de situaciones, ademas de que te permite acceder a estadísticas del sitio directamente desde el panel de administración de WordPress.
¿Como insertar código HTML en una pagina o entrada de WordPress?
Si solo necesitas insertar código personalizado en una pagina o entrada de WordPress puede usar los bloques o widgets directamente.
Insertar código HTML en Gutenberg
Gutenberg incluye un bloque de HTML que te permite añadir código a una entrada o una pagina y es la forma más eficiente de añadir snippets a un contenido.
Para hacerlo desde el editor busca el bloque de HTML
Después de insertarlo, puedes pegar el contenido HTML y guardar, de ese modo, cada que alguien visualice tu post se va a ejecutar el código personalizado.
En maquetadores
Los maquetadores más populares, como Elementor, Bricks, Breakdance, entre otros, también tienen funciones y widgets para ingresar código personalizado sin necesidad de usar otros plugins.
Una nota: ten cuidado con los maquetadores. Suelen eliminar cualquier rastro del bloque que usaste para ingresar el código, por lo que se vuelve difícil de editar después.
Insertar HTML personalizado de manera global en WordPress
Esta es la opción que yo recomiendo para añadir código personalizado y es la que utilizo para todos mis sitios WordPress.
Si necesitas instalar código HTML de manera global (que se ejecute en todo el sitio) lo mejor es usar el archivo functions.php de tu tema.
Añadir código HTML personalizado que se ejecute en todo el sitio
Para insertar código en todo el sitio añade este hook a tu archivo functions.php y simplemente reemplaza
add_action('wp_footer', function () {
?>
<!-- Inserta tu código HTML aqui -->
<?php
});Añadir código personalizado solo en algunas paginas
Si quieres que tu código se ejecute solo en ciertas paginas puedes usar este hook. Reemplaza el slug con el slug de la pagina donde debe ejecutarse.
add_action('wp_footer', function () {
# Cambia el slug por el slug de la pagina donde debe ejecutarse
if (is_page('pagina-de-contacto-ejemplo')) {
?>
<!-- Inserta tu código HTML aqui -->
<?php
}
});Evitar que el código se ejecute cuando inicias sesión
Y si quieres que el código no se ejecute cuando inicias sesión en WordPress (como cuando añades un pixel de seguimiento y no quieres crear falsos positivos) usa este código:
add_action('wp_footer', function () {
if (!is_user_logged_in()) {
?>
<!-- Inserta tu código HTML aqui -->
<?php
}
});Insertar código HTML con un plugin
Es la opción que menos recomiendo, pero también puedes instalar un plugin que facilite insertar scripts adicionales.
Una regla que puede ayudarte a mantener un sitio wordpress rápido y fácil de usar es minimizar el uso de plugins que instalas.
Sí aun así decides hacerlo te recomiendo WP Code, que aunque tiene una interfaz demasiado confusa, puede ayudarte a mantener en orden todos los snippets de código que incluyas.
¿Problemas con tu sitio web? Ponte en contacto conmigo
He ayudado a decenas de clientes en México, Estados Unidos y Latinoamérica con mi servicio de Consultoría WordPress, especialmente diseñado para pequeños negocios y emprendedores.