ดึง URL ของสคริปต์ / สไตล์และการอ้างอิง

Aug 16 2020

ให้สคริปต์ XY และ Z ฉันจะรับรายการใน PHP ของ XYZ และการอ้างอิงได้อย่างไร

ฉันต้องการโหลดสคริปต์หลายตัวที่มีการอ้างอิง

โดยปกติฉันจะทำผ่านwp_enqueue_scriptแต่ในสถานการณ์นี้ฉันต้องโหลดสคริปต์เหล่านี้ใน shadow DOM สำหรับคอมโพเนนต์เว็บและไม่สามารถพึ่งพาได้wp_headและwp_footerฉันต้องสร้างองค์ประกอบ DOM ด้วยตัวเองใน JS เพื่อให้เนื้อหาขององค์ประกอบถูกแยกออกจากส่วนที่เหลือของหน้าเพื่อวัตถุประสงค์ในการออกแบบ

คำตอบ

2 SallyCJ Aug 16 2020 at 08:05

wp_enqueue_script()และwp_enqueue_style()ทั้งสองใช้WP_Dependencies::add()ซึ่งเริ่มต้นอินสแตนซ์ใหม่ของ_WP_Dependency(ดูwp_scripts()และwp_styles()) ดังนั้นการอ้างอิงของสคริปต์ทั้งหมดจะถูกเก็บไว้ในdepsคุณสมบัติของอินสแตนซ์คลาส

อย่างไรก็ตามคุณสมบัตินั้นเก็บเฉพาะชื่อหมายเลขอ้างอิงของการอ้างอิงของสคริปต์เช่นjquery-migrateและjquery-coreสำหรับสคริปต์ jQuery เริ่มต้น / core (ชื่อหมายเลขอ้างอิง:) jqueryดังนั้นเพื่อให้ได้ URL ที่แท้จริงของไฟล์อ้างอิง (สคริปต์ / สไตล์ชีต) เราจำเป็นต้องใช้WP_Dependencies::all_deps()จากนั้นวนซ้ำWP_Dependencies::$to_doเพื่อรับsrcค่าของการอ้างอิง:

// Enqueue a script:
wp_enqueue_script( 'my-script', '/path/to/file.js', [ 'jquery' ] );

// Get all its dependencies:
wp_scripts()->all_deps( 'my-script' );
foreach ( wp_scripts()->to_do as $handle ) {
    $dep = wp_scripts()->registered[ $handle ];
    var_dump( $dep->handle, $dep->src );
    // or do something with $dep->src ... } // Enqueue a style: wp_enqueue_style( 'my-style', '/path/to/file.css', [ 'foo-dep' ] ); // Get all its dependencies: wp_styles()->all_deps( 'my-style' ); foreach ( wp_styles()->to_do as $handle ) {
    $dep = wp_styles()->registered[ $handle ];
    var_dump( $dep->handle, $dep->src );
    // or do something with $dep->src ...
}

โปรดสังเกตว่า$dep->srcสามารถเป็นfalseถ้าการอ้างอิงมีการอ้างอิงเช่นjqueryหมายเลขอ้างอิงเริ่มต้นซึ่งมีjquery-migrateการอ้างอิง (แต่ไม่ต้องกังวลการอ้างอิงจะอยู่ในto_doอาร์เรย์) และประการที่สองto_doอาร์เรย์ยังรวมไฟล์จริงด้วยเช่นfile.jsในตัวอย่างด้านบน