Build a Gold Jewelry Price Calculator with JavaScript
Build a gold jewelry price calculator from live per-gram karat prices, with exact decimal math, caching, margins, and clear valuation limits.
阅读 →为WordPress添加实时黄金价格小组件
只需一个iframe，即可为WordPress添加免费、可配置的实时黄金价格小组件。支持Gutenberg和Elementor，无需API密钥，无需插件。
Developer更新于 2026年7月16日
语言:
中文
如果你运营的是一个财经博客、交易商网站或WordPress上的投资组合页面，无需插件、API密钥或任何PHP代码，就能添加一个实时黄金价格。黄金价格小组件配置器会为你生成一个单独的iframe。将它粘贴进Custom HTML区块或Elementor的HTML小组件即可直接使用。
配置小组件
前往goldprice.dev/widgets/gold-price。无需注册，也无需API密钥。选择货币、单位（金衡盎司或克）、成色、主题和语言，页面就会为你构建匹配的iframe。复制该代码片段，用于下方任一安装方法。
如果你跳过配置器，只想使用默认值，以下就是它为USD、金衡盎司、24成色、自动主题和英语生成的iframe：
<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>
该小组件每60秒自动刷新一次。它由goldprice.dev托管，因此API密钥永远不会出现在你的页面源码中。
用Gutenberg的Custom HTML区块安装
- 在区块编辑器中打开文章或页面。
- 添加一个Custom HTML区块（在区块插入器中搜索"Custom HTML"）。
- 将你的iframe代码片段粘贴进该区块。
- 切换到预览确认卡片能够渲染，然后发布。
对于管理员账号，自托管的WordPress通常能正确保存这段代码。如果你是以不具备 unfiltered_html 权限的编辑者或投稿者身份登录，WordPress会在保存时剥离 <iframe> 标签，该区块会变成空白。关于这项权限如何分配，请参见WordPress官方的Custom HTML区块文档。解决方法是让管理员来粘贴该区块，或者为该角色授予 unfiltered_html 权限。
添加到侧边栏或模板区域
同一个Custom HTML区块在文章正文之外同样适用。在外观 → 小工具中，将Custom HTML小工具添加到任意侧边栏或页脚区域，并粘贴你的iframe代码片段。在区块主题中，可通过站点编辑器将Custom HTML区块添加到模板部件，例如侧边栏或页面模板。无论哪种方式，小组件都会在该区块所在的位置渲染，并自动刷新。
用Elementor安装
- 用Elementor编辑页面。
- 将HTML小组件拖到页面上。
- 将你的iframe代码片段粘贴进HTML小组件的代码面板。
- 更新页面。
Elementor的HTML小组件会直接渲染原始标记，包括iframe，不会剥离任何内容。关于它与其他嵌入选项相比适用于哪些场景，请参见Elementor的HTML小组件指南。
小组件选项
配置器会将这些设置为iframe src 上的查询参数。无法识别的值会直接回退到默认值，所以一个拼写错误不会破坏嵌入效果。
| 参数 | 取值 | 默认值 | 作用 |
|---|---|---|---|
currency | 31个选项：USD、EUR、GBP、JPY、AUD、CAD、CHF、CNY、INR、IDR等21种 | USD | 显示价格所用的报价货币 |
unit | oz、gram | oz | 按金衡盎司还是按克计价 |
karat | 24、22、21、20、18、16、14、10 | 24 | unit=gram 时使用的成色 |
theme | auto、light、dark | auto | 浅色、深色，或跟随访客的系统设置 |
locale | en、ar、es、id、ja、ko、zh | en | 卡片中的语言与数字格式 |
你几乎不需要手动构建这个URL。在配置器上设置好选项，复制它生成的iframe即可。
如果小组件没有显示出来
自托管WordPress中iframe应显示的位置出现空白。 几乎总是上述 unfiltered_html 权限问题：区块编辑器在保存时悄悄移除了该标签。以管理员身份重新添加该区块，或在编辑器的代码视图中检查已保存的文章内容，看iframe是否被剥离。
WordPress.com上什么都不渲染。 WordPress.com的免费版及较低层级套餐不允许在Custom HTML区块中使用自定义iframe嵌入；你需要一个启用了托管功能的套餐。关于哪些套餐符合条件，请参见WordPress.com的Custom HTML区块支持页面。
小组件能加载但看起来被截断了。 该卡片至少需要320px的宽度和190px的高度。如果你主题的侧边栏或内容列比这更窄，请将小组件放到全宽区域，而不是压缩它。
何时API是更好的选择
这个iframe涵盖了货币、单位、成色、主题和语言，但它终究是固定布局中的一张固定卡片。如果你想把价格嵌入自己的组件而非iframe，需要主题选项无法覆盖的设计，或者需要历史数据来绘制自己的图表，请改用原始API自行构建展示层。黄金价格换算器就是一个货币和单位换算的实际示例。
许可与署名
只要保持内容不被修改且可见的署名保持完整，官方iframe就可以免费嵌入到个人和商业网站上。将其加上白标或以自己的信息源呈现，需要另行签订Enterprise协议。将原始API数据用于你自己的产品，按照从Pro套餐起的常规商业许可执行。完整条款见服务条款和署名指南。
相关指南
Backtest local-currency gold without FX look-ahead bias
Build a reproducible local-currency gold backtest from settled XAU/USD bars and dated FX observations, without inserting future rates into historical rows.
阅读 →Gold price WebSocket on Reddit: the streaming questions, answered
The real-time gold streaming questions that come up on Reddit, answered: whether a gold WebSocket exists, how the goldprice.dev XAU and XAG tick stream works end to end, and which other APIs actually offer one (most metals APIs just poll).
阅读 →goldprice.dev
实时黄金价格、历史 OHLC 数据与多源聚合 — 通过 REST 和 SSE 接口提供。