Folosirea uploader-ului din WordPress

Zilele astea mă tot distrez cu un WordPress mai customizat decât restul făcute până acum. Iar una din treburile ce trebuiesc făcute o reprezintă un uploader pentru imagini. Locurile în care ar fi nevoie de așa ceva sunt nenumărate. De exemplu: avatar-uri, imagini pentru slidere etc.

Primul impuls a fost să scriu un script PHP cu care fac upload. Dar mi-am dat seama că este o muncă inutilă din moment ce WordPress-ul are un uploader decent. Prin urmare, m-am apucat să caut ce și cum. Pentru a deschide uploaderul este necesar să faci următorii pași:

Incluzi uploaderul și thickbox

wp_enqueue_script( array('jquery',  'media-upload', 'thickbox') );

Pasul ăsta se face chiar la init. Totuși, ar fi bine să ai grijă să nu încarci toate treburile și în fișierele temei.

Markup

Eu am avut nevoie de toată povestea asta pentru a adăuga câte o imagine pentru fiecare custom post type. Are „eticheta” category picture deoarece unui utilizator de rând sunt șanse mai mici să ceară explicații suplimentare.

<p>
	<label>Category 1 Picture</label>
	
	<button class="ntzUploadTrigger button-secondary">Upload</button>
</p>
<p>
	<label>Category 2 Picture</label>
	
	<button class="ntzUploadTrigger button-secondary">Upload</button>
</p>

Nu contează în ce ordine sunt elementele (sau nici măcar CE elemente!), cât timp este vorba de:

1. Un wrapper să le conțină pe toate;
2. Un element să declanșeze uploaderul (poate fi ORICE element, button, a, span etc);
3. Un element care poate fi salvat în form: input (poate fi și hidden) sau textarea.

JavaScript

Adaugi toată treaba de mai jos undeva după formularul ce cuprinde markup-ul de mai sus și ești gata.

	jQuery(document).ready(function($) {
		var oldSendToEditor = window.send_to_editor;
		$('.ntzUploadTrigger').click(function() {
			var ntzUploadTarget = $(this).parent().find('.ntzUploadTarget');
			window.send_to_editor = function(html) {
				imgurl = $('img',html).attr('src') || $(html).attr('src');
				ntzUploadTarget.val(imgurl).focus().blur();
				ntzUploadTarget = '';
				tb_remove();
				if(typeof(oldSendToEditor)=='function') {
					window.send_to_editor = oldSendToEditor;
				}
			}
			tb_show('', 'media-upload.php?type=image&TB_iframe=true');
			return false;
		});
	});

Enjoy!