フッターにコア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
async

ここでWP
開発者は

回答:


23

そのためには、最初にjQueryスクリプトの登録を解除してから、再度登録する必要があります。jQueryを使用する場合、WordPressに付属しているので、探している機能は次のとおりです。

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のこのコードを変更することをお知らせください。


5
どういう意味ですか?ソリューションは、jQueryをフッターに移動することです。
ロバート・ヒュー

2
また、is_admin()をチェックして、バックエンドjQueryへの変更を回避する必要があるかもしれません。結局、サイトのフロントエンドを本当に最適化する必要があるだけですから:)
Tim Malone

1
@TimMalone-実際にはそうではありません- wp_enqueue_scriptsフロントエンドでのみadmin_enqueue_scripts使用され、バックエンドで使用されます
-dev_masta

1
この解決策は実際に恐ろしいと思います。これでバージョンタグは削除されますか?このスタータースタイルとは何ですか。つまり、includes.min.jsとjQueryとの関係です。
NextGenThemes

2
@redanimalwarスタータースタイルとインクルードファイルは、質問から直接のものです。
テリヴィ

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

このソリューションgrouptoを設定すること1WordPressコアを模倣します。これは、WordPressがスクリプトをフッターに含めるかどうかを決定する方法です(1コメントで@jgraupが述べているように、少しnoted意的だと思われます)。


1
面白い。スクリプトをフッターに移動wp_register_scriptするadd_data( $handle, 'group', 1 )ために使用するようです。core.trac.wordpress.org/browser/tags/4.5/src/wp-includes/…-それがなぜなのかを説明してください。コードを見ると、「グループ」は少しa意的です。しかし、私はで見ることができますcore.trac.wordpress.org/browser/tags/4.5/src/wp-includes/... >それはWP_Scripts-に使われているかdo_item、後で。いずれにせよ、これは最も破壊的な答えではないようです。
jgraup

2
誰かがこれらの3つの賛成の答えについてさらにコメントできることを願っています。すべてが異なり、WPのある程度の知識が必要です。グーグルではこれらのスクリプトがスクロールせずに見えるようにする必要があるため、これは重要なトピックです。
ソルトマン

2
ベストアンサー!:WordPress 4.2.0以降で動作し、functions.phpのフック「wp_enqueue_scripts」コールバックで使用します
-realmag777

こんにちは、私は上記のアプローチを試しましたが、うまくいきませんでした。誰でも助けることができますか?
-iSaumya

1
これはとても良いです!どうもありがとうございます。ただし、@ tehliviが述べているように、WPは古いバージョンのjQueryを使用しているため、新しいバージョンの登録解除と登録を検討してください。
スコーリンド

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

受け入れられた回答IMOよりも優れている理由

  1. 後の段階ではなく、他の事柄が既にそれを台無しにしている可能性のある非常にコアで変更します。
  2. バージョン文字列はそのままで、削除されません!
  3. スクリプトの登録解除と再登録は行いませんが、グループ値を設定するだけです。グループ値は、スクリプトがに登録される場合と本質的に同じ$footer = trueです。

これを管理者に行わないことについて

プラグインがインラインjqueryをwp_headに追加する場合、jqueryがその時点でロードされないと失敗します。そのため、サイトを何百万も編集して管理者のパフォーマンスを最適化しようとするまでそれを避けることをお勧めします。これはフロントエンドにも当てはまります。そのため、インラインjQueryコードを使用して、jqueryが頭にあると想定している不適切なコード化テーマまたはプラグインに注意する必要があります。WPとプラグインは、depsのjqueryで管理ヘッドに他のスクリプトを登録するため、とにかく動作しません。

機能しない

jQueryが依存関係にあるヘッドに他のスクリプトがロードされる場合、jQueryがヘッドの直前にロードされることにも注意する必要があります。そして、これは期待通りであり、wp_enqueueシステムが存在する理由です。つまり、いくつかのプラグインを使用すると、そのうちの1つが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を頭に押し付ける他のスクリプトについては何も言及していません。実際、私の回答は、なぜjQueryが機能しないのかわからない人々から混乱を取り除きます。他の回答はどれも潜在的なリスクについて言及していません
...-NextGenThemes

このコード(上記の答えのコードとして)は500エラーを返しました。WordPress 4.9.9があります
Marco Panichi

このコードが500を引き起こしているとは信じ難いので、コードにこれを実装するのはおそらく間違いです。これは実際に尋ねるのに適切な場所ではなく、古いバージョンのWPでは十分な情報ではありません。
NextGenThemes

2

この特定の問題のプラグインを開発しました。このプラグインはWordPress jQueryを混乱させません。フロントエンドでのみロードされるためです。参照:WordPress用jQueryマネージャー

なぜ別のjQuery Updater / Manager / Developer / Debuggingツールなのですか?

開発者ツールでは、jQueryやjQuery Migrateの特定のバージョンを選択できないためです。圧縮された縮小版/製品版と非圧縮版/開発版の両方を提供します。以下の機能をご覧ください!

frontフロントエンドでのみ実行され、WordPress admin / backendおよびWPカスタマイザーを妨害しません(互換性の理由から)。https//core.trac.wordpress.org/ticket/45130および https:// coreを参照してください 。 trac.wordpress.org/ticket/37110

j jQueryやjQuery Migrateのオン/オフを切り替えます

j 特定のバージョンのjQueryまたはjQuery Migrateをアクティブ化する

さらに多く!コードはオープンソースですので、あなたはそれを研究し、それから学び、貢献することができます。


ほぼ全員が誤ったハンドルを使用します

WordPressは実際にはjqueryではなくjquery-coreハンドルを使用します。

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が頭に浮かびます。フッターに必要です。
デジ14

ちょっとデジ編集された答えをチェックしてください私はそれがあなたを助けると思う
アミットミシュラ14

6
あなたは効果的に防止しました-私はかなり確信して、これはひどいアイデアですよ何をちょうどjQueryの、ヘッダにロードスクリプトからではなく、ダブルエンキューするスクリプト(つまり深く見ていない)かもしれません。実際、この方法で行う場合は、おそらくremove_action/ add_action部分のみが必要です。
-drzaus

1
本当にひどい考え、これをしないでください!
NextGenThemes
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.