Javascript 使用Wordpress进行编程

我正试图在我的wordpress安装中包含.js插件同位素，位于页面底部：

我在codepen上使用了这个示例：

我已将来自CDN的脚本排入队列，如下所示：

wp_enqueue_script( 'isotope', 'https://npmcdn.com/isotope-layout@3/dist/isotope.pkgd.js');

如果有帮助的话，我可以包括我的整个排队文件

这是我正在尝试的HTML模板。目前我已将初始化脚本放在底部，但会将其移动到自己的.js文件中：

<h1>Isotope - masonry layout mode</h1>

<div class="grid">
  <div class="grid-item grid-item--width2"></div>
  <div class="grid-item grid-item--height2"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item grid-item--width2 grid-item--height2"></div>
  <div class="grid-item grid-item--width2"></div>
  <div class="grid-item grid-item--width2"></div>
  <div class="grid-item grid-item--height2"></div>
  <div class="grid-item"></div>
  <div class="grid-item grid-item--width2"></div>
  <div class="grid-item grid-item--height2"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
</div>


<script type="text/javascript">

// external js: isotope.pkgd.js

$('.grid').isotope({
  itemSelector: '.grid-item',
  masonry: {
    columnWidth: 100
  }
});

</script>

---

CSS和HTML看起来很好-我只是不知道我是否正确地询问它或者初始化.js是正确的，因为它似乎可以工作，但它只是没有按照代码笔排序

我刚刚检查了您提供的URL，并在控制台中找到了以下内容：

未捕获的TypeError:$不是函数

看看这个，我会像这样替换它：

jQuery(function($) {
    $('.grid').isotope({
      itemSelector: '.grid-item',
      masonry: {
        columnWidth: 100
      }
    });
});

---

这应该可以解决您的问题。

我会将同位素激发调用放入一个js文件中，并在同位素.js调用之后将其排队。那就行了。目前，您使用的是vanilla js，而不是示例中的jQuery文档加载版本。这意味着同位素不是在你的网站上发射的元素。

jQuery(function($) {
    $('.grid').isotope({
      itemSelector: '.grid-item',
      masonry: {
        columnWidth: 100
      }
    });
});