Share
I denne opplæringen lærer du hvordan du lager et plugin som lar brukerne sende inn bilder og laste dem opp til WordPress-mediebiblioteket. Du lærer også hvordan du sletter bilder på WordPress-mediebiblioteket, og gjør noen grunnleggende validering på opplastede bilder.
Denne opplæringen er på forespørsel fra noen brukere som fant mine citater plugin tutorial interessant, men var spesielt opptatt av å finne ut hvordan samme teknikk kan brukes til å laste opp bilder fra frontend. Så her er en gjentagelse av den opplæringen som bare gjør det. For detaljerte opplysninger om plugin-oppsett, kortkoder og nonces, se den forrige opplæringen.
Pluggen vil:
Vi vil bruke det innebygde WordPress-innlegget miniatyrbildet (aka Featured Image) -meta-feltet for å holde bildet for hvert innlegg. Dette gjør det også lettere å vise og jobbe med bildet vårt, da vi kan bruke post_thumbnail-funksjonene.
Her er det vi satser på:
All kode er tilgjengelig i plugin-kilden øverst i denne opplæringen.
Opprett en pluginfil med navnet submit_user_images.php i wp-content / plugins / sender-user-bilder katalog.
Se plugin-kilden for plugin header info.
Vi skal lage en egendefinert posttype som heter user_images for å holde våre brukerbilder og en tilpasset taksonomi navngitt user_image_category. Dette vil muliggjøre renere administrasjon av bildene enn bare å tildele dem til vanlige innlegg og kategorier.
Vi bruker følgende initialiseringskode for å lage vår egendefinerte innleggstype og egendefinert taksonomi:
Accentsconagua
add_action ('init', 'sui_plugin_init'); funksjonen sui_plugin_init () $ image_type_labels = array ('name' => _x ('Brukerbilder', 'posttype generalt navn'), 'singular_name' => _x ('Brukerbilde', 'posttype entallnavn'), 'add_new' => _x ('Legg til nytt brukerbilde', 'bilde'), 'add_new_item' => __ ('Legg til nytt brukerbilde'), 'edit_item' => __ ('Rediger brukerbilde'), 'new_item '=> __ (' Legg til nytt brukerbilde '),' all_items '=> __ (' Vis brukerbilder '),' view_item '=> __ (' Vis brukerbilde '),' search_items '=> __ Brukernavn '=' 'Not_found' => __ ('Ingen brukerbilder funnet'), 'not_found_in_trash' => __ ('Ingen brukerbilder funnet i Papirkurv'), 'parent_item_colon' => ", 'menu_name' => ' Brukerbilder '); $ image_type_args = array (' labels '=> $ image_type_labels,' public '=> true,' query_var '=> true,' rewrite '=> true,' capability_type '=>' innlegg ',' has_archive '=' true 'hierarchical' => false, 'map_meta_cap' => true, 'menu_position' => null, 'støtter' => array ('tittel', 'editor', 'author', 'miniatyrbilde')) ; register_post_type ('user_images', $ image_type_args); $ image_catego ry_labels = array ('name' => _x ('User Image Categories', 'Taxonomy General Name'), 'singular_name' => _x ('Brukerbilde', 'Taxonomy Singular Name'), 'search_items' => __ 'Search User Image Categories'), 'all_items' => __ ('Alle brukerbildekategorier'), 'parent_item' => __ ('Parent User Image Category'), 'parent_item_colon' => __ ('Parent User Image Category : '' Edit_item '=> __ (' Rediger brukerbildekategori '),' update_item '=> __ (' Oppdater brukerbildekategori '),' add_new_item '=> __ (' Legg til ny brukerbildekategori ') 'new_item_name' => __ ('Ny bruker bilde navn'), 'menu_name' => __ ('User Image Categories'),); $ image_category_args = array ('hierarchical' => true, 'labels' => $ image_category_labels, 'show_ui' => sant, 'query_var' => true, 'rewrite' => array ('slug' => 'user_image_category') ,); register_taxonomy ('sui_image_category', array ('user_images'), $ image_category_args); $ default_image_cats = array ('humor', 'landskaper', 'sport', 'folk'); foreach ($ default_image_cats as $ cat) hvis (! term_exists ($ cat, 'sui_image_category')) wp_insert_term ($ cat, 'sui_image_category'); Vi vil nå ha en User Images-meny i admin-dashbordet og en måte å administrere brukerbilder og deres kategorier på.
Vi må gjøre noen grunnleggende validering, så la oss definere to konstanter for senere bruk:
definer ('MAX_UPLOAD_SIZE', 200000); define ('TYPE_WHITELIST', serialize (array ('image / jpeg', 'image / png', 'image / gif'))); Vi definerer en kortkode som gjør det mulig for oss å vise (og behandle) brukerens innleveringsskjema i et innlegg eller en side:
add_shortcode ('sui_form', 'sui_form_shortcode'); Fordi pluginet aksepterer data fra brukeren, implementerer vi følgende sikkerhetsmekanismer:
Dette er funksjonen kalt av vår kortkode. Den viser og behandler skjemaet for innlevering av bilde og bildeliste / slettingsskjema. Vi tar den i bitbitbiter og i trinn 6 ser vi på hjelperfunksjonene.
funksjon sui_form_shortcode () if (! is_user_logged_in ()) return 'Du må være logget inn for å sende inn et bilde.
'; global $ current_user;
$ resultat = sui_parse_file_errors ($ _ FILES ['sui_image_file'], $ _POST ['sui_image_caption']) ($ _POST ['sui_upload_image_form_submitted']) && wp_verify_nonce ($ _ POST ; hvis ($ resultat ['error']) echo 'FEIL: '. $ resultat ['feil']. '
'; andre $ user_image_data = array ('post_title' => $ resultat ['caption'], 'post_status' => 'venter', 'post_author' => $ current_user-> ID, 'post_type' => 'user_images') ; hvis ($ 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');
hvis (isset ($ _POST ['sui_form_delete_submitted']) && wp_verify_nonce ($ _ POST ['sui_form_delete_submitted'], 'sui_form_delete')) hvis (isset ($ _ POST ['sui_image_delete_id'])) if ($ user_images_deleted = sui_delete_user_images $ _POST ['sui_image_delete_id'])) echo ''. $ user_images_deleted. 'bilder (e) slettet!
';
echo sui_get_upload_image_form ($ sui_image_caption = $ _POST ['sui_image_caption'], $ sui_image_category = $ _POST ['sui_image_category']); hvis ($ user_images_table = sui_get_user_images_table ($ current_user-> ID)) echo $ user_images_table;
Her ser vi på funksjonene som genererer skjemaene, legger bildene til mediebiblioteket og funksjonen som sletter de valgte bildene.
funksjon sui_get_upload_image_form ($ sui_image_caption = ", $ sui_image_category = 0) $ out ="; $ ut. = ''; returner $ ut;
funksjonen sui_get_image_categories_dropdown ($ taksonomi, $ valgt) return wp_dropdown_categories (array ('taxonomy' => $ taksonomi, 'navn' => 'sui_image_category', 'selected' => $ valgt, 'hide_empty' => 0, 'echo' => 0)); funksjon sui_get_user_images_table ($ user_id) $ args = array ('author' => $ user_id, 'post_type' => 'user_images', 'post_status' => 'venter'); $ user_images = ny WP_Query ($ args); Hvis (! $ user_images-> post_count) returnerer 0; $ out = "; $ out. = 'Dine upubliserte bilder - Klikk for å se full størrelse
'; $ ut. = ''; returner $ ut; Skjemaer kan manipuleres i nettleseren for å sende tilbake uventede data. I vårt tilfelle er hver slette avmerkingsboksen tilordnet verdien av et innlegg. Men hva om en skadelig bruker endret den verdien og forårsaket vår slettingsfunksjon for å fjerne et innlegg som ikke var faktisk oppført?
En måte å unngå dette på er å bruke nonces for hver rad postdata, slik at nonces er unikt navngitt med postverdien som skal slettes. Vi bekrefter derfor ikke at du har skjemaet for å sikre at det er en ekte returverdi.
funksjonen sui_delete_user_images ($ images_to_delete) $ images_deleted = 0; foreach ($ images_to_delete as $ user_image) hvis (isset ($ _ POST ['sui_image_delete_id_'. $ user_image]) &&wp_verify_nonce ($ _ POST ['sui_image_delete_id_'. $ user_image], 'sui_image_delete_'. $ user_image)) if post_thumbnail_id = get_post_thumbnail_id ($ user_image)) wp_delete_attachment ($ post_thumbnail_id); wp_trash_post ($ user_image); $ images_deleted ++; returnere $ images_deleted;
Nei, og det er fordi WordPress lagrer vedlegg som vanlige innlegg i postdatabase-tabellen. Ta en titt selv: alle vedleggene lagres i innleggstabellen med en posttype av vedlegg. Hvis du bare sletter et innlegg av typen user_images, slettes ikke miniatyrbilaget. Det forblir i mediebiblioteket for fremtidig bruk, med mindre vi spesifikt sletter det med wp_delete_attachment. For vårt formål trodde jeg det var best å fjerne vedlegget når brukerens innlegg ble slettet.
La oss minne oss om hva resultatet av en HTML-filinngang ser ut når den legger inn et bilde på skriptet ditt:
Array ([name] => ref_blind.jpg [type] => bilde / jpeg [tmp_name] => / tmp / php79xI4e [feil] => 0 [størrelse] => 106290)
Vi overfører den rekkefølgen til sui_process_image-funksjonen sammen med ID-en for den lagrede brukerbildepost og den santiserte bildeteksten.
funksjonen sui_process_image ($ file, $ post_id, $ caption) require_once (ABSPATH. "wp-admin". '/includes/image.php'); require_once (ABSPATH. "wp-admin". '/includes/file.php'); require_once (ABSPATH. "wp-admin". '/includes/media.php'); $ attachment_id = media_handle_upload ($ file, $ post_id); update_post_meta ($ post_id, '_thumbnail_id', $ attachment_id); $ attachment_data = array ('ID' => $ attachment_id, 'post_excerpt' => $ bildetekst); wp_update_post ($ attachment_data); returnere $ attachment_id; Fordi vedlegg er bare vanlige innlegg, hvis vi oppdaterer feltet post_excerpt for vedlegget, oppdaterer vi faktisk vedleggets tekstfelt som vist i redigeringsskjermen for mediebiblioteket.
Vi validerer også filarrayen og den brukerdefinerte bildteksten med sui_parse_file_errors-funksjonen.
($ result = '$ error'] = "Nei" fil opplastet eller det oppsto en opplastingsfeil! "; return $ result; $ image_caption = trim (preg_replace ('/ [^ a-zA-Z0-9 \ s] + /',", $ image_caption)); hvis ($ image_caption == ") $ result ['error'] =" Tekstet ditt kan bare inneholde bokstaver, tall og mellomrom! "; returnere $ resultat; $ resultat ['caption'] = $ image_caption; $ image_data = $ result ['error'] = 'Bildet ditt må være en jpeg, png eller gif ($ result [' tmp_name ' ! '; elseif (($ file [' size ']> MAX_UPLOAD_SIZE)) $ resultat [' error '] =' Ditt bilde var '. $ file [' size '].' bytes! Det må ikke overstige '. MAX_UPLOAD_SIZE. 'Bytes.'; Returnerer $ resultat; Bare slipp denne stilinfoen i stilen.css-filen i temamappen din:
#sui_upload_image_form #sui_image_caption width: 500px; #user_images font-size: 12px; #user_images th text-align: left; #user_images td vertikaljustering: midt; #user_images td input margin: 0px;
Aktiver plugin, trykk kortnummeret på en side, logg inn på nettstedet ditt, og test det ut. Når du laster opp et bilde, vil du se et nytt innlegg vises under administrasjonsmenyen Brukerbilder. Det blir ventet på publisering. Du vil også se et nytt bilde som er oppført i mediebiblioteket ditt, vedlagt det nye innlegget ditt og med bildeteksten som angitt.
Den komplette pluginkodekilden og en demo-nettstedslink er oppført øverst i denne opplæringen.
Kildemappen inneholder også en Wordpress-sidemal med en tilpasset sløyfe som viser publiserte bilder for alle brukere.
Du kan ønske å legge strengere validering på bildeopplastingene dine. Husk at du aksepterer data fra brukere som ved et uhell eller skadelig opplasting av upassende filer. Å sjekke filtype og størrelse er en god start.
Også, vi opprettet vedleggsvedlegget ved å oppdatere vedleggets post_excerpt-felt. Du kan også angi en vedleggsbeskrivelse ved å bruke vedleggets post_content-felt.
