是否将核心jQuery放入页脚?

时间:2014-12-30 作者:Desi

我有这个functions.php 文件,我无法将jQuery加载到页脚中。这个includes 不过,文件在页脚中加载很好。我还需要做什么?

function starter_scripts() {
    wp_enqueue_style( \'starter-style\', get_stylesheet_uri() );

    wp_enqueue_script( \'jquery\', \'\', \'\', \'\', true );

    wp_enqueue_script( \'includes\', get_template_directory_uri() . \'/js/min/includes.min.js\', \'\', \'\', true );
}
add_action( \'wp_enqueue_scripts\', \'starter_scripts\' );

6 个回复
最合适的回答,由SO网友:Robert hue 整理而成

要做到这一点,首先必须取消注册jQuery脚本,然后再次注册。如果您使用WordPress附带的jQuery,那么下面是您正在寻找的函数。

function starter_scripts() {
    wp_deregister_script( \'jquery\' );
    wp_register_script( \'jquery\', includes_url( \'/js/jquery/jquery.js\' ), false, NULL, true );
    wp_enqueue_script( \'jquery\' );

    wp_enqueue_style( \'starter-style\', get_stylesheet_uri() );
    wp_enqueue_script( \'includes\', get_template_directory_uri() . \'/js/min/includes.min.js\', \'\', \'\', true );
}
add_action( \'wp_enqueue_scripts\', \'starter_scripts\' );
如果您使用Google CDN托管版本的jQuery,请告诉我,我将为Google CDN URL修改此代码。

SO网友:Matthew Boynes

以下是另一个避免取消注册和重新注册的选项:

/**
 * Move jQuery to the footer. 
 */
function wpse_173601_enqueue_scripts() {
    wp_scripts()->add_data( \'jquery\', \'group\', 1 );
    wp_scripts()->add_data( \'jquery-core\', \'group\', 1 );
    wp_scripts()->add_data( \'jquery-migrate\', \'group\', 1 );
}
add_action( \'wp_enqueue_scripts\', \'wpse_173601_enqueue_scripts\' );
此解决方案mimics WordPress core 通过设置group1, 这就是WordPress判断脚本是否应该在页脚中的方式(我不知道1, 正如@jgraup在评论中指出的,这似乎有点武断)。

SO网友:NextGenThemes

A better solution:

add_action( \'wp_default_scripts\', \'move_jquery_into_footer\' );

function move_jquery_into_footer( $wp_scripts ) {

    if( is_admin() ) {
        return;
    }

    $wp_scripts->add_data( \'jquery\', \'group\', 1 );
    $wp_scripts->add_data( \'jquery-core\', \'group\', 1 );
    $wp_scripts->add_data( \'jquery-migrate\', \'group\', 1 );
}

Why its better then the accepted answer IMO

<从根本上改变它,而不是在其他事情可能已经搞糟的后期
  • 它保留在适当位置且未删除的版本字符串$footer = true.
  • About not doing this to the admin

    如果插件将内联jquery添加到wp\\u头部,当jquery未加载时,它将失败,因此我建议您避免这样做,直到您有数百万人编辑您的站点并尝试优化您的管理性能。前端也是如此,因此您应该注意使用内联jquery代码在头部使用jquery的错误编码主题或插件。WP和插件将其他脚本注册到deps中jquery的管理负责人处,因此我认为它无论如何都不会工作。

    About it not working

    您需要注意的是,如果将任何其他脚本加载到依赖项中包含jQuery的头部,它也会使jQuery在其头部的前面加载。这是好的,也是意料之中的,这就是wp\\U排队系统存在的原因。这意味着您很快就会了解到,如果您使用一些插件,其中一个插件将导致jquery崩溃。遗憾的是,这是排队脚本的默认设置。

    Radical Solution

    我认为它会阻止任何假定jquery的内联JS,但这应该是罕见的。这将强制all scripts 到页脚,无论它们如何排队。

    add_action( \'wp_enqueue_scripts\', \'js_to_footer\' );
    
    function 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 );
    }
    

    SO网友:Remzi Cavdar

    我已经为这个特定的问题开发了一个插件。这个插件不会影响WordPress jQuery,因为它只在前端加载。请参见:jQuery Manager for WordPress

    为什么还有另一个jQuery更新程序/管理器/开发人员/调试工具

    因为没有任何开发人员工具允许您选择jQuery和/或jQuery迁移的特定版本。提供压缩缩小/生产版和未压缩/开发版。请参见下面的功能!

    ✅ 仅在前端执行,doesn\'t interfere with WordPress admin/backend and WP customizer (出于兼容性原因)请参阅:https://core.trac.wordpress.org/ticket/45130https://core.trac.wordpress.org/ticket/37110

    Turn on/off jQuery和/或jQuery迁移

    ✅ 激活specific version jQuery和/或jQuery迁移的

    还有更多!代码是开源的,因此您可以研究它,从中学习并做出贡献。


    几乎每个人都使用不正确的句柄,WordPress实际上使用的是jquery核心句柄,而不是jquery:

    https://github.com/WordPress/WordPress/blob/f84ab5e19f0038a3abec71821c9b8f47a4272942/wp-includes/script-loader.php#L1017

    // jQuery
    $scripts->add( \'jquery\', false, array( \'jquery-core\', \'jquery-migrate\' ), \'1.12.4-wp\' );
    $scripts->add( \'jquery-core\', \'/wp-includes/js/jquery/jquery.js\', array(), \'1.12.4-wp\' );
    $scripts->add( \'jquery-migrate\', "/wp-includes/js/jquery/jquery-migrate$suffix.js", array(), \'1.4.1\' );
    
    Thejquery 句柄只是要加载的别名jquery-core 具有jquery-migrate

    查看有关别名的更多信息:wp_register_script multiple identifiers?

    正确的方法在下面的示例中,我使用官方jQuery CDNhttps://code.jquery.com 我还使用script_loader_tag 这样我就可以添加一些CDN属性
    您可以使用以下代码:

    // Front-end not excuted in the wp admin and the wp customizer (for compatibility reasons)
    // See: https://core.trac.wordpress.org/ticket/45130 and https://core.trac.wordpress.org/ticket/37110
    function wp_jquery_manager_plugin_front_end_scripts() {
        $wp_admin = is_admin();
        $wp_customizer = is_customize_preview();
    
        // jQuery
        if ( $wp_admin || $wp_customizer ) {
            // echo \'We are in the WP Admin or in the WP Customizer\';
            return;
        }
        else {
            // Deregister WP core jQuery, see https://github.com/Remzi1993/wp-jquery-manager/issues/2 and https://github.com/WordPress/WordPress/blob/91da29d9afaa664eb84e1261ebb916b18a362aa9/wp-includes/script-loader.php#L226
            wp_deregister_script( \'jquery\' ); // the jquery handle is just an alias to load jquery-core with jquery-migrate
            // Deregister WP jQuery
            wp_deregister_script( \'jquery-core\' );
            // Deregister WP jQuery Migrate
            wp_deregister_script( \'jquery-migrate\' );
    
            // Register jQuery in the head
            wp_register_script( \'jquery-core\', \'https://code.jquery.com/jquery-3.3.1.min.js\', array(), null, false );
    
            /**
             * Register jquery using jquery-core as a dependency, so other scripts could use the jquery handle
             * see https://wordpress.stackexchange.com/questions/283828/wp-register-script-multiple-identifiers
             * We first register the script and afther that we enqueue it, see why:
             * https://wordpress.stackexchange.com/questions/82490/when-should-i-use-wp-register-script-with-wp-enqueue-script-vs-just-wp-enque
             * https://stackoverflow.com/questions/39653993/what-is-diffrence-between-wp-enqueue-script-and-wp-register-script
             */
            wp_register_script( \'jquery\', false, array( \'jquery-core\' ), null, false );
            wp_enqueue_script( \'jquery\' );
        }
    }
    add_action( \'wp_enqueue_scripts\', \'wp_jquery_manager_plugin_front_end_scripts\' );
    
    
    function add_jquery_attributes( $tag, $handle ) {
        if ( \'jquery-core\' === $handle ) {
            return str_replace( "type=\'text/javascript\'", "type=\'text/javascript\' integrity=\'sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=\' crossorigin=\'anonymous\'", $tag );
        }
        return $tag;
    }
    add_filter( \'script_loader_tag\', \'add_jquery_attributes\', 10, 2 );
    

    SO网友:samjco
    add_action("wp_enqueue_scripts", "myscripts");
    
    function myscripts() { 
       wp_enqueue_script( \'jquery\' , \'\', array(), true); //true for footer
       wp_enqueue_script( \'someScript-js\', \'https://domain.com/someScript.js\' , \'\', \'\', true );
    }
    
    SO网友:Amit Mishra

    嘿,只把你的代码改成这样

    function starter_scripts() {
            wp_enqueue_style( \'starter-style\', get_stylesheet_uri() );
            wp_enqueue_script(\'jquery\');
            wp_enqueue_script( \'includes\', get_template_directory_uri() . \'/js/min/includes.min.js\', array( \'jquery\' ) );
        }
        add_action( \'wp_enqueue_scripts\', \'starter_scripts\' );
    
    我觉得很好用

    将这些行添加到函数中。php文件

    remove_action(\'wp_head\', \'wp_enqueue_scripts\', 1);
    add_action(\'wp_footer\', \'wp_enqueue_scripts\', 5);
    
    然后将脚本添加到页脚中

    结束

    相关推荐

    带有jQuery的自定义元框。可排序的自定义帖子类型列表

    我想做的是在不同的页面上定制不同的帖子类型。我到处找了好一阵子,似乎找不到任何帮助。我有一个名为staff的职位类型,这是一个员工列表。然后,我有几个页面,其中使用类别显示这些工作人员(一个工作人员可以在多个类别中,并显示在多个页面上)。我需要能够订购一页一页的员工名单。例如,假设我有6名自定义职位类型的员工。-约翰-亚当-史蒂夫-马特-安德鲁-汤姆A类中有约翰、亚当、史蒂夫和马特,B类中有约翰、史蒂夫和安德鲁。在A页上,我希望显示A类员工,但在B页上按以下顺序显示John、Adam、Steve和Matt