Innhold
- 01. Installer en fersk kopi av WordPress
- 02. Fjern standard plugins
- 03. Legg til en tilpasset innleggstype
- 04. Legg til / rediger tilpasset innleggstypegrensesnitt
- 05. Opprett en tilpasset omskrivningsslug
- 06. Legg til støtte for tilpassede felt
- 07. Legg til egendefinerte felt
- 08. Sett opp feltene
- 09. Opprett WordPress-malfilen
- 10. Lag et enkelt innlegg i full bredde
- 11. Start løkken og lag innholdet
- 12. Bruk PHP til å ringe inn dynamiske verdier
- 13. Lag en testkunde med noen dummy-data
- 14. Håndter feil for manglende data
- 15. Ryd opp grensesnittet
- 16. Ekskluder det fra områdekartet
Å ha et område som lar brukere logge på og laste ned eller se dokumenter har blitt forventet av forbrukerne, fra telefonkontrakter til verktøy.
Når designere jobber med sine klienter, kan alt imidlertid raskt brytes ned i en virvar av e-post, lenker til mockups og vedlegg.
Denne WordPress-opplæringen viser hvordan du utvider WordPress (andre webhostingtjenester er tilgjengelige) til en klientportal som kan lagre dokumenter, videoer og tegninger, slik at 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.
Egendefinerte innleggstyper 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 filene sine alle på samme sted når de trenger dem, akkurat som når de bruker skylagring. Den har en rekke forretningsfordeler, inkludert å vise tilgjengelige oppsalg, eller kan brukes til å gi en oversikt over arbeidsprosessen fra begynnelsen ved å visuelt skissere resultatene.
Last ned filene for denne opplæringen.
- Hvordan gjøre WordPress om til en visuell byggmester
01. Installer en fersk kopi av WordPress
En fersk kopi av WordPress er installert på utviklingsserveren, og temaet "understrap" er valgt for å gi en kjeleplate for å raskt kunne starte arbeidet. Tilpasset UI-plugin vil bli brukt, så våre tilpassede innleggstyper er uavhengige av temaet.
02. Fjern standard plugins
Hvis noen standardtillegg fulgte med kopien av WordPress, slett de. Pluginene som trengs for denne opplæringen er "Advanced Custom Fields" og "Custom Post Type UI". "Classic Editor" er også installert.
03. Legg til en tilpasset innleggstype
Bruk brukergrensesnittet Custom Post Type UI, og legg til en ny posttype kalt "kunde". Når du går inn i "Post type slug", bruk understrekninger i stedet for mellomrom og skriv i entall, 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 tilpasset innleggstypegrensesnitt
Legg til et flertall merket "kunder" og entall "kunde", da dette vil vises i WordPress-administrasjonsmenyen. Store bokstaver er akseptert i disse feltene, noe som vil gjøre WordPress-menyen ryddigere.
05. Opprett en tilpasset omskrivningsslug
Å bruke et prefiks for innleggstypen vil bety at kunder som legges til portalen, vil bli opprettet med en lenke som ser ut som "/ tu_customer / example-company". Dette ser ikke ryddig ut, og den tilpassede omskrivingssneglen brukes til å forbedre dette. Ved å sette omskrivningssluggen til "kunder" kan den tilpassede innleggstypen vises som / kunder / eksempel-selskap.
06. Legg til støtte for tilpassede felt
Det siste alternativet som er aktivert for den egendefinerte innleggstypen er "Støtter> Egendefinert felt" som finnes nederst på siden. Merk av for dette, og deretter "legg til innleggstype" nederst på siden. Dette sender inn endringene og registrerer innleggstypen.
07. Legg til egendefinerte felt
Egendefinerte felt må nå legges til og tilordnes innleggstypen som nettopp ble opprettet. Å legge til en feltgruppe med navnet "kundeportal" er det første trinnet, etterfulgt av å legge til egendefinerte felt i den med knappen Legg til felt. Det første feltet "kort" vil bli satt som felttypen "fil", som lar administratoren laste opp en fil på dette stedet. Sett returverdien til "file url".
08. Sett opp feltene
Det neste feltet som skal legges til er "merkevarespørreskjema." Dette vil bestå av en lenke til et google-skjema som kunden skal fylle ut. Den mest egnede felttypen for dette er "URL". Den samme metoden kan brukes i alle felt som vil lenke til en ekstern tjeneste. Når du er ferdig, blar du ned til "lokasjon" -boksen og bruker logikken "Vis om innleggstype" = "kunde". Publiser deretter feltgruppen.
09. Opprett WordPress-malfilen
WordPress trenger å vite hvordan du viser et kundedashboard. For dette følges WordPress malhierarkiet for å lage en malfil for denne spesifikke innleggstypen. Opprett en fil som heter single-tu_customer.php i rottema-katalogen.
10. Lag et enkelt innlegg i full bredde
Åpne filen single-tu_customer.php og legg til WordPress-funksjonene get_header og get_footer. Mellom disse funksjonene, opprett et layout i full bredde for å holde innholdet som fungerer med temaet ditt.
? php get_header ();?> div id = "single-wrapper"> div id = "content" tabindex = "- 1"> div> div id = "primary"> main id = "main"> -! Innhold -> / main> / div> / div>! - .row -> / div>! - #content -> / div>! - # single-wrapper ->? Php get_footer () ;?>
11. Start løkken og lag innholdet
Innen hovedelementet, ring_post og opprett containerelementene for å holde informasjon. Bruk informasjon om plassholder for å få en ide om oppsettet, og begynn å style elementene. Kortelementene vil være bootstrap-kort med en overskrift, beskrivelse og en lenke.
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; // enden av løkken. ?> var13 -> / main>! - #main ->
12. Bruk PHP til å ringe inn dynamiske verdier
Ved å bruke funksjonen "the_field", en funksjon som følger med den avanserte plugin-modulen for tilpassede felt, legges det dynamiske innholdet fra de tilpassede feltene inn i kundemalen. Feltnavn er verdien som ble angitt i trinn 3.
div> div> h5> Kort / h5> p> Dette er ditt originale korte dokument / p> a href = "? php the_field ('brief');?> var13 ->" target = "none"> Åpne / a > / div> / div>
13. Lag en testkunde med noen dummy-data
Når du får tilgang til WordPress-dashbordet, kan en ny kunde legges til fra venstre bar. Kunder> Legg til ny kunde. Innleggsvisningen vil være kjent, men å bla nedover avslører alle de nye egendefinerte feltene. Skriv inn noen testdata for å sikre at alt fungerer som det skal.
14. Håndter feil for manglende data
Hvis et dokument blir glemt, eller det bare er for tidlig i prosessen for at dokumentet skal være tilgjengelig, kan det være forvirrende for en kunde når knappen ikke fungerer. Å legge til en sjekk om at en verdi eksisterer før den vises, gir en sjanse til å vise en "manglende felt" -variasjon på kortet. Hvis du legger til en klasse "deaktivert" på kortet når verdien mangler, kan vi utforme utilgjengelige kort.
? php hvis (get_field ('feltnavn')):?> var13 -> vises når feltnavnet har en verdi? php annet: // feltnavn returnerte falsk?> var13 -> vises når feltet ikke eksisterer? php endif ; // slutten av hvis feltnavnlogikk?> var13 ->
15. Ryd opp grensesnittet
Nå som strukturen til grensesnittet er ferdig, kan den utformes riktig. Ved hjelp av CSS kan utseendet på kortene og fargene på siden forbedres. Fargen på navigasjonen er endret til lysere blå, og brukerretningen er forbedret ved å legge til introduksjonstekst.
16. Ekskluder det fra områdekartet
De egendefinerte innleggstypene skal ikke bli funnet i søkemotorenes resultater. Innleggstypen må ekskluderes fra nettstedets områdekart, enten gjennom et SEO-plugin, eller manuelt ved hjelp av en metatagg og robots.txt.
meta name = "robots" content = "noindex, nofollow" /> User-agent: * Disallow: / customers /
Vil du designe et nytt nettsted? Bruk en glimrende nettstedbygger for å gjøre prosessen superenkel.
