Utilizzo di WordPress Media Uploader in un plugin

Fonte LAURA HOUGH CREATIVE graphic Design

Stai creando un plugin per WordPress che richiede agli utenti di selezionare o caricare contenuti multimediali? Quando mi è capitato in passato di dover implementare questa caratteristica mi sono sempre servito di una classe PHP pensata per questo scopo, class.upload.php, che devo dire è eccellente e fa bene il suo lavoro. Tuttavia, penso che a volte, una soluzione più integrata con il sistema (in questo caso WordPress) è preferibile.

Il core WordPress Media Uploader è relativamente facile da implementare e l’interfaccia user-friendly dovrebbe far sentire a proprio agio gli utenti durante il caricamento dei media. Questo post non vuole essere un tutorial su come creare un plugin per WordPress e assumerò che il lettore abbia già una pagina per le opzioni del suo plugin, Se non è così, ci sono un sacco di tutorial sul web per aiutare a raggiungere questo obiettivo.

Il codice javascript

In primo luogo, dobbiamo creare un file javascript chiamato media-uploader.js (o simile) all’interno della cartella dei plugin. Inserire il seguente codice e salvarlo.

jQuery(document).ready(function($){
   var mediaUploader;
   $('#upload_image_button').click(function(e) {
     e.preventDefault();
     if (mediaUploader) {
       mediaUploader.open();
       return;
     }
     mediaUploader = wp.media.frames.file_frame = wp.media({
       title: 'Choose Image',
       button: {
         text: 'Choose Image'
       }, multiple: false });
     mediaUploader.on('select', function() {
       var attachment = mediaUploader.state().get('selection').first().toJSON();
       $('#background_image').val(attachment.url);
     });
     mediaUploader.open();
   });
 });

Quando chiamato da #upload_image_button, questo script avvia l’interfaccia nativa di WordPress Media Uploader e inserisce il file scelto nel campo di destinazione #background_image.

Il codice della funzione

Successivamente, è necessario registrare lo script e accodarlo utilizzando il seguente codice nel file principale del plugin:

function media_uploader_enqueue() {
wp_enqueue_media();
wp_register_script('media-uploader', plugins_url('media-uploader.js' , FILE ), array('jquery'));
wp_enqueue_script('media-uploader');
}
add_action('admin_enqueue_scripts', 'media_uploader_enqueue');

La registrazione e l’accodamento consentono al core WordPress di sapere dove si trova lo script e tutte le dipendenze che ha. wp_enqueue_media accoda tutti gli script, gli stili, le impostazioni e i modelli necessari per utilizzare tutte le API JavaScript multimediali. wp_register_script ha un numero di parametri: wp_register_script( $handle, $src, $deps $ver $in_footer)

• $handle è quello che usi per riferirti al tuo script
• $src percorso del file all’interno del tuo plugin – usa plugins_url(‘your-file.js’, __FILE__) per ottenere la radice dell’URL del plugin
• $deps una serie di handle di script registrati da cui dipende questo script
• $ver numero di versione dello script
• $in_footer opzione per accodare lo script prima del tag di chiusura anziché in

Vedi il riferimento alle funzioni di WordPress per una descrizione più dettagliata di questi.

Entrambi gli script e gli stili sono correttamente accodati allegando la funzione al gancio admin_enqueue_scripts. Si noti che stiamo utilizzando il blocco amministratore piuttosto che wp_enqueue_scripts, perchè non stiamo trattando gli elementi visualizzati nel front-end.
L’add_action hook ci consente di specificare con precisione in quale punto la funzione definita viene aggiunta durante l’esecuzione dello script.

Il codice del modulo

Infine, dobbiamo aggiungere un paio di campi alla nostra pagina delle opzioni del plug-in: un pulsante che richiama lo script Media Uploader e un campo di testo che salva l’URL dell’immagine nel database:

<input id="background_image" type="text" name="background_image" value="" />
<input id="upload_image_button" type="button" class="button-primary" value="Insert Image" />

Ora possiamo utilizzare il WordPress Media Uploader nella nostra pagina delle opzioni del plugin.

Aggiungere il familiare uploader nativo di WordPress alla pagina delle opzioni del plugin dovrebbe essere relativamente semplice. Se il tuo file javascript è chiamato dall’elemento desiderato e hai registrato e accodato correttamente gli script, dovresti farlo funzionare in pochissimo tempo.