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:
- Un wrapper să le conțină pe toate;
- Un element să declanșeze uploaderul (poate fi ORICE element,
button
,a
,span
etc); - Un element care poate fi salvat în
form
:input
(poate fi și hidden) sautextarea
.
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!
- Posted in:
- WordPress
- Tags:
- Experiments,
- uploader,
- WordPress
ai uitat de wp_enqueue_style( ‘thickbox’ );
Poata ca nu a uitat…
Interesant articolul si folositor… cautam acum vre-o luna ceva de genul. Multumesc