Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Plugins
Code

Дазвольце карыстальнікам адпраўляць малюнкі на ваш сайт WordPress

by
Length:LongLanguages:

Belarusian (беларуская мова) translation by Katharina Nevolina (you can also view the original English article)

У гэтым уроку вы даведаецеся, як стварыць плагін, які дазваляе карыстальнікам адпраўляць малюнкі і загружаць іх у медыя-бібліятэку WordPress. Вы таксама даведаецеся, як правільна выдаляць выявы з медыя-бібліятэкі WordPress, а таксама выконваць базавую праверку загружаных малюнкаў.


Папярэдне ...

Гэты ўрок створаны па просьбе некаторых карыстальнікаў, якія знайшлі цікавым урок па плагінам quotes, але былі асабліва зацікаўлены ў тым, як выкарыстоўваць той жа метад для загрузкі малюнкаў з інтэрфейсу.  Такім чынам, вось паўтор гэтага ўроку, які робіць менавіта гэта. Падрабязную інфармацыю пра наладу плагінаў, кароткіх кодаў і nonces см. у папярэднім уроке.

Плагін будзе:

  • адлюстроўваць форму загрузкі малюнка з выкарыстаннем кароткага кода
  • прымаць толькі малюнкі пэўнага тыпу і максімальнага памеру
  • дадаваць карыстацкі тып паведамлення для карыстацкіх малюнкаў
  • дадаваць малюнкі ў медыятэку WordPress з адпаведным прымацаваным надпісам
  • адлюстроўваць неапублікаваныя малюнкі
  • дазволіць карыстальнікам выдаляць свае неапублікаваныя малюнкі

Мы будзем выкарыстоўваць убудаванае тэкставае поле для малюнкаў у WordPress (aka Рэкамендуемый малюнак), каб утрымаць малюнак для кожнага паведамлення.  Гэта таксама палягчае адлюстраванне і працу з нашым малюнкам, так як мы можам выкарыстоўваць функцыі post_thumbnail.

Вось да чаго мы імкнемся:

Увесь код даступны ў крыніцы плагіна ў пачатку гэтага кіраўніцтва.


Крок 1 Налада плагіна

Стварыце файл плагіна з імем submit_user_images.php ў каталогу wp-content / plugins / submit-user-images.

Звярніцеся да крыніцы плагіна для інфармацыі загалоўка плагіна.


Крок 2 Функцыя ініцыялізацыі плагіна

Мы збіраемся стварыць персаналізаваны тып паведамлення з імем user_images для захоўвання нашых малюнкаў карыстальнікаў і карыстацкай таксанаміі з імем user_image_category.  Гэта ўключыць больш чыстае адміністраванне малюнкаў, чым проста прыпісваць іх звычайным паведамленням і катэгорыям.

Ініцыятыўная пастка і функцыя

Мы будзем выкарыстоўваць наступны код ініцыялізацыі для стварэння нашага наладжвальнага тыпу паведамленняў і карыстацкай таксанаміі:

Што робіць гэты код:

Зараз у нас з'явіцца меню User Images ў нашай панэлі кіравання адміністратара і спосаб адміністравання малюнкаў карыстальнікаў і іх катэгорый.


Крок 3 Налада некаторых значэнняў па змаўчанні

Нам трэба зрабіць некаторую базавую праверку, таму давайце вызначым дзве канстанты для далейшага выкарыстання:


Крок 4 Вызначце кароткі код

Мы вызначым кароткі код, які дазволіць нам адлюстроўваць (і апрацоўваць) форму адпраўкі малюнкаў карыстальніка ў паведамленні або на старонцы:


Бяспека

Паколькі наш плагін прымае дадзеныя ад карыстальніка, мы рэалізуем наступныя механізмы бяспекі:

  • толькі зарэгістраваныя карыстальнікі маюць доступ да формы адпраўкі малюнка
  • мы выкарыстоўваем nonces для праверкі таго, што формы былі згенераваны нашым плагінам
  • малюнкі перадаюцца з выкарыстаннем wp_insert_post, які дэзактывіруе дадзеныя перад захаваннем іх у базе дадзеных
  • карыстальнікі могуць праглядаць толькі свае ўласныя малюнкі, а nonces не дазваляе ім выдаляць паведамленні іншых карыстальнікаў

Крок 5 Асноўная функцыя

Гэта функцыя, выкліканая нашым кароткім кодам.  Ён адлюстроўвае і апрацоўвае форму адпраўкі малюнка і форму для раздрукоўкі / выдалення малюнка. Мы будзем браць яго маленькімі кавалачкамі, і на кроку 6 мы разгледзім дапаможныя функцыі.

  • праверце, ці ўвайшоў карыстач у сістэму
  • захапіце зменную WordPress $ current_user, якую нам трэба атрымаць для ID нашага карыстальніка
  • калі форма выявы была адпраўлена, будзе поле sui_upload_image_form_submitted, якое было створана нашай функцыяй wp_nonce_field.  Затым мы можам праверыць nonce і прыступіць да апрацоўкі прадстаўленага малюнка
  • выканайце праверку шляхам перадачы ўваходнага файла (дзе захоўваюцца дадзеныя загружанага малюнка) і ўваходных дадзеных загалоўка ў функцыю праверкі, sui_parse_file_errors і адлюстравання любых вернутых памылак
  • пабудуйце масіў, у якім стан паведамлення трэба адкласці (адміністратару зараз трэба будзе зацвердзіць яго для публікацыі), усталюйце тып паведамлення user_images (наш карыстацкі тып паведамлення) і ўсталюйце аўтара паведамлення з выявай ў бягучы ўваход у сістэму карыстальніка
  • калі паведамленне аб малюнку было паспяхова ўстаўлена, захавайце малюнак у медыятэцы WordPress (sui_process_image) і, нарэшце, усталюйце катэгорыю для паведамлення малюнка і адлюструйце паведамленне аб паспяховым завяршэнні 
  • калі была адпраўлена форма выдалення малюнка, будзе поле sui_form_delete_submitted, якое было створана нашай функцыяй wp_nonce_field. Затым мы можам праверыць nonce і перайсці да апрацоўкі масіва малюнкаў, правераных для выдалення 
  • мы правяраем, што на самой справе ў нас ёсць некаторыя малюнкі, правераныя для выдалення, шляхам тэставання $ _POST ['sui_image_delete_id']. Калі гэта так, мы перадаем іх функцыі sui_delete_user_images (гл. Крок 6) 
  • калі выявы былі выдалены, адлюстроўваецца паведамленне аб паспяховым завяршэнні 
  • мы выводзім форму загрузкі малюнка 
  • нарэшце, мы выводзім форму спісу / выдалення малюнкаў, перадаючы ідэнтыфікатар карыстальніка функцыі sui_get_user_images_table (гл . Крок 6) 

Крок 6 Дапаможныя функции

Тут мы разгледзім функцыі, якія генеруюць формы, дадаюць выявы ў медыя-бібліятэку і функцыю, якая выдаляе выбраныя малюнкі. 

  • функцыя прымае 2 апцыянальных аргумента для паўторнага запаўнення палёў формы. Гэта зручна для карыстальніка.  Гэта зручна для карыстальніка. 
  • выводзіцца поле nonce, якое мы правяраем пры адпраўке формы; 
  • выводзім выпадальнае меню для катэгорый малюнкаў, выклікаючы sui_get_image_categories_dropdown (гл. Наступную функцыю); 
  • функцыя прымае 2 аргумента, уключая элемент ID, абранай ў дадзены момант катэгорыі 
  • мы выкарыстоўваем функцыю WordPress wp_dropdown_categories для стварэння расчыняючага спісу, у якім пералічаны катэгорыі карыстацкіх малюнкаў з таксанаміі user_image_category (наша карыстацкая таксанамія). 
  • прымае ID карыстальніка, таму што нам трэба атрымаць спіс карыстацкіх малюнкаў толькі для бягучага карыстальніка 
  • стварае $ args, каб паказаць нашага карыстальніка, тып паведамлення user_images і прыстасаваныя малюнкі, якія знаходзяцца на разглядзе (яшчэ не апублікаваныя адміністратарам); 
  • выконвае карыстацкі запыт з выкарыстаннем WP_Query
  • вярнуць false, калі наш запыт не вяртае ніякія малюнкі карыстальніка
  • запусціць форму і згенераваць nonce для формы
  • пракруціць запісы малюнкаў, каб пераканацца, што мы таксама захопім катэгорыю паведамлення аб малюнку
  • стварыце сцяжок nonce для выдалення малюнка, прысвойце унікальнае імя для nonce, аб'яднаўшы ID паведамлення малюнка карыстальніка
  • выснову радка табліцы, якая змяшчае інфармацыю аб паведамленні малюнка, а таксама флажок выдалення. 

Навошта дадаваць nonce для кожнага малюнка? 

Формамі можна маніпуляваць у браўзэры для адпраўкі нечаканых дадзеных. У нашым выпадку кожнаму флажку delete прысвойваецца значэнне паведамлення. Але што, калі зламысны карыстальнік змяніў гэта значэнне і прымусіў нашу функцыю выдалення адмяніць паведамленне, якое на самай справе не пазначана?

Адзін са спосабаў пазбегнуць гэтага - выкарыстоўваць nonces для кожнага радка паштовых дадзеных, забяспечваючы унікальнасць імя nonce, пры гэтым значэнне слупка павінна быць выдалена.  Затым мы правяраем паведамленне nonce пры адпраўцы формы, каб пераканацца, што гэта сапраўднае вяртальнае значэнне. 

  • функцыя прымае масіў ID паведамленняў малюнка для выдалення 
  • кожны ID паведамлення малюнка правяраецца, каб даведацца, ці было для яго згенеравана nonce
  • калі nonce правяраецца, мы выдаляем ўкладанне малюнка, якое існуе ў медыя-бібліятэцы, перадаючы ID малюнка паведамлення ў функцыю WordPress wp_delete_attachment. 
  • мы таксама выдаляем паведамленне малюнка з дапамогай функцыі WordPress wp_trash_post

Але не выдаляецца ці ўкладанне эскізаў, калі паведамленне абарвана?

Не, і гэта таму, што WordPress захоўвае ўкладання як звычайныя запісы ў табліцы базы дадзеных паведамленняў. Паглядзіце самі: усе ўкладанні захоўваюцца ў табліцы паведамленняў з post_type attachment.  Простае выдаленне тыпу карыстальніка user_images не выдаляе яго ўкладанне ў мініяцюру. Ён застаецца ў медыя-бібліятэцы для будучага выкарыстання, калі мы спецыяльна не выдалім яго з дапамогай wp_delete_attachment. Для нашых мэтаў я падумаў, што лепш выдаляць ўкладанне, калі паведамленне карыстальніка было выдаленае. 


Крок 7 Функцыі апрацоўкі малюнкаў

Нагадаем, як выглядае выснова ўводу файла html, калі ён змяшчае малюнак у ваш скрыпт: 

Мы перадаем гэты масіў да функцыі sui_process_image разам з ідэнтыфікатарам захаванага запісу выявы карыстальніка і загалоўкам падчышчанага малюнка. 

  • нам трэба ўключыць сцэнарыі адміністратара WordPress, якія апрацоўваюць загрузку малюнкаў за кадрам 
  • мы выклікаем функцыю media_handle_upload (якая з'яўляецца часткай мэдыяфайла .php),  перадаючы яму загружаны масіў файлаў і ідэнтыфікатар паведамлення. 
  • зараз у нас ёсць ідэнтыфікатар ўкладання, які мы можам выкарыстоўваць з дапамогай update_post_meta, каб прызначыць укладанне для паведамлення ў выглядзе мініяцюры.  Заўвага: "_thumbnail_id" спасылаецца на мета-поле ўнутранай мініяцюры (апрацаваны малюнак).  Ўнутраныя паля Wordpress пачынаюцца з падкрэслення. 
  • затым мы выкарыстоўваем ідэнтыфікатар ўкладання, каб абнавіць загаловак ўкладання, выкарыстоўваючы функцыю wp_update_post

Паколькі ўкладанні - эт проста рэгулярныя паведамленні, калі мы абнаўляем поле post_excerpt для ўкладання, мы фактычна абнаўляем поле загалоўка ўкладання, як паказана на экране рэдагавання медыя-библиотеки.

Функция праверкі. 

Мы таксама правяраем масіў файлаў і карыстацкі подпіс выявы з дапамогай функцыі sui_parse_file_errors. 

  • праверыць элемент памылкі масіва файлаў для памылкі загрузкі html, калі ён знойдзены, вяртае масіў вынікаў з памылкай 
  • запусціце некаторы рэгулярны выраз у загалоўку выявы, каб выдаліць усё, акрамя літарна-лічбавых дадзеных і прабелаў, замяняючы прабелы для зручнасці чытання 
  • калі ў нас заканчваецца пустой загаловак пасля яго ачысткі, мы вяртаем памылку
  • праверце ўнутраны тып малюнка (не давярайце пашырэнню файла) з дапамогай функцыі PHP getimagesize з пастаяннай TYPE_WHITELIST 
  • праверце памер малюнка насуперак канстанце MA X_UPLOAD_SIZE

Крок 8 Некаторыя стылі. 

Проста адкіньце гэтую інфармацыю пра стыль у файл style.css ў папке тэмы: 


Крок 9 Паспрабуйце 

Актывуйце плагін, увядзіце кароткі код на старонцы, зайдзіце на свой сайт і праверце яго. Калі вы загрузіце малюнак, вы ўбачыце новае паведамленне ў меню Карыстацкія малюнкі.  Ён будзе апублікаваны. Вы таксама ўбачыце новы малюнак, уключанае ў вашу медыя-бібліятэку, прымацаванае да вашага новага паведамлення, з загалоўкам, як прадугледжана. 

Полная крыніца кода плагіна і спасылка на дэма-сайт пазначаны ў верхняй частцы гэтага ўрока. 

Зыходная папка таксама змяшчае шаблон старонкі Wordpress з наладжвальным цыклам, які адлюстроўвае апублікаваныя малюнкі для ўсіх карыстальнікаў. 


Апошнія думкі

Магчыма, вы захочаце ўсталяваць больш строгую праверку на загрузку малюнкаў.  Памятайце, што вы прымаеце дадзеныя ад карыстальнікаў, якія могуць выпадкова ці зламысна загружаць непрымальныя файлы.  Праверка тыпу і памеру файла з'яўляецца добрым пачаткам. 

Таксама мы стварылі загаловак прыкладання, абнавілі поле ўкладання post_excerpt.  Вы таксама можаце ўсталяваць апісанне ўкладання, выкарыстоўваючы поле ўкладання post_content.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.