Bumuo ng isang portal ng kliyente sa WordPress

Nilalaman

• 01. Mag-install ng isang sariwang kopya ng WordPress
• 02. Alisin ang mga default na plugin
• 03. Magdagdag ng isang pasadyang uri ng post
• 04. Ang pagdaragdag / pag-edit ng interface ng uri ng pasadyang post
• 05. Lumikha ng isang pasadyang slug muling pagsulat
• 06. Magdagdag ng suporta para sa mga pasadyang patlang
• 07. Magdagdag ng mga pasadyang patlang
• 08. I-set up ang mga patlang
• 09. Lumikha ng file ng template ng WordPress
• 10. Lumikha ng isang buong lapad na solong layout ng post
• 11. Simulan ang loop at likhain ang nilalaman
• 12. Gumamit ng PHP upang tumawag sa mga pabuong halaga
• 13. Gumawa ng isang test customer na may ilang dummy data
• 14. Pangasiwaan ang mga error para sa anumang nawawalang data
• 15. Linisin ang interface
• 16. Ibukod ito mula sa sitemap

Ang pagkakaroon ng isang lugar na nagbibigay-daan sa mga gumagamit na mag-login at mag-download o tingnan ang mga dokumento ay inaasahan ng mga mamimili, mula sa mga kontrata sa telepono hanggang sa mga utility.

Kapag nagtatrabaho ang mga tagadisenyo sa kanilang mga kliyente, gayunpaman, ang lahat ay maaaring mabilis na masira sa isang putik ng mga email, mga link sa mga mockup at attachment.

Ipapakita ng tutorial sa WordPress na ito kung paano pahabain ang WordPress (magagamit ang iba pang mga serbisyo sa web hosting) sa isang portal ng kliyente na may kakayahang mag-imbak ng mga dokumento, video at guhit, upang ma-access ng isang kliyente ang lahat sa isang lugar. Ihahatid ng portal ang bawat customer na may isang natatanging at protektadong password na link na hindi lilitaw sa regular na pag-navigate.

Gagamitin ang mga pasadyang uri ng pag-post at mga patlang upang maiimbak ang data, at maidaragdag ang mga ito sa pamamagitan ng mga plugin, upang maiwasan ang pagkawala ng data kung magbago ang tema. Ang tema ay bahagyang mababago.

Ang pagkakaroon ng isang kliyente portal ay nagbibigay sa mga customer ng kaginhawaan ng pag-access sa kanilang mga file lahat sa parehong lugar, tuwing kailangan nila ang mga ito, tulad ng kapag gumagamit ng cloud storage. Mayroon itong isang hanay ng mga kalamangan sa negosyo, kabilang ang pagpapakita ng mga magagamit na pagbebenta, o maaaring magamit upang magbigay ng isang pangkalahatang ideya ng proseso ng trabaho mula sa simula sa pamamagitan ng biswal na paggalaw ng mga maihahatid.

I-download ang mga file para sa tutorial na ito

• Paano gawing isang visual builder ang WordPress

01. Mag-install ng isang sariwang kopya ng WordPress

Ang isang sariwang kopya ng WordPress ay naka-install sa development server, at ang tema na "understrap" ay napili upang magbigay ng isang pundasyon ng boilerplate upang mabilis na makapagsimula sa trabaho. Gagamitin ang plugin ng Custom Post Type UI upang ang aming mga pasadyang uri ng post ay malaya sa tema.

02. Alisin ang mga default na plugin

Kung may anumang mga default na plugin na kasama ng kopya ng WordPress, tanggalin ang mga iyon. Ang mga plugin na kinakailangan para sa tutorial na ito ay "Advanced Custom Customs" at "Custom Post Type UI". Na-install din ang "Classic Editor".

03. Magdagdag ng isang pasadyang uri ng post

Gamit ang interface ng Custom Post Type UI, magdagdag ng isang bagong uri ng post na tinatawag na "customer". Kapag pumapasok sa "Post type slug", gumamit ng mga underscore sa halip na mga puwang at sumulat sa isahan na form, dahil mapapadali nito ang paglikha ng mga template sa paglaon. Ang unlapi tu_ ay naidagdag upang mabawasan ang pagkakataon ng isang salungatan.

04. Ang pagdaragdag / pag-edit ng interface ng uri ng pasadyang post

Magdagdag ng isang maramihang may label na "mga customer" at isahan na "customer", dahil lilitaw ito sa menu ng admin ng WordPress. Tumatanggap ang capitalization sa mga patlang na ito, na gagawing mas maayos ang menu ng WordPress.

05. Lumikha ng isang pasadyang slug muling pagsulat

Ang paggamit ng isang unlapi para sa slug na uri ng post ay nangangahulugang ang mga customer na idinagdag sa portal ay lilikha ng isang link na mukhang "/ tu_customer / example-company". Mukha itong hindi maayos, at ang pasadyang slug na muling pagsulat ay ginagamit upang mapagbuti ito. Ang pagtatakda ng muling pagsulat ng slug sa "mga customer" ay nagbibigay-daan sa pasadyang uri ng post na lumitaw bilang / mga customer / halimbawa-kumpanya.

06. Magdagdag ng suporta para sa mga pasadyang patlang

Ang huling pagpipilian na pinagana para sa uri ng pasadyang post ay "Sinusuportahan> Pasadyang patlang" na matatagpuan malapit sa ilalim ng pahina. Lagyan ng tsek ito, at pagkatapos ay "magdagdag ng uri ng post" sa ilalim ng pahina. Nagsusumite ito ng mga pagbabago at nagrerehistro ng uri ng post.

07. Magdagdag ng mga pasadyang patlang

Ang mga pasadyang patlang ay kailangang idagdag at italaga sa uri ng post na nilikha lamang. Ang pagdaragdag ng isang pangkat ng patlang na pinangalanang "portal ng customer" ay ang unang hakbang, na sinusundan ng pagdaragdag ng mga pasadyang patlang dito gamit ang pindutan ng add field. Ang unang patlang na "maikling" ay maitatakda bilang uri ng patlang na "file," na nagpapahintulot sa admin na mag-upload ng isang file sa lokasyon na ito. Itakda ang halaga ng pagbalik sa "file url".

08. I-set up ang mga patlang

Ang susunod na idadagdag na larangan ay "talatanungan ng tatak." Ito ay binubuo ng isang link sa isang form sa google na dapat punan ng customer. Ang pinakaangkop na uri ng patlang para dito ay ang "URL". Ang parehong pamamaraan na ito ay maaaring magamit para sa lahat ng mga patlang na mai-link sa isang panlabas na serbisyo. Kapag tapos na, mag-scroll pababa sa kahon ng "lokasyon" at gamitin ang lohika na "Ipakita kung Mag-post ng Uri" = "Customer". Pagkatapos i-publish ang pangkat ng patlang.

09. Lumikha ng file ng template ng WordPress

Kailangang malaman ng WordPress kung paano magpakita ng isang dashboard ng customer. Para dito, sinusundan ang hierarchy ng template ng WordPress upang lumikha ng isang template file para sa partikular na uri ng post na ito. Lumikha ng isang file na tinatawag na single-tu_customer.php sa direktoryo ng root tema.

10. Lumikha ng isang buong lapad na solong layout ng post

Buksan ang solong-tu_customer.php file at idagdag ang get_header at get_footer WordPress function. Sa pagitan ng mga pagpapaandar na iyon, lumikha ng isang buong lapad na layout upang hawakan ang nilalaman na gumagana sa iyong tema.

? php get_header ();?> div id = "single-wrapper"> div id = "content" tabindex = "- 1"> div> div id = "pangunahing"> pangunahing id = "pangunahing"> -! Nilalaman -> / main> / div> / div>! - .row -> / div>! - #content -> / div>! - # single-wrapper ->? Php get_footer () ;?>

11. Simulan ang loop at likhain ang nilalaman

Sa loob ng pangunahing> elemento, tawagan ang_post at likhain ang mga elemento ng lalagyan upang humawak ng impormasyon. Gumamit ng impormasyon ng placeholder upang makakuha ng isang ideya ng layout, at simulang i-istilo ang mga elemento. Ang mga elemento ng card ay magiging mga card ng bootstrap na may isang header, paglalarawan at isang link.

main id = "main">? php habang (have_posts ()): the_post (); ?> var13 -> div> div> div> Nilalaman / div> div> Nilalaman / div> div> Nilalaman / div> / div> / div>? php samantala; // pagtatapos ng loop. ?> var13 -> / main>! - #main ->

12. Gumamit ng PHP upang tumawag sa mga pabuong halaga

Gamit ang pagpapaandar na "the_field", isang pag-andar na kasama ng advanced na plugin ng mga patlang na patlang, ang dinamikong nilalaman mula sa mga pasadyang patlang ay naipasok sa template ng customer. Ang 'field_name' ay ang halagang inilagay sa hakbang 3.

div> div> h5> Maikling / h5> p> Ito ang iyong orihinal na maikling dokumento / p> a href = "? php the_field ('maikling');?> var13 ->" target = "none"> Open / a > / div> / div>

13. Gumawa ng isang test customer na may ilang dummy data

Pag-access sa dashboard ng WordPress, maaaring idagdag ang isang bagong customer mula sa kaliwang bar. Mga Customer> Magdagdag ng bagong Customer. Pamilyar ang view ng post, ngunit ang pag-scroll pababa ay ihahayag ang lahat ng mga bagong pasadyang patlang. Magpasok ng ilang data ng pagsubok upang matiyak na ang lahat ay gumagana nang tama.

14. Pangasiwaan ang mga error para sa anumang nawawalang data

Kung ang isang dokumento ay nakalimutan, o napakadali lamang sa proseso upang magamit ang dokumentong iyon, maaaring nakalilito para sa isang customer kapag hindi gumana ang pindutan. Ang pagdaragdag ng isang tseke na ang isang halaga ay mayroon bago ipakita ito ay nagbibigay ng isang pagkakataon upang ipakita ang isang "nawawalang patlang" pagkakaiba-iba ng card. Ang pagdaragdag ng isang klase na "hindi pinagana" sa card kapag nawawala ang halaga ay magbibigay-daan sa amin na mag-istilo ng mga hindi magagamit na card.

? php if (get_field ('field_name')):?> var13 -> ipinakita kapag ang field_name ay may halaga? php sino pa man: // field_name ay bumalik ng hindi totoo?> var13 -> ipinakita kapag wala ang patlang? php endif ; // end of if field_name logic?> var13 ->

15. Linisin ang interface

Ngayon na ang istraktura ng interface ay natapos na, maaari itong mai-istilo nang maayos. Gamit ang CSS, maaaring mapabuti ang hitsura ng mga card at kulay sa pahina. Ang kulay para sa nabigasyon ay binago sa isang mas magaan na asul, at ang direksyon ng gumagamit ay napabuti sa pamamagitan ng pagdaragdag ng teksto ng pagpapakilala.

16. Ibukod ito mula sa sitemap

Ang mga pasadyang uri ng post ay hindi dapat makita sa mga resulta ng mga search engine. Ang uri ng post ay kailangang maibukod mula sa sitemap ng website, alinman sa pamamagitan ng isang SEO plugin, o manu-manong gumagamit ng isang meta tag at robots.txt.

meta name = "robots" content = "noindex, nofollow" /> User-agent: * Huwag payagan: / mga customer /

Nais bang magdisenyo ng isang bagong website? Gumamit ng isang makinang na tagabuo ng website upang gawing mas simple ang proseso.