EN中文ES

Insertar una calculadora en WordPress

Probado en una instalación limpia de WordPress 6 con el editor de bloques (Gutenberg). Diez minutos, sin plugins.

Copia el código para insertar

Este es el código que pegarás. El ejemplo inserta la calculadora de fichaje — cambia el widget por cualquiera de la lista.

<iframe src="https://timecardcentral.com/embed/time-card/" width="100%" height="1060" style="border:0;border-radius:12px" loading="lazy" title="Free calculator by TimeCard Central"></iframe>

Sustituye /embed/time-card/ por cualquier otro widget y ajusta la altura — la lista completa está en la Centro de ayuda portada del Centro de ayuda. El único requisito es mantener el enlace de atribución dentro del marco.

Paso 1. Abrir el editor de páginas

Inicia sesión en tu escritorio de WordPress (yoursite.com/wp-admin). En el menú izquierdo abre Pages → Add New Page (① la entrada del menú, ② el botón Add Page en la captura; o abre una página existente — los pasos son idénticos). Ponle un título como “Time Card Calculator”.

Igual para los posts: Posts → Add New.

Escritorio de WordPress con Pages → Add New Page resaltado en el menú izquierdo

Paso 2. Añadir el bloque Custom HTML

Haz clic en el botón negro + (Add block) ① en el área de contenido. Escribe html en el buscador de bloques y pulsa Custom HTML ②. Atajo: escribe /html , en una línea vacía y pulsa Enter.

Insertor de bloques de WordPress con la búsqueda html y el bloque Custom HTML resaltado

Paso 3: Pegar el código

El bloque muestra un botón Edit HTML — haz clic. Se abre un editor de código (con pestañas opcionales de CSS y JavaScript); pega el código en la pestaña HTML ① y pulsa Update ③ — la vista previa ② muestra la calculadora dentro del editor.

Bloque Custom HTML de WordPress con el código iframe pegado y la vista previa mostrando la calculadora

Paso 4. Publicar y ver la página

Haz clic en el botón negro Publish, confirma con Continue, final review → Publish, luego abre View Page. La calculadora está activa en la página ① — la altura, los bordes y la carga diferida vienen del propio código.

Página publicada de WordPress mostrando la calculadora de fichaje funcionando en el sitio real

Preguntas frecuentes

¿Puedo poner la calculadora en la barra lateral o el pie?
Sí. Ve a Appearance → Widgets, añade un bloque Custom HTML a tu barra lateral o pie, y pega el mismo código. En espacios estrechos usa un widget estrecho (hours, clock in/out u overtime) — los widgets de 1060 px lucen mejor a ancho completo.
El código se muestra como texto en vez de calculadora.
El código cayó en un bloque de párrafo o de código. Bórralo, añade un bloque Custom HTML (paso 2) y pega ahí. En el editor clásico, cambia primero de Visual a Text (HTML).
El tema la muestra muy estrecha.
El iframe es width:100%, llena la columna que lo contenga. Si tu tema aprieta la columna de contenido, usa un widget estrecho (hours, overtime, clock in/out) o una plantilla de página a ancho completo.
¿Ralentiza mi sitio o afecta a PageSpeed?
Efecto prácticamente nulo: el código usa loading="lazy", nada se carga hasta que el visitante se acerca, y tu página no añade JavaScript ni CSS extra.
¿Puedo cambiar la altura?
Sí — edita el atributo height del código. Parte de las alturas sugeridas y ajusta a tu tema; si aparece una barra de desplazamiento dentro del marco, añade unos píxeles.

Otras guías

GhostLa tarjeta HTML en el editor KoenigJoomlaMódulo personalizado, dentro de artículosCualquier sitio HTML / sitio estáticoPáginas hechas a mano, Hugo, Jekyll, Astro