web-dev-qa-db-de.com

Erweitern WP Customizer für die Auswahl mehrerer Bilder

Gibt es eine Möglichkeit, den Wordpress Customizer zu erweitern, um mehrere Auswahlen zu ermöglichen?

Das sieht so aus, wie ich es möchte: https://github.com/lucatume/multi-image-control . Ich bringe es nicht zum Laufen. Es werden nur die Schaltflächen add und remove angezeigt, aber sie tun nichts.

Gibt es ein anderes vorhandenes Erweiterungsskript, das ich verwenden kann?

1
Tom Groot

Was ich schließlich tat, war den WP_Customize_Controlclass wie folgt zu erweitern:

<?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
    }
}
?>

Ich benutze Javascript, um die Medienauswahl WP zu öffnen, wenn der Benutzer auf "Hinzufügen" klickt. Wenn ein Bild ausgewählt ist, muss das Bild in <ul class='images'></ul> erscheinen. Außerdem muss der Benutzer in der Lage sein, ein Bild durch Klicken auf ein Bild zu entfernen. Ich habe folgende Javascript-Datei erstellt:

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

Endlich habe ich ein bisschen CSS hinzugefügt:

.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