Bouw een clientportaal met WordPress

Sep 17, 2025

Procedures

(Afbeelding Credit: Web Designer)

Met een gebied waarmee gebruikers kunnen inloggen en documenten downloaden of bekijken, is verwacht door consumenten, van telefooncontracten tot hulpprogramma's.

Wanneer ontwerpers samenwerken met hun klanten, kan alles snel afbreken in een warboel van e-mails, links naar mockups en bijlagen.

Dit WordPress-tutorial zal laten zien hoe WordPress (andere web hosting Diensten zijn beschikbaar) in een clientportaal in staat om documenten, video's en tekeningen op te slaan, zodat een klant er allemaal op één plek kan krijgen. Het portaal zal elke klant van dienst zijn met een unieke en met een wachtwoord beveiligde link die niet in de reguliere navigatie verschijnt.

Aangepaste posttypen en velden worden gebruikt om de gegevens op te slaan, en deze worden via plug-ins toegevoegd, om gegevensverlies te voorkomen, moet het thema veranderen. Het thema wordt licht gewijzigd.

Het hebben van een clientportaal geeft klanten het gemak van toegang tot hun bestanden allemaal op dezelfde plaats, telkens wanneer ze ze nodig hebben, zoals bij gebruik cloud opslag Het heeft een scala aan bedrijfsvoordelen, waaronder het tonen van de beschikbare up-sells, of kan worden gebruikt om vanaf het begin een overzicht van het werkproces te geven door de deliverables visueel te schetsen.

Download de bestanden voor deze tutorial.

Hoe WordPress in een visuele bouwer te veranderen

01. Installeer een verse kopie van WordPress

Een nieuw exemplaar van WordPress is geïnstalleerd op de Development Server en het thema "Understrap" is gekozen om een boilerplate-foundation te geven om snel aan het werk te gaan. De UI-plug-in van het aangepaste posttype zal worden gebruikt, zodat onze aangepaste posttypen onafhankelijk zijn van het thema.

02. Verwijder standaard plug-ins

Als er standaard plug-ins kwamen met het exemplaar van WordPress, verwijdert u die. De plug-ins die nodig zijn voor deze tutorial zijn "geavanceerde aangepaste velden" en "Custom Post Type UI". "Classic Editor" is ook geïnstalleerd.

03. Voeg een aangepast bericht toe

Voeg gebruik van de UI-interface van de aangepaste posttype, voeg een nieuw posttype toe dat "Klant" wordt genoemd. Gebruik bij het invoeren van de "Posttype Slug", gebruikte onderstrepingstekens in plaats van spaties en schrijf in de enkelvoudige vorm, omdat dit het gemakkelijker maakt om sjablonen later te maken. Het voorvoegsel TU_ is toegevoegd om de kans op een conflict te verminderen.

04. De interface Toevoegen / bewerken Aangepaste posttype

Build a client portal with WordPress: The add/edit custom post type interface — Voeg zowel enkelvoudige als meervoudige labels toe (Afbeelding Credit: Web Designer)

Voeg een meervoudig gelabelde "klanten" en enkelvoud "klant" toe, omdat dit verschijnt in het WordPress Admin-menu. Kapitalisatie wordt geaccepteerd in deze velden, waardoor het WordPress-menu Tidier is.

05. Maak een aangepaste herschrijfslak

Build a client portal with WordPress: Create a custom rewrite slug — Gebruik de aangepaste herschrijfslak voor een betere gebruikerservaring (Afbeelding Credit: Web Designer)

Het gebruik van een voorvoegsel voor de Post Type Slug betekent dat klanten aan de portal worden toegevoegd, worden gemaakt met een link die eruit ziet als "/ tu_customer / voorbeeldbedrijf". Dit ziet er niet op, en de aangepaste herschrijfslak wordt gebruikt om dit te verbeteren. Met het instellen van de herschrijfslak naar "Klanten" kan het aangepaste posttype als / klanten / voorbeeldbedrijf verschijnen.

06. Ondersteuning toevoegen voor aangepaste velden

Build a client portal with WordPress: Add support for custom fields — Vink het optie "Aangepaste veld" aan en leg de wijzigingen in (Afbeelding Credit: Web Designer)

De laatste optie die is ingeschakeld voor het aangepaste posttype is "Ondersteunen & GT; Aangepast veld" dat in de onderkant van de pagina wordt gevonden. Vink dit aan en vervolgens "Voeg posttype" onderaan de pagina toe. Dit dient de wijzigingen in en registreert het posttype.

07. Aangepaste velden toevoegen

Build a client portal with WordPress: Add custom fields — Nu moet u aangepaste velden toevoegen aan uw nieuwe posttype (Afbeelding Credit: Web Designer)

Aangepaste velden moeten nu worden toegevoegd en toegewezen aan het posttype dat zojuist is gemaakt. Het toevoegen van een veldgroep met de naam "Customer Portal" is de eerste stap, gevolgd door aangepaste velden aan deze toe te voegen met de knop Veld toevoegen. Het eerste veld "Kort" wordt ingesteld als het veld "Bestand", waarmee de beheerder een bestand op deze locatie kan uploaden. Stel de retourwaarde in op "Bestand URL".

08. Stel de velden in

Het volgende veld dat moet worden toegevoegd, is "merkvragenlijst". Dit zal bestaan uit een link naar een Google-formulier dat de klant moet invullen. Het meest geschikte veldtype hiervoor is "URL". Deze zelfde methode kan worden gebruikt voor alle velden die linken naar een externe service. Blader wanneer u klaar bent, scrolt u naar de "Location" -vak en gebruik de logica "Toon als het bericht" = "Klant". Publiceer vervolgens de veldgroep.

Generate CSS — Boek uw tickets om CSS nu te genereren om £ 50 te besparen (Beeldkrediet: Getty / Future)

09. Maak het bestand WordPress Template

WordPress moet weten hoe u een klantdashboard kunt weergeven. Hiervoor wordt de WordPress-sjabloonhiërarchie gevolgd om een sjabloonbestand voor dit specifieke posttype te maken. Maak een bestand met Single-Tu_Customer.php in de root-thema-map.

10. Maak een full-width single post lay-out

Build a client portal with WordPress: Create a full-width single post layout — Maak een lay-out van de volledige breedte voor uw inhoud (Afbeelding Credit: Web Designer)

Open het bestand Single-TU_CUSTOMER.PHP en voeg de Get_Hearer en Get_Footer WordPress-functies toe. Tussen die functies, maak een lay-out van de breedte om de inhoud te houden die met uw thema werkt.

 & LT;? PHP GET_HOOTER ();? & GT;
& lt; div class = "wrapper" id = "single-wrapper" & GT;
& lt; div class = "container" id = "inhoud" tabindex = "- 1" & GT;
& lt; div class = "rij" & GT;
& lt; div class = "COL-MD-content-gebied" ID = "primair" & GT;
& LT; Hoofdklasse = "Site-Main" ID = "Main" & GT; & LT; -! Inhoud - & 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 de lus en maak de inhoud

Build a client portal with WordPress: Start the loop and create the content — Gebruik placeholders om uw inhoud te leggen (Afbeelding Credit: Web Designer)

Binnen het & LT; MAIN & GT; Element, bel the_post en maak de containerelementen om informatie vast te houden. Gebruik tijdelijke informatie om een idee van de lay-out te krijgen en de elementen te stylen. De kaartelementen zijn bootstrapkaarten met een koptekst, beschrijving en een link.

 & LT; Hoofdklasse = "Site-Main" ID = "Hoofd" & GT;
& LT;? PHP terwijl (have_posts ()): the_post (); ? & GT;
& lt; div class = "container" & GT;
& lt; div class = "rij" & GT;
& LT; DIV-klasse = "COL-SM-4" & GT; INHOUD & LT; / DIV & GT;
& LT; DIV-klasse = "COL-SM-4" & GT; INHOUD & LT; / DIV & GT;
& LT; DIV-klasse = "COL-SM-4" & GT; INHOUD & LT; / DIV & GT;
& LT; / DIV & GT;
& LT; / DIV & GT;
& LT;? PHP eindelijk; // Einde van de lus. ? & GT;
& LT; / MAIN & GT; & LT; - #Main - & GT;

12. Gebruik PHP om te bellen in dynamische waarden

Met behulp van de functie "The_field" wordt een functie die wordt geleverd met de geavanceerde aangepaste velden plugin, de dynamische inhoud van de aangepaste velden wordt ingevoerd in de klantensjabloon. De 'FIELD_NAME' is de waarde die is ingevoerd in stap 3.

 & lt; div class = "kaart Text-Center" & GT;
& lt; div class = "kaart-body" & GT;
& LT; H5 Class = "Card-titel" & GT; KORT & LT; / H5 & GT;
& LT; P Class = "Card-Text" & GT; dit is uw oorspronkelijke korte document & LT; / P & GT;
& lt; een href = "& lt;? php the_field ('korte');? & GT; Target = "Geen" klasse = "BTN BTN-primaire" & GT; Open & LT; / A & GT;
& LT; / DIV & GT;
& lt; / div & gt;

13. Maak een testklant met enkele dummy-gegevens

Build a client portal with WordPress: Make a test customer with some dummy data — Ga naar het WordPress Dashboard om een dummy-klant te maken (Afbeelding Credit: Web Designer)

Toegang tot het WordPress-dashboard kan een nieuwe klant worden toegevoegd vanuit de linkerbar. Klanten & GT; Voeg nieuwe klant toe. De postweergave is bekend, maar naar beneden scrollen zal alle nieuwe aangepaste velden onthullen. Voer enkele testgegevens in om er zeker van te zijn dat alles correct werkt.

14. Omgaan met fouten voor ontbrekende gegevens

Build a client portal with WordPress: Handle errors for any missing data — Zorg ervoor dat het duidelijk is wanneer documenten niet beschikbaar zijn (Afbeelding Credit: Web Designer)

Als een document is vergeten, of het is gewoon te vroeg in het proces om dat document beschikbaar te zijn, kan het verwarrend zijn voor een klant wanneer de knop niet werkt. Een controle toevoegen dat een waarde bestaat voordat het laat zien, geeft een kans om een "ontbrekende veld" -variatie van de kaart weer te geven. Een klasse "uitgeschakeld" aan de kaart toevoegen wanneer de waarde ontbreekt, staat ons in staat om niet-beschikbare kaarten in te stellen.

 & LT;? PHP IF (GET_FIELD ('FIELD_NAME')) :? & GT;
weergegeven wanneer het veld_name een waarde heeft
& LT;? PHP anders: // Field_Name heeft FALSE? & GT geretourneerd;
weergegeven wanneer het veld niet bestaat
& LT;? PHP ENDIF; // Einde van IF Field_Name Logic? & GT;

15. Opruimen van de interface

Nu de structuur van de interface is afgerond, kan het goed worden gestyled. Het gebruik van CSS kan het uiterlijk van de kaarten en kleuren op de pagina worden verbeterd. De kleur voor de navigatie is gewijzigd in een lichtere blauwe en gebruikersrichting is verbeterd door de introductietekst toe te voegen.

16. Sluit het uit vanaf de sitemap

De aangepaste posttypen mogen niet worden gevonden in resultaten van zoekmachines. Het posttype moet worden uitgesloten van de sitemap van de website, hetzij via een SEO-plug-in, of handmatig met behulp van een metatag en robots.txt.

 & LT; Meta Name = "Robots" -inhoud = "Noindex, Nofollow" / & GT;
User-agent: *
Weigeren: / klanten /

Wilt u een nieuwe website ontwerpen? Gebruik een briljant website bouwer om het proces super-simpel te maken.

Gerelateerde artikelen:

De beste WordPress Hosting-services in 2019
13 Geweldige tools voor pitching naar klanten
WordPress-websites: 14 geweldige voorbeelden

Bouw een clientportaal met WordPress

01. Installeer een verse kopie van WordPress

02. Verwijder standaard plug-ins

03. Voeg een aangepast bericht toe

04. De interface Toevoegen / bewerken Aangepaste posttype

05. Maak een aangepaste herschrijfslak

06. Ondersteuning toevoegen voor aangepaste velden

07. Aangepaste velden toevoegen

08. Stel de velden in

09. Maak het bestand WordPress Template

10. Maak een full-width single post lay-out

11. Start de lus en maak de inhoud

12. Gebruik PHP om te bellen in dynamische waarden

13. Maak een testklant met enkele dummy-gegevens

14. Omgaan met fouten voor ontbrekende gegevens

15. Opruimen van de interface

16. Sluit het uit vanaf de sitemap

Procedures - Meest populaire artikelen

Dieren te trekken: 15 Toptips

Bouw adaptieve lay-outs zonder media-query's

Master de mixerborstel in Photoshop

Verf een expressieve stilleven in acrylken

Hoe beeld te maken in Cinema 4D

5 tips voor beeldhouwen in dubbele snelle tijd

Maak een gietwater-effect in RealFlow

Gebruik deeltjes om een 3D-splash te maken

Categorieën