Sadržaj
- 01. Instalirajte novu kopiju WordPressa
- 02. Uklonite zadane dodatke
- 03. Dodajte prilagođenu vrstu posta
- 04. Dodavanje / uređivanje prilagođenog sučelja tipa posta
- 05. Stvorite prilagođeni puž za prepisivanje
- 06. Dodajte podršku za prilagođena polja
- 07. Dodajte prilagođena polja
- 08. Postavite polja
- 09. Stvorite datoteku WordPress predloška
- 10. Stvorite raspored pojedinačnog posta pune širine
- 11. Pokrenite petlju i izradite sadržaj
- 12. Upotrijebite PHP za pozivanje dinamičkih vrijednosti
- 13. Napravite test kupca s nekim lažnim podacima
- 14. Obradite pogreške za podatke koji nedostaju
- 15. Uredi središte sučelja
- 16. Izuzmite ga iz karte web mjesta
Korisnici su očekivali posjedovanje područja koje korisnicima omogućuje prijavu i preuzimanje ili pregled dokumenata, od telefonskih ugovora do komunalnih usluga.
Međutim, kada dizajneri rade sa svojim klijentima, sve se brzo može razbiti u zbrku e-pošte, veza do maketa i privitaka.
Ovaj vodič za WordPress pokazat će kako proširiti WordPress (dostupne su i druge usluge web hostinga) na klijentski portal sposoban za pohranu dokumenata, videozapisa i crteža, tako da ih klijent može pristupiti na jednom mjestu. Portal će svakom kupcu pružiti jedinstvenu vezu zaštićenu lozinkom koja se ne pojavljuje u redovitoj navigaciji.
Prilagođene vrste i polja posta koristit će se za pohranu podataka, a oni će se dodavati putem dodataka, kako bi se izbjegao gubitak podataka u slučaju promjene teme. Tema će biti malo izmijenjena.
Imati klijentski portal pruža kupcima praktičnost pristupa njihovim datotekama na istome mjestu, kad god im zatrebaju, slično kao kada koriste pohranu u oblaku. Ima niz poslovnih prednosti, uključujući prikazivanje dostupnih nadogradnji, ili se može koristiti za davanje pregleda procesa rada od početka vizualnim iscrtavanjem rezultata.
Preuzmite datoteke za ovaj vodič.
- Kako WordPress pretvoriti u vizualni graditelj
01. Instalirajte novu kopiju WordPressa
Svježa kopija WordPressa instalirana je na razvojnom poslužitelju, a tema "understrap" odabrana je kako bi se stvorili temeljni temelji kako bi se brzo započelo s radom. Upotrijebit će se dodatak za prilagođeni tip korisničkog sučelja, tako da su naše prilagođene vrste postova neovisne o temi.
02. Uklonite zadane dodatke
Ako su uz kopiju WordPressa stigli bilo koji zadani dodaci, izbrišite ih. Dodaci potrebni za ovaj vodič su "Napredna prilagođena polja" i "Korisničko sučelje prilagođenog tipa posta". Instaliran je i "Classic Editor".
03. Dodajte prilagođenu vrstu posta
Korištenjem korisničkog sučelja Prilagođeni tip objave dodajte novu vrstu objave koja se naziva "kupac". Prilikom unošenja "Slug tipa pošta", koristite razmake umjesto razmaka i pišite u jednini, jer će to kasnije olakšati izradu predložaka. Prefiks tu_ dodan je kako bi se smanjila vjerojatnost sukoba.
04. Dodavanje / uređivanje prilagođenog sučelja tipa posta
Dodajte množinu s oznakom "kupci" i jedninu "kupac", jer će se to pojaviti u administracijskom izborniku WordPressa. U ovim se poljima prihvaća velika slova, što će WordPressov izbornik učiniti urednijim.
05. Stvorite prilagođeni puž za prepisivanje
Korištenje prefiksa za puž tipa post značit će da će kupci dodani na portal biti stvoreni s vezom koja izgleda kao "/ tu_customer / example-company". Ovo ne izgleda uredno, a za poboljšanje se koristi prilagođeni puž za prepisivanje. Postavljanje puža za prepisivanje na "kupci" omogućuje prilagođenom tipu posta da se prikazuje kao / kupci / primjer-tvrtka.
06. Dodajte podršku za prilagođena polja
Posljednja opcija koja je omogućena za prilagođenu vrstu posta je "Podržava> Prilagođeno polje" koja se nalazi pri dnu stranice. Označite ovo, a zatim na dnu stranice "dodajte vrstu posta". Ovo podnosi promjene i registrira vrstu posta.
07. Dodajte prilagođena polja
Sada treba dodati prilagođena polja i dodijeliti tipu posta koji je upravo stvoren. Prvi je korak dodavanje grupe polja pod nazivom "portal kupaca", nakon čega slijedi dodavanje prilagođenih polja gumbom za dodavanje polja. Prvo polje "kratko" postavit će se kao tip polja "datoteka", što administratoru omogućuje prijenos datoteke na ovom mjestu. Postavite povratnu vrijednost na "url datoteke".
08. Postavite polja
Sljedeće polje koje treba dodati je "upitnik robne marke". To će se sastojati od veze na google obrazac koji bi kupac trebao ispuniti. Najprikladnija vrsta polja za to je "URL". Ista se metoda može koristiti za sva polja koja će se povezivati s vanjskom uslugom. Kad završite, pomaknite se prema dolje do okvira "lokacija" i upotrijebite logiku "Prikaži ako je vrsta pošte" = "Kupac". Zatim objavite grupu polja.
09. Stvorite datoteku WordPress predloška
WordPress mora znati kako prikazati nadzornu ploču kupca. U tu se svrhu slijedi hijerarhija WordPress predloška za stvaranje datoteke predloška za ovu određenu vrstu posta. Stvorite datoteku nazvanu single-tu_customer.php u korijenskom direktoriju teme.
10. Stvorite raspored pojedinačnog posta pune širine
Otvorite datoteku single-tu_customer.php i dodajte funkcije get_header i get_footer WordPress. Između tih funkcija stvorite izgled pune širine za zadržavanje sadržaja koji odgovara vašoj temi.
? php get_header ();?> div id = "single-wrapper"> div id = "content" tabindex = "- 1"> div> div id = "primary"> glavni id = "main"> -! Sadržaj -> / main> / div> / div>! - .row -> / div>! - #content -> / div>! - # single-wrapper ->? Php get_footer () ;?>
11. Pokrenite petlju i izradite sadržaj
Unutar glavnog> elementa pozovite the_post i stvorite elemente spremnika koji će sadržavati informacije. Upotrijebite informacije o rezerviranom mjestu kako biste stekli ideju o izgledu i počnite oblikovati elemente. Elementi kartice bit će bootstrap kartice sa zaglavljem, opisom i poveznicom.
glavni id = "main">? php while (have_posts ()): the_post (); ?> var13 -> div> div> div> Content / div> div> Content / div> div> Content / div> / div> / div>? php endading; // kraj petlje. ?> var13 -> / main>! - #main ->
12. Upotrijebite PHP za pozivanje dinamičkih vrijednosti
Korištenjem funkcije "the_field", funkcije koja dolazi s dodatkom za napredna prilagođena polja, dinamički sadržaj iz prilagođenih polja unosi se u korisnički obrazac. 'Ime_polja' vrijednost je koja je unesena u koraku 3.
div> div> h5> Kratko / h5> p> Ovo je vaš izvorni kratki dokument / p> a href = "? php the_field ('kratko');?> var13 ->" target = "none"> Otvori / a > / div> / div>
13. Napravite test kupca s nekim lažnim podacima
Pristupajući WordPress nadzornoj ploči, novi se kupac može dodati s lijeve trake. Kupci> Dodaj novog kupca. Prikaz posta bit će poznat, ali pomicanjem prema dolje otkrit će se sva nova prilagođena polja. Unesite neke podatke o ispitivanju kako biste bili sigurni da sve radi ispravno.
14. Obradite pogreške za podatke koji nedostaju
Ako se dokument zaboravi ili je jednostavno prerano u procesu da bi taj dokument bio dostupan, kupca bi moglo zbuniti kad gumb ne radi. Dodavanjem provjere da li vrijednost postoji prije pokazivanja daje se mogućnost prikaza varijacije kartice "polje koje nedostaje". Dodavanje razreda "onemogućenog" na karticu kada vrijednost nedostaje omogućit će nam oblikovanje nedostupnih kartica.
? php if (get_field ('ime_polja')):?> var13 -> prikazuje se kada ime_polja ima vrijednost? php else: // ime_polja vraćeno je false?> var13 -> prikazuje se kad polje ne postoji? php endif ; // kraj logike if_naziv?> var13 ->
15. Uredi središte sučelja
Sad kad je struktura sučelja finalizirana, može se pravilno oblikovati. Korištenjem CSS-a može se poboljšati izgled karata i boje na stranici. Boja za navigaciju promijenjena je u svjetlije plavu, a smjer korisnika poboljšan je dodavanjem uvodnog teksta.
16. Izuzmite ga iz karte web mjesta
Prilagođene vrste postova ne bi se trebale nalaziti u rezultatima pretraživača. Vrsta posta treba biti izuzeta iz karte web lokacije, bilo putem dodatka za SEO ili ručno pomoću metaoznake i robots.txt.
meta name = "robots" content = "noindex, nofollow" /> Korisnički agent: * Zabraniti: / kupci /
Želite dizajnirati novu web stranicu? Upotrijebite briljantnog graditelja web stranica kako biste postupak učinili super jednostavnim.
