web-dev-qa-db-ja.com

拡張する WP 複数の画像選択を可能にするカスタマイザ

複数選択を可能にするために、Wordpressカスタマイザを拡張する方法はありますか？

これは私が欲しいもののように見えます： https://github.com/lucatume/multi-image-control 。うまくいきません。 addボタンとremoveボタンしか表示されていませんが、何もしていません。

私が使用できる他の既存の拡張スクリプトはありますか？

custom-fieldimagesuploads
1
Tom Groot

私が結局やったのはWP_Customize_Controlクラスを次のように拡張することでした。

<?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()
    { ?>
          <label>
            <span class='customize-control-title'>Image</span>
          </label>
          <div>
            <ul class='images'></ul>
          </div>
          <div class='actions'>
            <a class="button-secondary upload">Add</a>
          </div>

          <input class="wp-editor-area" id="images-input" type="hidden" <?php $this->link(); ?>>
      <?php
    }
}
?>

ユーザーが[追加]をクリックしたときにWPメディアセレクタを開くにはJavaScriptを使用します。画像が選択されているとき、その画像は<ul class='images'></ul>の中に現れなければなりません。さらに、ユーザーは画像をクリックして画像を削除できる必要があります。私は以下の 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( "<li class='image-list'><img src='"+begin_attachment_array[i]+"'></li>" );
                }
            }
            $(".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( "<li class='image-list'><img src='"+attachment.url+"'></li>" );
                        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 );

最後に、 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;
}
3
Tom Groot