Bagaimana cara memasukkan file jQuery dan JavaScript dengan benar?

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.

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.

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 ...)

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.

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)

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

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.