Volete creare un plugin e dare la possibilità di caricare un’immagine?
Volete utilizzare le immagini nel vostro widget?
Ecco come utilizzare il media uploader di wordpress. 
Introduzione
Oggi vedremo come sfruttare la potenzialità del media uploader di default in wordpress per aggiungere la possibilità di caricare immagini all’interno del nostro plugin o widget.
La bellezza di worpdress è la semplicità di utilizzo e la facilità con cui implementare funzioni personalizzate.
Iniziamo
Innanzitutto quello che ci serve sono le varie librerie javascript che dobbiamo includere nel tema.
Possiamo aggiungerle in questo modo:
add_action( 'admin_enqueue_scripts', 'admin_scripts' );
public static function admin_scripts( $hook_suffix ) {
/*MEDIA UPLOADER*/
wp_enqueue_media();
}
Nell’esempio precedente includiamo gli script solamente in amministrazione tramite l’action admin_script e a tutto il resto ci pensa la funzione wordpress wp_enqueue_media(). Ecco la semplicità di cui parlavamo prima.
Dopo aver incluso le librerie per il corretto funzionamento del media uploader dobbiamo creare lo script per richiamare la funzione classica che troviamo, ad esempio, quando carichiamo un’immagine all’interno di un post.
jQuery(function($) {
//WP MEDIA
var _custom_media = true,
_orig_send_attachment = wp.media.editor.send.attachment;
$('.bottone-per-upload').click(function(e) {
var send_attachment_bkp = wp.media.editor.send.attachment;
var button = $(this);
_custom_media = true;
wp.media.editor.send.attachment = function(props, attachment){
if ( _custom_media ) {
$('.campo-dove-mettere-il-valore').val(attachment.id);
image = $( '![]()
<img />', { src: attachment.url, width: 40 } );
$('.elemento-immagine').remove().end().prepend( image );
} else {
return _orig_send_attachment.apply( this, [props, attachment] );
};
}
wp.media.editor.open(button);
return false;
});
$('.add_media').on('click', function(){
_custom_media = false;
});
});
Ed ecco che con poche righe di codice abbiamo implementato la funzionalità di caricamento delle immagini in wordpress.
Vediamo il codice nel dettaglio.
Quello che dovremo modificare saranno i selettori che abbiamo utilizzato in questo codice di esempio.
1. $(‘.bottone-per-upload’)
è l’elemento a cui è associato l’evento click. Cliccando su questo elemento si aprirà il media uploader di wordpress. Dobbiamo rinominare .bottone-per-upload con il selettore che abbiamo creato appositamente che può essere un tag a, o tag input di tipo button
<a class=”bottone-per-upload”>
<input type=”button” class=”bottone-per-upload”>
2. $(‘.campo-dove-mettere-il-valore’)
è l’elemento dove andremo a mettere l’id dell’immagine selezionata per poi salvarlo nel db. Questo possiamo, o meglio, di solito si usa un campo input di tipo hidden
<input type=”hidden” class=”campo-dove-mettere-il-valore” value=””>
3. $(‘.elemento-immagine’)
Questo non è necessario all’utilizzo dell’uploader ma possiamo utilizzarlo per visualizzare in tempo reale l’immagine selezionata nel media uploader. Questo è un elemento di tipo img che sostituiremo con un immagine creata al volo in base al valore che ci passa direttamente l’uploader (come possiamo vedere nella variabile image)
<img src=”” class=”elemento-immagine”>
Ed ecco che in pochi passaggi abbiamo implementato la funzionalità di caricare delle immagini con il media uploader nativo di wordpress.
In questa guida abbiamo evidenziato il codice che potrete utilizzare nei vostri plugin, nel vostro tema o nel widget creato da voi senza mettere del codice reale di utilizzo. Questo perché il media uploader può essere utilizzato in un’infinità di modi, ma il come, lo lasciamo decidere a voi.
Però siamo curiosi, come lo utilizzerete?
Dettagli
Livello: medio
Compatibilità: testato su WP versione 3.9.1
