Aggiungi un pulsante "Carica media" nel campo meta box

Question

Aggiungi un pulsante "Carica media" nel campo meta box

4 ott 2012, 00:18:41

Visualizzazioni: 62.9K

Voti: 21

Ho un custom post che ha un meta tag che deve utilizzare un caricamento di file (per file video). Mi chiedo, qual è il modo corretto per aggiungere un pulsante "Carica" che punti al caricatore di media di WordPress e imposti l'URL del file caricato selezionato nel campo di testo associato a quel pulsante.

Non cerco codice per creare l'effettiva opzione del meta tag, ma un modo per aggiungere correttamente un pulsante di caricamento media di WordPress.

SpyrosP

515

metabox caricamenti post meta media

Commenti

Vedi il tutorial e il semplice plugin realizzato da esso che puoi provare qui. Mi ha aiutato.

Fanky

25 ott 2019 10:07:03

Tutte le risposte alla domanda

Commenti

Ho provato questo metodo e la casella di testo #upload_image non viene mai popolata

Mr Pablo

7 lug 2016 11:19:08

questa risposta non funziona. vedi altre risposte.

T.Todua

1 set 2016 14:19:15

Just a little reminder via the Codex page for admin_print_scripts dice che admin_print_scripts è principalmente utilizzato per echo inline javascript. admin_print_scripts non dovrebbe essere utilizzato per accodare stili o script nelle pagine di amministrazione. Usa invece admin_enqueue_scripts.

Zulian

22 gen 2013 10:47:33

Soluzione:

1) Nel tuo file functions.php, aggiungi il blocco per registrare gli script necessari:

// aggiungi gli script necessari
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');
}

// Modo corretto per registrare
// wp_register_script(
//   'my-upload',
//   WP_PLUGIN_URL.'/my-script.js',
//   array('jquery','media-upload','thickbox') /* dipendenze */
// );
//
// wp_enqueue_script('my-upload');

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

2) e poi aggiungi il blocco per il metabox:

add_action(
  'add_meta_boxes',
  function(){
    add_meta_box(
      'my-metaboxx1', // ID
      'Titolo del mio metabox', // Titolo
      'func99999', // Callback (Funzione di costruzione)
      get_post_types(), //screen (Aggiunge il metabox a tutti i tipi di post)
      'normal' // Contesto
    );
 },
 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="Carica Immagine" /><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;
    }); // Fine onclick
  });
  </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. nel caso avessi bisogno di più campi, puoi facilmente fare così: http://pastebin.com/raw/xpU1ch2W

T.Todua

5.85K

1 set 2016 14:11:09

Commenti

Funziona perfettamente, ma solo con le immagini. Come posso fare lo stesso con i file video?

Alex

18 lug 2018 14:57:11

bueltge 17.1K · Accepted Answer · 2012-10-04T06:37:33Z

Guarda questo scheletro per il caricamento dei media. Puoi utilizzarlo anche nel tuo markup personalizzato, come nei Meta Box.

Un suggerimento: assicurati di utilizzare gli script solo nella pagina dove attivi il tuo Meta Box. Altrimenti potrebbe causare problemi nelle pagine predefinite e nel caricatore.

Ora proviamo a chiarire le parti importanti per includere il caricatore nella tua sezione personalizzata.

Per prima cosa includi un pulsante nel meta box:

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

Ora carica gli script:

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

// è meglio usare get_current_screen(); o la variabile globale $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');
}

L'ultima parte è il tuo script personalizzato per utilizzare la thickbox e il caricatore al suo interno.

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

});