Construiți un portal client cu WordPress

Feb 8, 2026
să
Build a client portal with WordPress
(Credit Imagine: Web Designer)

Având o zonă care permite utilizatorilor să se conecteze și să descărcă sau să vizualizeze documentele de așteptare de către consumatori, de la contractele de telefon la utilități.

Atunci când designerii lucrează cu clienții lor, totuși, totul se poate descompune rapid într-o mizerie de e-mailuri, legături către Mockups și atașamente.

Acest WordPress Tutorial. va arăta cum să extindeți WordPress (altele web hosting Serviciile sunt disponibile) într-un portal client capabil să stocheze documente, videoclipuri și desene, astfel încât un client le poate accesa toate într-un singur loc. Portalul va servi fiecărui client cu un link unic și protejat prin parolă care nu apare în navigația obișnuită.

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

Având un portal client oferă clienților comoditatea 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 se utilizează Stocare in cloud . Are o serie de avantaje de afaceri, inclusiv afișarea disponibilă în sus, sau poate fi utilizată pentru a oferi o imagine de ansamblu asupra procesului de lucru de la început prin prezentarea vizuală a rezultatelor.

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

  • Cum să transformi WordPress într-un constructor vizual

01. Instalați o nouă copie a WordPress

O copie proaspătă a WordPress este instalată pe serverul de dezvoltare, iar tema "Underc" a fost aleasă pentru a oferi o fundație plină de cazane pentru a începe rapid munca. Pluginul personalizat de tip UI va fi utilizat astfel încât tipurile noastre personalizate să fie independente de temă.

02. Eliminați pluginurile implicite

Dacă există un plugin-uri implicite cu copia WordPress, ștergeți-le. Pluginurile necesare pentru acest tutorial sunt "câmpuri personalizate avansate" și "personalizat post de tip UI". "Editorul clasic" a fost, de asemenea, instalat.

03. Adăugați un tip poștal personalizat

Folosind interfața personalizată de tip UI, adăugați un mesaj nou numit "Client". Când introduceți "Slugul de tip post", utilizați subliniere în loc de spații și scrieți în formă singulară, deoarece acest lucru va face mai ușor să creați șabloane mai târziu. Prefixul TU_ a fost adăugat pentru a reduce șansa unui conflict.

04. Interfața de tip Adăugare / Editare personalizată

Build a client portal with WordPress: The add/edit custom post type interface

Adăugați ambele etichete singulare și plural (Credit Imagine: Web Designer)

Adăugați un "Clienți" Plural Laberal "și singular" Client ", deoarece acest lucru va apărea în meniul Admin WordPress. Capitalizarea este acceptată în aceste domenii, ceea ce va face meniul WordPress TIDier.

05. Creați un slug de rescriere personalizat

Build a client portal with WordPress: Create a custom rewrite slug

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

Folosirea unui prefix pentru tipul de tip post va însemna că clienții adăugați la portal vor fi creați cu un link care arată "/ tu_customer / exemplu companie". Acest lucru nu arata ordonat, iar slugul de rescriere personalizat este folosit pentru a imbunatati acest lucru. Stabilirea rescrierii la "Clienții" permite ca tipul poștal personalizat să apară ca / ​​clienți / exemplare-companie.

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

Build a client portal with WordPress: Add support for custom fields

Bifați opțiunea "Câmpul personalizat" și trimiteți modificările (Credit Imagine: Web Designer)

Ultima opțiune care este activată pentru tipul poștal personalizat este "suports & gt, câmp personalizat", care se găsește în apropierea fundului paginii. Bifați acest lucru și apoi "Adăugați tipul de tip" din partea de jos a paginii. Acest lucru depune modificările și înregistrează tipul de post.

07. Adăugați câmpuri personalizate

Build a client portal with WordPress: Add custom fields

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

Câmpurile personalizate trebuie să fie adăugate și atribuite tipului de post care a fost creat. Adăugarea unui grup de câmp numit "Portalul Clientului" este primul pas, urmat de adăugarea câmpurilor personalizate la acesta cu butonul Adăugare câmp. Primul câmp "Scurt" va fi setat ca fișier de tip câmp ", care permite administratorului să încarce un fișier în această locație. Setați valoarea de returnare la "URL-ul fișierului".

08. Configurați câmpurile

Câmpul următor care trebuie adăugat este "chestionarul de brand". Acest lucru va consta într-o legătură cu o formă Google pe care clientul ar trebui să o completeze. Cel mai potrivit tip de câmp pentru aceasta este "URL". Aceeași metodă poate fi utilizată pentru toate câmpurile care vor fi conectate la un serviciu extern. Când ați terminat, derulați în jos la caseta "Locație" și utilizați logica "Afișați dacă tip post" = "Client". Apoi publicați grupul de câmp.

Generate CSS

Rezervați biletele pentru a genera CSS acum pentru a economisi £ 50 (Credit Imagine: Getty / Viitor)

09. Creați fișierul șablon WordPress

WordPress trebuie să știe cum să afișeze un tablou de bord al clientului. Pentru aceasta, ierarhia de șablon WordPress este urmată pentru a crea un fișier șablon pentru acest tip de post specific. Creați un fișier numit Single-TU_CUSTOMER.PHP în directorul temă rădăcină.

10. Creați un aspect post-o singură lățime

Build a client portal with WordPress: Create a full-width single post layout

Faceți un aspect cu lățime întreagă pentru conținutul dvs. (Credit Imagine: Web Designer)

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

 & lt;? Php get_header ();? & Gt;
& Lt; Div Clasa = "ID-ul" ID = "Single-wrapper" & GT;
& Lt; Div Clasa = "Conținutul" id = "Conținut" Tabindex = "- 1" & GT;
& lt; div clasa = "rând" & gt;
& lt; div Clasa = "Zona de conținut Col-MD" ID = "primar" & GT;
& lt; principala clasă = "site-principal" id = "principal" & gt; -! Conținut - & gt; / lt; / principal & gt;
& lt; / div & gt;
& lt; / div & gt; -. - .ro- & gt;
& lt; / div & gt; - #content - & gt;
& lt; / div & gt;! - # # un singur wrapper - & gt;
& lt; php get_foooter ();? & gt;

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

Build a client portal with WordPress: Start the loop and create the content

Utilizați instrucțiuni pentru a vă stabili conținutul (Credit Imagine: Web Designer)

În interiorul "principalelor & GT; Element, apelați_post și creați elementele containerului pentru a ține informații. Utilizați informații despre înlocuire pentru a obține o idee despre aspect și începeți să stilului elementelor. Elementele de card vor fi carduri de bootstrap cu un antet, descriere și un link. 

 & lt; principala clasă = "site-principal" id = "principal" & gt;
& lt; php în timp ce (have_posts ()): the_post (); ? & gt;
& lt; div clasa = "container" & gt;
& lt; div clasa = "rând" & gt;
& Lt; Div Clasa = "Col-SM-4" & GT; Conținut & Lt; / Div & Gt;
& Lt; Div Clasa = "Col-SM-4" & GT; Conținut & Lt; / Div & Gt;
& Lt; Div Clasa = "Col-SM-4" & GT; Conținut & Lt; / Div & Gt;
& lt; / div & gt;
& lt; / div & gt;
& lt;? php în a end? // capătul buclă. ? & gt;
& lt; / principal & gt; - #main - & gt;

12. Folosiți PHP pentru a apela valori dinamice

Folosind funcția "The_field", o funcție care vine cu pluginul de câmpuri personalizate avansate, conținutul dinamic din câmpurile personalizate este introdus în șablonul clientului. "Field_name" este valoarea introdusă în pasul 3. 

 & Lt; div Clasa = "Card Text-Center" & GT;
& lt; div clasa = "cardul card" & gt;
& lt; h5 clasa = "titlul cardului" & scurt; / h5 & gt;
& Lt; P Class = "Card-Text" & GT; Acesta este documentul dvs. original scurt și lt; / p & gt;
& lt; un href = "" PHP The_field ("Scurt"); "" Target = "Nimic" Clasa = "BTN BTN-Primary" & GT; / A & GT;
& lt; / div & gt;
& lt; / div & gt;

13. Faceți un client de testare cu unele date dummy

Build a client portal with WordPress: Make a test customer with some dummy data

Mergeți la tabloul de bord WordPress pentru a face un client dummy (Credit Imagine: Web Designer)

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

14. Gestionați erorile pentru orice date lipsă

Build a client portal with WordPress: Handle errors for any missing data

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

Dacă un document este uitat sau este pur și simplu prea devreme în procesul de disponibil pentru acest document, acesta ar putea fi confuz pentru un client atunci când butonul nu funcționează. Adăugând o verificare dacă există o valoare înainte de a arăta că oferă o șansă de a afișa o variație "câmp lipsă" a cardului. Adăugarea unei clase "Dezactivat" la card atunci când valoarea lipsește ne va permite să formăm cărți indisponibile. 

 & lt; php dacă (get_field ('câmp_name')):? & Gt;
afișat când câmpul de câmp are o valoare
& lt; PHP: // Field_name a returnat fals? & gt;
afișate când câmpul nu există
& lt;? PHP ENDIF; // capătul lui Field_name logic? & gt;

15. ordonați interfața

Acum că structura interfeței este finalizată, acesta poate fi în mod corespunzător. Folosind CSS, aspectul cardurilor și culorilor de pe pagină poate fi îmbunătățit. Culoarea pentru navigație a fost schimbată într-un albastru mai ușor, iar direcția utilizatorului a fost îmbunătățită prin adăugarea textului introducerii.

16. excludeți-l din sitemap

Tipurile poștale personalizate nu ar trebui să fie găsite în rezultatele motoarelor de căutare. Tipul de poștă trebuie exclus din site-ul site-ului site-ului, fie printr-un plugin SEO, fie prin utilizarea manuală a unei metag și robots.txt. 

 META NAME = "Roboții" Conținut = "NoIndex, Nofollow" / & GT;
Agent utilizator: *
Nu permiteți: / Clienți /

Doriți să proiectați un nou site web? Utilizați un strălucit Builder de site-uri web pentru a face procesul super-simplu.

Articole similare:

  • Cele mai bune servicii de găzduire WordPress în 2019
  • 13 instrumente excelente pentru pitching către clienți
  • WordPress site-uri: 14 exemple minunate

să - Cele mai populare articole

Cum să trageți un leu

să Feb 8, 2026

Bine ați venit la ghidul nostru despre cum să atrageți un leu. Regele junglei, leul este unul, dacă nu cel mai mare, mai puternic și mai puternic feli..

Creați raze de Dumnezeu în raze V

să Feb 8, 2026

În fotografia reală a lumii, razele de lumină sunt la cele mai vizibile atunci când au o suprafață de a sări, cum ar fi pr..

Cum să lucrați cu video HTML

să Feb 8, 2026

Treceți peste YouTube ... cu Video & GT; element și puțin JavaScript. , puteți începe să creați propriu..

Cum de a picta sticla curbat pe o casca de spatiu

să Feb 8, 2026

Spatiunile sunt distractive pentru a picta, dar partea casca poate fi dificila pentru a obține dreptul, mai ales elementul de st..

Creați un tapet Poly scăzut în C4D

să Feb 8, 2026

Pagina 1 din 2: Creați un tapet Poly Low în C4d: Pași 01-06 Creați un..

Ghidul Pro pentru crearea textului 3D

să Feb 8, 2026

Cinci artiști remarcabili demonstrează trucurile comerțului lor, explicând cum să creeze texturi urbane, sci-fi, naturale, s..

Cum se creează o regină viu de zână

să Feb 8, 2026

A fi cerut să picteze o regină de basm de rău deloc de nici unul altceva decât revista mea preferată, imaginefx, ma făcut f..

Cum să obțineți modelul dvs. Zbrush în Maya

să Feb 8, 2026

Pentru asta Maya Tutorial. Îți voi arăta cum am primit acest model de legătură groaznic din Zbrush în Maya p..

Categorii