Як вибрати зображення з медіатеки у своєму плагіні?

Я написав плагін, у якому у вас є невеликий значок чату в правому нижньому куті, проте я хочу, щоб користувач міг вибрати зображення як піктограму з Media Library. Як я можу це зробити за допомогою API Wordpress? Зображення - це налаштування в плагіні (змінює лише адміністратор)

Вам слід скористатися wp.mediaдіалоговим вікном Менеджер WordPress Media.

По-перше, вам потрібно завоювати скрипти:

// 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 може бути приблизно подібним (зверніть увагу на мій код використання вкладеного коду в налаштуваннях плагіна замість URL-адреси зображення, як це було у вашій відповіді. Я думаю, що це набагато краще. Наприклад, використання ID дозволяє отримувати різні розміри зображень вони потрібні):

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

І дія Ajax для оновлення попереднього перегляду зображення:

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

ПД: це швидкий зразок, написаний тут на основі іншої відповіді . Не перевірено, тому що ви не надали достатньо інформації про точний контекст, який буде використано, або точні проблеми.

Використовуйте wordpress-settings-api-classTareq Hasan, URL: https://github.com/tareq1988/wordpress-settings-api-class

• Включіть основний клас class.settings-api.php у свій плагін. (цей файл https://github.com/tareq1988/wordpress-settings-api-class/blob/master/src/class.settings-api.php )
• Визначте свої варіанти. Вам потрібно використовувати так, 'type' => 'file'як ви хочете додати завантажувач медіа. (Див. Цей приклад для кращого розуміння https://github.com/tareq1988/wordpress-settings-api-class/blob/master/example/procedural-example.php )

Оскільки ви хочете, щоб піктограма була різною для кожного користувача, вам доведеться зберігати зображення в профілі користувача. Це означає, що вам потрібно додати додаткове поле користувача:

// 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']);
}

Тепер це дає можливість завантажувати файл з комп'ютера користувача. Якщо ви хочете, щоб користувач обрав файл із наявних зображень, все ускладнюється, тому що тоді вам потрібно зателефонувати до медіатеки замість завантаження файлів за замовчуванням. Стівен Слак написав чудову публікацію, як це зробити, за що я не хочу брати на себе кредит, копіюючи тут його код.

У вашому шаблоні ви повинні розрізняти три можливості: користувач не ввійшов, користувач увійшов, але не має піктограми, користувач увійшов у систему та має піктограму. Приблизно включайте це:

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

Повний код із плагіном можна знайти за цією URL-адресою: http://blog.adlivetech.com/use-wordpress-media-upload-custom-code/

Проста у використанні, просто скопіюйте коду в потрібне місце

Я використовував це рішення (не використовуючи саму Медіатеку):

Використання зображення-вибору-lib всередині модалу, який встановлює значення прихованого вводу, яке розміщується в параметрах. Отримавши всі медіа та повторюючи його як параметри, я можу дозволити користувачеві вибрати імг.

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