Load plugin JS in footer

时间：2013-11-17 作者：Umesh Awasthi

我正在尝试将主题中的JS文件加载到页脚。我的所有自定义JS文件都将使用wp_enqueue_script, 但我找不到任何方法可以帮助我在页脚中加载它们。

一种可能的方法是

remove_action(\'wp_head\', \'wp_print_scripts\');
remove_action(\'wp_head\', \'wp_print_head_scripts\', 9);
add_action(\'wp_footer\', \'wp_print_scripts\', 5);
add_action(\'wp_footer\', \'wp_enqueue_scripts\', 5);

但这意味着，我需要列出插件中使用的所有可能的JS文件，然后从header 并将其添加到footer, 但这对我来说似乎有点奇怪，因为我需要注意我添加或删除了哪些新插件。

是否有其他替代方法可以让Wordpress在页脚部分加载这些JS文件（包括插件）。

因为我可以添加/删除插件，所以我不确定如何处理它。

3 个回复

SO网友:Rocker Maruf

退房this tutorial 通过kaiser 然后逐步进行：

每次注册脚本并将jquery添加为依赖项时，它都会添加到<head> 在最终呈现的HTML页面中。由于这会阻塞页面呈现时间（包含的脚本可能会修改DOM），因此我想将其添加到页面末尾以防止这种行为。这将使谷歌感到高兴，并对我的页面排名产生积极影响，因为页面加载时间应该会减少。

class RegisterScripts
{
    public function __construct()
    {
        add_action( \'wp_enqueue_scripts\', array( $this, \'scripts\' ) );
    }

    public function scripts()
    {
        wp_enqueue_script(
            \'requirejs\',
            get_stylesheet_directory_uri().\'/assets/scripts/vendor/requirejs/require.js\',
            array( \'jquery\' ),
            filemtime( plugin_dir_path( __FILE__ ).\'assets/scripts/vendor/requirejs/require.js\' ),
            true
        );
    }
}

那么core做什么呢？实际上这很容易。这个WP_Scripts 类是类的扩展WP_Dependencies. 当你打电话给wp_enqueue/register_script(), 它只使用add_data() 方法。

$wp_scripts->add( $handle, $src, $deps, $ver );
if ( $in_footer )
    $wp_scripts->add_data( $handle, \'group\', 1 );

如您所见，它添加了带有脚本名称的“数据”作为第一个参数，并将一些组设置为1。这只是告诉类将脚本数据放在全局数组中的位置。然后，当在数组中循环时，WP只检查当前钩子并打印默认部分，如果是页面末尾，则打印wp_footer 钩子，组等于和/或大于1的所有脚本。就是这样。

现在，我们快速解决这一问题：

// Move jQuery to the footer
global $wp_scripts;
$wp_scripts->add_data( \'jquery\', \'group\', 1 );

当然，你也可以在其他脚本中这样做。默认脚本列表（可能不完整）can be found in Codex. 如果你想得到真正的名单，你必须把$GLOBALS[\'wp_scripts\'] 然后查看阵列。如果你想把这些都打包成一个独立的插件，你当然可以这样做。我建议使用mu插件。

/* Plugin Name: jQuery to the footer! */
add_action( \'wp_enqueue_scripts\', \'wcmScriptToFooter\', 9999 );
function wcmScriptToFooter()
{
    global $wp_scripts;
    $wp_scripts->add_data( \'jquery\', \'group\', 1 );
}

请记住，可能有插件或主题脚本出错（！）这个解决方案可能会失败。通常，如果将自定义脚本加载到标头中，或者如果绕过整个WP依赖API并对脚本进行硬编码，就会发生这种情况。结论：在将该迷你插件添加到已激活的页面之前进行测试。如果不起作用，请检查脚本加载的位置和方式。然后修复该问题，并尝试将这些阻塞脚本加载到页脚。谷歌会爱你的。

如果你想更进一步，这里有一个相关的建议。如果要创建JavaScript类，请查看JavaScript++.

SO网友:Bryan Willis

不知道为什么@RockerMaruf 答案被否决了。这是最好的方法。

您在问题中的示例可以像下面这样使用（如根/土壤插件中所示），但正如@Rarst建议的那样，它会破坏一些要加载到标题中的内容（如html5shiv）。

function all_js_to_footer() {
  remove_action(\'wp_head\', \'wp_print_scripts\');
  remove_action(\'wp_head\', \'wp_print_head_scripts\', 9);
  remove_action(\'wp_head\', \'wp_enqueue_scripts\', 1);
}
add_action(\'wp_enqueue_scripts\', \'all_js_to_footer\');

If you know what the script is that needs to be loaded in the head you could just dequeue it and add it using wp_head... or have a fallback/check, maybe something like this:

add_action( \'wp_head\', \'wp_theme_check_html5shiv\', 1 );
function wp_theme_check_html5shiv() {
    if ( !has_filter( \'wp_head\', \'wp_enqueue_scripts\' ) && !wp_script_is( \'html5shiv\', \'done\' ) ) {
        add_action(\'wp_head\', \'wp_theme_echo_html5shiv\');
        wp_dequeue_script(\'html5shiv\');
    }
}
function wp_theme_echo_html5shiv() {
    echo \'<!--[if (gt IE 5)&(lt IE 9)]> <script>window.html5={shivCSS:!1};</script> <script src="https://cdn.jsdelivr.net/html5shiv/3.7.3/html5shiv.min.js"></script> <![endif]-->\' . "\\n";
}

虽然上述退路似乎奏效了，但这是非常丑陋和可笑的

所以使用@kaiser 方法是最好的方法，尽管这里有一个稍微修改过的方法（感谢主题评审团队的UlrichPogson在Github上的讨论(https://github.com/roots/soil/issues/33#issuecomment-173838447) ) 使用新的wordpress函数，不直接访问全局。

截至2016年1月最著名的方法

function move_js_to_footer() {
    foreach( wp_scripts()->registered as $script ) {
        if ( \'html5\' == $script->handle ) {
            wp_script_add_data( $script->handle, \'group\', 0 );
        } else {
            wp_script_add_data( $script->handle, \'group\', 1 );
        }
    }
}
add_action( \'wp_enqueue_scripts\', \'move_js_to_footer\', 99 );

SO网友:AurelienT

从Codex :

$in\\u footer（布尔）（可选）通常，脚本放置在HTML文档的中。如果此参数为true，则脚本将放置在结束标记之前。这要求主题在适当的位置具有wp\\u footer（）模板标记。

    Default: false

所以如果你的剧本是myscript.js, 我想试试

wp_enqueue_script(\'myscript\', bloginfo(\'template_url\').\'/js/myScript.js\'__FILE__), array(), \'version\', true );

结束

小码农CODE

Load plugin JS in footer

截至2016年1月最著名的方法

相关推荐

update_option in javascript