Bygg en klientportal med Wordpress

Sep 12, 2025
hvordan
Build a client portal with WordPress
[1. 3]
(Bilde Kreditt: Webdesigner)

Å ha et område som lar brukerne logge inn og laste ned eller vise dokumenter, har blitt forventet av forbrukere, fra telefonkontrakter til verktøy.

Når designere jobber med sine klienter, kan alt raskt bryte ned i en muddle av e-post, koblinger til mockups. og vedlegg.

Dette Wordpress Tutorial vil vise hvordan du forlener WordPress (andre Web Hosting. Tjenester er tilgjengelige) til en klientportal som er i stand til å lagre dokumenter, videoer og tegninger, så en klient kan få tilgang til dem alle på ett sted. Portalen vil tjene hver kunde med en unik og passordbeskyttet lenke som ikke vises i den vanlige navigasjonen.

Tilpassede posttyper og -felt vil bli brukt til å lagre dataene, og disse vil bli lagt til gjennom plugins, for å unngå tap av data hvis temaet endres. Temaet vil bli endret litt.

Å ha en klientportal gir kundene muligheten til å få tilgang til sine filer alt på samme sted, når de trenger dem, som når de bruker skylagring . Den har en rekke forretningsfordeler, inkludert å vise tilgjengelige priser, eller kan brukes til å gi en oversikt over arbeidsprosessen fra begynnelsen ved å visuelt beskrive leveransen.

Last ned filene for denne opplæringen.

  • Hvordan slå Wordpress til en visuell byggherre

01. Installer en ny kopi av WordPress

En ny kopi av WordPress er installert på utviklingsserveren, og temaet "Understrap" er valgt for å gi et Boilerplate Foundation for å raskt starte arbeidet. Den tilpassede posttype UI-pluginet vil bli brukt, slik at våre tilpassede posttyper er uavhengige av temaet.

02. Fjern standard plugins

Hvis noen standard plugins kom med kopien av WordPress, slett de. Pluggene som trengs for denne opplæringen er "Avanserte egendefinerte felt" og "Tilpasset Post Type UI". "Classic Editor" har også blitt installert.

03. Legg til en tilpasset posttype

Bruke Custom Post Type UI-grensesnittet, legg til en ny posttype kalt "Kunde". Når du går inn i "Post Type-slug", bruk understreker i stedet for mellomrom og skriv i den enestående form, da dette vil gjøre det lettere å lage maler senere. Prefikset tu_ er lagt til for å redusere sjansen for en konflikt.

04. Legg til / rediger egendefinert posttype-grensesnitt

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

Legg til både singular og flertallet etiketter (Bilde Kreditt: Webdesigner)

Legg til en plural merkede "kunder" og singular "kunde", da dette vil vises i WordPress Admin-menyen. Kapitalisering er akseptert i disse feltene, som vil gjøre WordPress-menyen Tidier.

05. Lag en egendefinert omskriving slug

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

Bruk den tilpassede omskrivningen for en bedre brukeropplevelse (Bilde Kreditt: Webdesigner)

Ved hjelp av et prefiks for Post Type Slug vil bety at kundene som er lagt til portalen, vil bli opprettet med en lenke som ser ut som "/ tu_customer / example-company". Dette ser ikke ryddig ut, og den tilpassede omskrivningen sluget brukes til å forbedre dette. Innstilling av omskrivet slug til "Kunder" gjør det mulig for tilpasset posttype som skal vises som / kunder / eksempel-selskap.

06. Legg til støtte for egendefinerte felt

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

Merk av alternativet "Tilpasset felt" og send inn endringene (Bilde Kreditt: Webdesigner)

Det siste alternativet som er aktivert for den egendefinerte posttypen, er "Støtter & GT, tilpasset felt" som finnes nær bunnen av siden. Merk dette, og deretter "Legg til posttype" nederst på siden. Dette sender endringene og registrerer posttypen.

07. Legg til egendefinerte felt

Build a client portal with WordPress: Add custom fields

Nå må du legge til egendefinerte felt i din nye posttype (Bilde Kreditt: Webdesigner)

Egendefinerte felt må nå legges til og tilordnes posttypen som bare ble opprettet. Legge til en feltgruppe som heter "Kundeportal" er det første trinnet, etterfulgt av å legge til egendefinerte felt på den med Add-felt-knappen. Det første feltet "Kort" vil bli satt som felttype "-filen", som lar administrasjonen laste opp en fil på dette stedet. Angi returverdien til "File URL".

08. Sett opp feltene

Det neste feltet som skal legges til, er "merkevare spørreskjema." Dette vil bestå av en lenke til et Google-skjema som kunden skal fylle ut. Den mest passende felttypen for dette er "URL". Denne samme metoden kan brukes til alle felter som vil koble til en ekstern tjeneste. Når du er ferdig, bla ned til boksen "Location" og bruk logikken "Vis hvis Post Type" = "Customer". Publiser deretter feltgruppen.

Generate CSS

Bestill billettene dine for å generere CSS nå for å spare £ 50 (Bildekreditt: Getty / Fremtid)

09. Opprett WordPress Template-filen

WordPress trenger å vite hvordan du skal vise et kundedashboard. For dette følges WordPress-templatehierarkiet for å opprette en malfil for denne spesifikke ettertypen. Opprett en fil kalt single-tu_customer.php i Root Theme Directory.

10. Lag en full bredde single post layout

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

Lag et full bredde layout for innholdet ditt (Bilde Kreditt: Webdesigner)

Åpne Single-Tu_Customer.php-filen og legg til Get_Header og Get_footer WordPress-funksjonene. Mellom disse funksjonene, opprett en full bredde layout for å holde innholdet som fungerer med temaet ditt. 

 & lt;? Php get_header ();? & Gt;
& lt; div class = "wrapper" id = "single-wrapper" & gt;
& lt; div class = "container" id = "innhold" Tabindex = "- 1" & gt;
& lt; div class = "rad" & gt;
& lt; div class = "col-md content-området" id = "primær" & gt;
& lt; hovedklasse = "nettsted-main" id = "main" & gt; & lt; -! Innhold - & gt; & lt; / main & gt;
& lt; / div & gt;
& lt; / div & gt; & lt;! - .Row - & gt;
& lt; / div & gt; & lt;! - #content - & gt;
& lt; / div & gt; & lt;! - # single-wrapper - & gt;
& lt;? php get_footer ();? & gt;

11. Start sløyfen og opprett innholdet

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

Bruk plassholdere til å legge ut innholdet ditt (Bilde Kreditt: Webdesigner)

Innenfor & lt; main & gt; Element, ring the_post og opprett beholderelementene for å holde informasjonen. Bruk stedholderinformasjon for å få en ide om layoutet, og begynn å stille elementene. Kortelementene vil være bootstrap-kort med en overskrift, beskrivelse og en lenke. 

 & lt; hovedklasse = "nettsted-main" id = "main" & gt;
& lt;? php mens (have_posts ()): the_post (); ? & gt;
& lt; div class = "container" & gt;
& lt; div class = "rad" & gt;
& lt; div class = "col-sm-4" & gt; content & lt; / div & gt;
& lt; div class = "col-sm-4" & gt; content & lt; / div & gt;
& lt; div class = "col-sm-4" & gt; content & lt; / div & gt;
& lt; / div & gt;
& lt; / div & gt;
& lt;? php endwhile; // slutten av løkken. ? & gt;
& lt; / main & gt; & lt;! - #main - & gt;

12. Bruk PHP til å ringe i dynamiske verdier

Ved hjelp av funksjonen "The_field", er en funksjon som følger med de avanserte egendefinerte feltene, det dynamiske innholdet fra de egendefinerte feltene er oppgitt i kundemalen. 'Field_name' er verdien som ble oppgitt i trinn 3. 

 & lt; div class = "kort tekst-senter" & gt;
& lt; div class = "Card-Body" & gt;
& lt; h5 class = "Card-tittel" & gt; Kort & lt; / h5 & gt;
& lt; p class = "Card-Text" & gt; Dette er ditt originale korte dokument & lt; / p & gt;
& lt; a href = "" php the_field ("kort");? & gt; " mål = "ingen" klasse = "btn btn-primær" & gt; åpen & lt; / a & gt;
& lt; / div & gt;
& lt; / div & gt;

13. Lag en testkund med noen dummy data

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

Gå til WordPress Dashboard for å lage en dummy-kunde (Bilde Kreditt: Webdesigner)

Å få tilgang til WordPress Dashboard, kan en ny kunde legges til fra venstre. Kunder & GT; Legg til ny kunde. Ettervisningen vil være kjent, men rulling ned vil avsløre alle de nye egendefinerte feltene. Skriv inn noen testdata for å sikre at alt fungerer som det er riktig.

14. Håndter feil for eventuelle manglende data

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

Pass på at det er klart når dokumenter ikke er tilgjengelige (Bilde Kreditt: Webdesigner)

Hvis et dokument er glemt, eller det er rett og slett for tidlig i prosessen for at dokumentet skal være tilgjengelig, kan det være forvirrende for en kunde når knappen ikke virker. Legge til en kontroll at en verdi eksisterer før du viser at den gir en sjanse til å vise et "manglende felt" variasjon av kortet. Legge til en klasse "deaktivert" til kortet når verdien mangler, vil tillate oss å tya utilgjengelige kort. 

 & lt;? Php hvis (get_field ('field_name')) :? & gt;
Vises når feltnummeret har en verdi
& lt;? php else: // field_name returnert false? & gt;
vises når feltet ikke eksisterer
lt;? php endif; // slutten av hvis feltnavn logikk? & gt;

15. Rydde grensesnittet

Nå som strukturen i grensesnittet er ferdigstillet, kan det bli stylet riktig. Ved hjelp av CSS, kan utseendet på kortene og fargene på siden forbedres. Fargen for navigasjonen er endret til en lysere blå, og brukerretning har blitt forbedret ved å legge til introduksjonstekst.

16. Ekskluder det fra sitemap

De egendefinerte posttyperne bør ikke bli funnet i resultater i søkemotorer. Posttypen må utelukkes fra nettstedets sitemap, enten gjennom et SEO-plugin, eller manuelt ved hjelp av en metatag og robots.txt. 

 & lt; meta navn = "roboter" innhold = "noindex, nofollow" / & gt;
Bruker agent: *
Disallow: / Kunder /

Vil du designe et nytt nettsted? Bruk en strålende Nettstedbygger å gjøre prosessen super-enkel.

Relaterte artikler:

  • De beste WordPress Hosting-tjenestene i 2019
  • 13 gode verktøy for pitching til klienter
  • WordPress-nettsteder: 14 AWESOME EKSEMPLER

hvordan - Mest populære artikler

Hvordan tegne nakke og skuldre

hvordan Sep 12, 2025

Når du lærer å tegne nakke og skuldre, kan det ofte være utfordrende å vise volumene i vårt arbeid, da vi er vant til å se folk foran. Men å tegne en anatomisk riktig nakke og skuldre..

Hvordan legge til animasjon til SVG med CSS

hvordan Sep 12, 2025

[1. 3] [Bilde: Web Designer] Når det gjelder animere med SVGs, kan en stor avstenging være ideen om å bli slått ne..

Hvordan lage grafiske figurer

hvordan Sep 12, 2025

[1. 3] I de tidligere årene av min illustrasjonskarriere skutt jeg bort fra å måtte illustrere figurer, enten realistisk eller ..

Mal et originalt tarotkort

hvordan Sep 12, 2025

[1. 3] Da jeg mottok min første tarotdekk, ble jeg fortryllet av det vakre kunstverket og historiene som fulgte med hvert kort. D..

Hvordan male et atmosfærisk portrett i Photoshop

hvordan Sep 12, 2025

[1. 3] Maleri et portrett kan være en vanskelig oppgave. Selv om du har mestret Hvordan tegne et ansikt , Du kan e..

Opprett en digital ets en skisse

hvordan Sep 12, 2025

[1. 3] I denne opplæringen tar vi den mekaniske tegningen Toy Etch en skisse som en inspirasjon og forsøker å implementere diss..

Lær å kjøre design og innhold Sprints

hvordan Sep 12, 2025

[1. 3] Design og innhold Sprints er nøkkelen til å samle Produkteiere, designere, forskere, innholdsstrategister og andre disipl..

Hvordan perfekt hår i portrettene dine

hvordan Sep 12, 2025

[1. 3] Side 1 av 2: Side 1 Side 1 Side 2 ..

Kategorier