Conţinut
- 01. Instalați o copie nouă a WordPress
- 02. Eliminați pluginurile implicite
- 03. Adăugați un tip de postare personalizat
- 04. Interfața personalizată de tip add / edit
- 05. Creați un slug de rescriere personalizat
- 06. Adăugați suport pentru câmpuri personalizate
- 07. Adăugați câmpuri personalizate
- 08. Configurați câmpurile
- 09. Creați fișierul șablon WordPress
- 10. Creați un aspect de postare cu lățime completă
- 11. Porniți bucla și creați conținutul
- 12. Folosiți PHP pentru a apela valori dinamice
- 13. Faceți un client de testare cu niște date fictive
- 14. Manipulați erorile pentru orice date lipsă
- 15. Ordonați interfața
- 16. Excludeți-l din sitemap
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 (sunt disponibile alte servicii de găzduire web) î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 folosite 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 utilizează stocarea în 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.
- Cum să transformi WordPress într-un constructor vizual
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 de tip boilerplate pentru a începe rapid lucrul. Va fi utilizat 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
Adăugați un plural etichetat „clienți” și „client” singular, 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.
05. Creați un slug de rescriere personalizat
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
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
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 „URL fișier”.
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șați dacă tip de postare” = „Client”. Apoi publicați grupul de câmp.
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ă
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.
? php get_header ();?> div id = "single-wrapper"> div id = "content" tabindex = "- 1"> div> div id = "primary"> main id = "main"> -! Conținut -> / main> / div> / div>! - .row -> / div>! - #content -> / div>! - # single-wrapper ->? Php get_footer () ;?>
11. Porniți bucla și creați conținutul
În elementul principal, apelați the_post și creați elementele containerului pentru a păstra informații. Utilizaț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.
main id = "main">? php while (have_posts ()): the_post (); ?> var13 -> div> div> div> Content / div> div> Content / div> div> Content / div> / div> / div>? php final; // sfârșitul buclei. ?> var13 -> / main>! - #main ->
12. Folosiți PHP pentru a apela valori dinamice
Folosind funcția „câmpul_”, 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.
div> div> h5> Brief / h5> p> Acesta este documentul dvs. original original / p> a href = "? php the_field ('brief');?> var13 ->" target = "none"> Open / a > / div> / div>
13. Faceți un client de testare cu niște date fictive
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ă
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ă” pe card atunci când valoarea lipsește ne va permite să stilăm cărțile indisponibile.
? php if (get_field ('field_name')):?> var13 -> afișat atunci când field_name are o valoare? php else: // field_name returned false?> var13 -> afișat când câmpul nu există? php endif ; // sfârșitul logicii denumirii câmpului?> var13 ->
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 web, fie printr-un plugin SEO, fie manual folosind o metaetichetă și robots.txt.
meta name = "robots" content = "noindex, nofollow" /> User-agent: * Disallow: / customers /
Doriți să proiectați un nou site web? Folosiți un constructor de site-uri genial pentru a simplifica procesul.
