web-dev-qa-db-fra.com

Comment ajouter l'uploader multimédia dans le plugin wordpress

J'ai lu une partie du tutoriel pour savoir comment intégrer le téléchargeur de médias dans les plugins wordpress. Je fais le téléchargeur de médias basé sur le tutoriel. http://wordpress.org/support/topic/howto-integrate-the-media-library-into-a-plugin? replies = 4 Je le fais et cela fonctionne parfaitement. Quand j'ai essayé à nouveau le même script pour plusieurs fois de téléchargement de médias, voici le Le violon que j'ai essayé a simplement changé l'identifiant du champ de texte particulier. http://jsfiddle.net/UrXPe/1/ Toujours quand je clique sur le téléchargement, tout doit être parfait. Cliquez sur insert into post l'url de l'image apparaît dans le deuxième champ de navigation. Voici la capture d'écran à laquelle je fais face exactement. enter image description here

Lorsque je clique sur le premier champ de téléchargement (le processus de téléchargement est réussi) après l'insertion dans la publication, l'url du média correspondant apparaît dans le deuxième champ et non dans le premier. Je ne sais pas où est le problème, toute suggestion serait formidable.

jquerywordpress-pluginwordpress
27
Vignesh Pichamani

MISE À JOUR - faites défiler vers le bas

Après trop de travail acharné et de recherches et de personnalisation, j'ai codé ci-dessous quelques lignes de code compactes pour utiliser le téléchargement de médias n'importe où dans wordpress. Il suffit de mettre du code dans une fonction et d'appeler cette fonction où vous le souhaitez. Le chemin du fichier téléchargé/sélectionné sera copié dans la zone de texte et vous pourrez ensuite l'utiliser.

J'espère que cela aide quelqu'un.!

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

MISE À JOUR : Juste pour ajouter. Vous devrez peut-être ajouter l'encapsuleur de fonction dans votre fichier plugin/thème. Voici ce qui suit:

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

Cela appellera les fichiers JS et CSS appropriés si WP ne parvient pas à charger le gestionnaire de téléchargement. Cela supprime également les avertissements de la console.

78
Rushabh Dave

J'utilise cette méthode pour utiliser l'uploader multimédia dans mon plugin personnalisé, ce serait peut-être utile.

dans le fichier de thème principal (index.php) ajoutez-les.

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');


Dans le fichier admin_script.js ,

jQuery('#wpss_upload_image_button').click(function() {
    formfield = jQuery('#wpss_upload_image').attr('name');
    tb_show('', 'media-upload.php?type=image&amp;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+"'/>");
}

fichier d'administration (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" />

Plus de détails dans mon blog

5
Sumith Harshan

Utilisez-le dans votre plugin personnalisé

<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>
0
Rutunj sheladiya