在 wordpress fuctions.php 子主题中链接 javascript 文件？

Question

您好，我正在尝试在我的 wordpress 二十十二子主题的函数 php 中添加几个 js 文件。

这是否正确，因为它不会加载任何内容？我正在尝试添加这种雪效果http://seb.ly/demos/JSSnow/snow3d.htmlhttp://www.jqueryrain.com/?_ol9H3hd

    /** Load scripts */
add_action( 'wp_enqueue_scripts', 'wpse82474_load_scripts' );
function wpse82474_load_scripts()
{
    wp_enqueue_script('my-theme-script' ,get_stylesheet_directory_uri().'/js/Snow.js' ,array( 'jquery' ));
    wp_enqueue_script('my-theme-script' ,get_stylesheet_directory_uri().'/js/ThreeCanvas.js' ,array( 'jquery' ));
    wp_enqueue_script('my-theme-script' ,get_stylesheet_directory_uri().'/js/Event.js' ,array( 'jquery' ));
}
wp_enqueue_script( 'jquery' ); // Load jQuery
wp_script_is( 'jquery', 'registered' ) AND wp_enqueue_script( 'jquery' );

感谢您的帮助

任何想法都是有用的

谢谢朱迪

Answer 1

js文件在哪个文件夹？在子主题文件夹中？还是父主题文件夹？在最后一种情况下，您不应该使用 get_stylesheet_directory_uri()。请改用 get_template_directory_uri() (get_template_directory_uri)。 get_stylesheet_directory_uri() 用于获取主题样式表的文件夹，需要主题文件夹的位置。

wp_enqueue_script('my-theme-script', get_template_directory_uri().'/js/Snow.js' ,array( 'jquery' ));

另外，你不需要调用：

wp_enqueue_script( 'jquery' );

当“my-theme-script”被加载时，“jquery”也会自动加载，因为“my-theme-script”依赖于“jquery”。

此外，为您加载的每个脚本使用一个唯一的句柄名称，例如：

wp_enqueue_script('my-theme-script-snow', get_stylesheet_directory_uri().'/js/Snow.js' ,array( 'jquery' ));
wp_enqueue_script('my-theme-script-treecanvas', get_stylesheet_directory_uri().'/js/ThreeCanvas.js' ,array( 'jquery' ));
wp_enqueue_script('my-theme-script-event', get_stylesheet_directory_uri().'/js/Event.js' ,array( 'jquery' ));

编辑

要重新创建雪景效果，请执行以下操作：

• 在您的子主题中，创建文件夹img 和js。
• 在img，放入文件ParticleSmoke.png。
• 在js 中，放入文件Snow.js 和ThreeCanvas.js。
• 现在，将以下代码行从文件 "snow3d.html" 复制到名为 Snow3D.js 的文件中，并将其放入 js 文件夹中：第 27 行到第 144 行。

• 替换以下行：

  particleImage.src = '/img/ParticleSmoke.png';

• 进入：

  particleImage.src = img_folder + '/ParticleSmoke.png';

• 在“Snow3D.js”末尾添加如下代码：

  jQuery( function() { init(); } );

在functions.php 中，添加以下代码。注意行的顺序：

add_action( 'wp_enqueue_scripts', 'wpse82474_load_scripts' );
function wpse82474_load_scripts()
{
    wp_enqueue_script( 'my-theme-script-threecanvas', get_stylesheet_directory_uri().'/js/ThreeCanvas.js', array( 'jquery' ) );
    wp_enqueue_script( 'my-theme-script-snow', get_stylesheet_directory_uri().'/js/Snow.js', array( 'my-theme-script-threecanvas' ) );
    wp_enqueue_script( 'my-theme-script-snow3d', get_stylesheet_directory_uri().'/js/Snow3D.js', array( 'my-theme-script-snow' ) );

    $img_folder = get_stylesheet_directory_uri() . "/img/";

    wp_localize_script( 'my-theme-script-snow3d', 'img_folder', $img_folder );
}

• 您的style.css 似乎没问题。

我认为你现在可以出发了。告诉我！