API JS de personalizador

Bien, he estado tratando de educarme para crear nuevas secciones de paneles y controles dinámicamente usando la API JS del personalizador.

Han sido unos días frustrantes y no pude obtener la forma exacta de lograr esto a través de JS API.

Hasta ahora, esto es algo que estoy haciendo para que suceda, pero sin éxito:

    // 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();

Ninguno de ellos parece funcionar ya que la sección no aparece y tengo que ejecutar api.section('section_id').activate()dos veces en la consola para que aparezca la sección, lo mismo ocurre con el control.

1) Quizás se una al estado api.ready que puede solucionar tener que llamar a su sección dos veces

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

  }
})(jQuery);

Vi una nota en Trac que decía "Tenga en cuenta que las API para controles añadidos dinámicamente y las API para Secciones y Paneles personalizados con plantillas JS aún no están disponibles a partir de WordPress 4.2. Consulte # 30741". Leer ese seguimiento termina con "probablemente no para 4.5 en este momento", por lo que sus esfuerzos pueden ser inútiles = (

2) Como referencia, la API wp_customize JS se puede encontrar aquí . Este enlace también puede ser útil.

3) No tengo suficiente representante para un tercer enlace, pero puede consultar Kirki.org, que es un marco auxiliar para campos de personalización. Kirki también es bastante activo en Github.

4) En el lado de PHP, puede usar la opción "active_callback" en su matriz de campos para presentar dinámicamente los campos.

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

Buena suerte.

Sugeriría que en lugar de reinventar la rueda, tal vez considere este marco como base para sus proyectos. http://wpshed.com/wordpress-theme-customizer-framework/ .

Este es el mejor que encontré mientras estaba aprendiendo y buscando marcos. Puede ampliar este marco con sus propios controles personalizados y el enlace a continuación lo ayudará a comprender e implementar la comunicación entre el personalizador y la vista previa del personalizador a través de jQuery o javascript.

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