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!

2 Comentarii to “Folosirea uploader-ului din WordPress”

  1. ai uitat de wp_enqueue_style( ‘thickbox’ );

  2. Poata ca nu a uitat… :)
    Interesant articolul si folositor… cautam acum vre-o luna ceva de genul. Multumesc

Show trackbacks

Ți-a plăcut articolul? Lasă un comentariu!

You can insert code snippets using BBcode:
[js].[/js] [html].[/html] [php].[/php] [css].[/css]
You can also use some HTML tags:
<blockquote>.</blockquote> <code>.</code> <a href="">.</a> <strong>.</strong> <em>.</em>

windows apple dropbox facebook twitter