Sisältö
- 01. Asenna uusi kopio WordPressistä
- 02. Poista oletuksena olevat laajennukset
- 03. Lisää mukautettu postityyppi
- 04. Lisää / muokkaa mukautetun postityypin käyttöliittymä
- 05. Luo mukautettu uudelleenkirjoitussäde
- 06. Lisää tuki mukautetuille kentille
- 07. Lisää mukautettuja kenttiä
- 08. Määritä kentät
- 09. Luo WordPress-mallitiedosto
- 10. Luo täysleveä yhden pylvään asettelu
- 11. Aloita silmukka ja luo sisältö
- 12. Käytä PHP: tä kutsuaksesi dynaamisia arvoja
- 13. Tee testiasiakkaaksi joitain nuken tietoja
- 14. Käsittele puuttuvien tietojen virheet
- 15. Siivoa käyttöliittymä
- 16. Sulje se sivukartasta
Kuluttajat ovat odottaneet, että sinulla on alue, jolla käyttäjät voivat kirjautua sisään ja ladata tai tarkastella asiakirjoja puhelinsopimuksista apuohjelmiin.
Kun suunnittelijat työskentelevät asiakkaidensa kanssa, kaikki voi kuitenkin nopeasti hajota sekaannukseen sähköposteista, linkeistä mockupiin ja liitteisiin.
Tämä WordPress-opetusohjelma näyttää, kuinka WordPress voidaan laajentaa (muita verkkopalvelupalveluja on saatavana) asiakasportaaliksi, joka pystyy tallentamaan asiakirjoja, videoita ja piirustuksia, jotta asiakas voi käyttää niitä kaikkia yhdessä paikassa. Portaali palvelee kaikkia asiakkaita ainutlaatuisella ja salasanasuojatulla linkillä, jota ei näy tavallisessa navigoinnissa.
Mukautettuja postityyppejä ja kenttiä käytetään tietojen tallentamiseen, ja ne lisätään laajennusten kautta, jotta vältetään tietojen menetys, jos teema muuttuu. Teemaa muutetaan hieman.
Asiakasportaalin saaminen antaa asiakkaille mahdollisuuden käyttää tiedostojaan samassa paikassa aina, kun he tarvitsevat niitä, aivan kuten pilvitallennustilaa käytettäessä. Sillä on joukko liiketoiminnan etuja, mukaan lukien käytettävissä olevien myyntien näyttäminen, tai sitä voidaan käyttää yleiskuvan antamiseen työprosessista alusta alkaen visuaalisesti hahmottamalla tuotokset.
Lataa tiedostot tähän opetusohjelmaan.
- Kuinka muuttaa WordPress visuaaliseksi rakennustyökaluksi
01. Asenna uusi kopio WordPressistä
Tuore kopio WordPressistä asennetaan kehityspalvelimeen, ja "understrap" -teema on valittu antamaan kattilapohjan työn aloittamiseksi nopeasti. Mukautettua postityypin käyttöliittymää käytetään, joten mukautetut postityypit ovat teemasta riippumattomia.
02. Poista oletuksena olevat laajennukset
Jos WordPress-kopion mukana tuli oletuslaajennuksia, poista ne. Tämän opetusohjelman edellyttämät laajennukset ovat "Lisäasetukset Mukautetut kentät" ja "Mukautetun postityypin käyttöliittymä". "Classic Editor" on myös asennettu.
03. Lisää mukautettu postityyppi
Lisää mukautetun postityypin käyttöliittymän avulla uusi postityyppi nimeltä asiakas. Kun kirjoitat "Post type slug", käytä alaviivaa välilyöntien sijaan ja kirjoita yksikkömuodossa, koska se helpottaa mallien luomista myöhemmin. Etuliite tu_ on lisätty ristiriidan mahdollisuuden vähentämiseksi.
04. Lisää / muokkaa mukautetun postityypin käyttöliittymä
Lisää monikko nimeltään "asiakkaat" ja yksikkö "asiakas", koska se näkyy WordPress-järjestelmänvalvojavalikossa. Isot kirjaimet hyväksytään näissä kentissä, mikä tekee WordPress-valikosta siistimpiä.
05. Luo mukautettu uudelleenkirjoitussäde
Etuliitteen käyttäminen postityypin etanassa tarkoittaa, että portaaliin lisätyt asiakkaat luodaan linkillä, joka näyttää tältä: "/ tu_asiakas / esimerkki-yritys". Tämä ei näytä siistiltä, ja tämän parantamiseksi käytetään mukautettua uudelleenkirjoitustilaa. Kun uudelleenkirjoitustyyny asetetaan "asiakkaiksi", mukautettu postityyppi näkyy nimellä / customers / example-company.
06. Lisää tuki mukautetuille kentille
Viimeinen vaihtoehto, joka on käytössä mukautetulle postityypille, on "Tuet> Mukautettu kenttä", joka löytyy lähellä sivun alaosaa. Valitse tämä ja lisää sivun alaosaan "lisää postityyppi". Tämä lähettää muutokset ja rekisteröi postityypin.
07. Lisää mukautettuja kenttiä
Mukautetut kentät on nyt lisättävä ja määritettävä juuri luotulle postityypille. "Asiakasportaali" -nimisen kenttäryhmän lisääminen on ensimmäinen vaihe, jonka jälkeen siihen lisätään mukautettuja kenttiä Lisää kenttä -painikkeella. Ensimmäinen kenttä "lyhyt" asetetaan kenttätyypiksi "tiedosto", jonka avulla järjestelmänvalvoja voi ladata tiedoston tähän sijaintiin. Aseta palautusarvoksi "file url".
08. Määritä kentät
Seuraava lisättävä kenttä on "tuotemerkkikysely". Tämä koostuu linkistä google-lomakkeeseen, jonka asiakkaan on täytettävä. Sopivin kenttätyyppi tähän on "URL". Tätä samaa menetelmää voidaan käyttää kaikissa kentissä, jotka linkitetään ulkoiseen palveluun. Kun olet valmis, vieritä alas "sijainti" -ruutuun ja käytä logiikkaa "Näytä, jos postityyppi" = "Asiakas". Julkaise sitten kenttäryhmä.
09. Luo WordPress-mallitiedosto
WordPressin on osattava näyttää asiakkaan hallintapaneeli. Tätä varten WordPress-mallihierarkiaa noudatetaan luomaan mallipohjatiedosto tälle erityiselle postityypille. Luo pääteemahakemistoon tiedosto single-tu_customer.php.
10. Luo täysleveä yhden pylvään asettelu
Avaa single-tu_customer.php-tiedosto ja lisää get_header- ja get_footer-toiminnot WordPress. Luo näiden toimintojen väliin täysleveä asettelu, joka pitää sisällään teemaasi vastaavan sisällön.
? php get_header ();?> div id = "single-wrapper"> div id = "content" tabindex = "- 1"> div> div id = "ensisijainen"> main id = "main"> -! Sisältö -> / main> / div> / div>! - .row -> / div>! - #content -> / div>! - # single-wrapper ->? Php get_footer () ;?>
11. Aloita silmukka ja luo sisältö
Kutsu pääelementin sisällä the_post ja luo säilöelementit tietojen säilyttämiseksi. Käytä paikkamerkkitietoja saadaksesi kuvan asettelusta ja aloita elementtien muotoilu. Korttielementit ovat bootstrap-kortteja, joissa on otsikko, kuvaus ja linkki.
main id = "main">? php while (have_posts ()): the_post (); ?> var13 -> div> div> div> Content / div> div> Content / div> div> Content / div> / div> / div>? php loppu; // silmukan loppu. ?> var13 -> / main>! - #main ->
12. Käytä PHP: tä kutsuaksesi dynaamisia arvoja
Käyttämällä funktiota "the_field", joka on edistyneiden mukautettujen kenttien laajennuksen mukana tuleva mukautettujen kenttien dynaaminen sisältö syötetään asiakasmalliin. Kentän_nimi on arvo, joka syötettiin vaiheessa 3.
div> div> h5> Lyhyt / h5> p> Tämä on alkuperäinen lyhyt asiakirjasi / p> a href = "? php the_field ('brief');?> var13 ->" target = "none"> Open / a > / div> / div>
13. Tee testiasiakkaaksi joitain nuken tietoja
Kun avaat WordPress-hallintapaneelin, uusi asiakas voidaan lisätä vasemmanpuoleisesta palkista. Asiakkaat> Lisää uusi asiakas. Viestinäkymä on tuttu, mutta vierittäminen alaspäin paljastaa kaikki uudet mukautetut kentät. Syötä testitiedot varmistaaksesi, että kaikki toimii oikein.
14. Käsittele puuttuvien tietojen virheet
Jos asiakirja unohdetaan tai asiakirjan saatavuus on yksinkertaisesti liian aikaista, se voi olla asiakkaalle hämmentävää, kun painike ei toimi. Lisäämällä tarkistus siitä, että arvo on olemassa ennen sen näyttämistä, on mahdollisuus näyttää kortin "puuttuvan kentän" muunnelma. Jos lisäät luokan "poistettu käytöstä" kortille, kun arvo puuttuu, voimme tyylitellä poissa olevat kortit.
? php if (get_field ('kentän_nimi')):?> var13 -> näytetään, kun kentän_nimellä on arvo? php else: // kentän_nimi palautti väärän?> var13 -> näytetään, kun kenttää ei ole? php endif ; // if kentän_nimi-logiikan loppu?> var13 ->
15. Siivoa käyttöliittymä
Nyt kun käyttöliittymän rakenne on viimeistelty, se voidaan muotoilla oikein. CSS: n avulla sivun korttien ja värien ulkonäköä voidaan parantaa. Navigoinnin väri on muutettu vaaleammaksi siniseksi ja käyttäjän suuntaa on parannettu lisäämällä esittelyteksti.
16. Sulje se sivukartasta
Muokattuja postityyppejä ei pitäisi löytää hakukoneiden tuloksista. Viestityyppi on suljettava pois verkkosivustokartasta joko SEO-laajennuksen kautta tai manuaalisesti sisällönkuvauskentän ja robots.txt-tiedoston avulla.
meta name = "robots" content = "noindex, nofollow" /> User-agent: * Estä: / customers /
Haluatko suunnitella uuden verkkosivuston? Tee prosessista erittäin yksinkertainen käyttämällä loistavaa verkkosivustojen rakennuttajaa.
