Agrega un widget de precio del oro en vivo a WordPress

Si administras un blog de finanzas, el sitio de un dealer o una página de portafolio en WordPress, puedes agregar un precio del oro en vivo sin un plugin, sin clave de API y sin PHP. El configurador del widget de precio del oro genera un solo iframe para ti. Pégalo en un bloque HTML personalizado o en un widget HTML de Elementor y funciona.

Configura el widget

Ve a goldprice.dev/widgets/gold-price. No se necesita registro ni clave de API. Elige una moneda, una unidad (onza troy o gramo), un quilate, un tema y un idioma, y la página construye el iframe correspondiente para ti. Copia ese fragmento y úsalo en cualquiera de los métodos de instalación de abajo.

Si te saltas el configurador y solo quieres los valores predeterminados, este es el iframe que genera para USD, onza troy, 24 quilates, tema automático e inglés:

<iframe src="https://goldprice.dev/embed/xau?currency=USD&unit=oz&karat=24&theme=auto&locale=en" title="Live gold price" width="360" height="190" loading="lazy" style="border:0;width:100%;max-width:360px" referrerpolicy="strict-origin-when-cross-origin"></iframe>

El widget se actualiza por sí solo cada 60 segundos. Está alojado por goldprice.dev, así que ninguna clave de API llega jamás al código fuente de tu página.

Instálalo con el bloque HTML personalizado de Gutenberg

1. Abre la entrada o página en el editor de bloques.
2. Agrega un bloque HTML personalizado (busca "HTML personalizado" en el insertador de bloques).
3. Pega tu fragmento del iframe en el bloque.
4. Cambia a Vista previa para confirmar que la tarjeta se renderiza, luego publica.

WordPress autoalojado normalmente guarda esto correctamente para un administrador. Si iniciaste sesión como editor o colaborador sin la capacidad unfiltered_html, WordPress elimina la etiqueta <iframe> al guardar y el bloque queda en blanco. Consulta la propia documentación del bloque HTML personalizado de WordPress para ver cómo se asigna esa capacidad. La solución es que un administrador pegue el bloque, o que se otorgue al rol la capacidad unfiltered_html.

Agrégalo a una barra lateral o área de plantilla

El mismo bloque HTML personalizado funciona fuera del cuerpo de la entrada. En Apariencia → Widgets, agrega un widget HTML personalizado a cualquier barra lateral o área de pie de página y pega tu fragmento del iframe. En un tema de bloques, agrega el bloque HTML personalizado a una parte de plantilla, como la barra lateral o una plantilla de página, mediante el Editor del sitio. De cualquier forma, el widget se renderiza donde esté el bloque, actualizándose por sí solo.

Instálalo con Elementor

1. Edita la página con Elementor.
2. Arrastra el widget HTML a la página.
3. Pega tu fragmento del iframe en el panel de código del widget HTML.
4. Actualiza la página.

El widget HTML de Elementor renderiza el marcado sin procesar directamente, incluyendo iframes, sin eliminar nada. Consulta la guía del widget HTML de Elementor para más detalles sobre dónde encaja frente a otras opciones de embebido.

Opciones del widget

El configurador define estos valores como parámetros de consulta en el src del iframe. Un valor no reconocido simplemente recae en el valor predeterminado, así que un error tipográfico no rompe el embebido.

Rara vez necesitas construir esta URL a mano. Define las opciones en el configurador y copia el iframe que genera.

Si el widget no aparece

Espacio en blanco donde debería estar el iframe, en WordPress autoalojado. Casi siempre es el problema de la capacidad unfiltered_html mencionado arriba: el editor de bloques eliminó silenciosamente la etiqueta al guardar. Vuelve a agregar el bloque como administrador, o revisa el contenido guardado de la entrada en la vista de código del editor en busca de un iframe eliminado.

Nada se renderiza en WordPress.com. Los planes gratuitos y de nivel inferior de WordPress.com no permiten embeber iframes personalizados en el bloque HTML personalizado; necesitas un plan con las funciones de hosting habilitadas. Consulta la página de soporte del bloque HTML personalizado de WordPress.com para ver qué planes califican.

El widget carga pero se ve cortado. La tarjeta necesita al menos 320px de ancho y 190px de alto. Si la barra lateral o columna de contenido de tu tema es más angosta que eso, coloca el widget en un área de ancho completo en lugar de reducirlo.

Cuándo la API es la mejor opción

El iframe cubre moneda, unidad, quilate, tema e idioma, pero sigue siendo una tarjeta fija en un diseño fijo. Si quieres el precio dentro de tu propio componente en lugar de un iframe, un diseño que las opciones de tema no cubran, o datos históricos para un gráfico propio, usa en su lugar la API sin procesar y construye tú mismo la visualización. El conversor de precio del oro es un ejemplo funcional de cómo se ve eso para la conversión de moneda y unidad.

Licencia y atribución

El iframe oficial es gratuito para embeber en sitios personales y comerciales siempre que se mantenga sin modificar y su atribución visible permanezca intacta. Aplicarle white-label o presentarlo como tu propio feed requiere un acuerdo Enterprise por separado. Los datos de la API sin procesar usados en tu propio producto siguen la licencia comercial normal a partir del plan Pro. Los términos completos están en los Términos de Servicio y la guía de atribución.