web-dev-qa-db-fra.com

Afficher Media Uploader dans son propre plugin sur Wordpress 3.5

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.

jquerymedia
10
user1320276

Seulement Uploader

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 de Media Manager

  1. Commencez par inclure les scripts appropriés, utilisez la fonction principale: wp_enqueue_media(); La fonction configure tous les paramètres pertinents, 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' ); Ceci 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. Enfin, pour définir la fonction d’action, vous devez ajouter du code permettant de 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:

7
bueltge

Il suffit d’utiliser ce code pour l’éditeur 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>
0
Rutunj sheladiya

J'ai mis une réponse dans le site stackoverflow.com aussi 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 main (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 http://webexplorar.com/how-to-use-media-uploader-in-wordpress-custom-plugin/

0
Sumith Harshan