Construiți un portal pentru clienți cu WordPress

Construiți un portal pentru clienți cu WordPress
(Credit imagine: Web Designer)

Deținerea unei zone care permite utilizatorilor să se conecteze și să descarce sau să vizualizeze documente a devenit de așteptat de către consumatori, de la contracte telefonice până la utilități.

Cu toate acestea, atunci când designerii lucrează cu clienții lor, totul se poate descompune rapid într-o confuzie de e-mailuri, linkuri către machete și atașamente.

Acest Tutorial WordPress va arăta cum să extindeți WordPress (alt web hosting serviciile sunt disponibile) într-un portal pentru clienți capabil să stocheze documente, videoclipuri și desene, astfel încât un client să le poată accesa pe toate într-un singur loc. Portalul va deservi fiecare client cu un link unic și protejat prin parolă care nu apare în navigarea obișnuită.



Tipurile și câmpurile de postare personalizate vor fi utilizate pentru a stoca datele, iar acestea vor fi adăugate prin intermediul pluginurilor, pentru a evita pierderea datelor în cazul în care tema se schimbă. Tema va fi ușor modificată.

Deținerea unui portal pentru clienți oferă clienților confortul de a accesa fișierele lor în același loc, ori de câte ori au nevoie de ele, la fel ca atunci când folosesc Stocare in cloud . Are o serie de avantaje comerciale, inclusiv afișarea vânzărilor disponibile sau poate fi folosit pentru a oferi o imagine de ansamblu a procesului de lucru de la început, prin conturarea vizuală a livrabilelor.

Descărcați fișierele pentru acest tutorial.

01. Instalați o copie nouă a WordPress

O nouă copie a WordPress este instalată pe serverul de dezvoltare, iar tema „understrap” a fost aleasă pentru a oferi o fundație pentru a începe rapid lucrul. Va fi folosit pluginul UI pentru tipul de post personalizat, astfel încât tipurile noastre de postări personalizate să fie independente de temă.

02. Eliminați pluginurile implicite

Dacă vreun plugin implicit a venit cu copia WordPress, ștergeți-le. Pluginurile necesare pentru acest tutorial sunt „Advanced Custom Fields” și „Custom Post Type UI”. De asemenea, a fost instalat „Editor clasic”.

03. Adăugați un tip de postare personalizat

Folosind interfața UI Custom Post Type, adăugați un nou tip de postare numit „client”. Când introduceți „Post tip slug”, utilizați sublinierea în loc de spații și scrieți în formă singulară, deoarece acest lucru va facilita crearea șabloanelor ulterior. Prefixul tu_ a fost adăugat pentru a reduce șansele unui conflict.

04. Interfața personalizată de tip add / edit

Construiți un portal client cu WordPress: interfața de tipare postare personalizată adăugați / editați

Adăugați etichete atât la singular, cât și la plural(Credit imagine: Web Designer)

Adăugați un plural etichetat „clienți” și singular „client”, deoarece acesta va apărea în meniul de administrare WordPress. Scrierea cu majuscule este acceptată în aceste câmpuri, ceea ce va face ca meniul WordPress să fie mai ordonat.

cum să atragă fața unui bărbat

05. Creați un slug de rescriere personalizat

Construiți un portal client cu WordPress: creați un slug de rescriere personalizat

Utilizați slugul de rescriere personalizat pentru o experiență mai bună a utilizatorului(Credit imagine: Web Designer)

Utilizarea unui prefix pentru slugul de tip postare va însemna că clienții adăugați la portal vor fi creați cu un link care arată ca „/ tu_customer / example-company”. Acest lucru nu pare ordonat, iar slugul de rescriere personalizat este folosit pentru a îmbunătăți acest lucru. Setarea slugului de rescriere la „clienți” permite ca tipul de postare personalizată să apară ca / ​​clienți / exemplu-companie.

06. Adăugați suport pentru câmpuri personalizate

Construiți un portal client cu WordPress: adăugați suport pentru câmpuri personalizate

Bifați opțiunea „Câmp personalizat” și trimiteți modificările(Credit imagine: Web Designer)

Ultima opțiune care este activată pentru tipul de postare personalizată este „Suporturi> Câmp personalizat” care se găsește în partea de jos a paginii. Bifați această opțiune, apoi „adăugați tip de postare” în partea de jos a paginii. Aceasta trimite modificările și înregistrează tipul postării.

07. Adăugați câmpuri personalizate

Construiți un portal client cu WordPress: adăugați câmpuri personalizate

Acum trebuie să adăugați câmpuri personalizate la noul dvs. tip de postare(Credit imagine: Web Designer)

Câmpurile personalizate trebuie acum adăugate și atribuite tipului de post care tocmai a fost creat. Adăugarea unui grup de câmpuri numit „portalul clienților” este primul pas, urmat de adăugarea de câmpuri personalizate la acesta cu butonul Adăugare câmp. Primul câmp „scurt” va fi setat ca tip de câmp „fișier”, care permite administratorului să încarce un fișier în această locație. Setați valoarea returnată la „fișier URL”.

08. Configurați câmpurile

Următorul câmp care trebuie adăugat este „chestionar de marcă”. Acesta va consta dintr-un link către un formular Google pe care clientul ar trebui să îl completeze. Cel mai potrivit tip de câmp pentru aceasta este „URL”. Aceeași metodă poate fi utilizată pentru toate câmpurile care se vor conecta la un serviciu extern. Când ați terminat, derulați în jos până la caseta „locație” și utilizați logica „Afișează dacă tipul postării” = „Client”. Apoi publicați grupul de câmp.

Generați CSS

Rezervați-vă biletele la Generate CSS acum pentru a economisi 50 GBP(Credit de imagine: Getty / Future)

09. Creați fișierul șablon WordPress

WordPress trebuie să știe cum să afișeze un tablou de bord al clientului. Pentru aceasta, ierarhia șablonului WordPress este urmată pentru a crea un fișier șablon pentru acest tip de postare specifică. Creați un fișier numit single-tu_customer.php în directorul temei rădăcină.

10. Creați un aspect de postare cu lățime completă

Construiți un portal pentru clienți cu WordPress: creați un aspect de postare cu lățime completă

Creați un aspect cu lățime completă pentru conținutul dvs.(Credit imagine: Web Designer)

Deschideți fișierul single-tu_customer.php și adăugați funcțiile get_header și get_footer WordPress. Între aceste funcții, creați un aspect cu lățime completă pentru a conține conținutul care funcționează cu tema dvs.

11. Porniți bucla și creați conținutul

Construiți un portal client cu WordPress: Porniți bucla și creați conținutul

Utilizați substituenți pentru a vă prezenta conținutul(Credit imagine: Web Designer)

În cadrul elementului, apelați the_post și creați elementele containerului pentru a păstra informații. Folosiți informații de substituent pentru a vă face o idee despre aspect și începeți să stilizați elementele. Elementele cardului vor fi carduri bootstrap cu antet, descriere și link.

Content Content Content

12. Folosiți PHP pentru a apela valori dinamice

Folosind funcția „the_field”, o funcție care vine împreună cu pluginul avansat de câmpuri personalizate, conținutul dinamic din câmpurile personalizate este introdus în șablonul clientului. „Field_name” este valoarea introdusă la pasul 3.

Brief

This is your original brief document

Open

13. Faceți un client de testare cu niște date fictive

Construiți un portal pentru clienți cu WordPress: Faceți un client de testare cu niște date fictive

Accesați tabloul de bord WordPress pentru a crea un client fals(Credit imagine: Web Designer)

Accesând tabloul de bord WordPress, un nou client poate fi adăugat din bara din stânga. Clienți> Adăugați un client nou. Vizualizarea postării va fi familiară, dar derularea în jos va dezvălui toate noile câmpuri personalizate. Introduceți câteva date de testare pentru a vă asigura că totul funcționează corect.

14. Manipulați erorile pentru orice date lipsă

Construiți un portal client cu WordPress: gestionați erorile pentru orice date lipsă

Asigurați-vă că este clar când documentele nu sunt disponibile(Credit imagine: Web Designer)

Dacă un document este uitat sau pur și simplu este prea devreme în proces pentru ca acel document să fie disponibil, ar putea fi confuz pentru un client atunci când butonul nu funcționează. Adăugarea unei verificări a existenței unei valori înainte de afișare a acesteia oferă șansa de a afișa o variantă a „câmpului lipsă” a cărții. Adăugarea unei clase „dezactivată” la card atunci când valoarea lipsește ne va permite să stilăm cărțile indisponibile.

displayed when the field_name has a value displayed when the field does not exist

15. Ordonați interfața

Acum că structura interfeței este finalizată, poate fi stilizată corect. Folosind CSS, aspectul cărților și culorilor de pe pagină poate fi îmbunătățit. Culoarea pentru navigare a fost schimbată într-un albastru mai deschis, iar direcția utilizatorului a fost îmbunătățită prin adăugarea de text de introducere.

16. Excludeți-l din sitemap

Tipurile de postări personalizate nu trebuie găsite în rezultatele motoarelor de căutare. Tipul de postare trebuie exclus din sitemap-ul site-ului, fie printr-un plugin SEO, fie manual folosind o metaetichetă și robots.txt.

User-agent: * Disallow: /customers/

Doriți să proiectați un nou site web? Folosiți un strălucitor constructor de site-uri web pentru a face procesul super-simplu.

Articole similare: