Inhoud
- 01. Installeer een nieuwe kopie van WordPress
- 02. Verwijder standaard plug-ins
- 03. Voeg een aangepast berichttype toe
- 04. De interface voor het toevoegen / bewerken van een aangepast berichttype
- 05. Maak een aangepaste rewrite slug
- 06. Ondersteuning toevoegen voor aangepaste velden
- 07. Voeg aangepaste velden toe
- 08. Stel de velden in
- 09. Maak het WordPress-sjabloonbestand
- 10. Maak een lay-out met één bericht over de volledige breedte
- 11. Start de lus en maak de inhoud
- 12. Gebruik PHP om dynamische waarden aan te roepen
- 13. Maak een testklant met enkele dummy-gegevens
- 14. Verwerk fouten voor ontbrekende gegevens
- 15. Ruim de interface op
- 16. Sluit het uit van de sitemap
Het hebben van een gebied waar gebruikers kunnen inloggen en documenten downloaden of bekijken, wordt door consumenten verwacht, van telefooncontracten tot hulpprogramma's.
Wanneer ontwerpers echter met hun klanten werken, kan alles snel uiteenvallen in een warboel van e-mails, links naar mockups en bijlagen.
Deze WordPress-tutorial laat zien hoe je WordPress kunt uitbreiden (andere webhostingservices zijn beschikbaar) naar een klantenportaal dat documenten, video's en tekeningen kan opslaan, zodat een klant ze allemaal op één plek kan openen. De portal zal elke klant voorzien van een unieke en met een wachtwoord beveiligde link die niet in de normale navigatie wordt weergegeven.
Aangepaste berichttypen en velden worden gebruikt om de gegevens op te slaan, en deze worden toegevoegd via plug-ins om gegevensverlies te voorkomen als het thema verandert. Het thema wordt enigszins aangepast.
Het hebben van een klantenportaal geeft klanten het gemak om hun bestanden allemaal op dezelfde plek te openen, wanneer ze ze nodig hebben, net zoals bij het gebruik van cloudopslag. Het heeft een scala aan zakelijke voordelen, waaronder het tonen van beschikbare up-sells, of kan worden gebruikt om vanaf het begin een overzicht te geven van het werkproces door de deliverables visueel te schetsen.
Download de bestanden voor deze tutorial.
- Hoe je WordPress in een visuele bouwer kunt veranderen
01. Installeer een nieuwe kopie van WordPress
Een nieuwe kopie van WordPress is geïnstalleerd op de ontwikkelserver en het "understrap" -thema is gekozen om een standaard basis te geven om snel aan het werk te kunnen. De Custom Post Type UI-plug-in wordt gebruikt, zodat onze aangepaste berichttypen onafhankelijk zijn van het thema.
02. Verwijder standaard plug-ins
Als er standaard plug-ins bij de kopie van WordPress zijn geleverd, verwijder deze dan. De plug-ins die nodig zijn voor deze tutorial zijn "Advanced Custom Fields" en "Custom Post Type UI". "Classic Editor" is ook geïnstalleerd.
03. Voeg een aangepast berichttype toe
Gebruik de gebruikersinterface van het aangepaste berichttype en voeg een nieuw berichttype toe met de naam "klant". Gebruik bij het invoeren van de "Post-type slug" onderstrepingstekens in plaats van spaties en schrijf in enkelvoud, aangezien dit het later gemakkelijker maakt om sjablonen te maken. Het voorvoegsel tu_ is toegevoegd om de kans op een conflict te verkleinen.
04. De interface voor het toevoegen / bewerken van een aangepast berichttype
Voeg een meervoud toe met het label "klanten" en enkelvoud "klant", zoals dit zal verschijnen in het WordPress admin-menu. In deze velden wordt hoofdlettergebruik geaccepteerd, waardoor het WordPress-menu overzichtelijker wordt.
05. Maak een aangepaste rewrite slug
Het gebruik van een voorvoegsel voor het berichttype slug betekent dat klanten die aan de portal worden toegevoegd, een link zullen krijgen die eruitziet als "/ tu_customer / voorbeeldbedrijf". Dit ziet er niet netjes uit en de aangepaste herschrijfsleutel wordt gebruikt om dit te verbeteren. Door het herschrijven van slug in te stellen op "klanten", wordt het aangepaste berichttype weergegeven als / klanten / voorbeeldbedrijf.
06. Ondersteuning toevoegen voor aangepaste velden
De laatste optie die is ingeschakeld voor het aangepaste berichttype is "Ondersteunt> Aangepast veld", dat zich onder aan de pagina bevindt. Vink dit aan en vervolgens "posttype toevoegen" onder aan de pagina. Deze legt de wijzigingen vast en registreert het berichttype.
07. Voeg aangepaste velden toe
Aangepaste velden moeten nu worden toegevoegd en toegewezen aan het berichttype dat zojuist is gemaakt. Het toevoegen van een veldgroep met de naam "klantenportaal" is de eerste stap, gevolgd door het toevoegen van aangepaste velden eraan met de knop Veld toevoegen. Het eerste veld "brief" wordt ingesteld als het veldtype "bestand", waarmee de beheerder een bestand op deze locatie kan uploaden. Stel de retourwaarde in op "file 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". Dezelfde methode kan worden gebruikt voor alle velden die naar een externe service zullen linken. Als u klaar bent, scrolt u omlaag naar het vak "locatie" en gebruikt u de logica "Show if Post Type" = "Customer". Publiceer vervolgens de veldgroep.
09. Maak het WordPress-sjabloonbestand
WordPress moet weten hoe een klantendashboard moet worden weergegeven. Hiervoor wordt de WordPress-sjabloonhiërarchie gevolgd om een sjabloonbestand voor dit specifieke berichttype te maken. Maak een bestand met de naam single-tu_customer.php in de hoofdthema-directory.
10. Maak een lay-out met één bericht over de volledige breedte
Open het single-tu_customer.php-bestand en voeg de get_header en get_footer WordPress-functies toe. Maak tussen deze functies een lay-out over de volledige breedte voor de inhoud die bij uw thema past.
? php get_header ();?> div id = "single-wrapper"> div id = "content" tabindex = "- 1"> div> div id = "primary"> main id = "main"> -! Inhoud -> / main> / div> / div>! - .row -> / div>! - #content -> / div>! - # single-wrapper ->? Php get_footer () ;?>
11. Start de lus en maak de inhoud
Roep binnen het main> -element the_post aan en maak de containerelementen om informatie vast te houden. Gebruik plaatsaanduidingsinformatie om een idee te krijgen van de lay-out en begin met het opmaken van de elementen. De kaartelementen zijn bootstrap-kaarten met een koptekst, beschrijving en een 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 end While; // einde van de lus. ?> var13 -> / main>! - #main ->
12. Gebruik PHP om dynamische waarden aan te roepen
Met behulp van de functie "the_field", een functie die bij de geavanceerde plug-in voor aangepaste velden wordt geleverd, wordt de dynamische inhoud van de aangepaste velden in het klantensjabloon ingevoerd. De ’veldnaam’ is de waarde die is ingevoerd in stap 3.
div> div> h5> Brief / h5> p> Dit is je originele korte document / p> a href = "? php the_field ('brief');?> var13 ->" target = "none"> Open / a > / div> / div>
13. Maak een testklant met enkele dummy-gegevens
Bij toegang tot het WordPress-dashboard kan een nieuwe klant worden toegevoegd via de linkerbalk. Klanten> Nieuwe klant toevoegen. De postweergave zal u bekend voorkomen, maar als u naar beneden scrolt, worden alle nieuwe aangepaste velden weergegeven. Voer enkele testgegevens in om te controleren of alles correct werkt.
14. Verwerk fouten voor ontbrekende gegevens
Als een document wordt vergeten, of het is gewoon te vroeg in het proces om dat document beschikbaar te maken, kan het voor een klant verwarrend zijn als de knop niet werkt. Door te controleren of een waarde bestaat voordat deze wordt weergegeven, krijgt u de kans om een "ontbrekende veld" -variatie van de kaart te tonen. Door een klasse "uitgeschakeld" aan de kaart toe te voegen wanneer de waarde ontbreekt, kunnen we niet-beschikbare kaarten stylen.
? php if (get_field ('field_name')):?> var13 -> weergegeven als de field_name een waarde heeft? php else: // field_name geretourneerd false?> var13 -> weergegeven als het veld niet bestaat? php endif ; // einde van if veldnaam logica?> var13 ->
15. Ruim de interface op
Nu de structuur van de interface is voltooid, kan deze op de juiste manier worden gestileerd. Met CSS kan het uiterlijk van de kaarten en kleuren op de pagina worden verbeterd. De kleur voor de navigatie is veranderd in lichter blauw en de gebruikersrichting is verbeterd door inleidende tekst toe te voegen.
16. Sluit het uit van de sitemap
De aangepaste berichttypen mogen niet worden gevonden in de resultaten van zoekmachines. Het berichttype moet worden uitgesloten van de sitemap van de website, hetzij via een SEO-plug-in, hetzij handmatig met behulp van een metatag en robots.txt.
meta name = "robots" content = "noindex, nofollow" /> User-agent: * Disallow: / klanten /
Wilt u een nieuwe website ontwerpen? Gebruik een briljante websitebouwer om het proces supereenvoudig te maken.
