Wie man den Media Uploader im wordpress Plugin hinzufügt
Ich habe einiges aus dem Tutorial gelesen, um zu erfahren, wie der Media Uploader in wordpress plugins integriert wird. Ich mache den Media Uploader basierend auf dem Tutorial. http://wordpress.org/support/topic/wie-integriere-ich-die-medienbibliothek-in-ein-plugin? answers = 4 Ich mache das und es funktioniert perfekt fiddle ich habe versucht einfach die id des jeweiligen textfeldes zu ändern. http://jsfiddle.net/UrXPe/1/ Trotzdem wenn ich auf den upload klicke ist alles perfekt zu machen. nur wenn ich klicken insert into post Die URL des Bildes wird im zweiten Suchfeld angezeigt. Hier ist der Screenshot, dem ich genau gegenüberstehe. 
Wenn ich nach dem Einfügen in den Post auf das erste Upload-Feld klicke (Upload-Vorgang ist erfolgreich), erscheint die entsprechende Medien-URL im zweiten Feld, nicht im ersten. Ich bin mir nicht sicher, wo das Problem liegt. Jeder Vorschlag wäre großartig.
AKTUALISIERT - nach unten scrollen
Nach zu viel harter Arbeit und Recherche und einigen Anpassungen habe ich unten ein paar kompakte Codezeilen codiert, um Media Uploader überall in WordPress zu verwenden. Fügen Sie einfach Code in eine Funktion ein und rufen Sie diese Funktion auf, wo immer Sie möchten. Der Pfad der hochgeladenen/ausgewählten Datei wird in das Textfeld kopiert und kann dann verwendet werden.
Hoffe das hilft jemandem.!
// 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 : Nur zum Hinzufügen. Möglicherweise müssen Sie den Funktions-Wrapper in Ihre Plugin/Theme-Datei einfügen. Das ist das Folgende:
// UPLOAD ENGINE
function load_wp_media_files() {
wp_enqueue_media();
}
add_action( 'admin_enqueue_scripts', 'load_wp_media_files' );
Dies ruft die relevanten JS- und CSS-Dateien auf, wenn WP den Upload-Manager nicht lädt. Dadurch werden auch Konsolenwarnungen entfernt.
Ich verwende diese Methode, um Media Uploader in meinem benutzerdefinierten Plugin zu verwenden. Dies könnte hilfreich sein.
in der Hauptthemadatei (index.php) fügen Sie diese hinzu.
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');
In der Datei 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-Datei (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" />
Weitere Details in meinem Blog
Verwenden Sie dies in Ihrem benutzerdefinierten Plugin
<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>