Share
In deze zelfstudie leert u hoe u een plug-in maakt waarmee gebruikers afbeeldingen kunnen verzenden en uploaden naar de WordPress mediabibliotheek. U leert ook hoe u afbeeldingen correct uit de WordPress mediabibliotheek verwijdert en wat basisvalidatie uitvoert op geüploade afbeeldingen.
Deze tutorial is op verzoek van sommige gebruikers die mijn tutorial met interessante quotes voor plug-ins interessant vonden, maar waren vooral benieuwd hoe dezelfde techniek kan worden gebruikt om afbeeldingen van de frontend te uploaden. Dus hier is een herhaling van die tutorial die precies dat doet. Zie de vorige zelfstudie voor meer informatie over het instellen van plug-ins, shortcodes en nonces.
De plug-in zal:
We gebruiken het ingebouwde WordPress miniatuur (of Featured Image) meta-veld om de afbeelding voor elke post te houden. Dit maakt het ook eenvoudiger om onze afbeelding weer te geven en te bewerken, omdat we de functies post_thumbnail kunnen gebruiken.
Dit is waar we naar streven:
Alle code is beschikbaar in de pluginbron bovenaan deze zelfstudie.
Maak een plugin-bestand met de naam submit_user_images.php in de wp-content / plugins / submit-user-images directory.
Raadpleeg de plugin-bron voor informatie over de plug-in header.
We gaan een aangepast berichttype met de naam user_images maken om onze gebruikersafbeeldingen en een aangepaste taxonomie met de naam user_image_category op te slaan. Hierdoor wordt een schoner beheer van de afbeeldingen mogelijk gemaakt dan door ze gewoon toe te wijzen aan normale berichten en categorieën.
We zullen de volgende initialisatiecode gebruiken om ons aangepaste berichttype en aangepaste taxonomie te maken:
Accentsconagua
add_action ('init', 'sui_plugin_init'); function sui_plugin_init () $ image_type_labels = array ('name' => _x ('User images', 'post type general name'), 'singular_name' => _x ('User Image', 'post type singular name'), 'add_new' => _x ('Nieuwe gebruikersafbeelding toevoegen', 'afbeelding'), 'add_new_item' => __ ('Nieuwe gebruikersafbeelding toevoegen'), 'edit_item' => __ ('Edit User Image'), 'new_item '=> __ (' Nieuwe gebruikersafbeelding toevoegen '),' all_items '=> __ (' View User Images '),' view_item '=> __ (' View User Image '),' search_items '=> __ (' Zoeken User Images '),' not_found '=> __ (' Geen gebruikersafbeeldingen gevonden '),' not_found_in_trash '=> __ (' Geen gebruikersafbeeldingen gevonden in Prullenbak '),' parent_item_colon '=> ",' menu_name '=>' User Images '); $ image_type_args = array (' labels '=> $ image_type_labels,' public '=> true,' query_var '=> true,' rewrite '=> true,' capability_type '=>' post ',' has_archive '=> true,' hierarchical '=> false,' map_meta_cap '=> true,' menu_position '=> null,' supports '=> array (' title ',' editor ',' author ',' thumbnail ')) ; register_post_type ('user_images', $ image_type_args); $ image_catego ry_labels = array ('name' => _x ('User Image Categories', 'taxonomy general name'), 'singular_name' => _x ('User Image', 'taxonomy singular name'), 'search_items' => __ ( 'Search User Image Categories'), 'all_items' => __ ('Alle gebruikersbeeldcategorieën'), 'parent_item' => __ ('Parent User Image Category'), 'parent_item_colon' => __ ('Parent User Image Category : '),' edit_item '=> __ (' Edit User Image Category '),' update_item '=> __ (' Update User Image Category '),' add_new_item '=> __ (' Nieuwe categorie gebruikersafbeelding toevoegen '), 'new_item_name' => __ ('Nieuwe gebruikersnaam Image Name'), 'menu_name' => __ ('User Image Categories'),); $ image_category_args = array ('hierarchical' => true, 'labels' => $ 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 ('humor', 'landschappen', 'sport', 'mensen'); foreach ($ default_image_cats als $ cat) if (! term_exists ($ cat, 'sui_image_category')) wp_insert_term ($ cat, 'sui_image_category'); We hebben nu een menu Gebruikersafbeeldingen in ons beheerdersdashboard en een manier om gebruikersafbeeldingen en hun categorieën te beheren.
We zullen wat basisvalidatie moeten doen, dus laten we twee constanten definiëren voor later gebruik:
define ('MAX_UPLOAD_SIZE', 200000); define ('TYPE_WHITELIST', serialize (array ('image / jpeg', 'image / png', 'image / gif'))); We zullen een shortcode definiëren waarmee we het formulier voor het verzenden en verzenden van gebruikersafbeeldingen in een bericht of pagina kunnen weergeven (en verwerken):
add_shortcode ('sui_form', 'sui_form_shortcode'); Omdat onze plug-in gegevens van de gebruiker accepteert, implementeren we de volgende beveiligingsmechanismen:
Dit is de functie die door onze shortcode wordt genoemd. Het toont en verwerkt het beeldinzendingformulier en het beeldlijst / verwijderingsformulier. We nemen het in hapklare stukjes en in stap 6 zullen we de hulpfuncties bekijken.
function sui_form_shortcode () if (! is_user_logged_in ()) ga terug 'Je moet ingelogd zijn om een afbeelding in te dienen.
'; global $ current_user;
if (isset ($ _POST ['sui_upload_image_form_submitted']) && wp_verify_nonce ($ _ POST ['sui_upload_image_form_submitted'], 'sui_upload_image_form')) $ result = sui_parse_file_errors ($ _ FILES ['sui_image_file'], $ _POST ['sui_image_caption']) ; if ($ result ['error']) echo 'FOUT: ' . $ result ['error']. '
'; else $ user_image_data = array ('post_title' => $ result ['caption'], 'post_status' => 'pending', 'post_author' => $ current_user-> ID, 'post_type' => 'user_images') ; if ($ 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');
if (isset ($ _POST ['sui_form_delete_submitted']) && wp_verify_nonce ($ _ POST ['sui_form_delete_submitted'], 'sui_form_delete')) if (isset ($ _ POST ['sui_image_delete_id'])) if ($ user_images_deleted = sui_delete_user_images ( $ _POST ['sui_image_delete_id'])) echo ''. $ user_images_deleted. 'afbeeldingen (s) verwijderd!
';
echo sui_get_upload_image_form ($ sui_image_caption = $ _POST ['sui_image_caption'], $ sui_image_category = $ _POST ['sui_image_category']); if ($ user_images_table = sui_get_user_images_table ($ current_user-> ID)) echo $ user_images_table;
Hier zullen we kijken naar de functies die de formulieren genereren, de afbeeldingen toevoegen aan de mediabibliotheek en de functie die de geselecteerde afbeeldingen verwijdert.
function sui_get_upload_image_form ($ sui_image_caption = ", $ sui_image_category = 0) $ out ="; $ uit. = ''; return $ out;
functie sui_get_image_categories_dropdown ($ taxonomy, $ selected) return wp_dropdown_categories (array ('taxonomy' => $ taxonomy, 'name' => 'sui_image_category', 'selected' => $ selected, 'hide_empty' => 0, 'echo' => 0)); function sui_get_user_images_table ($ user_id) $ args = array ('author' => $ user_id, 'post_type' => 'user_images', 'post_status' => 'in behandeling'); $ user_images = nieuwe WP_Query ($ args); als (! $ user_images-> post_count) 0 retourneert; $ out = "; $ out. = 'Je ongepubliceerde afbeeldingen - Klik om de volledige grootte te zien
'; $ uit. = ''; return $ out; Formulieren kunnen in de browser worden gemanipuleerd om onverwachte gegevens achter te houden. In ons geval is aan elk selectievakje voor verwijderen de waarde van een bericht toegewezen. Maar wat als een kwaadwillende gebruiker die waarde heeft gewijzigd en onze verwijderfunctie heeft veroorzaakt om een bericht te verwijderen dat niet daadwerkelijk werd vermeld?
Een manier om dit te voorkomen, is om nonces te gebruiken voor elke rij postgegevens, zodat de nonces een unieke naam krijgen met de postwaarde die moet worden verwijderd. Vervolgens controleren we de nonce bij het indienen van het formulier om te controleren of het een echte retourwaarde is.
function sui_delete_user_images ($ images_to_delete) $ images_deleted = 0; foreach ($ images_to_delete as $ user_image) if (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 ++; return $ images_deleted;
Nee en dat komt omdat WordPress bijlagen als normale berichten opslaat in de posts-databasetabel. Kijk zelf: alle bijlagen worden opgeslagen in de berichtentabel met een post_type van bijlage. Als u een bericht van het type user_images verwijdert, wordt de thumbnail-bijlage niet verwijderd. Het blijft in de mediabibliotheek voor toekomstig gebruik, tenzij we het specifiek verwijderen met wp_delete_attachment. Voor onze doeleinden dacht ik dat het het beste was om de bijlage te verwijderen wanneer het bericht van de gebruiker werd verwijderd.
Laten we ons eraan herinneren hoe de uitvoer van een html-bestandsinvoer eruit ziet wanneer een afbeelding naar uw script wordt geplaatst:
Array ([naam] => ref_blind.jpg [type] => image / jpeg [tmp_name] => / tmp / php79xI4e [fout] => 0 [grootte] => 106290)
We geven die array door aan de functie sui_process_image, samen met de id van de opgeslagen afbeelding van de gebruikersafbeelding en de ondertiteling van de gescande afbeelding.
function 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 ($ bestand, $ post_id); update_post_meta ($ post_id, '_thumbnail_id', $ attachment_id); $ attachment_data = array ('ID' => $ attachment_id, 'post_excerpt' => $ caption); wp_update_post ($ attachment_data); return $ attachment_id; Omdat bijlagen alleen gewone berichten zijn, werken we het bijschriftveld van de bijlage bij in het bewerkingsscherm van de mediabibliotheek, als we het veld post_excerpt voor de bijlage bijwerken..
We valideren ook de bestandsmatrix en de door de gebruiker geleverde afbeelding bijschrift met de functie sui_parse_file_errors.
function sui_parse_file_errors ($ file = ", $ image_caption) $ result = array (); $ result ['error'] = 0; if ($ bestand ['error']) $ result ['error'] =" Nee bestand geupload of er was een upload fout! "; return $ result; $ image_caption = trim (preg_replace ('/ [^ a-zA-Z0-9 \ s] + /',", $ image_caption)); if ($ image_caption == ") $ result ['error'] =" Uw bijschrift mag alleen letters, cijfers en spaties bevatten! "; return $ result; $ result ['caption'] = $ image_caption; $ image_data = getimagesize ($ file ['tmp_name']); if (! in_array ($ image_data ['mime'], unserialize (TYPE_WHITELIST))) $ result ['error'] = 'Je afbeelding moet een jpeg, png of gif zijn ! '; elseif (($ file [' size ']> MAX_UPLOAD_SIZE)) $ result [' error '] =' Je afbeelding was '. $ file [' size '].' bytes! Het mag niet groter zijn dan '. MAX_UPLOAD_SIZE. 'Bytes.'; Retourneer $ resultaat; Voeg deze stijlinformatie toe aan het style.css-bestand in uw themamap:
#sui_upload_image_form #sui_image_caption width: 500px; #user_images font-size: 12px; #user_images th text-align: left; #user_images td vertical-align: middle; #user_images td input margin: 0px;
Activeer de plug-in, zet de shortcode op een pagina, log in op uw site en test deze. Wanneer u een afbeelding uploadt, wordt een nieuw bericht weergegeven onder het menu Beheer van gebruikersafbeeldingen. Het zal in afwachting zijn van publicatie. Je ziet ook een nieuwe afbeelding in je mediabibliotheek, gekoppeld aan je nieuwe bericht en met het bijschrift zoals voorzien.
De broncode van de volledige plug-incode en een link naar de demosite staan bovenaan deze zelfstudie.
De bronmap bevat ook een Wordpress-paginasjabloon met een aangepaste lus die gepubliceerde afbeeldingen voor alle gebruikers weergeeft.
Wellicht wilt u een strengere validatie plaatsen bij uw beelduploads. Vergeet niet dat u gegevens accepteert van gebruikers die mogelijk ongepaste of opzettelijk ongepaste bestanden uploaden. Het controleren van het bestandstype en de grootte is een goed begin.
We hebben ook de bijlagebijschrift gemaakt door het post_excerpt-veld van de bijlage bij te werken. U kunt ook een bijlagebeschrijving instellen met behulp van het veld post_content van de bijlage.
