wordpress 기능 중에 미디어 – 첨부파일 기능을 자체 제작 하는 플러그인에 사용하기

1. wp_enqueue_media 추가

// add button media
add_action ( 'admin_enqueue_scripts', function () {
    if (is_admin ())
        wp_enqueue_media ();
} );

2. 스크립트 추가

$('.set_custom_images').click(function(e) {
    e.preventDefault();
    var image = wp.media({ 
        title: 'Upload Image',
        multiple: false
    }).open()
    .on('select', function(e){
        var uploaded_image = image.state().get('selection').first();
        console.log(uploaded_image);
        var image_url = uploaded_image.toJSON().url;
        $('#process_custom_images').val(image_url);

        var image_url_id = uploaded_image.toJSON().id;
        $('#process_custom_images_id').val(image_url_id);
    });
});

* offload s3 사용 중이라면 : post dfaft 를 하나 작성 후 해당 post id 를 등록 후 사용

$('.set_custom_images').click(function(e) {
    e.preventDefault();
    /* offload s3 사용 중이라면... 임시글 번호  하나 등록 후 사용 */
    wp.media.model.settings.post.id = 118295;
    /* localserver 에 이미지 저장 중이라면 상관 없음 */

    var image = wp.media({ 
        title: 'Upload Image',
        multiple: false
    }).open()
    .on('select', function(e){
        var uploaded_image = image.state().get('selection').first();
        console.log(uploaded_image);
        var image_url = uploaded_image.toJSON().url;
        $('#process_custom_images').val(image_url);

        var image_url_id = uploaded_image.toJSON().id;
        $('#process_custom_images_id').val(image_url_id);
    });
});

 

3. html object 추가

<p>
    <input type="text" value="" class="regular-text process_custom_images_id" id="process_custom_images_id" name="id1">

    <input type="text" value="" class="regular-text process_custom_images" id="process_custom_images" name="url1">

    <button class="set_custom_images button">Set Image ID</button>
</p>