Innehåll
- 01. Installera en ny kopia av WordPress
- 02. Ta bort standardinsticksprogram
- 03. Lägg till en anpassad posttyp
- 04. Lägg till / redigera anpassat posttypgränssnitt
- 05. Skapa en anpassad omskrivningssnigel
- 06. Lägg till stöd för anpassade fält
- 07. Lägg till anpassade fält
- 08. Ställ in fälten
- 09. Skapa WordPress-mallfilen
- 10. Skapa en layout med en enda post i full bredd
- 11. Starta slingan och skapa innehållet
- 12. Använd PHP för att ringa in dynamiska värden
- 13. Skapa en testkund med lite dummydata
- 14. Hantera fel för eventuella data som saknas
- 15. Städa upp gränssnittet
- 16. Uteslut det från webbplatskartan
Att ha ett område som tillåter användare att logga in och ladda ner eller visa dokument har blivit förväntat av konsumenter, från telefonkontrakt till verktyg.
När designers arbetar med sina kunder kan allt dock snabbt brytas ned i en rörelse av e-post, länkar till mockups och bilagor.
Denna WordPress-handledning visar hur man kan utvidga WordPress (andra webbhotellstjänster finns) till en klientportal som kan lagra dokument, videor och ritningar, så att en klient kan komma åt dem alla på ett ställe. Portalen kommer att ge varje kund en unik och lösenordsskyddad länk som inte visas i den vanliga navigeringen.
Anpassade inläggstyper och fält kommer att användas för att lagra data, och dessa läggs till via plugins för att undvika dataförlust om temat ändras. Temat kommer att ändras något.
Att ha en klientportal ger kunderna bekvämligheten att komma åt sina filer på samma plats, när de behöver dem, ungefär som när de använder molnlagring. Det har en rad affärsfördelar, inklusive att visa tillgängliga försäljningar, eller kan användas för att ge en överblick över arbetsprocessen från början genom att visuellt skissera leveranserna.
Ladda ner filerna för denna handledning.
- Hur man gör WordPress till en visuell byggare
01. Installera en ny kopia av WordPress
En ny kopia av WordPress är installerad på utvecklingsservern och temat "understrap" har valts för att ge en pannplatta grund för att snabbt kunna börja arbeta. Användargränssnittet för anpassad posttyp kommer att användas så att våra anpassade inläggstyper är oberoende av temat.
02. Ta bort standardinsticksprogram
Om några standardinsticksprogram medföljer kopian av WordPress, ta bort dem. Pluginprogrammen som behövs för denna handledning är "Advanced Custom Fields" och "Custom Post Type UI". "Classic Editor" har också installerats.
03. Lägg till en anpassad posttyp
Använd gränssnittsgränssnittet för anpassad posttyp och lägg till en ny posttyp som heter "kund". När du går in i "Inläggstyp" använder du understrykningar istället för mellanslag och skriver i singularform, eftersom det blir enklare att skapa mallar senare. Prefixet tu_ har lagts till för att minska risken för en konflikt.
04. Lägg till / redigera anpassat posttypgränssnitt
Lägg till en plural märkt "kunder" och singular "kund", eftersom detta kommer att visas i WordPress-administratörsmenyn. Stora bokstäver accepteras i dessa fält, vilket gör WordPress-menyn snyggare.
05. Skapa en anpassad omskrivningssnigel
Att använda ett prefix för posttypsluggen innebär att kunder som läggs till i portalen skapas med en länk som ser ut som "/ tu_customer / example-company". Det här ser inte snyggt ut och den anpassade omskrivningssnigeln används för att förbättra detta. Genom att ställa in omskrivningssluggen till "kunder" kan den anpassade inläggstypen visas som / kunder / exempelföretag.
06. Lägg till stöd för anpassade fält
Det sista alternativet som är aktiverat för den anpassade inläggstypen är "Stöd> Anpassat fält" som finns längst ner på sidan. Markera detta och sedan "lägg till inläggstyp" längst ner på sidan. Detta skickar ändringarna och registrerar inläggstypen.
07. Lägg till anpassade fält
Anpassade fält måste nu läggas till och tilldelas den posttyp som just skapades. Att lägga till en fältgrupp med namnet "kundportal" är det första steget, följt av att lägga till anpassade fält till den med knappen Lägg till fält. Det första fältet "kort" kommer att ställas in som fälttypen "fil", som tillåter administratören att ladda upp en fil på den här platsen. Ställ in returvärdet till "fil url".
08. Ställ in fälten
Nästa fält som ska läggas till är "varumärkesfrågeformulär". Detta kommer att bestå av en länk till ett Google-formulär som kunden ska fylla i. Den mest lämpliga fälttypen för detta är "URL". Samma metod kan användas för alla fält som kommer att länka till en extern tjänst. När du är klar, bläddra ner till rutan "plats" och använd logiken "Visa om inläggstyp" = "Kund". Publicera sedan fältgruppen.
09. Skapa WordPress-mallfilen
WordPress behöver veta hur man visar en kundinstrumentpanel. För detta följs WordPress-mallhierarkin för att skapa en mallfil för denna specifika inläggstyp. Skapa en fil som heter single-tu_customer.php i rottema-katalogen.
10. Skapa en layout med en enda post i full bredd
Öppna single-tu_customer.php-filen och lägg till WordPress-funktionerna get_header och get_footer. Mellan dessa funktioner skapar du en layout i full bredd för att hålla innehållet som fungerar med ditt tema.
? php get_header ();?> div id = "single-wrapper"> div id = "content" tabindex = "- 1"> div> div id = "primary"> main id = "main"> -! Innehåll -> / main> / div> / div>! - .row -> / div>! - #content -> / div>! - # single-wrapper ->? Php get_footer () ;?>
11. Starta slingan och skapa innehållet
Inom huvudelementet> ring the_post och skapa containerelementen för att hålla information. Använd platshållarinformation för att få en uppfattning om layouten och börja utforma elementen. Kortelementen kommer att vara bootstrap-kort med en rubrik, beskrivning och en länk.
main id = "main">? php while (have_posts ()): the_post (); ?> var13 -> div> div> div> Content / div> div> Content / div> div> Content / div> / div> / div>? php endwhile; // slutet av slingan. ?> var13 -> / main>! - #main ->
12. Använd PHP för att ringa in dynamiska värden
Med hjälp av funktionen "the_field", en funktion som kommer med det avancerade plugin-programmet för anpassade fält, matas det dynamiska innehållet från de anpassade fälten in i kundmallen. Fältnamnet är det värde som angavs i steg 3.
div> div> h5> Kort / h5> p> Detta är ditt ursprungliga korta dokument / p> a href = "? php the_field ('brief');?> var13 ->" target = "none"> Öppna / a > / div> / div>
13. Skapa en testkund med lite dummydata
För att komma åt WordPress-instrumentpanelen kan en ny kund läggas till från vänster bar. Kunder> Lägg till ny kund. Postvyn kommer att vara bekant, men bläddring nedåt visar alla nya anpassade fält. Ange några testdata för att se till att allt fungerar korrekt.
14. Hantera fel för eventuella data som saknas
Om ett dokument glömts bort, eller om det helt enkelt är för tidigt i processen för att det dokumentet ska vara tillgängligt, kan det vara förvirrande för en kund när knappen inte fungerar. Att lägga till en kontroll att ett värde existerar innan det visas ger en chans att visa en "saknad fält" -variation på kortet. Om du lägger till en klass "inaktiverad" på kortet när värdet saknas kan vi utforma otillgängliga kort.
? php if (get_field ('field_name')):?> var13 -> visas när fältnamnet har ett värde? php else: // field_name returnerade falskt?> var13 -> visas när fältet inte finns? php endif ; // slutet av if field_name logic?> var13 ->
15. Städa upp gränssnittet
Nu när gränssnittsstrukturen är klar kan den utformas ordentligt. Med hjälp av CSS kan utseendet på korten och färgerna på sidan förbättras. Färgen för navigeringen har ändrats till ljusare blå och användarriktningen har förbättrats genom att lägga till introduktionstext.
16. Uteslut det från webbplatskartan
De anpassade inläggstyperna ska inte hittas i sökmotornas resultat. Inläggstypen måste uteslutas från webbplatsens webbplatskarta, antingen via ett SEO-plugin eller manuellt med en metatagg och robots.txt.
meta name = "robots" content = "noindex, nofollow" /> User-agent: * Disallow: / customers /
Vill du designa en ny webbplats? Använd en lysande webbplatsbyggare för att göra processen super enkel.
