如何使用wp_en队列脚本来添加JavaScript文件？

时间：2015-02-09 作者：Alex

我制作了一个非常简单的JavaScript脚本。有1个.js 包含大量代码的文件，HTML文件中只有2行。当我在普通HTML页面上测试脚本时，它工作得很好，但当我用WordPress尝试它时，它不工作。

我想这与通向外部的路径有关.js 文件(src="js/file.js").

我错过了什么？为什么我的脚本加载不正确？

编辑：请参见下面的注释，我现在已将代码添加到functions.php, 但仍然不起作用。

Edit2：这是我在functions.php:

add_action( \'wp_enqueue_scripts\', \'my_enqueue_front_scripts\' );
function my_enqueue_front_scripts(){
    wp_enqueue_script( \'my-custom-scripts\', get_stylesheet_directory_uri() . \'/js/file.js\' );
}
这是我头上标签上的代码：

<script type="text/javascript"> url_detect.OnBack = function() { window.location.replace("URL.org"); } </script>

2 个回复
SO网友:David Gard

在WordPress中，您应该使用wp_enqueue_scripts 行动挂钩。

这样做的主要原因是确保只添加一次脚本/样式。如果你愿意，你也可以添加条件，这样脚本/样式只会添加到某些页面。

您在问题中说您的脚本位于js/file.js - 这可能是你的主题？

如果是，请尝试下面的代码（将其放入functions.php), 如果没有，请提供更多详细信息。

add_action(\'wp_enqueue_scripts\', \'my_enqueue_front_scripts\');
function my_enqueue_front_scripts(){

    wp_enqueue_script(\'my-custom-scripts\', get_stylesheet_directory_uri().\'/js/file.js\');

}
请注意，如果显示名称，还应使用此操作挂钩将样式表排队。有关更多信息，请花一些时间查看以下页面-

SO网友:Pmpr

假设您的file.js 版本为1.0 您希望将js加载到文档头（而不是页脚），并根据Codex 您可以使用以下方法将脚本文件添加到文档中：

活动主题的functions.php

function my_add_js(){
    $theme_uri = get_template_directory_uri();
    wp_enqueue_script( $handle,  $theme_uri . \'/js/file.js\', array(), \'1.0\', false );
}
将其添加到要执行的操作时：

add_action( \'wp_enqueue_scripts\', \'my_add_js\' );
活动主题的header.php

<!DOCTYPE html>
<html>
    <head>

    <!-- other head section stuff here ... -->

    wp_head();?>
    </head>
    <body>

    <!-- some other html stuff maybe here ... -->
请注意，如果您有一个JavaScript代码段，并且希望使用主题的函数将其添加到页脚中。php文件：

function my_add_js(){
    ?>
    <script>
    // This is my script ...
    </script>
    <?php
}

add_action( \'wp_footer\', \'my_add_js\' );

结束
标签： javascript   wp-enqueue-script   小码农  

相关推荐

串联和缩小入队的JavaScript文件的依赖项

我正在使用加载JavaScript文件wp_enqueue_script 进入我的主题。然而，除了它之外，我还加载了几个jQuery文件，以及排队脚本的依赖项（已经被Grunt连接和缩小）。这是我的代码：add_action(\'wp_enqueue_scripts\', function() { wp_enqueue_script( \'customscripts\', get_template_directory_uri() . \'/assets/js/main.min.js\',