快速开始
复制以下代码,粘贴到 WordPress 的「自定义 HTML」小工具中即可显示每日英语句子:
<iframe width="280" height="300" src="https://www.luomor.com/daily_english/daily_english.html" frameborder="0"></iframe>
在 WordPress 中添加步骤
- 登录 WordPress 后台 — 进入您的网站管理面板
- 外观 → 小工具 — 找到侧边栏或页脚小工具区域
- 添加「自定义 HTML」小工具 — 点击 + 号,搜索「HTML」
- 粘贴代码 — 将上方 iframe 代码粘贴到内容框
- 保存 — 点击「保存」按钮,完成!
效果预览
尺寸调整
根据您的侧边栏宽度,可以调整 iframe 的尺寸:
| 场景 | 宽度 | 高度 | 代码 |
|---|---|---|---|
| 窄侧边栏 | 240px | 320px | width="240" height="320" |
| 标准侧边栏 | 280px | 300px | width="280" height="300" |
| 宽侧边栏 | 320px | 280px | width="320" height="280" |
| 内容区域 | 100% | 300px | style="width:100%;height:300px" |
提示:使用
style="width:100%" 可以让 iframe 自适应容器宽度,推荐在响应式主题中使用。
自适应宽度版本
<iframe style="width:100%;min-width:240px;height:300px" src="https://www.luomor.com/daily_english/daily_english.html" frameborder="0"></iframe>
常见问题
为什么 iframe 不显示?
可能的原因:1) WordPress 主题限制了 iframe 使用,请检查主题安全设置;2) 浏览器插件拦截了 iframe,尝试禁用广告拦截器;3) 服务器配置问题,联系主机服务商。
如何调整 iframe 大小?
修改 iframe 标签中的 width 和 height 属性值,例如 width="320" height="280"。建议使用 style="width:100%" 实现自适应宽度。
可以自定义小部件样式吗?
可以下载 HTML 源文件后自行修改 CSS 样式,然后托管到您自己的服务器上。修改后的版本可以添加自定义配色、字体等。
小部件数据如何更新?
小部件通过 API 实时获取烙馍网每日英语句子,每天自动更新,无需手动刷新。历史句子可通过日期选择器查询。
- 确保您的 WordPress 主题允许在小工具中使用 iframe(大多数主题都支持)
- 如果 iframe 不显示,检查主题是否有限制 iframe 的安全设置
- 建议在小工具标题中不要重复「每日英语」等文字,保持简洁
- 如需修改样式,请下载 HTML 文件后自行托管