플러그인의 미디어 라이브러리에서 이미지를 어떻게 선택합니까?

오른쪽 하단에 작은 채팅 아이콘이있는 플러그인을 작성했지만 사용자가에서 아이콘을 이미지로 선택할 수 있기를 바랍니다 Media Library. Wordpress API로 어떻게 할 수 있습니까? 이미지는 플러그인의 설정입니다 (관리자 만 변경할 수 있음)

당신은 사용해야 wp.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를 사용한다는 점에 유의하십시오. 예를 들어 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();
    }
}

PD : 다른 답변을 바탕으로 작성된 간단한 샘플입니다 . 코드가 사용될 정확한 컨텍스트 또는 정확한 문제에 대한 충분한 정보를 제공하지 않았기 때문에 테스트되지 않았습니다.

사용 wordpress-settings-api-class타 레크 하산, 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']);
}

이제 사용자 컴퓨터에서 파일을 업로드 할 수 있습니다. 사용자가 기존 이미지에서 파일을 선택하게하려면 상황이 더욱 복잡해집니다. 기본 파일 업로드 대신 미디어 라이브러리를 호출해야하기 때문입니다. Steven Slack 은이 작업을 수행하는 방법에 대한 훌륭한 게시물을 작성 했으며 여기에 코드를 복사하여 붙여 넣는 것으로 크레딧을 받고 싶지 않습니다.

템플릿에서 사용자는 로그인하지 않은 사용자, 로그인 한 사용자는 있지만 아이콘이 없음, 사용자는 로그인했으며 아이콘이있는 세 가지 가능성을 구분해야합니다. 대략 다음을 포함하십시오.

$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 디렉토리 옵션에 게시됩니다 숨겨진 입력 값을 설정 모달 내부. 모든 미디어를 가져 와서 옵션으로 에코하여 사용자가 img를 선택할 수 있도록합니다.

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