Wordpress - 미디어 라이브러리를 사용하여 이미지 가져오기

Wordpress - 미디어 라이브러리를 사용하여 이미지 가져오기

플러그인을 만들고 있으며 관리 페이지가 있습니다.

이 페이지의 옵션에서 Wordpress 미디어 라이브러리를 열고 이미지를 선택한 후 선택한 이미지의 URL을 얻을 수 있는 버튼을 추가하고 싶습니다.alt기여하다.

가능하다면 AJAX를 사용하여 어떻게 하면 좋을까요?

먼저 wordpress 코어 미디어 스크립트와 커스텀 js 스크립트를 큐에 넣어야 합니다.

function my_enqueue_media_lib_uploader() {

    //Core media script
    wp_enqueue_media();

    // Your custom js file
    wp_register_script( 'media-lib-uploader-js', plugins_url( 'media-lib-uploader.js' , __FILE__ ), array('jquery') );
    wp_enqueue_script( 'media-lib-uploader-js' );
}
add_action('admin_enqueue_scripts', 'my_enqueue_media_lib_uploader');

그런 다음 옵션 페이지에 업로드 버튼과 선택한 이미지 URL을 저장하기 위한 텍스트 입력이라는 마크업이 있다고 가정해 보십시오.

<form method="post">
    <input id="image-url" type="text" name="image" />
    <input id="upload-button" type="button" class="button" value="Upload Image" />
    <input type="submit" value="Submit" />
</form>

업로더 팝업을 호출하려면 이 Javascript 코드를 추가해야 합니다.

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

  var mediaUploader;

  $('#upload-button').click(function(e) {
    e.preventDefault();
    // If the uploader object has already been created, reopen the dialog
      if (mediaUploader) {
      mediaUploader.open();
      return;
    }
    // Extend the wp.media object
    mediaUploader = wp.media.frames.file_frame = wp.media({
      title: 'Choose Image',
      button: {
      text: 'Choose Image'
    }, multiple: false });

    // When a file is selected, grab the URL and set it as the text field's value
    mediaUploader.on('select', function() {
      attachment = mediaUploader.state().get('selection').first().toJSON();
      $('#image-url').val(attachment.url);
    });
    // Open the uploader dialog
    mediaUploader.open();
  });

});

이미지를 선택하면 image-url 입력에 URL이 포함되어 폼 제출 시 저장됩니다.

사용 예: 메인 파일로 index.php가 포함된 플러그인이 있습니다.버튼을 클릭하면 미디어 라이브러리가 열리고 이미지 태그에 이미지가 로드됩니다.

1- 메인 PHP 플러그인에 스크립트 추가

// index.php

// ...

// add script js for page
add_action('admin_enqueue_scripts', function () {
    // Enqueue WordPress media scripts
    if ($_GET["page"]== 'debug_area') {
        wp_enqueue_media();
        // Enqueue custom script that will interact with wp.media
        wp_enqueue_script(
            'myprefix_script',
            plugins_url('/load_img.js', __FILE__),
            array('jquery'),
            '0.1');
    }
});

// add ajax action to get the image async
add_action('wp_ajax_get_image_from_media_lib', function () {
    if (isset($_GET['id'])) {
        $image = wp_get_attachment_image(
            filter_input(INPUT_GET, 'id', FILTER_VALIDATE_INT),
            'medium',
            false,
            array('id' => 'image_preview')
        );
        $data = array(
            'image' => $image,
        );
        wp_send_json_success($data);
    } else {
        wp_send_json_error();
    }
});

2- enqueue에 이미 포함된 파일 JS 추가

// load_img.js
jQuery(document).ready(_ => {
    console.clear();

    /**
     * Define media_lib_frame as wp.media object
     */
    const media_lib_frame = wp.media({
        title: 'Select Media',
        multiple: false,
        library: {
            type: 'image',
        }
    });

    /**
     * On close, get selections and save to the hidden input
     * plus other AJAX stuff to refresh the image preview
     */
    media_lib_frame.on('close', _ => {
        const selection = media_lib_frame.state().get('selection');
        const gallery_ids = selection.map(attachment => attachment['id']);
        const ids = gallery_ids.join(",");
        jQuery('input#idImage').val(ids);
        loadImage(ids);
    });

    /**
     * On open, get the id from the hidden input
     * and select the appropriate images in the media manager
     */
    media_lib_frame.on('open', _ => {
        const selection = media_lib_frame.state().get('selection');
        const ids = jQuery('input#idImage').val().split(',');
        ids.forEach(id => {
            const attachment = wp.media.attachment(id);
            attachment.fetch();
            selection.add(attachment ? [attachment] : []);
        });
    });

    jQuery('button#btnOpenMediaLibFrame').click(e => {
        e.preventDefault();
        media_lib_frame.open();
    });
});

// Ajax request to refresh the image preview
const loadImage = the_id => {
    const data = {action: 'get_image_from_media_lib', id: the_id};

    jQuery.get(ajaxurl, data, response => {
        if (response.success === true) {
            jQuery('#image_preview').replaceWith(response.data.image);
        }
    });
}

3- 이 HTML을 렌더링 뷰를 담당하는 함수에 추가합니다.

<img id="image_preview"/>
<input
    type="hidden"
    id="idImage"
    class="regular-text"/>
<button
    type='button'
    class="button-primary"
    id="btnOpenMediaLibFrame">
    Select a image
</button>

언급URL : https://stackoverflow.com/questions/32892412/wordpress-get-an-image-using-the-media-library