将核心jQuery放在页脚中?


22

我的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' );

如果出于性能原因执行此操作,则可以考虑添加defer到脚本标签中:matthewhorne.me/defer-async-wordpress-scripts
diachedelic

WP开发人员在这里,我制作了一个插件来处理此问题:wordpress.org/plugins/jquery-manager
Remzi Cavdar

Answers:


23

为此,您首先必须注销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' );

如果您使用的是jQuery的Google CDN托管版本,请告诉我,我将为Google CDN URL修改此代码。


5
你什么意思?解决方案是将jQuery移至页脚。
罗伯特·休

2
您可能还需要检查is_admin()以避免对后端jQuery进行更改,毕竟我们只需要真正优化网站的前端即可:)
Tim Malone

1
@TimMalone-实际上,您不wp_enqueue_scripts使用-仅在前端admin_enqueue_scripts使用,而在后端使用
dev_masta

1
我认为这种解决方案实际上是可怕的。版本标记是否与此一起删除。入门风格是什么,包括include.min.js以及与jQuery有什么关系。
NextGenThemes

2
@redanimalwar入门风格,包括文件直接来自问题。
tehlivi

43

这是另一种避免注销和重新注册的选项:

/**
 * 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' );

此解决方案通过将to 设置为来模仿WordPress核心,这是WordPress确定脚本是否应放在页脚中的方式(我不知道的原因,因为@jgraup在评论中指出这似乎有些武断)。group11


1
有趣。看起来好像是将脚本移到页脚中的wp_register_script用法add_data( $handle, 'group', 1 )core.trac.wordpress.org/browser/tags/4.5/src/wp-includes / ...-您能解释一下为什么会这样吗?看一下您的代码,“组”似乎有些武断。但是我可以在core.trac.wordpress.org/browser/tags/4.5/src/wp-includes/中看到…… do_item稍后在WP_Scripts->中如何使用它。无论哪种方式,这似乎都是破坏性最小的答案。
jgraup

2
我希望有人可以对这三个建议作出进一步评论。都是不同的,并且需要一些WP知识。因为google要求这些脚本不被接受,所以这是一个重要的主题。
ssaltman

2
最佳答案!注意:自WordPress 4.2.0起它可以正常工作,并在hook.wp_enqueue_scripts回调中的functions.php中使用它
realmag777 '16

嗨,我尝试了上述方法,但是没有用。有人可以帮忙吗?
iSaumya,2016年

1
太好了!非常感谢。但是,值得注意的是@tehlivi指出-WP使用旧版本的jQuery-考虑注销并注册新版本。
Skolind

18

更好的解决方案:

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 );
}

为什么比接受的答案更好?

  1. 从根本上更改它,而不是在以后其他事情可能已经弄乱了它的时候进行更改。
  2. 版本字符串会保留在原处,不会被删除!
  3. 它不会取消注册和重新注册脚本,而只是设置组值,该组值实质上与使用脚本注册时相同$footer = true

关于不对管理员执行此操作

如果插件将嵌入式jquery添加到wp_head,则在此时未加载jquery时将失败,因此我建议您避免这种情况,除非您有数百万人编辑您的站点,然后尝试对管理员进行性能优化。前端也是如此,因此您应该通过使用内联jQuery代码来注意那些错误的编码主题或插件,而这些主题或插件会在头上采用jquery。WP和插件将其他脚本通过deps的jquery注册到管理员头,因此无论如何我都认为它不起作用。

关于它不起作用

您需要注意,如果将任何其他脚本加载到其依赖项中具有jQuery的头部中,它也会使jQuery在其自身之前的头部中加载。这是好的,也是可以预期的,这是wp_enqueue系统存在的原因。这意味着,如果您使用一些插件,那么其中的一个将需要引起jquery的关注,您将很快学习。遗憾的是,它是排队脚本的默认设置。

激进解

我认为这会制止所有采用jquery的内联JS,但这种情况应该很少见。这将强制所有脚本进入页脚,无论它们如何排队。

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 );
}

2
尽管这可能会回答问题,并且有一些要点,但答案中是否有太多杂音(绒毛?),这与以前发布的答案非常相似,但对代码进行了较小的改进。如果将其编辑并精简为更多信息版本,则可能会收到更多好评。也没有真正需要召集特定的用户或答案(因为将来由于某种原因它们可能不存在)。
Howdy_McGee

您称一个完全未提及的,可能比其他答案中提及的任何问题都更好的称为“较小的代码改进”。嗯,那简直就是不真实。我也没有“召集”任何人,我只是提到了一些事实,我知道这些事实可以改善编码风格并教育读者以使他们编写更好的代码。认真的说,我确实花了很多时间在这里写下最好的答案,这就是我得到的。
NextGenThemes

4
其他答案完全没有提到将jQuery放在首位的其他脚本,实际上,我的答案使那些不知道为什么它不起作用的人感到困惑。其他答案中没有一个提到潜在的风险...
NextGenThemes 16-10-21

此代码(作为上述答案的代码)返回了500错误。我有WordPress 4.9.9
Marco Panichi

很难相信此代码会导致500,您可能在实现此代码时犯了一个错误。这不是真正合适的地方,而且您过时的WP版本几乎没有足够的信息。
NextGenThemes

2

我已经针对此特定问题开发了一个插件。该插件不会加载WordPress jQuery,因为它仅加载在前端。请参阅:WordPress的jQuery Manager

为什么还有另一个jQuery Updater / Manager / Developer / Debugging工具?

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

✅只有在前端执行时,不与WordPress管理/后端和WP定制干扰(由于兼容性原因)见: https://core.trac.wordpress.org/ticket/45130HTTPS://芯。 trac.wordpress.org/ticket/37110

打开/关闭 jQuery和/或jQuery的迁移

✅激活特定版本的jQuery和/或jQuery Migrate

以及更多!该代码是开源的,因此您可以学习,学习和贡献。


几乎每个人都使用不正确的句柄

WordPress实际上使用的是jquery-core句柄,而不是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' );

jQuery的手柄只是一个别名负荷的jQuery核心jQuery的迁移

查看关于别名的更多信息:wp_register_script多个标识符?

正确的做法

在下面的示例中,我使用https://code.jquery.com上的官方jQuery CDN,也使用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 /wordpress/283828/wp-register-script-multiple-identifiers
         * We first register the script and afther that we enqueue it, see why:
         * /wordpress/82490/when-should-i-use-wp-register-script-with-wp-enqueue-script-vs-just-wp-enque
         * /programming/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 );

0
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 );
}

-3

嘿,只将代码更改为这样

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' );

我认为效果很好

将此行添加到您的functions.php文件中

remove_action('wp_head', 'wp_enqueue_scripts', 1);
add_action('wp_footer', 'wp_enqueue_scripts', 5);

然后将脚本添加到页脚


这将jQuery放在首位。我在页脚中需要它。
Desi 2014年

嘿德西请编辑的答案,我认为它帮助你
阿米特·米什拉

6
我很确定这是一个糟糕的主意-您已经有效地阻止了任何东西在标头中加载脚本,而不仅仅是jQuery,并且可能是双重排队的脚本(看上去没那么深)。实际上,如果您要以这种方式进行操作,则可能只需要remove_action/ add_action部分。
drzaus

1
确实是个可怕的主意,不要这样做!
NextGenThemes
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.