Как добавить медиа-загрузчик в плагин wordpress

Question

Я прочитал часть учебника о том, как интегрировать медиа-загрузчик в плагины Wordpress. Я загружаю медиа-загрузчик на основе учебника. http://wordpress.org/support/topic/howto-integrate-the-media-library-into-a-plugin?replies=4 Я делаю это и отлично работаю. Когда я снова попробовал один и тот же скрипт для нескольких раз загрузчиков мультимедиа, вот скрипка, которую я попробовал, просто изменил идентификатор конкретного текстового поля. http://jsfiddle.net/UrXPe/1/ Тем не менее, когда я нажимаю кнопку «Загрузить», все должно быть сделано идеально. Единственное, если я нажму insert into post, этот URL-адрес изображения появится во втором поле обзора. Вот скриншот, с которым я сталкиваюсь.

Когда я нажимаю на первое поле загрузки (процесс загрузки является успешным) после вставки в сообщение, что соответствующий URL-адрес носителя отображается во втором поле не первым. Я не уверен, в чем проблема, если бы предложение было замечательным.

Answer 1

Я использую этот метод, чтобы использовать загрузчик мультимедиа в свой пользовательский плагин. Может быть, это поможет.

в файле основной файл темы (index.php) добавить их.

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_settings.php),

<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" /> 

Подробнее in my blog

Answer 2

ОБНОВЛЕНО - прокрутка вниз

После слишком много тяжелой работы и исследования и некоторые настройки, которые я кодировал ниже компактных несколько строк кода, чтобы использовать медиа-загрузчиком в любом месте в WordPress. Просто поместите код в какую-то функцию и вызовите эту функцию, где хотите. Путь загруженного/выбранного файла будет скопирован в текстовое поле, а затем вы сможете его использовать.

Надеюсь, это поможет кому-то!

// 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> 

UPDATE: Просто чтобы добавить. Возможно, вам понадобится добавить оболочку функций в файл плагина/темы. Это следующее:

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

Это будет вызывать соответствующие JS файлы и CSS файлы, если WP не удается загрузить диспетчер загрузки. Это также удаляет предупреждения консоли.

Answer 3

Используйте это в пользовательский плагин

<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>