Byg en klientportal med WordPress

Sep 16, 2025

hvordan

(Billedkredit: webdesigner)

At have et område, der giver brugerne mulighed for at logge ind og downloade eller se dokumenter, er blevet forventet af forbrugerne, fra telefonkontrakter til forsyningsselskaber.

Når designere arbejder sammen med deres kunder, kan alt hurtigt bryde ned i en muddle af e-mails, links til mockups. og vedhæftede filer.

Det her Wordpress Tutorial. vil vise, hvordan man udvider WordPress (andet Web Hosting. tjenester er tilgængelige) i en klientportal, der er i stand til at gemme dokumenter, videoer og tegninger, så en klient kan få adgang til dem alle på ét sted. Portalen vil tjene hver kunde med et unikt og adgangskodebeskyttet link, der ikke vises i den almindelige navigation.

Brugerdefinerede posttyper og felter vil blive brugt til at gemme dataene, og disse vil blive tilføjet via plugins, for at undgå tab af data, hvis temaændringen ændres. Temaet vil blive ændret lidt.

At have en klientportal giver kunderne bekvemmeligheden af at få adgang til deres filer på samme sted, når de har brug for dem, ligesom når de bruger Sky lagring . Det har en række forretningsfordele, herunder at vise tilgængelige up-sells, eller kan bruges til at give et overblik over arbejdsprocessen fra begyndelsen ved visuelt at redegøre for leverancerne.

Download filerne for denne vejledning.

Sådan vender du Wordpress til en Visual Builder

01. Installer en frisk kopi af WordPress

En frisk kopi af WordPress er installeret på udviklingsserveren, og temaet "Understrap" er blevet valgt til at give et boilerplate fundament for hurtigt at starte arbejdet. Den brugerdefinerede posttype UI-plugin vil blive brugt, så vores brugerdefinerede posttyper er uafhængige af temaet.

02. Fjern standard plugins

Hvis der kom nogen standard plugins med kopi af WordPress, skal du slette dem. De plugins, der er nødvendige for denne vejledning, er "Avancerede brugerdefinerede felter" og "Custom Post Type UI". "Classic Editor" er også installeret.

03. Tilføj en brugerdefineret posttype

Brug af brugerdefineret posttype UI-grænseflade, tilføj en ny posttype kaldet "Kunde". Når du indtaster "Post Type Slug", skal du bruge understreger i stedet for mellemrum og skrive i den entydige form, da dette gør det lettere at oprette skabeloner senere. Prefixet TU_ er blevet tilføjet for at reducere chancen for en konflikt.

04. ADD / Rediger brugerdefineret posttype interface

Build a client portal with WordPress: The add/edit custom post type interface — Tilsæt begge entallige og flertalletiketter (Billedkredit: webdesigner)

Tilføj en flertallet mærket "kunder" og entallet "kunde", da dette vises i WordPress Admin Menu. Kapitalisering accepteres på disse felter, som vil gøre WordPress-menuen Tidier.

05. Opret en brugerdefineret omskrive slug

Build a client portal with WordPress: Create a custom rewrite slug — Brug den brugerdefinerede omskrivning af slug til en bedre brugeroplevelse (Billedkredit: webdesigner)

Brug af et præfiks for posttype slug vil betyde, at kunder, der tilføjes til portalen, oprettes med et link, der ligner "/ tu_customer / example-firma". Dette ser ikke godt ud, og den brugerdefinerede omskrivning slug bruges til at forbedre dette. Indstilling af omskrivning af slug til "Kunder" gør det muligt for den brugerdefinerede posttype at vises som / kunder / eksempel-firma.

06. Tilføj support til brugerdefinerede felter

Build a client portal with WordPress: Add support for custom fields — Marker indstillingen "Brugerdefineret felt" og indsend ændringerne (Billedkredit: webdesigner)

Den sidste mulighed, der er aktiveret for den brugerdefinerede posttype, er "Supports & GT; Custom Field", som findes i nærheden af bunden af siden. Marker dette, og derefter "Tilføj Post Type" nederst på siden. Dette indsender ændringerne og registrerer posttypen.

07. Tilføj brugerdefinerede felter

Build a client portal with WordPress: Add custom fields — Nu skal du tilføje brugerdefinerede felter til din nye posttype (Billedkredit: webdesigner)

Brugerdefinerede felter skal nu tilføjes og tildeles den posttype, der netop blev oprettet. Tilføjelse af en feltgruppe med navnet "Kundeportal" er det første trin, efterfulgt af at tilføje brugerdefinerede felter til det med knappen Tilføj felt. Det første felt "Kort" vil blive indstillet som felttype "-fil", som gør det muligt for admin at uploade en fil på denne placering. Indstil returværdien til "File URL".

08. Konfigurer felterne

Det næste felt, der skal tilføjes, er "mærke spørgeskema." Dette vil bestå af et link til en Google-formular, som kunden skal udfylde. Den mest egnede felttype for dette er "URL". Denne samme metode kan bruges til alle felter, der vil linke til en ekstern tjeneste. Når du er færdig, skal du rulle ned til boksen "Placering" og bruge logikken "Vis hvis Post Type" = "Kunde". Udgiv derefter feltgruppen.

Generate CSS — Book dine billetter for at generere CSS nu for at spare £ 50 (Billedkredit: Getty / Future)

09. Opret WordPress Template-filen

Wordpress skal vide, hvordan du viser en kundedbinding. Til dette følges WordPress-template hierarkiet for at oprette en skabelonfil til denne specifikke posttype. Opret en fil kaldet single-tu_customer.php i root temaet.

10. Opret en fuld bredde single post layout

Build a client portal with WordPress: Create a full-width single post layout — Lav et fuldt bredde layout til dit indhold (Billedkredit: webdesigner)

Åbn filen Single-Tu_customer.php og tilføj Get_header og Get_footer WordPress funktioner. Mellem disse funktioner skal du oprette et layout i fuld bredde for at holde det indhold, der fungerer sammen med dit tema.

 & lt; php get_header ();? & Gt;
& lt; div class = "wrapper" id = "single-wrapper" & gt;
& lt; div class = "container" ID = "Content" Tabindex = "- 1" & GT;
& lt; div klasse = "række" & gt;
& lt; div class = "col-md content-område" id = "primær" & gt;
& lt; hovedklasse = "site-main" id = "hoved" & gt; & lt; -! Indhold - & GT; & lt; / Main & GT;
& lt; / div & gt;
& lt; / div & gt ;! - .row - & gt;
& lt; / div & gt; !! - #content - & gt;
& lt; / div & gt ;! - # single-wrapper - & gt;
& lt;? php get_footer ();? & gt;

11. Start løkken og opret indholdet

Build a client portal with WordPress: Start the loop and create the content — Brug pladsholdere til at lægge dit indhold (Billedkredit: webdesigner)

Inden for The & Lt; Main & GT; Element, ring til The_Post og opret beholderelementerne for at holde oplysninger. Brug pladsholderoplysninger for at få en ide om layoutet og begynde at style elementerne. Kortelementerne vil blive bootstrap-kort med en header, beskrivelse og et link.

 & LT; hovedklasse = "Site-Main" ID = "Main" & GT;
& lt;? php mens (has_posts ()): the_post (); ? & gt;
& lt; div class = "beholder" & gt;
& lt; div klasse = "række" & gt;
& lt; div class = "col-sm-4" & gt; indhold & lt; / div & gt;
& lt; div class = "col-sm-4" & gt; indhold & lt; / div & gt;
& lt; div class = "col-sm-4" & gt; indhold & lt; / div & gt;
& lt; / div & gt;
& lt; / div & gt;
& lt;? php endwhile; // slutningen af løkken. ? & gt;
& lt; / Main & GT; & lt;! - #main - & gt;

12. Brug PHP til at ringe til dynamiske værdier

Ved hjælp af funktionen "The_field", en funktion, der følger med Advanced Custom Fields Plugin, er det dynamiske indhold fra de brugerdefinerede felter, der er indtastet i kundeskabelonen. 'Field_Name' er den værdi, der blev indtastet i trin 3.

 & lt; div class = "kort tekst-center" & gt;
& lt; div class = "kort-krop" & gt;
& lt; h5 klasse = "kort titel" & gt; kort & lt; / h5 & gt;
& lt; p klasse = "kort-tekst" & gt; dette er dit originale korte dokument & lt; / p & gt;
& lt; en href = "& lt; php the_field ('kort');? & gt;" mål = "ingen" klasse = "btn btn-primær" & gt; åben & lt; / a & gt;
& lt; / div & gt;
& lt; / div & gt;

13. Lav en testkunde med nogle dummy data

Build a client portal with WordPress: Make a test customer with some dummy data — Gå til Wordpress Dashboard for at lave en dummy kunde (Billedkredit: webdesigner)

Adgang til WordPress Dashboard, en ny kunde kan tilføjes fra venstre linje. Kunder og GT; Tilføj ny kunde. Post View vil være bekendt, men rulning af vil afsløre alle de nye brugerdefinerede felter. Indtast nogle testdata for at sikre, at alt fungerer korrekt.

14. Håndter fejl for manglende data

Build a client portal with WordPress: Handle errors for any missing data — Sørg for, at det er klart, når dokumenter ikke er tilgængelige (Billedkredit: webdesigner)

Hvis et dokument er glemt, eller det er simpelthen for tidligt i processen for det dokument, der skal være tilgængeligt, kan det være forvirrende for en kunde, når knappen ikke virker. Tilføjelse af en check om, at der findes en værdi, før den viser, at den giver en chance for at vise et "manglende felt" variation af kortet. Tilføjelse af en klasse "deaktiveret" til kortet, når værdien mangler, vil give os mulighed for at style utilgængelige kort.

 & lt;? Php hvis (get_field ('field_name')) :? & gt;
Vises, når feltnavn har en værdi
& lt;? php ilde: // feltnavn returneres falsk? & gt;
vises, når feltet ikke eksisterer
& lt;? php endif; // slutningen af, hvis feltnavn logik? & gt;

15. Ryd op i grænsefladen

Nu hvor strukturen af grænsefladen er færdiggjort, kan den styles korrekt. Ved hjælp af CSS kan udseendet af kort og farver på siden forbedres. Farven til navigationen er blevet ændret til en lysere blå, og brugerretningen er blevet forbedret ved at tilføje introduktions tekst.

16. Undgå det fra sitemap

De brugerdefinerede posttyper bør ikke findes i søgemaskiner resultater. Posttypen skal udelukkes fra hjemmesidenes sitemap, enten via et SEO-plugin eller manuelt ved hjælp af en meta tag og robots.txt.

 & lt; meta navn = "robotter" indhold = "noindex, nofollow" / & gt;
Brugeragent: *
Forbyde: / kunder /

Vil du designe en ny hjemmeside? Brug en strålende Website Builder. at gøre processen super-enkel.

Relaterede artikler:

De bedste WordPress Hosting Services i 2019
13 gode værktøjer til pitching til kunder
Wordpress Websites: 14 Awesome Eksempler

Byg en klientportal med WordPress

01. Installer en frisk kopi af WordPress

02. Fjern standard plugins

03. Tilføj en brugerdefineret posttype

04. ADD / Rediger brugerdefineret posttype interface

05. Opret en brugerdefineret omskrive slug

06. Tilføj support til brugerdefinerede felter

07. Tilføj brugerdefinerede felter

08. Konfigurer felterne

09. Opret WordPress Template-filen

10. Opret en fuld bredde single post layout

11. Start løkken og opret indholdet

12. Brug PHP til at ringe til dynamiske værdier

13. Lav en testkunde med nogle dummy data

14. Håndter fejl for manglende data

15. Ryd op i grænsefladen

16. Undgå det fra sitemap

hvordan - Mest populære artikler

Instagram Reels Tutorial: En nybegyndervejledning

Sådan tilføjes skrifttyper i Photoshop

Kom i gang med flamme maler

Sådan ændres du et billede i Photoshop

Forbered et bord til maleri i 3 nemme trin

Kom i gang med rust

Opret udsmykkede fliser i stofdesigner

Få fat i den våde-våd maleri teknik

Kategorier