Enqueue core jQuery di catatan kaki?

22

Saya punya ini di functions.phpfile saya dan saya tidak bisa mendapatkan jQuery untuk memuat di footer. The includesberkas beban di denda footer, meskipun. Apa lagi yang harus saya lakukan?

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' );
Desi
sumber
Jika Anda melakukan ini karena alasan kinerja, Anda dapat mempertimbangkan deferuntuk menambahkan ke tag skrip Anda sebagai gantinya: matthewhorne.me/defer-async-wordpress-scripts
diachedelic
WP dev di sini, saya membuat sebuah plugin untuk menangani ini: wordpress.org/plugins/jquery-manager
Remzi Cavdar

Jawaban:

23

Untuk melakukan itu, Anda harus terlebih dahulu membatalkan pendaftaran skrip jQuery Anda dan kemudian mendaftar lagi. Jika Anda menggunakan jQuery datang dengan WordPress maka berikut ini adalah fungsi yang Anda cari.

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

Jika Anda menggunakan versi jQuery yang diinangi oleh Google CDN, beri tahu saya bahwa saya akan mengubah kode ini untuk URL CDN Google.

Rona Robert
sumber
5
Apa maksudmu? Solusinya adalah tentang memindahkan jQuery ke footer.
Robert hue
2
Anda mungkin juga perlu memeriksa is_admin () untuk menghindari perubahan pada jend backend, lagipula kita hanya perlu mengoptimalkan frontend situs kita :)
Tim Malone
1
@TimMalone - sebenarnya, Anda tidak - wp_enqueue_scriptshanya digunakan di ujung depan sementara admin_enqueue_scriptsdigunakan untuk ujung belakang
dev_masta
1
Saya pikir solusi ini sebenarnya mengerikan. Apakah tag versi dihapus dengan ini. Apa gaya pemula ini dan itu termasuk include.min.js dan apa hubungannya dengan jQuery.
NextGenTema
2
@redanimalwar-gaya pemula dan termasuk file langsung dari pertanyaan.
tehlivi
43

Berikut adalah opsi lain yang menghindari keharusan untuk tidak mendaftar dan mendaftar ulang:

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

Solusi ini meniru inti WordPress dengan menyetel groupke 1, yang merupakan cara WordPress menentukan apakah skrip harus ada di footer atau tidak (Saya tidak mengetahui alasannya 1, seperti yang dicatat oleh @jgraup dalam komentar yang sepertinya agak sewenang-wenang).

Matthew Boynes
sumber
1
Menarik. Sepertinya wp_register_scriptdigunakan add_data( $handle, 'group', 1 )untuk memindahkan skrip ke dalam footer. core.trac.wordpress.org/browser/tags/4.5/src/wp-includes/… - Bisakah Anda memperluas alasannya? Melirik kode Anda, 'grup' tampaknya agak sewenang-wenang. Tapi saya bisa melihat di core.trac.wordpress.org/browser/tags/4.5/src/wp-includes/… bagaimana menggunakannya di WP_Scripts-> do_itemnanti. Bagaimanapun, ini tampaknya menjadi jawaban yang paling tidak merusak.
jgraup
2
Saya harap seseorang dapat berkomentar lebih jauh tentang tiga jawaban yang tervvotasikan ini. Semua berbeda dan membutuhkan pengetahuan tentang WP. Karena google mengharuskan skrip ini berada di bawah flip, ini adalah topik penting.
ssaltman
2
Jawaban Terbaik! Catatan : ini berfungsi sejak WordPress 4.2.0 dan menggunakannya di functions.php di hook 'wp_enqueue_scripts' callback
realmag777
Hai saya mencoba pendekatan di atas, tetapi tidak berhasil. Adakah yang bisa membantu?
iSaumya
1
Ini sangat bagus! Terima kasih banyak. Namun, yang patut dicatat adalah seperti yang dinyatakan oleh @tehlivi - WP menggunakan versi jQuery yang lama - pertimbangkan untuk membatalkan pendaftaran dan mendaftarkan versi yang lebih baru.
skolind
18

Solusi yang lebih baik:

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

Mengapa lebih baik daripada jawaban yang diterima IMO

  1. Mengubahnya pada intinya bukan pada tahap selanjutnya di mana hal-hal lain mungkin sudah kacau dengannya.
  2. String versi disimpan di tempatnya dan tidak dihapus!
  3. Itu tidak membatalkan pendaftaran dan mendaftar ulang skrip tetapi hanya menetapkan nilai grup yang pada dasarnya sama seperti jika skrip akan didaftarkan $footer = true.

Tentang tidak melakukan ini ke admin

Jika plugin menambahkan jquery inline ke wp_head, plugin akan gagal ketika jquery tidak dimuat pada saat itu, jadi saya sarankan Anda menghindari itu sampai Anda memiliki jutaan pengeditan situs Anda dan Anda mencoba mengoptimalkan kinerja admin Anda. Ini juga berlaku untuk frontend sehingga Anda harus berhati-hati terhadap tema atau plugin kode buruk yang menganggap jquery di kepala dengan menggunakan kode jQuery sebaris. WP dan plugin mendaftarkan skrip lain ke kepala admin dengan jquery di deps sehingga tidak akan berhasil saya pikir.

Tentang itu tidak berfungsi

Anda perlu menyadari bahwa jika ada skrip lain yang dimuat ke kepala yang memiliki jQuery di dependensinya, itu juga akan membuat jQuery memuat di kepala tepat sebelum itu sendiri. Dan ini bagus dan diharapkan, alasan sistem wp_enqueue ada. Ini berarti Anda akan segera belajar jika Anda menggunakan beberapa plugin yang salah satunya membutuhkan jquery di kepala. Sayangnya, ini adalah default untuk skrip enqueued.

Solusi Radikal

Saya pikir itu akan mengerem setiap JS inline yang mengasumsikan jquery tetapi seharusnya itu jarang terjadi. Ini akan memaksa semua skrip ke footer terlepas dari bagaimana enqueued mereka.

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 );
}
Tema NextGen
sumber
2
Meskipun ini dapat menjawab pertanyaan dan memiliki beberapa poin bagus untuk dikunyah, ada terlalu banyak noise (fluff?) Dalam jawaban dan sangat mirip dengan jawaban yang diposting sebelumnya dengan perbaikan kode kecil. Mungkin diterima dengan lebih baik jika diedit dan dipangkas menjadi versi yang lebih informatif. Tidak ada kebutuhan nyata untuk memanggil pengguna atau jawaban tertentu (karena mereka mungkin tidak ada karena alasan apa pun di masa depan).
Howdy_McGee
Anda memanggil yang sama sekali tidak disebutkan dan mungkin lebih baik dari yang disebutkan dalam jawaban lain "perbaikan kode kecil". Yah itu tidak benar. Juga saya tidak "memanggil" siapa pun, saya hanya menyebutkan fakta yang saya tahu untuk meningkatkan gaya pengkodean dan mendidik pembaca tentang hal itu untuk membuat mereka menulis kode yang lebih baik. Serius saya memang mengambil beberapa waktu untuk menulis jawaban terbaik di sini sejauh ini dan inilah yang saya dapatkan untuk itu.
NextGenTema
4
Jawaban lain tidak menyebutkan apa pun tentang skrip lain yang memaksa jQuery ke kepala, sebenarnya jawaban saya menghilangkan kebingungan dari orang-orang yang tidak tahu mengapa itu tidak berfungsi. Tidak ada jawaban lain yang menyebutkan risiko potensial ...
NextGenThemes
Kode ini (seperti kode jawaban di atas) mengembalikan saya kesalahan 500. Saya memiliki WordPress 4.9.9
Marco Panichi
Sulit dipercaya bahwa kode ini menyebabkan angka 500, Anda mungkin telah melakukan kesalahan dalam menerapkan ini dalam kode Anda. Ini bukan tempat yang tepat untuk bertanya dan versi WP Anda yang sudah ketinggalan zaman hampir tidak cukup informasi.
NextGenThemes
2

Saya telah mengembangkan sebuah plugin untuk masalah khusus ini. Plugin ini tidak mengacaukan dengan WordPress jQuery karena hanya dimuat di front-end. Lihat: Manajer jQuery untuk WordPress

Mengapa alat Updater / Manager / Pengembang / Debugging jQuery lain?

Karena tidak ada alat pengembang yang memungkinkan Anda memilih versi jQuery dan / atau jQuery Migrate tertentu. Menyediakan minified / produksi terkompresi dan versi terkompresi / pengembangan. Lihat fitur di bawah ini!

✅ Hanya dieksekusi di front-end, tidak mengganggu admin WordPress / backend dan penyesuai WP (untuk alasan kompatibilitas) Lihat: https://core.trac.wordpress.org/ticket/45130 dan https: // core. trac.wordpress.org/ticket/37110

Mengaktifkan / menonaktifkan jQuery dan / atau jQuery Migrasi

✅ Aktifkan versi spesifik jQuery dan / atau jQuery Migrate

Dan banyak lagi! Kode ini open source, jadi Anda bisa mempelajarinya, belajar darinya, dan berkontribusi.


Hampir semua orang menggunakan pegangan yang salah

WordPress sebenarnya menggunakan jquery-core, bukan 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' );

The jquery pegangan hanya sebuah alias untuk beban jquery-core dengan jquery-bermigrasi

Lihat info lebih lanjut tentang alias: wp_register_script beberapa pengenal?

Cara yang benar untuk melakukannya

Dalam contoh saya di bawah ini saya menggunakan CDN jQuery resmi di https://code.jquery.com Saya juga menggunakan script_loader_tag sehingga saya dapat menambahkan beberapa atribut CDN.
Anda dapat menggunakan kode berikut:

// 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 );
Remzi Cavdar
sumber
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 );
}
samjco
sumber
-3

Hai, ubah saja kode Anda menjadi seperti ini

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

saya pikir itu berfungsi dengan baik

tambahkan baris ini ke file functions.php Anda

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

lalu tambahkan skrip ke dalam footer

Amit Mishra
sumber
Ini menempatkan jQuery di kepala. Saya membutuhkannya di footer.
Desi
Hai Desi, silakan periksa jawaban yang diedit. Saya pikir ini membantu Anda
Amit Mishra
6
Saya cukup yakin ini adalah ide yang buruk - Anda telah secara efektif mencegah apa pun dari memuat skrip di header, bukan hanya jQuery, dan mungkin skrip enqueuing ganda (belum melihat sedalam itu). Bahkan, Anda mungkin hanya membutuhkan bagian remove_action/ add_actionjika Anda akan melakukannya dengan cara ini.
drzaus
1
Ide yang sangat mengerikan, jangan lakukan ini!
NextGenTema