Wordpress：javascript文件中我的img的路径

Question

我知道在 wordpress (functions.php) 中注册一个 javascript 文件是一种很好的做法。但具体是如何做到的呢？

我以前脑子里都是这样的：

<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/script.js"></script>

然后在我的 script.js 文件中我有 2 行代码：

var openmenu = "assets/menu.svg";
var closemenu = "assets/close-menu.svg";

但是当我将我的 wordpress 网站移动到网上时，svg 将无法加载。我知道它与 wp_enqueue_script 有关，但我似乎无法弄清楚究竟是如何...

非常感谢！

Answer 1

首先你必须注册你的脚本，像这样（在你的主题的functions.php上）

add_action('wp_enqueue_scripts', function(){
    wp_register_script('my-script', get_stylesheet_directory_uri() .'/js/my-script.js', array('jquery'), '3.14', true );
});

地点：

• 'my-script' 是您的脚本的 id（无论您想要什么）
• get_stylesheet_directory_uri() .'/js/my-script.js' 这是脚本的完整 URL
• array('jquery') 是脚本的依赖项——如果没有依赖项，只需使用空的 array()。如果您要添加一个新脚本，该脚本依赖于之前注册的'my-script'（或您使用的任何“id”），您可以使用array('jquery', 'my-script')
• '3.14' 这是您脚本的版本号
• true表示可以在页脚加载脚本（对页面加载速度更好）

然后，将“id”用于入队脚本：

add_action('wp_enqueue_scripts', function(){
    wp_register_script('my-script', get_stylesheet_directory_uri() .'/js/my-script.js', array('jquery'), '3.14', true );
    wp_localize_script('my-script', 'MyScript', array(
        'foo' => 'bar',
        'stuff' => get_option('quick_brown_fox'),
        'menu' => get_template_directory_uri() .'/img/menu.svg',
        'close_menu' => get_template_directory_uri() .'/img/close_menu.svg'
    ));
});

这样，每当您加载“my-script”脚本时，WordPress 都会创建一个“MyScript”javascript 全局变量，您稍后可以在 js 文件中使用它来获取该值。

所以，在你的 js 上，现在你可以使用：

var closeMenuImgPath = MyScript.close_menu;