在 WordPress 中嵌入计算器
在全新的 WordPress 6（块编辑器 Gutenberg）上实测。十分钟搞定，无需任何插件。
复制嵌入代码
这就是你要粘贴的代码。示例是工时卡计算器 —— 按上表换成任意挂件。
<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>把 /embed/time-card/ 换成任意其他挂件并调整高度 —— 完整列表见 帮助中心 首页。唯一的要求是保留挂件内的署名链接。
第 1 步：打开页面编辑器
登录 WordPress 后台（yoursite.com/wp-admin）。在左侧菜单打开 Pages → Add New Page （① 即截图中的菜单项，② 是 Add Page 按钮；或打开已有页面 —— 步骤完全相同）。给页面起个标题，比如“Time Card Calculator”。
同样适用于文章： Posts → Add New。
第 2 步：添加 Custom HTML 块
点击正文区的黑色 + （Add block）按钮 ①。在块搜索里输入 html 并点击 Custom HTML ②。快捷方式：输入 /html ，在空行输入后回车。
第 3 步：粘贴嵌入代码
块上会显示 Edit HTML 按钮 —— 点击它。代码编辑器打开（还有可选的 CSS 和 JavaScript 标签页）；把嵌入代码粘进 HTML 标签页 ① 并点击 Update ③ —— 实时预览 ② 会在编辑器里直接显示计算器。
第 4 步：发布并查看线上页面
点击黑色 Publish，确认 Continue, final review → Publish，然后打开 View Page。计算器已上线 ① —— 高度、边框、加载行为都来自这段代码。
常见问题
可以把计算器放到侧边栏或页脚吗？
可以。进入 Appearance → Widgets，向侧边栏或页脚小工具区添加一个 Custom HTML 块，粘贴同样的代码即可。窄栏位请用窄版挂件（hours、clock in/out 或 overtime）——1060px 的高挂件更适合通栏页面。
代码显示为纯文本而不是计算器。
代码被粘进了段落块或代码块。删掉它，添加一个 Custom HTML 块（见第 2 步）再粘贴。经典编辑器则先从 Visual 切到 Text（HTML）标签页。
主题把它显示得很窄。
iframe 是 width:100%，会填满所在栏位。如果主题把正文栏压得很窄，就换窄版挂件（hours、overtime、clock in/out）或使用全宽页面模板。
这会拖慢我的网站或影响 PageSpeed 吗？
几乎没有影响：代码使用 loading="lazy"，访客滚动到挂件附近前不会加载任何内容，你的页面也不增加任何额外 JavaScript 或 CSS。
可以改高度吗？
可以 —— 直接修改代码里的 height 属性。以建议高度为起点按主题微调；若框内出现滚动条，再加几个像素。