web-dev-qa-db-fra.com

Ajout du bouton "upload media" dans le champ meta box

J'ai un article personnalisé qui a une balise méta 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 l’éditeur de média WordPress et définit l’url du fichier téléchargé sélectionné dans le champ de texte qui a associé le bouton de téléchargement.

Je ne cherche pas de code sur la création de l'option de balise méta, mais un moyen d'ajouter un bouton de téléchargement de média Wordpress correctement.

metaboxuploadspost-metamedia
15
SpyrosP

Voir ce media uploader skeleton . Vous pouvez également l'utiliser dans votre balisage personnalisé, comme Meta Box.

Un indice, vérifiez que vous utilisez uniquement les scripts de la page où vous activez votre Meta Box. Sinon, est-ce souvent un problème sur les pages par défaut et le programme de téléchargement.

Maintenant, essayez d’effacer les parties importantes pour inclure le programme de téléchargement dans votre partie personnalisée.

Commencez par inclure un bouton dans la boîte à méta:

<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 thickbox et le programme de téléchargement à l'intérieur de celle-ci.

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

});
12
bueltge

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




p.s. au cas où vous auriez besoin de plusieurs champs, vous pouvez facilement le faire comme ceci: http://Pastebin.com/raw/xpU1ch2W

0
T.Todua