尝试将 Magicmouse.js 添加到自定义 wordpress 主题 - 无法加载答案

【问题标题】：Trying to add Magicmouse.js to custom wordpress theme - Cant get it to load尝试将 Magicmouse.js 添加到自定义 wordpress 主题 - 无法加载
【发布时间】：2021-06-04 22:11:02
【问题描述】：

我正在从头开始构建一个 WP 主题，并且我已将 maymouse.js 的 tye js 和 css 文件添加到我的主题 css 和 js 目录中。我已经使用

将 fuctions.php 文件中的两个元素排入队列

function cursor_javascript() {
wp_enqueue_script( 'mousemagic-js', get_template_directory_uri() . '/js/magic_mouse.js' );
}
add_action( 'wp_enqueue_scripts', 'cursor_javascript' );

function cursor_stylesheets() {
    wp_enqueue_style( 'mousemagic-css', get_template_directory_uri() . '/css/magic-mouse.css' );
}
add_action( 'wp_enqueue_scripts', 'cursor_stylesheets' );

我正在尝试让光标显示在所有页面上，但我没有让它出现。当我在页面上使用检查时，我可以看到正在加载的元素。如何在不使用任何插件的情况下将功能添加到每个页面？

提前致谢！！！

【问题讨论】：

标签： javascript php html css wordpress

【解决方案1】：

你需要在加载后初始化magicmouse。

在您的主题目录中创建一个新脚本，例如magicmouse.local.js 并在文件中放入初始化调用。

例如这是magicmouse.local.js的内容：

options = {
  "cursorOuter": "circle-basic",
  "hoverEffect": "circle-move",
  "hoverItemMove": false,
  "defaultCursor": false,
  "outerWidth": 30,
  "outerHeight": 30
}
magicMouse(options);

然后用 wp_enqueue_script 加载这个脚本

例如这是更新后的函数

function cursor_javascript() {
wp_enqueue_script( 'mousemagic-js', get_template_directory_uri() . '/js/magic_mouse.js' );
wp_enqueue_script( 'mousemagic-js-local', get_template_directory_uri() . '/js/magicmouse.local.js' );
}
add_action( 'wp_enqueue_scripts', 'cursor_javascript' );

【讨论】：

我已经更新了我的答案，以包含一个如何将其加入队列的示例
当我将它作为一个单独的脚本加入队列时，我仍然无法让光标显示在页面上。查看源它为magicmouse加载css和js，然后我将带有光标选项的脚本排入队列以向前调用它，但仍然没有。嗯，我对使用 js 有点菜鸟，所以也许我在初始化它时做错了什么？
你能在页面源代码中看到新的magicmouse.local.js 脚本吗？它是否包含正确的代码？
另外，您检查浏览器 JS 控制台是否有错误？
在............magic_mouse.js?ver=5.7.2:1 Uncaught TypeError: Cannot read property 'appendChild' of null at magicMouse 的控制台中出现错误(magic_mouse.js?ver=5.7.2:1) at VM57 cursor.js:9 magicMouse @ magic_mouse.js?ver=5.7.2:1 (匿名) @ VM57 cursor.js:9

【解决方案2】：

感谢@Andrea Oliviato 的帮助！

问题已解决。

问题在于我没有正确封装本地 js 脚本。我使用了以下内容；

jQuery(document).ready(function(){
  options = {
    "cursorOuter": "circle-basic",
    "hoverEffect": "circle-move",
    "hoverItemMove": false,
    "defaultCursor": false,
    "outerWidth": 30,
    "outerHeight": 30
    }
  magicMouse(options);
})

光标功能运行良好，谢谢！

【讨论】：