เป็นไปได้หรือไม่ที่จะขยายวิธีการกำหนด JS เอง


9

ฉันสงสัยว่าถ้ามันเป็นไปได้ที่จะขยายวิธีการของการที่ไม่ระบุชื่อวัตถุที่อยู่ในapi wp-admin/js/customize-control.jsฉันต้องการเขียนทับหนึ่งในวิธีการเหล่านี้ด้วยตรรกะที่กำหนดเองของฉัน แต่ฉันสงสัยว่ามันเป็นไปไม่ได้เนื่องจากมันถูกห่อหุ้มด้วยการแสดงออกของฟังก์ชั่นที่เรียกใช้ทันที:

/* globals _wpCustomizeHeader, _wpMediaViewsL10n */
(function( exports, $ ){
// code
})( wp, jQuery );

window.wp.customizeเท่าที่ผมสามารถมองเห็นฉันไม่สามารถที่จะขยายต้นแบบจากวัตถุหน้าต่างเพราะมันดำเนินการไม่ระบุชื่อและไม่สามารถใช้ได้จาก ความคิดใด ๆ ถ้าสิ่งนั้นเป็นไปได้? แม้จะมีการพูดถึงการเอาชนะสิ่งนี้ในเอกสาร. toggle () วิธีการ / คำอธิบาย: https://github.com/WordPress/WordPress/blob/master/wp-admin/js/customize-controls.js#L110แต่ฉัน ไม่แน่ใจว่าพวกเขาหมายถึงเพียงแค่การฟอร์กไฟล์ JS ทั้งหมดทำการถอนคิวรุ่น WP และจัดคิวของคุณเองหรือถ้าพวกมันมีความหมายหรืออะไรที่แตกต่างออกไป

โปรดทราบว่าดูเหมือนว่าควรจะเป็นไปได้ด้วยwp.customize.{method}.extend({ foo: // replace method foo here })แต่จะใช้กับคลาส / วัตถุฐานสาธารณะเท่านั้นไม่ใช่ในwp-admin/js/customize-control.js


3
แม้ว่าapiจะไม่ระบุชื่อเป็นเพียงคำพ้องสำหรับwp.customize(ดูบรรทัดที่ 3) ซึ่งสามารถเข้าถึงได้ทั่วโลก อย่างไรก็ตามดูเหมือนว่า Yet Yet Object Model ที่ใช้สำหรับการควบคุมการเรียกใช้readyฟังก์ชั่นในinitializeดังนั้นหนึ่งอาจไม่ได้รับโอกาส (เช่นมักจะสายเกินไป) เพื่อเขียนทับวิธีการ - สิ่งที่คุณพยายามที่จะขยาย?
bonger

ในทางทฤษฎีแล้วมันก็สมเหตุสมผล - ข้อเสนอแนะชื่นชม ในกรณีของฉันฉันรู้สึกว่าวิธีการนี้ค่อนข้างแฮ็คและมีวิธีแก้ไขปัญหาที่เหมาะสมสำหรับกรณีการใช้งานของฉัน อย่างไรก็ตามคำตอบที่มีรหัสการทำงานอาจยังคงใช้ได้กับคนที่ไม่มีตัวเลือกอื่นสำหรับกรณีการใช้งานของพวกเขา การแสดงกับสิ่งที่ฉันวางแผนไว้น่ากลัวอยู่ดี
Brian

1
ฉันไม่ใช่ผู้เชี่ยวชาญของ JS แต่ฉันมีการเพิ่มในชุดรูปแบบเล็กสคริปต์ปรับแต่งเพื่อรีเฟรชส่วนขยายของฉันเสมอ ฉันทำงานกับ wp.customizeและเพิ่มฟังก์ชั่นให้กับวัตถุนี้ ดูที่นี่สำหรับตัวอย่างแหล่งที่มา - github.com/bueltge/Documentation/blob/master/js/…
bueltge

คำตอบ:


5

ฉันจะปรับปรุงความคิดเห็นเล็ก ๆ ในคำถามของคุณ แต่คำใบ้อีกครั้ง; ฉันไม่ใช่ผู้เชี่ยวชาญ JS คำแนะนำต่อไปนี้ใช้สำหรับเล่นกับ Customizer เพื่อตรวจสอบตัวอย่างเช่นsandboxของฉันเท่านั้น

wp.customize

การทำความเข้าใจกับอินเตอร์เฟสตัวปรับแต่งธีม WP ธีมจะเข้าใจวัตถุ wp.customize javascript wp.customizeวัตถุเป็นสิ่งสำคัญและคุณควรตั้งไว้ในจุดเริ่มต้น

ตัวอย่างสด

ตัวอย่างเล็ก ๆ ต่อไปนี้แสดงให้เห็นถึงสิ่งนี้ ตอนแรกฉันตั้งค่า var apiเป็นวัตถุของ Customizer หลังจากนี้ฉันตั้งค่าฟิลด์ที่กำหนดเองของฉันไปที่apiและปรับปรุงด้วยแหล่ง jQuery ขนาดเล็กเพื่อรีเฟรชผลลัพธ์สำหรับการแสดงตัวอย่างแบบสด

( function( $ ) {
    var api = wp.customize;

    // Site title and description.
    api( 'blogname', function( value ) {
        value.bind( function( to ) {
            $( '#header h1 a, #footer a.site-name' ).html( to );
        } );
    } );

    api( 'blogdescription', function( value ) {
        value.bind( function( to ) {
            $( '#header p.site-description' ).html( to );
        } );
    } );

} )( jQuery );

การตั้งค่าและการควบคุม

วัตถุควบคุมจะถูกเก็บไว้ในวัตถุและการตั้งค่าจะถูกเก็บไว้ในwp.customize.control wp.customizeคลาสที่คุ้มค่ามีฟังก์ชั่นมากมายสามารถช่วยคุณได้

  • อินสแตนซ์ (id) - รับวัตถุจากคอลเลกชันที่มีรหัสที่ระบุ
  • มี (id) - ส่งคืนจริงถ้าคอลเลกชันมีวัตถุที่มีรหัสที่ระบุและมันเป็นเท็จอย่างอื่น
  • เพิ่ม (id, ค่า) - เพิ่มวัตถุไปยังคอลเลกชันที่มีรหัสและค่าที่ระบุ
  • ลบ (id) - ลบวัตถุออกจากคอลเลกชัน
  • สร้าง (id) - สร้างวัตถุใหม่โดยใช้ตัวสร้างเริ่มต้นและเพิ่มลงในคอลเลกชัน
  • แต่ละรายการ (การเรียกกลับบริบท) - ทำซ้ำองค์ประกอบต่างๆภายในคอลเลกชัน

การตั้งค่าที่กำหนดเอง

ด้วยฟังก์ชั่นนี้เราสามารถปรับปรุงการตั้งค่าแบบกำหนดเองของเรา

var api = wp.customize,
    mysetting = api.instance( 'my_custom_setting' );

ยังสามารถใช้กับอาร์เรย์ได้อีกด้วย

var api = wp.customize,
    mysetting = api.instance( 'my_custom_settings[my_custom_setting_field]' );

ได้รับ

ดูผลลัพธ์ในคอนโซล

console.log( api.instance( 'my_custom_settings[my_custom_setting_field]' ).get() );

ชุด

setนอกจากนี้คุณยังสามารถเปลี่ยนค่าการตั้งค่าผ่านทางฟังก์ชั่น

api.instance( 'my_custom_settings[my_custom_setting_field]' ).set( 'my new value' ) );

รับด้วยการควบคุมเป็นวัตถุ

console.log( api.control.instance( 'my_custom_setting_field' ) );

แหล่งที่มาที่เป็นประโยชน์

  • WP-admin / js / ปรับแต่ง-controls.js
  • WP-includes / js / ปรับแต่ง-preview.js
  • WP-includes / js / ปรับแต่ง-base.js
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.