WordPress中Instafeed无法加载Feed，报ReferenceError: Instafeed未定义

碰到ReferenceError: Instafeed is not defined这个报错，说白了就是浏览器在执行你的初始化代码时，还没找到Instafeed的脚本文件。我帮你梳理几个最常见的排查和解决方向：

1. 先把脚本路径改对 #

你写的path/to/instafeed.min.js是示例占位符，必须换成实际有效的路径：

• 如果是把脚本放在WordPress主题的js文件夹里，推荐用WordPress自带的函数获取路径，避免相对路径出错：

  <script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/instafeed.min.js"></script>
  

• 嫌自己部署麻烦的话，直接用CDN链接（选最新稳定版就行）：

  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/instafeed.js/2.0.0/instafeed.min.js"></script>
  

• 验证路径是否正确的小技巧：把路径复制到浏览器地址栏，回车后如果能下载到脚本文件就是对的，要是跳404页面，说明路径肯定写错了。

2. 调整脚本的加载顺序 #

你的初始化代码必须放在Instafeed脚本之后执行，不然浏览器还没读完Instafeed的代码，就跑去执行你的new Instafeed()了，肯定找不到这个对象。

正确的代码顺序应该是这样的：

<!-- 先加载Instafeed脚本 -->
<script type="text/javascript" src="正确的路径/instafeed.min.js"></script>
<!-- 再写初始化代码 -->
<script type="text/javascript">
  var feed = new Instafeed({
    get: 'tagged',
    tagName: 'awesome',
    clientId: 'YOUR_CLIENT_ID'
  });
  feed.run();
</script>

另外，在WordPress里更稳妥的做法是把脚本放在页面底部加载（比如用wp_footer钩子），或者给脚本加defer属性，同时把初始化代码用DOM加载完成事件包裹，确保页面元素和脚本都加载完再执行：

document.addEventListener('DOMContentLoaded', function() {
  var feed = new Instafeed({
    get: 'tagged',
    tagName: 'awesome',
    clientId: 'YOUR_CLIENT_ID'
  });
  feed.run();
});

3. 排查WordPress的脚本冲突 #

有时候其他插件或者主题的脚本会和Instafeed冲突，甚至不小心覆盖了全局的Instafeed变量：

• 先暂时禁用所有其他插件，看看错误会不会消失，如果消失了，就逐个重新启用插件，找到冲突的那个
• 检查主题的functions.php文件，有没有用wp_deregister_script这类操作，不小心把Instafeed的脚本给移除了
• 可以在浏览器控制台输入console.log(window.Instafeed)，如果返回undefined就是脚本没加载成功，如果有返回值，那就是初始化时机的问题

4. 注意Instafeed版本的API要求 #

顺便提一句，如果你用的是Instafeed v2.x版本，仅靠clientId可能无法获取tagged类型的内容，Instagram现在大多需要使用access token才能访问这类数据。不过先解决当前的脚本加载问题，等Instafeed能正常识别了，再去处理API权限的问题就行。

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