Share
În acest tutorial, veți învăța cum să creați un plugin care permite utilizatorilor să trimită imagini și să le încarce în biblioteca media WordPress. De asemenea, veți afla cum să ștergeți corect imaginile din biblioteca media WordPress, precum și să efectuați o validare de bază a imaginilor încărcate.
Acest tutorial este solicitat de unii utilizatori care au găsit interesant plugin-ul meu de tutorial, dar au fost deosebit de interesați să afle cum ar putea fi folosită aceeași tehnică pentru a încărca imagini de pe interfață. Deci, iată o reiterare a tutorialului care face asta. Pentru informații detaliate despre configurarea plugin-ului, codurile scurte și noncesurile, consultați tutorialul anterior.
Pluginul va:
Vom folosi imaginea miniaturală postată de WordPress (aka Imagine recomandată) meta pentru a ține imaginea pentru fiecare post. De asemenea, este mai ușor să afișați și să lucrați cu imaginea noastră, deoarece putem folosi funcțiile post_thumbnail.
Iată la ce vrem:
Toate codurile sunt disponibile în sursa pluginului din partea de sus a acestui tutorial.
Creați un fișier cu plugin numit submit_user_images.php în wp-content / plugins / trimiteți-user-imagini director.
Consultați sursa pluginului pentru informații despre antetul pluginului.
Vom crea un tip de post personalizat numit user_images pentru a ține imaginile utilizatorilor și o taxonomie personalizată numită user_image_category. Acest lucru va permite o administrare mai curată a imaginilor decât să le alocați pur și simplu posturilor și categoriilor normale.
Vom folosi următorul cod de inițiere pentru a crea tipul de post personalizat și taxonomia personalizată:
Accentsconagua
add_action ('init', 'sui_plugin_init'); Funcția sui_plugin_init () $ image_type_labels = array ('nume' => _x ('Imagini utilizator', 'generic nume post'), 'singular_name' => 'add_new' => _x ('Adăugați o nouă imagine a utilizatorului', 'imagine'), 'add_new_item' => "View_item" => __ ('Vezi imaginea utilizatorului'), 'search_items' => __ ('Căutare Imaginile utilizatorilor "), 'not_found' => __ ('Nu s-au găsit imagini ale utilizatorilor'), 'not_found_in_trash' => Imagine utilizator '); $ image_type_args = array (' etichete '=> $ image_type_labels,' public '=> true,' query_var '=> true,' rewrite '=> true,' capability_type '=> '=> true,' hierarchical '=> false,' map_meta_cap '=> true,' menu_position '=> null,' supports '=> ; register_post_type ('user_images', $ image_type_args); $ image_catego (nume utilizator taxonomie), 'search_items' => __ ('Nume utilizator', 'taxonomie generică nume'), "Căutare de categorii de utilizatori"), 'all_items' => __ ('Toate categoriile de imagini ale utilizatorilor'), 'parent_item' => __ (" : '),' edit_item '=> __ (' Adăugați o nouă categorie de imagine utilizator '),' update_item '=> 'new_item_name' => __ ('New Image Image Name'), 'nume_menu' => __ ("Categorii de imagini utilizator");); $ image_category_args = array ('hierarchical' => true, 'etichete' => $ image_category_labels, 'show_ui' => true, 'query_var' => true, 'rewrite' => array ('slug' => 'user_image_category') ,); register_taxonomy ('sui_image_category', array ('user_images'), $ image_category_args); $ default_image_cats = array ("umor", "peisaje", "sport", "oameni"); foreach ($ default_image_cats ca $ cat) if (! term_exists ($ cat, 'sui_image_category')) wp_insert_term ($ cat, 'sui_image_category'); Acum vom avea un meniu Imagini utilizator în tabloul de bord al adminului și o modalitate de a administra imaginile utilizatorilor și categoriile acestora.
Va trebui să facem o validare de bază, deci să definim două constante pentru o utilizare ulterioară:
define ('MAX_UPLOAD_SIZE', 200000); define ('TYPE_WHITELIST', serializează (array ('image / jpeg', 'image / png', 'image / gif'))); Vom defini un cod scurt care ne va permite să afișăm (și să procesăm) formularul de trimitere a imaginilor utilizatorilor într-o postare sau o pagină:
add_shortcode ('sui_form', 'sui_form_shortcode'); Deoarece pluginul acceptă date de la utilizator, implementăm următoarele mecanisme de securitate:
Aceasta este funcția numită de codul nostru scurt. Afișează și procesează formularul de trimitere a imaginii și formularul de afișare / ștergere a imaginilor. O vom lua în bucăți de mâncare și în pasul 6 vom examina funcțiile de ajutor.
funcția sui_form_shortcode () if (! is_user_logged_in ()) return 'Trebuie să vă conectați pentru a trimite o imagine.
„; global $ current_user;
dacă este ($ _POST ['sui_upload_image_form_submitted']) && wp_verify_nonce ($ _ POST ['sui_upload_image_form_submitted'], 'sui_upload_image_form')) $ result = sui_parse_file_errors ($ _POST ['sui_image_caption' ; dacă ($ rezultat ['error']) echo 'EROARE: ". $ rezultat ['eroare']. '
„; altfel $ user_image_data = array ('post_title' => $ rezultat ['caption'], 'post_status' => 'în așteptare', 'post_author' => $ current_user-> ID, 'post_type' => 'user_images') ; dacă $ post_id = wp_insert_post ($ user_image_data)) sui_process_image ('sui_image_file', $ post_id, $ result ['caption']); wp_set_object_terms ($ post_id, (int) $ _ POST ['sui_image_category'], 'sui_image_category');
dacă isset ($ _POST ['sui_form_delete_submitted']) && wp_verify_nonce ($ _ POST ['sui_form_delete_submitted'], 'sui_form_delete')) if ($ user_images_deleted = sui_delete_user_images $ _POST ['sui_image_delete_id'])) echo '". $ user_images_deleted. "imaginile au fost șterse!
„;
echo sui_get_upload_image_form ($ sui_image_caption = $ _POST ['sui_image_caption'], $ sui_image_category = $ _POST ['sui_image_category']); dacă ($ user_images_table = sui_get_user_images_table ($ curent_user-> ID)) echo $ user_images_table;
Aici vom examina funcțiile care generează formularele, adăugăm imaginile în biblioteca media și funcția care șterge imaginile selectate.
funcția sui_get_upload_image_form ($ sui_image_caption = ", $ sui_image_category = 0) $ out ="; $ out = '„; returnați $ out;
funcția sui_get_image_categories_dropdown (taxonomie $, selectată) return wp_dropdown_categories (array ('taxonomy' => $ taxonomie, 'name' => 'sui_image_category', 'selected' => $ selected, 'hide_empty' => 0)); funcția sui_get_user_images_table ($ user_id) $ args = array ('author' => $ user_id, 'post_type' => 'user_images', 'post_status' => 'în așteptare'); $ user_images = nou WP_Query ($ args); dacă (! $ user_images-> post_count) retur 0; $ out = "; $ out. = 'Imaginile dvs. nepublicate - Faceți clic pentru a vedea dimensiunea completă
„; $ out = '„; returnați $ out; Formularele pot fi manipulate în browser pentru a publica date neașteptate. În cazul nostru, în fiecare casetă de ștergere este atribuită valoarea unei postări. Dar dacă un utilizator rău intenționat a modificat acea valoare și a determinat funcția de ștergere să elimine o postare care nu a fost înregistrată?
O modalitate de a evita acest lucru este de a utiliza nonces pentru fiecare rând de date post, asigurându-se că noncesurile sunt denumite în mod unic cu valoarea postului care urmează să fie ștearsă. Apoi, verificăm nonce după trimiterea formularului pentru a ne asigura că este o valoare reală de returnare.
funcția sui_delete_user_images ($ images_to_delete) $ images_deleted = 0; foreach ($ images_to_delete ca $ user_image) if (isset ($ _ POST ['sui_image_delete_id_'. $ user_image]) && wp_verify_nonce ($ _ POST ['sui_image_delete_id_'. $ user_image] post_thumbnail_id = get_post_thumbnail_id ($ user_image)) wp_delete_attachment ($ post_thumbnail_id); wp_trash_post ($ user_image); $ images_deleted ++; retur $ images_deleted;
Nu și asta pentru că WordPress stochează atașamentele ca posturi obișnuite în tabela de baze de date. Arătați-vă singur: toate fișierele atașate sunt stocate în tabelul de posturi cu un post_type de atașament. Ștergerea pur și simplu a unei postări de tip user_images nu șterge atașamentul său miniatural. Rămâne în biblioteca media pentru utilizare ulterioară dacă nu o ștergem în mod special cu wp_delete_attachment. Pentru scopurile noastre, am crezut că este mai bine să eliminați atașamentul atunci când postul utilizatorului a fost șters.
Să ne reamintim cum arată ieșirea unui fișier html atunci când postarea unei imagini în scriptul dvs.:
Array ([name] => ref_blind.jpg [type] => imagine / jpeg [tmp_name] => / tmp / php79xI4e [error] => 0 [size = 106290)
Transmitem matricea respectivă la funcția sui_process_image, împreună cu id-ul postului de imagine salvat al utilizatorului și imaginea de imagine santizată.
funcția sui_process_image ($ file, $ post_id, $ caption) require_once (ABSPATH. "wp-admin" ./include/image.php); require_once (ABSPATH. "wp-admin" ./include/file.php); requ_once (ABSPATH. "wp-admin" ./includes/media.php); $ attachment_id = media_handle_upload ($ fișier, $ post_id); update_post_meta ($ post_id, '_thumbnail_id', $ attachment_id); $ attachment_data = array ('ID' => $ atașament_id, 'post_excerpt' => caption); wp_update_post ($ attachment_data); returnează $ attachment_id; Deoarece atașamentele sunt doar postări obișnuite, dacă actualizăm câmpul post_excerpt pentru atașament, actualizăm efectiv câmpul de legendă al atașamentului așa cum se vede în ecranul de editare a bibliotecii media.
De asemenea, validăm matricea de fișiere și captura de imagine furnizată de utilizator cu funcția sui_parse_file_errors.
funcția sui_parse_file_errors ($ file = ", $ image_caption) $ result ['error'] =" Nu ($ file ['error']) fișier încărcat sau a existat o eroare de încărcare! "; return $ result; $ image_caption = trim (preg_replace ('/ [^ a-zA-Z0-9 \ s] + /', $ image_caption); dacă $ ($ image_caption == ") $ result ['error'] =" Captionul poate conține doar litere, numere și spații! "; $ result_title = $ image_caption; $ image_data = "$ image ['tmp_name']); dacă ! in_array ($ image_data ['mime']), $ unserialize (TYPE_WHITELIST))) $ result ['error'] = 'Imaginea trebuie să fie jpeg, png sau gif ! '; elseif (($ file [' size ']> MAX_UPLOAD_SIZE)) $ rezultat [' error '] =' Imaginea ta a fost '. MAX_UPLOAD_SIZE "octeți." Return $ result; Puneți doar informațiile despre acest stil în fișierul style.css din dosarul tematic:
#sui_upload_image_form #sui_image_caption lățime: 500px; #user_images font-size: 12px; #user_images a text-align: left; #user_images td vertical-aliniere: mijloc; #user_images td intrare margine: 0px;
Activați pluginul, plasați codul scurt pe o pagină, conectați-vă la site-ul dvs. și testați-l. Când încărcați o imagine, veți vedea o nouă postare în meniul de administrare Imagini utilizator. Va fi în așteptarea publicării. De asemenea, veți vedea o nouă imagine afișată în biblioteca media, atașată la postarea dvs. nouă și cu titlul așa cum este prevăzut.
În partea de sus a acestui tutorial este afișată sursa codului complet de plugin și un link de site demo.
Dosarul sursă conține, de asemenea, un șablon de pagină Wordpress cu o buclă personalizată care afișează imaginile publicate pentru toți utilizatorii.
S-ar putea să doriți o validare mai strictă a încărcărilor de imagini. Rețineți că acceptați date de la utilizatori care ar putea încărca în mod accidental sau rău intenționat fișiere necorespunzătoare. Verificarea tipului și dimensiunii fișierului este un început bun.
De asemenea, am creat legenda atașament prin actualizarea câmpului post_excerpt al atașamentului. De asemenea, puteți seta o descriere a atașamentului utilizând câmpul post_content al atașamentului.
