试图将Magicmouse.js添加到自定义wordpress主题中-无法加载



我从头开始构建一个WP主题,并将mightmouse.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' );

我试图让光标显示在所有页面上,但我没有让它自己出现。当我在页面上使用inspect时,我可以看到加载的元素。如果不使用任何插件,我该如何在每个页面上轻松地添加函数?

提前感谢!!!

加载后需要初始化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' );

感谢@Andrea Oliviato的帮助!

问题已经解决。

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

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

光标功能工作得很好,谢谢!

最新更新