จะแทนที่ไฟล์ JavaScript ในธีมลูกได้อย่างไร?


35

ฉันกำลังโหลดไฟล์ JavaScript บางไฟล์ในธีมหลัก พา ธ ในธีมพาเรนต์คือ:

scripts > custom.js

ในธีมลูกฉันกำลังสร้างพา ธ เดียวกัน ( scripts > custom.js) และเปลี่ยน jQuery บางส่วนภายในcustom.jsไฟล์

ปัญหาคือว่าการเปลี่ยนแปลงจะไม่ถูกนำไปใช้ นี่เป็นวิธีที่ผิดที่จะเปลี่ยนแปลงไฟล์เหล่านี้ในธีมลูกหรือไม่?


1
ธีมหลักคืออะไร? สคริปต์ถูกเรียกโดยธีมหลักอย่างไร
Chip Bennett

คำตอบ:


51

ธีมลูก ๆ จะแทนที่ไฟล์ php เท่านั้น (เช่น header.php) ที่มาพร้อมกับฟังก์ชั่นเช่น get_template_part หรือ get_header เป็นต้น

วิธีที่ถูกต้องในการเพิ่มสคริปต์เพื่อ WordPress เป็นกับwp_enqueue_script หากธีมหลักของคุณใช้สิ่งนี้คุณสามารถแทนที่ไฟล์ JS ได้โดยใช้wp_dequeue_scriptและจัดคิวของคุณเอง

ชอบมาก ...

<?php
// hook in late to make sure the parent theme's registration 
// has fired so you can undo it. Otherwise the parent will simply
// enqueue its script anyway.
add_action('wp_enqueue_scripts', 'wpse26822_script_fix', 100);
function wpse26822_script_fix()
{
    wp_dequeue_script('parent_theme_script_handle');
    wp_enqueue_script('child_theme_script_handle', get_stylesheet_directory_uri().'/scripts/yourjs.js', array('jquery'));
}

หากธีมหลักไม่ได้ใช้ wp_enqueue_script ก็อาจเป็นไปได้ว่า wp_head (หรือ wp_footer) เพื่อสะท้อนสคริปต์ที่นั่น ดังนั้นคุณจะต้องใช้remove_actionเพื่อกำจัดฟังก์ชั่นเหล่านั้นเพื่อสะท้อนสคริปต์ออกมาจากนั้นจัดคิวสคริปต์ของคุณเอง

หากสคริปต์เขียนโค้ดลงในไฟล์เทมเพลตยากคุณจะต้องแทนที่ไฟล์เทมเพลตนั้นในธีมลูกของคุณโดยไม่มีแท็กสคริปต์

หากพวกเขาใช้การโทร wp_enqueue_script ที่ใช้get_stylesheet_directory_uriคุณไม่ควรทำอะไรเลย เนื่องจากสิ่งนี้ไม่ได้เกิดขึ้นคุณจะต้องแหย่และดูว่าผู้แต่งธีมทำอะไร


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

จาก Codex:“ wp_print_scripts ไม่ควรใช้เพื่อจัดคิวสไตล์หรือสคริปต์ในหน้าแรก ใช้ wp_enqueue_scripts แทน ” codex.wordpress.org/Plugin_API/Action_Reference/…
Christian Lescuyer

โปรดระลึกไว้เสมอว่าสิ่งนี้ถูกเขียนขึ้นเมื่อสองปีที่แล้ว ก่อนที่จะwp_enqueue_scriptsสามารถใช้ในการเข้าคิวสคริปต์เท่านั้นที่ส่วนหน้า Updated หากคุณเห็นบางสิ่งบางอย่างล้าสมัยสามารถแก้ไขได้ฟรี
chrisguitarguy

4
โปรดทราบว่าคุณอาจต้องตั้งค่าลำดับความสำคัญล่าช้า (เช่น 100) เพื่อให้แน่ใจว่าการคิวของคุณเกิดขึ้นหลังจากชุดรูปแบบสำหรับผู้ปกครอง add_action( 'wp_enqueue_scripts', 'wpse26822_script_fix', 100 ); จากcodex.wordpress.org/Function_Reference/wp_dequeue_script
Spone

4
อัปเดตสำหรับปี 2016: ตามstackoverflow.com/questions/23507179/ …เราต้องใช้wp_deregister_script('parent-script-handle');เพื่อลบสคริปต์หลักอย่างสมบูรณ์ แน่นอนมันไม่ได้ผลสำหรับฉันหากปราศจากมัน WP 4.6.1
PhiLho

1

ในบางกรณีเป็นสิ่งสำคัญที่จะต้องจัดลำดับความสำคัญทั้งฟังก์ชั่น add_action และ wp_enqueue_script ดังนี้:

add_action('wp_enqueue_scripts', 'wpse26822_script_fix', 20120207);
function wpse26822_script_fix()
{
    wp_dequeue_script('storefront-navigation');
    wp_enqueue_script('my_storefront-navigation', get_stylesheet_directory_uri().'/js/navigation.min.js', array('jquery'),20151110,true);
}

ในกรณีนี้ wp_enqueue_scripts ถูกเรียกโดยผู้ปกครองที่มีลำดับความสำคัญเป็น 20120206 (วันที่) และเพื่อให้การกระทำนี้ถูกเพิ่มเข้ามาด้วยลำดับความสำคัญที่ยิ่งใหญ่กว่าแทบจะไม่ถูกถอนออกทันที จากนั้นคำสั่ง enqueue ที่ตามมาดังต่อไปนี้จะถูกจัดลำดับความสำคัญหลังจากนั้นเพื่อให้แน่ใจว่ามันจะโหลดหลังจากที่คำสั่งเก่าถูก dequeued ความจริงในกรณีนี้ก็มีความสำคัญเช่นกันเนื่องจากระบุว่าจะต้องเข้าคิวในส่วนท้ายซึ่งเป็นที่ที่สคริปต์ผู้ปกครองถูกจัดคิวครั้งแรก

นอกจากนี้ฉันไม่สามารถอธิบายได้ทั้งหมด แต่ฉันสังเกตเห็นว่าถ้าคุณระมัดระวังในการ dequeuing สคริปต์เริ่มต้นทันทีหลังจากที่ถูกจัดคิวดูเหมือนว่าคุณสามารถป้องกันไม่ให้โหลดในตอนแรก


1
ฟังก์ชั่นwp_enqueue_scriptไม่ได้มีพารามิเตอร์ลำดับความสำคัญมันเป็นเพียงหมายเลขรุ่นที่เชื่อมต่อกันที่ส่วนท้ายของเส้นทางเป็นสตริงแบบสอบถาม พารามิเตอร์นี้ใช้เพื่อให้แน่ใจว่าเวอร์ชันที่ถูกต้องจะถูกส่งไปยังลูกค้าโดยไม่คำนึงถึงการแคช [... ]
Emile Bergeron

1

โทรwp_deregister_scriptก่อนที่จะลงทะเบียนรุ่นของคุณเอง


1
ทำไม? สิ่งนี้จำเป็นเฉพาะเมื่อคุณใช้หมายเลขอ้างอิงเดียวกัน - สิ่งที่คุณไม่ต้องทำ คุณอาจไม่ควรทำเช่นนั้นเพราะการดีบั๊กของรหัสที่ชัดเจน
fuxia

1
// enqueue your required script file
add_action('wp_enqueue_scripts', 'your_child_theme_js_file_override');
function your_child_theme_js_file_override(){
    wp_enqueue_script( 'child_theme_script_handle', get_stylesheet_directory_uri() . '/assets/js/your-file.js', array('jquery' ) );
}

// dequeue your required script file
function your_child_theme_js_file_dequeue() {
   wp_dequeue_script( 'parent_theme_script_handle' );
}
add_action( 'wp_print_scripts', 'your_child_theme_js_file_dequeue', 100 );
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.