Ajouter le bouton «upload media» dans le champ meta box

17

J'ai un article personnalisé qui a une balise META qui doit utiliser un téléchargement de fichier (pour les fichiers vidéo). Je me demande, quelle est la bonne façon d'ajouter un bouton "Télécharger" qui pointe vers le téléchargeur de médias WordPress et définit l'url du fichier téléchargé sélectionné dans le champ de texte qui a causé qui associe le bouton de téléchargement.

Je ne cherche pas de code pour créer l'option de balise Meta réelle, mais un moyen d'ajouter réellement un bouton de téléchargement de médias Wordpress correctement.

SpyrosP
la source
Voir le didacticiel et le plugin simple créé à partir de celui-ci que vous pouvez essayer ici . M'a aidé.
Fanky

Réponses:

13

Voir ce squelette de téléchargement de médias . Vous pouvez également l'utiliser dans votre balisage personnalisé, comme Meta Box.

Un indice, vérifiez, que vous n'utilisez que les scripts de la page, où vous activez votre Meta Box. Sinon, c'est souvent un problème sur les pages par défaut et l'uploader.

Maintenant, essayez d'effacer les parties importantes pour inclure l'uploader dans votre partie personnalisée.

Incluez d'abord un bouton dans la méta-boîte:

<input id="upload_image" type="text" size="36" name="upload_image" value="" />
<input id="upload_image_button" type="button" value="Upload Image" />

Maintenant, mettez les scripts en file d'attente:

function my_admin_scripts() {    
    wp_enqueue_script('media-upload');
    wp_enqueue_script('thickbox');
    wp_register_script('my-upload', WP_PLUGIN_URL.'/my-script.js', array('jquery','media-upload','thickbox'));
    wp_enqueue_script('my-upload');
}

function my_admin_styles() {

    wp_enqueue_style('thickbox');
}

// better use get_current_screen(); or the global $current_screen
if (isset($_GET['page']) && $_GET['page'] == 'my_plugin_page') {

    add_action('admin_print_scripts', 'my_admin_scripts');
    add_action('admin_print_styles', 'my_admin_styles');
}

La dernière partie est votre script personnalisé pour utiliser la boîte épaisse et le téléchargeur à l'intérieur.

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

    $('#upload_image_button').click(function() {

        formfield = $('#upload_image').attr('name');
        tb_show( '', 'media-upload.php?type=image&amp;TB_iframe=true' );
        window.send_to_editor = function(html) {
           imgurl = $(html).attr('src');
           $('#upload_image').val(imgurl);
           tb_remove();
        }

        return false;
    });

});
bueltge
la source
2
Juste un petit rappel via la page Codex pour admin_print_scriptsdit que admin_print_scriptsprincipalement utilisé pour faire écho au javascript en ligne. admin_print_scriptsne doit pas être utilisé pour mettre en file d'attente des styles ou des scripts sur les pages d'administration. Utilisez admin_enqueue_scriptsplutôt.
Zulian
J'ai essayé cette méthode et la zone de saisie de texte #upload_imagen'est jamais remplie
M. Pablo
1
cette réponse ne fonctionne pas. voir d'autres réponses.
T.Todua
0

Solution:

1) dans votre functions.php , ajoutez le bloc d'enregistrement des scripts nécessaires:

// add necessary scripts
add_action('plugins_loaded', function(){
  if($GLOBALS['pagenow']=='post.php'){
    add_action('admin_print_scripts', 'my_admin_scripts');
    add_action('admin_print_styles',  'my_admin_styles');
  }
});

function my_admin_scripts(){
  wp_enqueue_script('jquery');
  wp_enqueue_script('media-upload');
  wp_enqueue_script('thickbox');
}

// Proper way to enqueue
// wp_register_script(
//   'my-upload',
//   WP_PLUGIN_URL.'/my-script.js',
//   array('jquery','media-upload','thickbox') /* dependencies */
// );
//
// wp_enqueue_script('my-upload');

function my_admin_styles(){
  wp_enqueue_style('thickbox');
}

2) puis ajoutez le bloc metabox :

add_action(
  'add_meta_boxes',
  function(){
    add_meta_box(
      'my-metaboxx1', // ID
      'my-metaboxx1-title', // Title
      'func99999', // Callback (Construct function)
      get_post_types(), //screen (This adds metabox to all post types)
      'normal' // Context
    );
 },
 9
);
function func99999($post){
  $url = get_post_meta($post->ID, 'my-image-for-post', true); ?>
  <input id="my_image_URL" name="my_image_URL" type="text"
         value="<?php echo $url;?>" style="width:400px;" />
  <input id="my_upl_button" type="button" value="Upload Image" /><br/>
  <img src="<?php echo $url;?>" style="width:200px;" id="picsrc" />
  <script>
  jQuery(document).ready( function($) {
    jQuery('#my_upl_button').click(function() {
      window.send_to_editor = function(html) {
        imgurl = jQuery(html).attr('src')
        jQuery('#my_image_URL').val(imgurl);
        jQuery('#picsrc').attr("src", imgurl);
        tb_remove();
      }

      formfield = jQuery('#my_image_URL').attr('name');
      tb_show('', 'media-upload.php?type=image&amp;TB_iframe=true' );
      return false;
    }); // End on click
  });
  </script>
<?php
}

add_action('save_post', function ($post_id) {
  if (isset($_POST['my_image_URL'])){
    update_post_meta($post_id, 'my-image-for-post', $_POST['my_image_URL']);
  }
});





ps si vous avez besoin de plusieurs champs, vous pouvez facilement faire comme ceci: http://pastebin.com/raw/xpU1ch2W

T.Todua
la source
Fonctionne comme un charme, mais uniquement avec des images. Comment puis-je faire de même avec des fichiers vidéo?
Alex