如何在WordPress页面/文章中插入带JavaScript的widget组件

首先先修正你当前代码的三个问题，修正后的可用代码如下，记得把key替换为你自己的IQAir生成的对应值：

<div name="airvisual_widget" key="xxxxxxxxxxxxxxxxxxxxxxxx"></div>
<script type="text/javascript" src="https://cdn.airvisual.net/assets/widgets/widget_v3.0.js"></script>

你原代码的问题分别是：使用了中文全角引号、脚本地址用了HTTP协议会被HTTPS站点拦截、script结束标签转义错误。 #

方法1：嵌入到单篇文章/单独页面 #

• 打开对应文章/页面的WordPress编辑器，点击添加区块
• 搜索选择「自定义HTML」区块
• 将上述修正后的代码粘贴到HTML区块的输入框中
• 点击发布/更新，刷新前台页面即可看到组件

方法2：嵌入到侧边栏、页脚等全局位置 #

• 进入WordPress后台，点击「外观」-「小工具」
• 找到「自定义HTML」小工具，选择你要放置的目标区域（侧边栏、页脚等）后点击添加
• 可自定义小工具标题（如“实时空气质量”），将修正后的代码粘贴到内容框
• 点击保存，刷新站点前台对应位置即可看到组件

加载失败排查 #

• 确认代码里的key为IQAir给你的正确数值，没有漏填、错填字符
• 如果你安装了站点缓存插件，先清理缓存后再刷新前台页面

内容的提问来源于stack exchange，提问作者Sarah M