Estenda WP Customizer para tornar possível a seleção de imagens múltiplas

Existe uma maneira de estender o Customizer WordPress, para permitir seleções múltiplas?

Isso parece com o que eu quero: https://github.com/lucatume/multi-image-control . Eu não entendo isso. Apenas mostra o botão add e remove botão, mas eles não fazem nada.

Existe outro script de extensão existente que posso usar?

Solutions Collecting From Web of "Estenda WP Customizer para tornar possível a seleção de imagens múltiplas"

O que acabei de fazer foi estender a class WP_Customize_Control seguinte maneira:

 < ?php if (!class_exists('WP_Customize_Image_Control')) { return null; } class Multi_Image_Custom_Control extends WP_Customize_Control { public function enqueue() { wp_enqueue_style('multi-image-style', get_template_directory_uri().'/css/multi-image.css'); wp_enqueue_script('multi-image-script', get_template_directory_uri().'/js/multi-image.js', array( 'jquery' ), rand(), true); } public function render_content() { ?>  
    Add
    link(); ?>> < ?php } } ?>

    Eu uso javascript para abrir o seletor de mídia WP quando o usuário clica em ‘Adicionar’. Quando uma imagem é selecionada, a imagem deve aparecer dentro de

      . Além disso, o usuário precisa ser capaz de remover uma imagem clicando em uma imagem. Eu fiz o seguinte arquivo de javascript :

       ( function( $ ) { $(window).load(function(){ var begin_attachment_string = $("#images-input").val(); var begin_attachment_array = begin_attachment_string.split(","); for(var i = 0; i < begin_attachment_array.length; i++){ if(begin_attachment_array[i] != ""){ $(".images").append( "
    • " ); } } $(".button-secondary.upload").click(function(){ var custom_uploader = wp.media.frames.file_frame = wp.media({ multiple: true }); custom_uploader.on('select', function() { var selection = custom_uploader.state().get('selection'); var attachments = []; selection.map( function( attachment ) { attachment = attachment.toJSON(); $(".images").append( "
    • " ); attachments.push(attachment.url); // }); var attachment_string = attachments.join() + "," + $('#images-input').val(); $('#images-input').val(attachment_string).trigger('change'); }); custom_uploader.open(); }); $(".images").click(function(){ var img_src = $(event.target).find("img").attr('src'); $(event.target).closest("li").remove(); var attachment_string = $('#images-input').val(); attachment_string = attachment_string.replace(img_src+",", ""); $('#images-input').val(attachment_string).trigger('change'); }); }); } )( jQuery );

      Por fim, adicionei alguns CSS :

       .image-list{ width: 100%; height: 150px; background-position: center; background-size: cover; background-repeat: no-repeat; -webkit-box-shadow: inset 0 0 15px rgba(0,0,0,.1), inset 0 0 0 1px rgba(0,0,0,.05); box-shadow: inset 0 0 15px rgba(0,0,0,.1), inset 0 0 0 1px rgba(0,0,0,.05); background: #eee; cursor: pointer; vertical-align: middle; display:flex; justify-content:center; align-items:center; overflow: hidden; position: relative; } .image-list:before{ content: ''; position: absolute; display: none; top: 0px; right: 0px; left: 0px; bottom: 0px; box-shadow: inset 0 0 0 1px #fff, inset 0 0 0 5px #c60c31; } .image-list:hover:before{ display: block; }