Eklentimdeki Medya Kitaplığı'ndan nasıl resim seçerim?

Sağ alt köşede küçük bir sohbet simgesi olan bir eklenti yazdım, ancak kullanıcının simge olarak bir görüntü seçmesini istiyorum Media Library. Bunu Wordpress API ile nasıl yapabilirim? Resim eklentideki bir ayardır (yalnızca yönetici tarafından değiştirilebilir)

wp.mediaWordPress Media Manager iletişim kutusunu kullanmak için kullanmalısınız.

İlk olarak, scritp'leri sıkmanız gerekir:

// As you are dealing with plugin settings,
// I assume you are in admin side
add_action( 'admin_enqueue_scripts', 'load_wp_media_files' );
function load_wp_media_files( $page ) {
  // change to the $page where you want to enqueue the script
  if( $page == 'options-general.php' ) {
    // Enqueue WordPress media scripts
    wp_enqueue_media();
    // Enqueue custom script that will interact with wp.media
    wp_enqueue_script( 'myprefix_script', plugins_url( '/js/myscript.js' , __FILE__ ), array('jquery'), '0.1' );
  }
}

HTML'niz böyle bir şey olabilir (kodumda eklenti ayarında eklenti ayarını kullandığınızı unutmayın, yanıtınızda yaptığınız gibi resim URL'si, bence çok daha iyi. onlara ihtiyacınız var):

$image_id = get_option( 'myprefix_image_id' );
if( intval( $image_id ) > 0 ) {
    // Change with the image size you want to use
    $image = wp_get_attachment_image( $image_id, 'medium', false, array( 'id' => 'myprefix-preview-image' ) );
} else {
    // Some default image
    $image = '<img id="myprefix-preview-image" src="https://some.default.image.jpg" />';
}

 <?php echo $image; ?>
 <input type="hidden" name="myprefix_image_id" id="myprefix_image_id" value="<?php echo esc_attr( $image_id ); ?>" class="regular-text" />
 <input type='button' class="button-primary" value="<?php esc_attr_e( 'Select a image', 'mytextdomain' ); ?>" id="myprefix_media_manager"/>ç

MyScript.js

jQuery(document).ready( function($) {

      jQuery('input#myprefix_media_manager').click(function(e) {

             e.preventDefault();
             var image_frame;
             if(image_frame){
                 image_frame.open();
             }
             // Define image_frame as wp.media object
             image_frame = wp.media({
                           title: 'Select Media',
                           multiple : false,
                           library : {
                                type : 'image',
                            }
                       });

                       image_frame.on('close',function() {
                          // On close, get selections and save to the hidden input
                          // plus other AJAX stuff to refresh the image preview
                          var selection =  image_frame.state().get('selection');
                          var gallery_ids = new Array();
                          var my_index = 0;
                          selection.each(function(attachment) {
                             gallery_ids[my_index] = attachment['id'];
                             my_index++;
                          });
                          var ids = gallery_ids.join(",");
                          jQuery('input#myprefix_image_id').val(ids);
                          Refresh_Image(ids);
                       });

                      image_frame.on('open',function() {
                        // On open, get the id from the hidden input
                        // and select the appropiate images in the media manager
                        var selection =  image_frame.state().get('selection');
                        var ids = jQuery('input#myprefix_image_id').val().split(',');
                        ids.forEach(function(id) {
                          var attachment = wp.media.attachment(id);
                          attachment.fetch();
                          selection.add( attachment ? [ attachment ] : [] );
                        });

                      });

                    image_frame.open();
     });

});

// Ajax request to refresh the image preview
function Refresh_Image(the_id){
        var data = {
            action: 'myprefix_get_image',
            id: the_id
        };

        jQuery.get(ajaxurl, data, function(response) {

            if(response.success === true) {
                jQuery('#myprefix-preview-image').replaceWith( response.data.image );
            }
        });
}

Ve resim önizlemesini yenilemek için Ajax eylemi:

// Ajax action to refresh the user image
add_action( 'wp_ajax_myprefix_get_image', 'myprefix_get_image'   );
function myprefix_get_image() {
    if(isset($_GET['id']) ){
        $image = wp_get_attachment_image( filter_input( INPUT_GET, 'id', FILTER_VALIDATE_INT ), 'medium', false, array( 'id' => 'myprefix-preview-image' ) );
        $data = array(
            'image'    => $image,
        );
        wp_send_json_success( $data );
    } else {
        wp_send_json_error();
    }
}

PD: Burada başka cevaba dayanarak yazılmış hızlı bir örnek . Kodun kullanılacağı bağlam veya yaşadığınız sorunlar hakkında yeterli bilgi sağlamadığınız için test edilmedi.

wordpress-settings-api-classTareq Hasan, Url tarafından kullanım : https://github.com/tareq1988/wordpress-settings-api-class

• Ana sınıfı class.settings-api.php eklentinize ekleyin . (bu dosya https://github.com/tareq1988/wordpress-settings-api-class/blob/master/src/class.settings-api.php )
• Seçeneklerinizi tanımlayın. 'type' => 'file'Medya yükleyici eklemek için kullanmanız gerekir . (Daha iyi anlamak için bu örneğe bakın https://github.com/tareq1988/wordpress-settings-api-class/blob/master/example/procedural-example.php )

Simgenin her kullanıcı için farklı olmasını istediğinizden, görüntüyü kullanıcı profilinde saklamanız gerekir. Bu, fazladan bir kullanıcı alanı eklemeniz gerektiği anlamına gelir:

// create the field
add_action( 'show_user_profile', 'wpse_235406_chaticon' );
add_action( 'edit_user_profile', 'wpse_235406_chaticon' );

function wpse_235406_chaticon ($user) { 
    echo '
    <h3>Chat Icon</h3>
    <table class="form-table">
        <tr>
            <th><label for="chaticon">Chat Icon</label></th>
            <td>
                <input type="file" name="chaticon" id="chaticon" value="' . esc_attr (get_the_author_meta ('chaticon', $user->ID)) . '" class="file-upload" /><br />
                <span class="description">Please select your chat icon.</span>
            </td>
        </tr>
    </table>';
}

// save the field
add_action( 'personal_options_update', 'wpse_235406_chaticon_save' );
add_action( 'edit_user_profile_update', 'wpse_235406_chaticon_save' );

function wpse_235406_chaticon_save ($user_id) {
    if (current_user_can ('edit_user', $user_id)) 
        update_usermeta ($user_id, 'chaticon', $_POST['chaticon']);
}

Şimdi, bu size kullanıcının bilgisayarından bir dosya yükleme imkanı verir. Kullanıcının mevcut görüntülerden dosyayı seçmesini istiyorsanız, işler daha karmaşık hale gelir, çünkü o zaman medya kitaplığını varsayılan dosya yüklemesi yerine çağırmanız gerekir. Steven Slack, kodunu buraya yapıştırarak kredi almak istemediğim bunun nasıl yapılacağı konusunda mükemmel bir yazı yazdı .

Şablonunuzda üç olasılığı ayırt etmeniz gerekir: kullanıcı oturum açmamış, kullanıcı oturum açmış ancak simgesi yok, kullanıcı oturum açmış ve simgesi var. Kabaca şunu ekleyin:

$current_user = wp_get_current_user();
if ( 0 == $current_user->ID ) {
  ... do what you want to do for not logged in users ...
  }
else {
  $icon = get_user_meta ($current_user->ID, 'chaticon');
  if (empty($icon)) {
    ... default icon with link to upload possibility ...
    }
  else {
     ... display $icon ...
     }

Bu url'de bulabileceğiniz eklentiye sahip tam bir kod: http://blog.adlivetech.com/use-wordpress-media-upload-custom-code/

Kullanımı kolay, sadece kodu istediğiniz yere kopyalayın

Bu çözümü kullandım (Medya Kitaplığı'nın kendisini kullanmadan):

Kullanılması görüntü seçici-lib seçenekleri gönderildiğinize gizli girişin değerini, ayarlanan bir modal iç. Tüm medyayı alıp seçenekler olarak yankılayarak kullanıcının bir img seçmesine izin verebilirim.

HTML

<input id="image" name="image" class="validate" type="image" src="<?php echo esc_attr(get_option('image_url')); ?>" id="image_url" width="48" height="48" />
<br>
<a href="#imageModal" class="waves-effect waves-light btn modal-trigger">
    change
</a>
<input id="image_url" name="image_url" type="text" value="" hidden />

PHP / HTML

<div id="imageModal" class="modal">
    <div class="modal-content">
        <select class="image-picker show-html">
            <option data-img-src="<?php echo CM_PATH . "/img/chat_general.png" ?>"  value="0"></option>
            <?php
            $query_images_args = array(
                'post_type'   => 'attachment',
                'post_mime_type' => 'image',
                'post_status' => 'inherit',
                'posts_per_page' => - 1,
            );

            $query_images = new WP_Query( $query_images_args );
            $i = 1;
            foreach ( $query_images->posts as $image ) {
                ?>
                <option data-img-src="<?php echo wp_get_attachment_url($image->ID); ?>"  value="<?php echo $i; ?>"></option>
                <?php
                $i  ;
            }
            ?>
        </select>
    </div>
    <div class="modal-footer">
        <a class="waves-effect waves-light btn change">Choose</a>
    </div>
</div>
</div>
</div>

JS

 $(".change").on("click", function() {
 +            var url = $(".image-picker > option:selected").attr("data-img-src");
 +            $("#image").attr("src", url);
 +            $("#image_url").attr("value", url);
 +            $("#imageModal").closeModal();
 +        });