Bagaimana cara memasukkan file jQuery dan JavaScript dengan benar?

16

Saya melakukannya sekarang dengan kode berikut:

function uw_load_scripts() {
    // De-register the built in jQuery
    wp_deregister_script('jquery');
    // Register the CDN version
    wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js', array(), null, false); 
    // Load it in your theme
    wp_enqueue_script( 'jquery' );
}
add_action( 'wp_enqueue_scripts', 'uw_load_scripts' );

Ini berfungsi, tetapi haruskah saya melakukan ini untuk semua orang, seperti ini, atau untuk semua orang selain admin (sehingga backend menggunakan versi WordPress?):

if (function_exists('load_my_scripts')) {  
function load_my_scripts() {  
    if (!is_admin()) {  
    wp_deregister_script( 'jquery' );  
    wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js', array(), null, false); 
    wp_enqueue_script('jquery');   
    }  
}  
}  
add_action('init', 'load_my_scripts');

Versi ini sebenarnya tidak berfungsi sama sekali, saya mendapatkan versi WordPress jQuery dan bukan versi Google.

Karena itu, haruskah saya membatalkan pendaftaran jQuery yang termasuk dalam WordPress?

Juga, bagaimana cara menambahkan skrip saya sendiri (skrip slider, modernizr dan custom.js saya sendiri) dengan cara yang benar? Saya kira saya harus melakukan ini melalui functions.php juga dan tidak di header seperti yang saya lakukan sekarang, tapi saya tidak yakin bagaimana saya akan melakukannya.

Johan Dahl
sumber

Jawaban:

20

Aturan praktis pertama: jangan deregister skrip bundel inti dan gantikan dengan versi lain , kecuali jika Anda benar-benar yakin bahwa tidak ada Tema, Plugin, atau inti itu sendiri yang akan rusak karena perubahan versi. Sungguh, kecuali jika Anda benar-benar membutuhkan versi alternatif dari skrip yang dibundel inti, gunakan saja yang dibundel dengan inti.

Kedua, saya sangat menyarankan menghubungkan ke wp_enqueue_scriptsuntuk mendaftar skrip dan enqueueing, daripada init. (Ini bekerja di init, tetapi dari play-baik-dengan-lain perspektif, yang terbaik untuk menggunakan kail yang paling semantik benar.)

Ketiga, untuk membuat skrip khusus Anda sendiri, Anda menggunakan metode yang sama seperti di atas:

<?php
function wpse45437_enqueue_scripts() {
    if ( ! is_admin() ) {
        $script_path = get_template_directory_uri() . '/js/';
        // Enqueue slider script
        wp_enqueue_script( 'wpse45437_slider', $script_path . 'slider.js', array( 'jquery' ) );
        // Enqueue modernizr script
        wp_enqueue_script( 'wpse45437_modernizr', $script_path . 'modernizr.js', array( 'jquery' ) );
    }
}
add_action( 'wp_enqueue_scripts', 'wpse45437_enqueue_scripts' );
?>

Cukup tambahkan skrip apa pun yang perlu Anda enqueue.

Chip Bennett
sumber
4
Memberi +1 pada yang mutlak perlu ! Terlalu banyak (biasanya 'premium') mendaftarkan jQuery versi lama. Itu merusak plug-in.
Stephen Harris
Menambahkan skrip ini ke file fungsi saya (tanpa deklarasi php karena sudah ada di sana) memberi saya 'Http-error 500 (Internal server error)'. Apakah ada kesalahan di suatu tempat?
Johan Dahl
Iya; ada kesalahan sintaksis dalam wp_enqueue_script()panggilan.
Chip Bennett
Terima kasih, sekarang berhasil! Namun itu masih dikeluarkan di header. Apakah tidak lebih baik jika di mana di footer? Jika demikian, dapatkah saya memodifikasi kodenya?
Johan Dahl
Anda pasti bisa enqueue di footer. Atur saja $in_footerparameter ke true dalam panggilan Anda ke wp_enqueue_script().
Chip Bennett
4

Semoga ini bisa membantu, lihat kodeks untuk wp_enqueue_scriptsinformasi lebih lanjut.

  1. Jangan gunakan inituntuk enqueue . Gunakan wp_enqueue_scriptsuntuk hal-hal front-end dan admin_enqueue_scriptsuntuk sisi admin. Anda dapat menggunakannya inituntuk mendaftar skrip.
  2. Hook wp_enqueue_scriptshanya menyala di front-end (dan bukan di halaman login) - jadi Anda tidak perlu memeriksa is_admin().
  3. Kecuali Anda memiliki alasan khusus untuk melakukan sebaliknya, saya sarankan mendaftar dan mengantri skrip yang digunakan functions.phpuntuk tema atau dalam plug-in sebaliknya. Anda cukup menempatkan:

     function myprefix_load_scripts() {
       // Load scripts here
     }
     add_action( 'wp_enqueue_scripts', 'myprefix_load_scripts' );
  4. Jika tujuannya adalah untuk membuat skrip ketika kode pendek digunakan, Anda mungkin ingin menggunakan wp_enqueue_scriptpanggilan balik kode pendek untuk mengantre hanya jika diperlukan (ini akan mencetaknya di footer sejak 3.3 ).

  5. Anda tidak boleh mendaftar ulang jQuery yang ada di sisi admin. Anda dapat merusak sesuatu: D.

  6. Plug-in tidak boleh mendaftar ulang jQuery yang ada.

  7. Anda harus mempertimbangkan pro dan kontra mendaftar ulang jQuery. Misalnya itu dapat merusak beberapa plug-in jika Anda mendaftarkan versi lama (mungkin tidak sekarang, tetapi di masa depan ...)

Stephen Harris
sumber
1
Iklan 5) mendaftar ulang tidak masalah. Itu sebabnya kami mendapat fungsi enqueue dan register. :)
kaiser
2

Peringatan yang adil: membatalkan jQuery versi WP yang dipaket dan mendukung masalah Anda sendiri dapat menyebabkan masalah, terutama jika Anda tidak ekstra hati-hati untuk memastikan bahwa Anda mengubah versi yang Anda tuju setiap kali WP memperbarui versinya. Ini berlaku dua kali lipat untuk plugin, yang sering (atau sering harus, setidaknya) menulis plugin mereka untuk kompatibilitas maksimum dengan versi WP dari jQuery.

Yang mengatakan, versi pertama Anda sudah benar - itu terhubung ke wp_enqueue_scripts. Fungsi kedua Anda terhubung init, yang mungkin mengapa itu tidak berfungsi dengan baik.

Tambahkan skrip Anda sendiri dengan cara yang serupa:

function bbg_enqueue_scripts() {
    // You should probably do some checking to see what page you're on, so that your
    // script only loads when it needs to
    wp_enqueue_script( 'bbg-scripts', get_stylesheet_directory_url() . '/js/bbg-scripts.js', array( 'jquery' ) );
}
add_action( 'wp_enqueue_scripts', 'bbg_enqueue_scripts' );

Saya berasumsi di sini bahwa Anda memuat skrip dari jsdirektori di direktori tema Anda saat ini; ubah parameter URI jika itu tidak benar. Parameter ketiga array( 'jquery' )mengatakan itu bbg-scriptstergantung jquery, dan karenanya harus dimuat sesudahnya. Lihat https://codex.wordpress.org/Function_Reference/wp_enqueue_script untuk lebih jelasnya.

Boone Gorges
sumber
1
if (function_exists('load_my_scripts')) {  
function load_my_scripts() {  
    if (!is_admin()) {  
    wp_deregister_script( 'jquery' );  
    wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js', array(), null, false); 
    wp_enqueue_script('jquery');   
    }  
}  
}  
add_action('init', 'load_my_scripts');

Ini tidak akan melakukan apa-apa ... Saya kira maksud Anda

if (!function_exists('load_my_scripts')) {

Contoh Anda hanya akan memuat fungsi load_my_scripts jika sudah ada (yang tidak jadi tidak mau dan jika itu akan membuat kesalahan)

Adam
sumber
0

Jika, karena alasan kinerja, Anda ingin memuat jquery dan file js-core lainnya dari CDN, pastikan Anda memuat versi yang sama untuk mencegah hal-hal buruk terjadi dengan fungsi-fungsi inti dan plugin. Seperti ini:

$wp_jquery_version = $GLOBALS['wp_scripts']->registered['jquery-core']->ver;
$jquery_version = ( $wp_jquery_version == '' ) ? '1.8.3' : $wp_jquery_version; // fallback, just in case 
wp_deregister_script('jquery');
wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/'. $jquery_version .'/jquery.min.js', $jquery_version, false );
wp_enqueue_script('jquery');
cjbj
sumber
-2

Setelah memeriksa semua metode yang berbeda untuk memuat jquery (tidak hanya pada posting ini), saya menyadari bahwa tidak satupun dari mereka melakukan semua ini:

  1. Daftarkan (dan mungkin enqueue) jquery menggunakan fungsi, sehingga dapat digunakan oleh plugin.
  2. Muat dari Google CDN dengan url relatif protokol.
  3. Kembali ke salinan lokal jika Google sedang offline.

Ada banyak versi alternatif yang melakukan beberapa hal ini dalam daftar, tetapi tidak semua, jadi saya menulis versi saya menyisir dan memodifikasi beberapa metode yang sudah tersedia. Ini dia:

function nautilus7_enqueue_scripts() {

    // Load jquery from Google CDN (protocol relative) with local fallback when not available
    if ( false === ( $url = get_transient('jquery_url') ) ) {

        // Check if Google CDN is working
        $url = ( is_ssl() ? 'https:' : 'http:' ) . '//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js';
        $resp = wp_remote_head($url);

        // Load local jquery if Google down
        if ( is_wp_error($resp) || 200 != $resp['response']['code'] ) {

            $url = get_template_directory_uri() . '/js/vendor/jquery-1.7.2.min.js';
        }

        // Cache the result for 5 minutes to save bandwidth
        set_transient('jquery_url', $url, 60*5);
    }

    // Deregister Wordpress' jquery and register theme's copy in the footer
    wp_deregister_script('jquery');
    wp_register_script('jquery', $url, array(), null, true);

    // Load other theme scripts here

}
add_action('wp_enqueue_scripts', 'nautilus7_enqueue_scripts');

Untuk menghemat bandwidth dan tidak melakukan ping ke Google setiap kali halaman dimuat ulang, ia mengingat apakah Google CDN sedang online atau tidak selama 5 menit menggunakan Wordpress Transient API.

nautilus7
sumber
Tidak direkomendasikan. Sekarang Anda harus memperbarui skrip setelah setiap pembaruan WordPress agar sesuai dengan versi jQuery yang digunakan WordPress. Plus, Google gagal mengirim pustaka terkompresi dalam beberapa kasus, jadi halaman Anda memuat lebih lambat sekarang.
fuxia
Saya tidak menggunakan jquery wordpress. Baca kodenya. Saya menggunakan versi temanya. Dan jika Anda tidak suka google, Anda dapat menggunakan cdn lain.
nautilus7
Tapi itu intinya: Anda harus menggunakan jQuery WordPress untuk memastikan versinya benar.
fuxia
Aku tidak mengikutimu. Saya ambil versi apa pun yang saya butuhkan dari google dan saya bundel versi yang sama dengan tema saya. Begitulah cara semua orang melakukannya. Wordpress dapat menggunakan (di bagian admin) versi apa pun yang disertakan.
nautilus7
1
Anda dapat menggunakan versi jQuery apa yang Anda inginkan, tetapi jika Anda menggabungkannya dengan tema, Anda memaksakan ini pada pengguna Anda. Beberapa tahun dari sekarang ketika semua orang menggunakan jQuery 1.8.2 pengguna Anda akan terjebak pada versi yang sudah ketinggalan zaman kecuali mereka tetap memperbarui tema.
Chris_O