如何在WordPress站点添加purecounter.js？解决计数器不显示报错问题

在WordPress站点集成purecounter.js时，出现以下报错：

Uncaught ReferenceError: PureCounter is not defined

导致计数器数字无法正常显示，针对该问题，可按以下步骤排查解决：

1. 验证脚本文件路径与完整性 #

• 确认purecounter_vanilla.js文件存在于指定路径主题目录/assets/vendor/purecounter/下
• 直接访问你的域名/wp-content/themes/你的主题名/assets/vendor/purecounter/purecounter_vanilla.js，检查文件是否能正常加载
• 若使用的是PureCounter的非Vanilla版本，需对应调整文件名（如改为purecounter.js）

2. 移除不必要的jQuery依赖 #

PureCounter Vanilla版本不需要依赖jQuery，需修改注册脚本的依赖配置：

wp_register_script(
  'purecounter',
  get_template_directory_uri() . '/assets/vendor/purecounter/purecounter_vanilla.js',
  array(), // 移除jQuery依赖，改为空数组
  '1.5.0',
  true
);
wp_enqueue_script('purecounter');

3. 确保初始化代码在脚本加载后执行 #

方法一：通过独立脚本初始化 #

1. 注册一个依赖purecounter的初始化脚本：

wp_register_script(
  'purecounter-init',
  get_template_directory_uri() . '/assets/js/purecounter-init.js',
  array('purecounter'), // 明确依赖purecounter脚本
  '1.0.0',
  true
);
wp_enqueue_script('purecounter-init');

2. 在purecounter-init.js文件中写入初始化代码：

document.addEventListener('DOMContentLoaded', function() {
  new PureCounter();
});

方法二：使用内联脚本初始化 #

直接在注册purecounter脚本后添加内联初始化代码：

wp_register_script(
  'purecounter',
  get_template_directory_uri() . '/assets/vendor/purecounter/purecounter_vanilla.js',
  array(),
  '1.5.0',
  true
);
wp_enqueue_script('purecounter');

// 添加内联初始化代码，确保在脚本加载完成后执行
wp_add_inline_script('purecounter', 'document.addEventListener("DOMContentLoaded", function() { new PureCounter(); });');

4. 检查脚本加载时机 #

• 确保没有手动添加async属性干扰脚本加载顺序（wp_enqueue_script的最后一个参数true已将脚本放在footer延迟加载）
• 避免在HTML中直接写内联<script>初始化，除非确认purecounter脚本已经完成加载

内容的提问来源于stack exchange，提问作者Md. Nuruzzaman Chowdhury