Particles.js 使用 Wordpress

Question

我的 particles.js 无法加载我的 WorpdPress 自定义主题。控制台抛出此错误：

我找到了这个粒子效果的插件，但我不知道如何使用它:D 而且，我想实现我自己的。所以，粒子效果很好，直到我将我的网站转换为 WordPress 主题......这显然是 JSON 文件的问题......我该如何解决这个问题？

顺便说一句....它在本地主机上....在服务器上会有什么不同吗？

Answer 1

好的，所以我设法解决了这个问题。不确定这是否是解决方案，但对我有用的是：我必须将 JSON 配置内联放入自定义 app.js 文件中。然后它起作用了。

当 JSON 配置在单独的文件中时，WP 无法加载它。它抛出 GET 404 未找到。所以....这对我有用...

我在这里找到了解决方案：https://github.com/VincentGarreau/particles.js/issues/157

Answer 2

我所做的是将 json 设置包含在一个变量中，并将该代码放入您放置此代码的 javascript 文件中

particlesJS.load('particles-js', 'assets/particles.json', function() {
console.log('callback - particles.js config loaded');
});

但是我没有用particlesJS.load，只是用了particlesJS。所以它看起来像这样

var config = {
  particles: {
    number: {
      value: 100
    },
    color: {
      value: "#d4d4d4"
    },
    shape: {
      type: "circle",
      stroke: {
        width: 0,
        color: "#d4d4d4"
      },
      polygon: {
        nb_sides: 5
      }
    },
    opacity: {
      value: 0.5,
      random: false,
      anim: {
        enable: false,
        speed: 1,
        opacity_min: 0.1,
        sync: false
      }
    },
    size: {
      value: 3,
      random: true,
      anim: {
        enable: false,
        speed: 40,
        size_min: 0.1,
        sync: false
      }
    },
    line_linked: {
      enable: true,
      distance: 150,
      color: "#d4d4d4",
      opacity: 0.4,
      width: 1
    },
    move: {
      enable: true,
      speed: 2,
      direction: "none",
      random: false,
      straight: false,
      out_mode: "out",
      attract: {
        enable: false,
        rotateX: 600,
        rotateY: 1200
      }
    }
  },
  retina_detect: true
}

particlesJS("your-id-or-class", config, function () {})

Particles.js 使用 Wordpress

Particles.js with Wordpress

wordpress

json

themes

particles.js