ฉันใช้งาน WordPress เวอร์ชัน 4.7.2 และใช้ jQuery เวอร์ชัน 1.12 ฉันต้องการอัปเดตเวอร์ชันนี้เป็นเวอร์ชันที่สูงกว่า ฉันแทนที่มันด้วยเวอร์ชันใหม่ก่อนหน้านี้ แต่เมื่อฉันอัพเกรด WordPress หลักมันจะถูกแทนที่ด้วย 1.12 อีกครั้ง ฉันจะเปลี่ยนรุ่นของ jQuery ที่ WordPress ใช้อย่างถาวรได้อย่างไร

คำเตือน:คุณไม่ควรเปลี่ยนรุ่น jQuery หลักโดยเฉพาะในแผง admin เนื่องจากฟังก์ชั่นหลัก ๆ ของ WordPress อาจขึ้นอยู่กับรุ่น นอกจากนี้ปลั๊กอินอื่น ๆ อาจขึ้นอยู่กับjQueryรุ่นที่เพิ่มเข้ามาในแกน

หากคุณแน่ใจว่าต้องการเปลี่ยนjQueryรุ่นหลักในกรณีนี้คุณสามารถเพิ่มรหัสต่อไปนี้ในfunctions.phpไฟล์ของธีมที่ใช้งานอยู่(ดียิ่งขึ้นหากคุณสร้างปลั๊กอินสำหรับสิ่งนี้):

function replace_core_jquery_version() {
    wp_deregister_script( 'jquery' );
    // Change the URL if you want to load a local copy of jQuery from your own server.
    wp_register_script( 'jquery', "https://code.jquery.com/jquery-3.1.1.min.js", array(), '3.1.1' );
}
add_action( 'wp_enqueue_scripts', 'replace_core_jquery_version' );

สิ่งนี้จะแทนที่jQueryรุ่นหลักและแทนที่จะโหลดรุ่น3.1.1จากเซิร์ฟเวอร์ของ Google

นอกจากนี้แม้ว่าจะไม่แนะนำก็ตามคุณสามารถใช้บรรทัดเพิ่มเติมของรหัสต่อไปนี้เพื่อแทนที่รุ่น jQuery ได้wp-adminเช่นกัน:

add_action( 'admin_enqueue_scripts', 'replace_core_jquery_version' );

ด้วยวิธีนี้แม้หลังจากอัปเดต WordPress คุณจะมีเวอร์ชันjQueryตามที่คุณต้องการ

ฟังก์ชั่นที่ดีขึ้นเล็กน้อย:

replace_core_jquery_versionฟังก์ชั่นดังกล่าวยังเอาjquery-migrateสคริปต์เพิ่มโดย WordPress หลัก นี่คือที่เหมาะสมเพราะรุ่นใหม่ล่าสุดของ jQuery jquery-migrateจะไม่ทำงานอย่างถูกต้องกับรุ่นเก่า อย่างไรก็ตามคุณสามารถรวมเวอร์ชันที่ใหม่กว่าได้jquery-migrateเช่นกัน ในกรณีนั้นให้ใช้ฟังก์ชั่นต่อไปนี้แทน:

function replace_core_jquery_version() {
    wp_deregister_script( 'jquery-core' );
    wp_register_script( 'jquery-core', "https://code.jquery.com/jquery-3.1.1.min.js", array(), '3.1.1' );
    wp_deregister_script( 'jquery-migrate' );
    wp_register_script( 'jquery-migrate', "https://code.jquery.com/jquery-migrate-3.0.0.min.js", array(), '3.0.0' );
}

ฉันได้พัฒนาปลั๊กอินสำหรับปัญหาเฉพาะนี้ ปลั๊กอินไม่ยุ่งกับ WordPress jQuery เนื่องจากมันถูกโหลดในส่วนหน้าเท่านั้น ดู: jQuery Manager สำหรับ WordPress

ทำไมถึงเป็นอีกหนึ่งเครื่องมือ jQuery Updater / Manager / Developer / Debugging

เนื่องจากไม่มีเครื่องมือสำหรับนักพัฒนาให้คุณเลือก jQuery และ / หรือ jQuery Migrate รุ่นที่ระบุ ให้ทั้งการผลิตและรุ่นย่อ ดูคุณสมบัติด้านล่าง!

executed ดำเนินการเฉพาะในส่วนหน้าเท่านั้นไม่รบกวนการทำงานของ WordPress admin / backend และ WP Customizer (สำหรับเหตุผลด้านความเข้ากันได้) ดู: https://core.trac.wordpress.org/ticket/45130และ https: // core trac.wordpress.org/ticket/37110

✅ เปิด / ปิด jQuery และ / หรือ jQuery Migrate

✅เปิดใช้งานjQuery และ / หรือ jQuery Migration รุ่นที่เฉพาะเจาะจง

และอีกมากมาย! รหัสคือโอเพ่นซอร์สดังนั้นคุณสามารถศึกษาเรียนรู้จากมันและมีส่วนร่วม

เกือบทุกคนใช้มือจับที่ไม่ถูกต้อง

WordPress ใช้ jquery-core handle จริง ๆ ไม่ใช่ jquery:

https://github.com/WordPress/WordPress/blob/91da29d9afaa664eb84e1261ebb916b18a362aa9/wp-includes/script-loader.php#L226

// jQuery
$scripts->add( 'jquery', false, array( 'jquery-core', 'jquery-migrate' ), '1.12.4' );
$scripts->add( 'jquery-core', '/wp-includes/js/jquery/jquery.js', array(), '1.12.4' );
$scripts->add( 'jquery-migrate', "/wp-includes/js/jquery/jquery-migrate$suffix.js", array(), '1.4.1' );

ที่จับjqueryเป็นเพียงนามแฝงในการโหลดjquery-coreพร้อมjquery-migrate

ดูข้อมูลเพิ่มเติมเกี่ยวกับนามแฝง: wp_register_script ตัวระบุหลายตัว?

วิธีที่ถูกต้องในการทำ

ในตัวอย่างของฉันด้านล่างฉันใช้ jQuery CDN อย่างเป็นทางการที่https://code.jquery.comฉันยังใช้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 );