Affiche Media Uploader dans son propre plug-in sur Wordpress 3.5

10

J'ai un petit problème avec Media Uploader dans le nouveau WordPress 3.5. J'ai créé mon propre plugin qui consiste à télécharger la photo. J'utilise ce code JS:

<script type="text/javascript">
    var file_frame;

    jQuery('.button-secondary').live('click', function( event ){

        event.preventDefault();

        if ( file_frame ) {
            file_frame.open();
            return;
        }

        file_frame = wp.media.frames.file_frame = wp.media(
            {
                title: 'Select File',
                button: {
                    text: jQuery( this ).data( 'uploader_button_text' )
                },
                multiple: false
            }
        );

        file_frame.on('select', function() {
            attachment = file_frame.state().get('selection').first().toJSON();
            jQuery('#IMGsrc').val(attachment.url);
        });

        file_frame.open();
    });
</script>

Le code fonctionne bien, mais malheureusement, les formulaires semblent incomplets. Lorsque je sélectionne une image, les «paramètres d'affichage des pièces jointes» n'apparaissent pas à droite. Je ne sais pas pourquoi. J'essaie d'ajouter des options aux médias:

displaySettings: true,
displayUserSettings: true

Mais ça ne marche pas non plus.

    
posée user1320276 07.01.2013 - 10:55

3 réponses

6

Uniquement le téléchargeur

ci-dessous un exemple de code, ne fonctionne que sur la page d'édition post. Si vous utilisez également sur une autre page, incluez la fonction wp_enqueue_media() , voir le titre suivant.

jQuery(document).ready(function($) {

  var _custom_media = true,
      _orig_send_attachment = wp.media.editor.send.attachment;

  $('.stag-metabox-table .button').click(function(e) {

    var send_attachment_bkp = wp.media.editor.send.attachment;
    var button = $(this);
    var id = button.attr('id').replace('_button', '');

    _custom_media = true;
    wp.media.editor.send.attachment = function(props, attachment) {

      if ( _custom_media ) {
        $("#"+id).val(attachment.url);
      } else {
        return _orig_send_attachment.apply( this, [props, attachment] );
      };

    }

    wp.media.editor.open(button);

    return false;
  });

  $('.add_media').on('click', function() {
    _custom_media = false;
  });

});

Brève explication du gestionnaire de médias

  1. Commencez par inclure les scripts pertinents, utilisez la fonction principale: wp_enqueue_media(); La fonction configure tous les paramètres appropriés, localise le texte du menu et se charge dans tous les fichiers javascript appropriés.

    Vous pouvez ajouter un script personnalisé via wp_enqueue_script() .

    // Also adds a check to make sure 'wp_enqueue_media' has only been called once.
    // @see: http://core.trac.wordpress.org/ticket/22843
    if ( ! did_action( 'wp_enqueue_media' ) )
        wp_enqueue_media();
    

    Ajoutez également un script par défaut pour un en-tête personnalisé: wp_enqueue_script( 'custom-header' ); Cela crée un cadre de sélection d'image et le lie à un élément d'interface, par exemple un bouton ou un lien. Il appelle ensuite une URL ou notre choix avec l'identifiant d'image sélectionné. C’est le même script que celui utilisé lors de la sélection d’images d’en-tête de thème personnalisé.

  2. Ajoutez le bouton au gestionnaire de média:

    <?php
    $modal_update_href = esc_url( add_query_arg( array(
        'page'     => 'my_media_manager',
        '_wpnonce' => wp_create_nonce( 'my_media_manager_options' ),
    ), admin_url( 'upload.php' ) ) );
    ?>
    
    <p>
    <a id="choose-from-library-link" href="#"
        data-update-link="<?php echo esc_attr( $modal_update_href ); ?>"
        data-choose="<?php esc_attr_e( 'Choose a Default Image' ); ?>"
        data-update="<?php esc_attr_e( 'Set as default image' ); ?>"><?php _e( 'Set default image' ); ?>
    </a> |
    </p>
    
  3. Définir la fonction d'action Enfin, vous devez ajouter du code pour traiter l’identifiant d’image que nous transmettrons à l’URL data-update-link.

    // Add to the top of our data-update-link page
    if ( isset($_REQUEST['file']) ) { 
        check_admin_referer( 'my_media_manager_options' );
    
            // Process and save the image id
        $options = get_option( 'my_media_manager_options', TRUE );
        $options['default_image'] = absint( $_REQUEST['file'] );
        update_option( 'my_media_manager_options', $options );
    }
    

Sources et astuces:

réponse donnée bueltge 14.01.2013 - 12:16
0

J'ai mis un answer sur le site stackoverflow.com également et ce serait une aide.

J'utilise cette méthode pour utiliser l'utilitaire de téléchargement de média dans mon plugin personnalisé. Peut-être que ce serait une aide.

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

Plus d'infos enlace

    
réponse donnée Sumith Harshan 18.05.2014 - 11:09
0

Utilisez simplement ce code pour le téléchargement de média. vous avez un lien dans la réponse JQuery.

<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>
    
réponse donnée Rutunj sheladiya 19.06.2015 - 12:00

Lire d'autres questions sur les étiquettes