วิธีรวมไฟล์ jQuery และ JavaScript อย่างถูกต้อง?

ฉันทำมันตอนนี้ด้วยรหัสต่อไปนี้:

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

ใช้งานได้ แต่ฉันควรทำเช่นนี้สำหรับทุกคนเช่นนี้หรือสำหรับทุกคนยกเว้นผู้ดูแลระบบ (เพื่อให้แบ็กเอนด์ใช้รุ่น 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');

รุ่นนี้ใช้งานไม่ได้จริง ๆ แล้วฉันได้รับ WordPress jQuery-version และไม่ใช่ Google

ดังนั้นฉันควรลงทะเบียน jQuery ที่รวมอยู่ใน WordPress เลยหรือไม่?

นอกจากนี้ฉันจะเพิ่มสคริปต์ของตัวเอง (สคริปต์เลื่อน, modernizr และ custom.js ของฉันเอง) ในวิธีที่ถูกต้องได้อย่างไร ฉันเดาว่าฉันควรจะทำเช่นนี้ผ่าน function.php เช่นกันและไม่ควรอยู่ในส่วนหัวเหมือนตอนนี้ แต่ฉันไม่แน่ใจว่าฉันจะทำอย่างไร

กฎข้อแรกของหัวแม่มือ: อย่ายกเลิกการลงทะเบียนสคริปต์ที่มากับ core และแทนที่ด้วยเวอร์ชั่นอื่น ๆยกเว้นว่าคุณแน่ใจอย่างแน่นอนว่าจะไม่มี Theme, Plugins หรือคอร์ตัวหลักที่จะแตกเนื่องจากการเปลี่ยนเวอร์ชั่น จริง ๆ เว้นแต่คุณจะต้องการเวอร์ชันที่เป็นทางเลือกของสคริปต์ที่มากับแกนหลักเพียงแค่ใช้สิ่งที่มีอยู่ในชุดหลัก

ประการที่สองผมขอแนะนำ hooking เข้าwp_enqueue_scriptsสำหรับสคริปต์การลงทะเบียนและ enqueueing initมากกว่า (มันใช้งานได้initแต่จากมุมมองแบบเล่นกับผู้อื่นได้ดีที่สุดคือใช้เบ็ดที่ถูกต้องในเชิงความหมายมากที่สุด)

ประการที่สามในการจัดคิวสคริปต์ที่กำหนดเองของคุณเองคุณใช้วิธีการเดียวกันกับด้านบน:

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

เพียงเพิ่มสคริปต์ใดก็ตามที่คุณต้องการเข้าคิว

หวังว่านี่จะช่วยได้โปรดค้นหา codex สำหรับwp_enqueue_scriptsข้อมูลเพิ่มเติม

1. ใช้ Dont initเพื่อenqueue ใช้wp_enqueue_scriptsสำหรับส่วนหน้าและadmin_enqueue_scriptsด้านผู้ดูแลระบบ คุณสามารถใช้initเพื่อลงทะเบียนสคริปต์ได้
2. เบ็ดwp_enqueue_scriptsเฉพาะไฟบน Front-end (และไม่ได้อยู่ในการเข้าสู่ระบบในหน้า) - is_admin()ดังนั้นคุณจะได้ไม่ต้องตรวจสอบ

3. หากคุณไม่มีเหตุผลที่เฉพาะเจาะจงในการทำเช่นนั้นฉันขอแนะนำให้ลงทะเบียนและจัดคิวสคริปต์ที่ใช้functions.phpสำหรับธีมหรือในปลั๊กอิน คุณเพียงแค่ใส่:

    function myprefix_load_scripts() {
      // Load scripts here
    }
    add_action( 'wp_enqueue_scripts', 'myprefix_load_scripts' );

4. หากจุดประสงค์คือการwp_enqueue_scriptจัดคิวสคริปต์เมื่อมีการใช้รหัสย่อคุณอาจต้องการใช้ในการโทรกลับรหัสเพื่อเข้าสู่คิวเฉพาะเมื่อจำเป็น (สิ่งนี้จะพิมพ์ลงในส่วนท้ายตั้งแต่ 3.3 )

5. คุณไม่ควรลงทะเบียน jQuery ที่มีอยู่อีกครั้งในด้านผู้ดูแลระบบ คุณอาจจะทำลายบางสิ่ง: D

6. ปลั๊กอินไม่ควรลงทะเบียน jQuery ที่มีอยู่อีกครั้ง

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

คำเตือนอย่างเป็นธรรม: การลงทะเบียน jQuery เวอร์ชันที่ทำเป็นแพ็กเกจ WP ของคุณเองอาจทำให้เกิดปัญหาโดยเฉพาะอย่างยิ่งถ้าคุณไม่ระมัดระวังเป็นพิเศษเพื่อให้แน่ใจว่าคุณเปลี่ยนเวอร์ชันที่คุณกำลังชี้ไปยังเมื่อใดก็ตามที่ WP อัปเดตเวอร์ชันของมัน สิ่งนี้จะเพิ่มเป็นสองเท่าสำหรับปลั๊กอินซึ่งบ่อยครั้ง (หรืออย่างน้อยควร) เขียนปลั๊กอินเพื่อความเข้ากันได้สูงสุดกับรุ่น WP ของ jQuery

ที่กล่าวว่ารุ่นแรกของคุณถูกต้อง - มันติดwp_enqueue_scriptsอยู่ ฟังก์ชั่นที่สองของคุณติดอยู่initซึ่งอาจเป็นสาเหตุที่ทำให้การทำงานไม่ถูกต้อง

เพิ่มสคริปต์ของคุณในลักษณะที่คล้ายกัน:

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

ฉันสมมติว่าที่นี่คุณกำลังโหลดสคริปต์จากjsไดเรกทอรีในไดเรกทอรีธีมปัจจุบันของคุณ เปลี่ยนพารามิเตอร์ URI หากไม่เป็นจริง พารามิเตอร์ที่สามarray( 'jquery' )กล่าวว่าbbg-scriptsขึ้นอยู่กับjqueryและควรโหลดหลังจากนั้น ดูhttps://codex.wordpress.org/Function_Reference/wp_enqueue_scriptสำหรับรายละเอียดเพิ่มเติม

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

นี่จะไม่ทำอะไรเลย ... ฉันสงสัยว่าคุณหมายถึง

if (!function_exists('load_my_scripts')) {

ตัวอย่างของคุณจะโหลดฟังก์ชัน load_my_scripts เท่านั้นหากมีอยู่แล้ว (ซึ่งไม่เช่นนั้นจะไม่เกิดขึ้นและหากเกิดขึ้นจะทำให้เกิดข้อผิดพลาด)

หากด้วยเหตุผลด้านประสิทธิภาพคุณต้องการโหลด jquery และ core js-files อื่น ๆ จาก CDN ตรวจสอบให้แน่ใจว่าคุณกำลังโหลดเวอร์ชันเดียวกันเพื่อป้องกันสิ่งที่น่ารังเกียจเกิดขึ้นกับฟังก์ชันหลักและปลั๊กอิน แบบนี้:

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

หลังจากตรวจสอบวิธีการที่แตกต่างกันทั้งหมดสำหรับการโหลด jquery (ไม่เพียง แต่ในโพสต์นี้) ฉันรู้ว่าไม่มีวิธีใดที่จะทำได้ทั้งหมด:

1. ลงทะเบียน jquery (และอาจจัดคิว) โดยใช้ฟังก์ชั่นดังนั้นจึงสามารถใช้งานได้โดยปลั๊กอิน
2. โหลดจาก Google CDN ด้วย url ที่เกี่ยวข้องกับโปรโตคอล
3. กลับไปใช้สำเนาโลคัลหาก Google ออฟไลน์

มีหลายรุ่นสลับกันทำบางอย่างในรายการ แต่ไม่ใช่ทั้งหมดดังนั้นฉันจึงเขียนเวอร์ชัน combing และปรับเปลี่ยนวิธีการบางอย่างที่มีอยู่แล้ว นี่มันคือ:

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

เพื่อประหยัดแบนด์วิดธ์และไม่ ping Google ทุกครั้งที่มีการโหลดหน้าเว็บใหม่จะจดจำว่า Google CDN ออนไลน์อยู่หรือไม่เป็นเวลา 5 นาทีโดยใช้ Wordpress Transient API