Aggiungi il pulsante "upload media" nel campo meta box


17

Ho un post personalizzato che ha un meta tag che deve utilizzare un caricamento di file (per file video). Mi chiedo, qual è il modo corretto di aggiungere un pulsante "Carica" ​​che punta al file uploader di WordPress e imposta l'URL del file caricato selezionato sul campo di testo che ha causato che associa il pulsante di caricamento.

Non sto cercando il codice per la creazione dell'opzione del meta tag attuale, ma un modo per aggiungere effettivamente un pulsante di caricamento multimediale Wordpress correttamente.


Guarda il tutorial e il semplice plug-in fatto da esso che puoi provare qui . Mi ha aiutato.
Fanky,

Risposte:


13

Vedi questo scheletro di upload di file multimediali . Puoi anche usarlo nel tuo markup personalizzato, come Meta Box.

Un suggerimento, controlla, che usi solo gli script nella pagina, dove attivi la tua Meta Box. Altrimenti è spesso un problema nelle pagine predefinite e nel caricatore.

Ora un tentativo di cancellare le parti importanti per includere l'autore del caricamento nella parte personalizzata.

Per prima cosa includi un pulsante nella meta box:

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

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

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

L'ultima parte è lo script personalizzato per utilizzare la thickbox e l'uploader all'interno di questo.

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

});

2
Solo un piccolo promemoria tramite la pagina Codex per admin_print_scriptsdice che admin_print_scriptsutilizzato principalmente per echo javascript incorporato. admin_print_scriptsnon deve essere utilizzato per accodare stili o script nelle pagine di amministrazione. Usa admin_enqueue_scriptsinvece.
Zulian,

Ho provato questo metodo e la casella di immissione testo #upload_imagenon è mai stata popolata
Mr Pablo

1
questa risposta non funziona. vedi altre risposte.
T.Todua,

0

Soluzione:

1) nelle tue funzioni.php , aggiungi il blocco per registrare gli script necessari:

// 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) e quindi aggiungere il blocco 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 nel caso in cui siano necessari più campi, quindi puoi farlo facilmente in questo modo: http://pastebin.com/raw/xpU1ch2W


Funziona come un fascino, ma solo con immagini. Come posso fare lo stesso con i file video?
Alex,
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.