จัดทำคอร์ jQuery ในส่วนท้ายหรือไม่

ฉันมีสิ่งนี้ในfunctions.phpไฟล์ของฉันและฉันไม่สามารถรับ jQuery เพื่อโหลดในส่วนท้าย includesโหลดไฟล์ในการปรับส่วนท้ายแม้ว่า ฉันต้องทำอะไรอีก

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

ในการทำเช่นนั้นคุณจะต้องลงทะเบียนสคริปต์ jQuery ของคุณก่อนแล้วจึงลงทะเบียนอีกครั้ง หากคุณใช้ jQuery มาพร้อมกับ WordPress แล้วต่อไปนี้เป็นฟังก์ชั่นที่คุณกำลังมองหา

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

หากคุณใช้ jQuery เวอร์ชันที่โฮสต์โดย Google CDN โปรดแจ้งให้เราทราบว่าฉันจะแก้ไขรหัสนี้สำหรับ URL ของ Google CDN

นี่คือตัวเลือกอื่นที่หลีกเลี่ยงการยกเลิกการลงทะเบียนและการลงทะเบียนใหม่:

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

การแก้ปัญหานี้เลียนแบบ WordPress หลักโดยการตั้งค่าgroupการ1ซึ่งเป็นวิธีการ WordPress กำหนดว่าสคริปต์ควรจะอยู่ในส่วนท้ายหรือไม่ (ฉันไม่ได้ตระหนักถึงเหตุผลสำหรับการ1เป็น @jgraup ตั้งข้อสังเกตในความคิดเห็นที่ดูเหมือนว่าพลบิต)

ทางออกที่ดีกว่า:

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

ทำไมมันจึงดีกว่า IMO ที่ได้รับคำตอบแล้ว

1. เปลี่ยนมันที่แกนกลางไม่ใช่ในภายหลังซึ่งสิ่งอื่น ๆ อาจยุ่งกับมัน
2. สตริงเวอร์ชันที่เก็บไว้และไม่ถูกลบออก!
3. มันไม่ได้ถอนการลงทะเบียนและการลงทะเบียนสคริปต์ $footer = trueแต่มันเป็นเพียงแค่ตั้งค่ากลุ่มที่เป็นหลักเช่นเดียวกับถ้าสคริปต์จะต้องลงทะเบียนกับ

เกี่ยวกับการไม่ทำสิ่งนี้กับผู้ดูแลระบบ

หากปลั๊กอินเพิ่ม jQuery แบบอินไลน์ลงใน wp_head ปลั๊กอินจะล้มเหลวเมื่อไม่ได้โหลด jquery ณ จุดนั้นดังนั้นฉันขอแนะนำให้คุณหลีกเลี่ยงจนกว่าจะมีการแก้ไขไซต์ของคุณนับล้านและพยายามเพิ่มประสิทธิภาพให้กับผู้ดูแลระบบของคุณ นี่เป็นความจริงสำหรับส่วนหน้าเช่นกันดังนั้นคุณควรระวังธีมที่ไม่ดีหรือปลั๊กอินที่ถือว่า jQuery ในส่วนหัวโดยใช้โค้ด inline jQuery WP และปลั๊กอินลงทะเบียนสคริปต์อื่น ๆ ไปยังหัวหน้าผู้ดูแลระบบด้วย jquery ใน deps ดังนั้นมันจะไม่ทำงานอย่างไรก็ตามฉันคิดว่า

เกี่ยวกับมันไม่ทำงาน

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

วิธีการแก้ปัญหาแบบรุนแรง

ฉันคิดว่ามันจะเบรกแบบอินไลน์ JS ที่ถือว่า jQuery แต่ควรที่จะหายาก วิธีนี้จะบังคับให้สคริปต์ทั้งหมดไปยังส่วนท้ายโดยไม่คำนึงถึงวิธีการจัดคิว

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

ฉันได้พัฒนาปลั๊กอินสำหรับปัญหาเฉพาะนี้ ปลั๊กอินนี้ไม่ยุ่งกับ 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/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' );

ที่จับ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 );

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

เฮ้เปลี่ยนรหัสของคุณเป็นแบบนี้เท่านั้น

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

ฉันคิดว่ามันใช้ได้ดี

เพิ่มบรรทัดนี้ลงในไฟล์ functions.php ของคุณ

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

จากนั้นเพิ่มสคริปต์ลงในส่วนท้าย