Wordpress 플러그인에서 미디어 업로더를 추가하는 방법

Wordpress 플러그인에서 미디어 업로더를 추가하는 방법

이 질문에는 이미 답변이 있습니다.

WordPress 플러그인에서 멀티미디어 업로더를 사용하는 방법은 무엇입니까? (5개의 답변)

닫힘7년 전.

워드프레스 플러그인에 미디어 업로더를 통합하는 방법에 대한 튜토리얼을 읽어 보았습니다.저는 튜토리얼에 따라 미디어 업로더를 합니다.http://wordpress.org/support/topic/howto-integrate-the-media-library-into-a-plugin?replies=4 이렇게 하면 완벽하게 작동합니다.미디어 업로더의 여러 번 같은 스크립트를 다시 시도했을 때, 여기 특정 텍스트 필드의 ID를 간단히 변경해 본 바이올린이 있습니다.http://jsfiddle.net/UrXPe/1/ 그래도 업로드를 클릭하면 모든 것이 완벽하게 완료됩니다.클릭하기만 하면insert into post이미지의 URL이 두 번째 찾아보기 필드에 표시됩니다.이게 정확히 내가 맞닥뜨린 스크린샷이야.

POST에 삽입 후 첫 번째 업로드 필드(업로드 프로세스가 성공)를 클릭하면 대응하는 미디어 URL이 첫 번째 필드가 아닌 두 번째 필드에 표시됩니다.나는 어떤 제안이 좋을지 어디가 문제인지 잘 모르겠다.

UPDATED -

많은 노력과 연구, 커스터마이즈 후에 워드프레스 어디에서도 미디어 업로더를 사용할 수 있도록 코드 몇 줄을 압축하여 코드화했습니다.어떤 함수에 코드를 넣고 원하는 함수를 호출하기만 하면 됩니다.업로드/선택한 파일의 경로가 텍스트 상자에 복사되어 사용할 수 있습니다.

// jQuery
wp_enqueue_script('jquery');
// This will enqueue the Media Uploader script
wp_enqueue_media();
?>
    <div>
    <label for="image_url">Image</label>
    <input type="text" name="image_url" id="image_url" class="regular-text">
    <input type="button" name="upload-btn" id="upload-btn" class="button-secondary" value="Upload Image">
   
</div>
<script type="text/javascript">
jQuery(document).ready(function($){
    $('#upload-btn').click(function(e) {
        e.preventDefault();
        var image = wp.media({ 
            title: 'Upload Image',
            // mutiple: true if you want to upload multiple files at once
            multiple: false
        }).open()
        .on('select', function(e){
            // This will return the selected image from the Media Uploader, the result is an object
            var uploaded_image = image.state().get('selection').first();
            // We convert uploaded_image to a JSON object to make accessing it easier
            // Output to the console uploaded_image
            console.log(uploaded_image);
            var image_url = uploaded_image.toJSON().url;
            // Let's assign the url value to the input field
            $('#image_url').val(image_url);
        });
    });
});
</script>

업데이트: 추가하겠습니다.플러그인/테마 파일에 함수 래퍼를 추가해야 할 수 있습니다.이것은 다음과 같습니다.

// UPLOAD ENGINE
function load_wp_media_files() {
    wp_enqueue_media();
}
add_action( 'admin_enqueue_scripts', 'load_wp_media_files' );

그러면 WP가 업로드 매니저를 로드하지 못할 경우 관련 JS 파일과 CSS 파일이 호출됩니다.이를 통해 콘솔 경고도 제거됩니다.

이 방법을 사용하여 미디어 업로더를 사용자 지정 플러그인으로 사용하고 있습니다.아마 이게 도움이 될 거야.

메인 테마 파일(index.filename)에 이러한 파일을 추가합니다.

wp_enqueue_style('thickbox'); // call to media files in wp
wp_enqueue_script('thickbox');
wp_enqueue_script( 'media-upload'); 


// load script to admin
function wpss_admin_js() {
     $siteurl = get_option('siteurl');
     $url = $siteurl . '/wp-content/plugins/' . basename(dirname(__FILE__)) . '/js/admin_script.js';
     echo "<script type='text/javascript' src='$url'></script>"; 
}
 add_action('admin_head', 'wpss_admin_js');

admin_script.js 파일에서

jQuery('#wpss_upload_image_button').click(function() {
    formfield = jQuery('#wpss_upload_image').attr('name');
    tb_show('', 'media-upload.php?type=image&TB_iframe=true');
    return false;
});

window.send_to_editor = function(html) {
 imgurl = jQuery('img',html).attr('src');
 jQuery('#wpss_upload_image').val(imgurl);
 tb_remove();

 jQuery('#wpss_upload_image_thumb').html("<img height='65' src='"+imgurl+"'/>");
}

admin 파일(admin_module.module),

<div id="wpss_upload_image_thumb" class="wpss-file">
    <?php if(isset($record->security_image) && $record->security_image !='') { ?>
       <img src="<?php echo $record->security_image;?>"  width="65"/><?php } else {    echo $defaultImage; } ?>
</div>
<input id="wpss_upload_image" type="text" size="36" name="wpss_upload_image" value="" class="wpss_text wpss-file" />
<input id="wpss_upload_image_button" type="button" value="Upload Image" class="wpss-filebtn" />

자세한 내용은 블로그를 참조하십시오.

사용자 지정 플러그인에서 사용

<label for="upload_image">
    <input id="upload_image" type="text" size="36" name="ad_image" value="http://" /> 
    <input id="upload_image_button" class="button" type="button" value="Upload Image" />
    <br />Enter a URL or upload an image
</label>

<?php
add_action('admin_enqueue_scripts', 'my_admin_scripts');

function my_admin_scripts() {
    if (isset($_GET['page']) && $_GET['page'] == 'my_plugin_page') {
        wp_enqueue_media();
        wp_register_script('my-admin-js', WP_PLUGIN_URL.'/my-plugin/my-admin.js', array('jquery'));
        wp_enqueue_script('my-admin-js');
    }
}

?>

<script>
    jQuery(document).ready(function($){


    var custom_uploader;


    $('#upload_image_button').click(function(e) {

        e.preventDefault();

        //If the uploader object has already been created, reopen the dialog
        if (custom_uploader) {
            custom_uploader.open();
            return;
        }

        //Extend the wp.media object
        custom_uploader = wp.media.frames.file_frame = wp.media({
            title: 'Choose Image',
            button: {
                text: 'Choose Image'
            },
            multiple: true
        });

        //When a file is selected, grab the URL and set it as the text field's value
        custom_uploader.on('select', function() {
            console.log(custom_uploader.state().get('selection').toJSON());
            attachment = custom_uploader.state().get('selection').first().toJSON();
            $('#upload_image').val(attachment.url);
        });

        //Open the uploader dialog
        custom_uploader.open();

    });


});
    </script>

언급URL : https://stackoverflow.com/questions/17668899/how-to-add-the-media-uploader-in-wordpress-plugin