Customizer JS API

ตกลงดังนั้นฉันพยายามสอนตัวเองเพื่อสร้างส่วนพาเนลใหม่และควบคุมแบบไดนามิกโดยใช้ JS API ของ Customizer

มันน่าผิดหวังไม่กี่วันและฉันไม่สามารถหาวิธีที่แน่นอนเพื่อให้บรรลุสิ่งนี้ผ่าน JS API

จนถึงตอนนี้สิ่งที่ฉันทำเพื่อให้มันเกิดขึ้น แต่ไม่ประสบความสำเร็จ:

    // for Settings
    api.create( 
        params.id, 
        params.id, 
        params.default, 
        params.args 
    );

    // for controls
    var controlConstructor = api.controlConstructor[params.type];
    var control = new controlConstructor(params.id, {
        params: params,
        previewer: api.previewer
    });
    api.control.add( 
        params.id, 
        control 
    );

     //for Sections
     var section = new api.Section(params.id, { 
        params: params
     }); 
    api.section.add( params.id, section );
    api.section('section_id').activate();

ดูเหมือนว่าจะไม่มีใครทำงานได้เนื่องจากไม่มีส่วนปรากฏขึ้นและฉันต้องเรียกใช้api.section('section_id').activate()สองครั้งในคอนโซลเพื่อทำให้ส่วนปรากฏขึ้นเหมือนกันกับการควบคุม

1) อาจผูกกับสถานะ api.ready ซึ่งอาจแก้ไขได้ว่าต้องโทรหาส่วนของคุณสองครั้ง

(function($, api){
  api.bind( 'ready', function() {...

  }
})(jQuery);

ฉันเห็นข้อความใน trac ที่กล่าวว่า "โปรดทราบว่า APIs สำหรับการควบคุมที่เพิ่มขึ้นแบบไดนามิกและ API สำหรับส่วนที่กำหนดเอง JS-templated ที่กำหนดเองและแผงยังไม่พร้อมใช้งานในฐานะของ WordPress 4.2 ดู # 30741" การอ่าน trac นั้นลงท้ายด้วย "น่าจะไม่ใช่ 4.5 ตอนนี้" ดังนั้นความพยายามของคุณอาจไร้ประโยชน์ = (

2) สำหรับการอ้างอิง wp_customize JS API สามารถพบได้ที่นี่ ลิงค์นี้อาจมีประโยชน์เช่นกัน

3) ฉันมีตัวแทนไม่เพียงพอสำหรับลิงก์ที่สาม แต่คุณอาจดู Kirki.org ซึ่งเป็นกรอบตัวช่วยสำหรับฟิลด์ตัวกำหนดเอง Kirki ก็มีบทบาทใน Github เช่นกัน

4) ในด้าน PHP คุณสามารถใช้ตัวเลือก "active_callback" ในอาร์เรย์ฟิลด์ของคุณเพื่อแสดงฟิลด์แบบไดนามิก

$wp_customize->add_control( 'some_single_page_specific_option', array(
  'label'           => esc_html__( 'Single Page Option' ),
  'section'         => 'my_page_options',
  'active_callback' => 'if_is_singular',
));

function if_is_singular(){
  if( is_singular() ){
    return true;
  } else {
    return false;
  }
}

โชคดี.

ฉันขอแนะนำให้แทนที่การสร้างวงล้อใหม่บางทีคุณอาจพิจารณากรอบนี้เป็นฐานสำหรับโครงการของคุณ http://wpshed.com/wordpress-theme-customizer-framework/

อันนี้เป็นสิ่งที่ดีที่สุดที่ฉันพบในขณะที่ฉันเรียนรู้และมองหากรอบ คุณสามารถขยายกรอบงานนี้ด้วยการควบคุมที่กำหนดเองของคุณและลิงค์ด้านล่างจะช่วยให้คุณเข้าใจและใช้การสื่อสารระหว่าง Customizer และ Customizer-Preview ผ่าน jQuery หรือ javascript

https://conductorplugin.com/developing-wordpress-customizer-part1/