Rakenna asiakasportaali WordPressin avulla

Sep 13, 2025
Miten tehdään
Build a client portal with WordPress
(Image Credit: Web Designer)

Alue, jonka avulla käyttäjät voivat kirjautua ja ladata tai katsella asiakirjoja, kuluttajat odottavat puhelinsopimuksia apuohjelmiin.

Kun suunnittelijat työskentelevät asiakkaidensa kanssa, kaikki voi nopeasti hajottaa sähköposteja, linkkejä mockups ja liitetiedostot.

Tämä WordPress-opetusohjelma näyttää WordPressin laajentamisen (muut sivujen ylläpito Palvelut ovat käytettävissä) Asiakasportaali, joka pystyy tallentamaan asiakirjoja, videoita ja piirustuksia, joten asiakas voi käyttää niitä yhteen paikkaan. Portaali palvelee jokaisen asiakkaan, jolla on ainutlaatuinen ja salasanalla suojattu linkki, joka ei näy säännöllisessä navigoinnissa.

Mukautettuja post-tyyppejä ja kenttiä käytetään tietojen tallentamiseen, ja ne lisätään laajennuksiin, jotta tietojen menettämisen välttämiseksi teema muuttuu. Teemaa muutetaan hieman.

Asiakasportaali antaa asiakkaille mukavuutta käyttää tiedostojaan kaikki samassa paikassa, kun he tarvitsevat niitä, paljon kuin käytettäessä pilvivarasto . Siinä on joukko liiketoiminnan etuja, mukaan lukien käytettävissä olevat myynnit, tai niitä voidaan käyttää yleiskatsaus työprosessista alusta alkaen visuaalisesti esittelemällä toimitukset.

Lataa tiedostot Tähän opetusohjelmaan.

  • Kuinka kääntää WordPressin Visual Builder

01. Asenna uusi WordPress-kopio

Tuore kopio WordPressista on asennettu kehityspalvelimeen ja "understrap" teema on valittu antamaan kattilan säätiö, jotta voit aloittaa työn nopeasti. Mukautettu post-tyyppistä UI-laajennusta käytetään, joten mukautetut post-tyypit ovat riippumattomia teemasta.

02. Poista oletuspistokkeet

Jos jokin oletuspistokkeet tulivat WordPressin kopion avulla, poista ne. Tämän opetusohjelman tarvittavat laajennukset ovat "kehittyneitä mukautettuja kenttiä" ja "Mukautettu post-tyyppi UI". "Klassinen editori" on myös asennettu.

03. Lisää mukautettu post-tyyppi

Mukautetun postityypin käyttöliittymän käyttäminen Lisää uusi viestityyppi nimeltä "Asiakas". Kun kirjoitat "Post Tyyppi Slug", käytä alaviivoja tilojen sijaan ja kirjoita yksittäismuotoon, koska se helpottaa mallien luomista myöhemmin. Preflix T_ on lisätty konfliktin mahdollisuuksien vähentämiseksi.

04. Lisää / muokkaa mukautettu post-tyyppinen käyttöliittymä

Build a client portal with WordPress: The add/edit custom post type interface

Lisää sekä yksittäiset että monikoneet (Image Credit: Web Designer)

Lisää useita merkittyjä "asiakkaita" ja yksittäisasiakas ", koska se näkyy WordPress Admin -valikossa. Aktivointi hyväksytään näillä aloilla, mikä tekee WordPress-valikon TIRIER.

05. Luo mukautettu uudelleenkirjoittaminen

Build a client portal with WordPress: Create a custom rewrite slug

Käytä mukautettua uudelleenkirjoituslamppua parempaan käyttökokemukseen (Image Credit: Web Designer)

Post-tyyppihankkeen etuliitteen käyttäminen merkitsee portaaliin lisättyjä asiakkaita luodaan linkki, joka näyttää "/ TU_CUSTOMER / ESIMERKKI-YRITYS". Tämä ei näytä siistiksi, ja mukautettua uudelleenkirjoitusta käytetään tämän parantamiseksi. Uudelleenkirjoitusluvun asettaminen "Asiakkaille" mahdollistaa mukautetun postityypin näkyvän / asiakkaiden / esimerkkinä.

06. Lisää tukea mukautettuihin kenttiin

Build a client portal with WordPress: Add support for custom fields

Valitse "Custom Field" -vaihtoehto ja lähetä muutokset (Image Credit: Web Designer)

Viimeinen vaihtoehto, joka on käytössä mukautetun postityypin "tukee & gt; mukautettu kenttä", joka löytyy lähellä sivun alareunaa. Valitse tämä ja sitten "Lisää postityyppi" sivun alareunassa. Tämä toimittaa muutokset ja rekisteröi postityypin.

07. Lisää mukautettuja kenttiä

Build a client portal with WordPress: Add custom fields

Nyt sinun on lisättävä mukautettuja kenttiä uudelle postityyppisi (Image Credit: Web Designer)

Mukautetut kentät on nyt lisättävä ja osoitettava juuri luotu viestityyppi. Kenttäryhmän lisääminen nimeltä "Asiakasportaali" on ensimmäinen askel, jonka jälkeen lisäämällä mukautetut kentät siihen Lisää-kenttäpainikkeella. Ensimmäinen kenttä "Lyhyt" asetetaan kenttätyypiksi "tiedostoksi", jonka avulla järjestelmänvalvoja voi ladata tiedoston tässä paikassa. Aseta paluuarvo "Tiedoston URL".

08. Aseta kentät

Seuraava kenttä lisätään on "brändin kyselylomake". Tämä koostuu linkistä Google-lomakkeeseen, jonka asiakkaan tulisi täyttää. Sopivin kenttätyyppi tähän on "URL". Tätä samaa menetelmää voidaan käyttää kaikilla aloilla, jotka yhdistävät ulkoiseen palveluun. Kun olet valmis, selaa alaspäin "Sijainti" -ruutuun ja käytä logiikkaa "Näytä, jos postityyppi" = "asiakas". Julkaise sitten kenttäryhmä.

Generate CSS

Varaa liput luoda CSS nyt tallentaa £ 50 (Kuva luotto: Getty / Future)

09. Luo WordPress Template -tiedosto

WordPressin täytyy tietää, miten näyttää asiakkaan kojelauta. Tätä varten seurataan WordPress Template -hierarkiaa tämän erityisen postityypin mallitiedoston luomiseksi. Luo tiedoston nimeltä Single-Tu_Customer.php juuri teemahakemistoon.

10. Luo täysi leveys yhden postin asettelu

Build a client portal with WordPress: Create a full-width single post layout

Tee sisältösi täysleveyden ulkoasu (Image Credit: Web Designer)

Avaa Single-Tu_Customer.php-tiedosto ja lisää Get_header ja Get_Footer WordPress -toiminnot. Näiden toimintojen välillä luo täyden leveyden ulkoasu, jolla voit pitää sisältöä, joka toimii teeman kanssa. 

 & lt ;? PHP GET_HEADER ();? & GT;
& lt; div luokka = "kääre" id = "Single-Wrapper" & GT;
& lt; div luokka = "Container" ID = "Sisältö" tabindex = "- 1" & gt;
& lt; div luokka = "rivi" & gt;
& lt; div luokka = "COL-MD-sisältöalue" ID = "Ensisijainen" & gt;
& lt; Main Class = "Site-main" id = "Main" & gt; & lt; -! Sisältö - & gt; & lt; / main & gt;
& lt; / div & gt;
& lt; / div & gt; & lt;! - .row - & gt;
& lt; / div & gt; & lt;! - #content - & gt;
& lt; / div & gt; & lt;! - # Single-Wrapper - & GT;
& lt ;? PHP GET_FOOTER ();? & GT;

11. Aloita silmukka ja luo sisältö

Build a client portal with WordPress: Start the loop and create the content

Käytä paikkamerkkejä määrittää sisältösi (Image Credit: Web Designer)

Pää & GT: n sisällä & lt; Soita THE_POST ja luo säiliön elementit, jotta tiedot pitävät tietoja. Käytä paikkamerkkitietoja, jotta saat käsityksen ulkoasusta ja alkaa tyytyä elementtejä. Korttielementit bootStrap-kortit, joissa on otsikko, kuvaus ja linkki. 

 & lt; Pääluokka = "Site-main" id = "Main" & gt;
& lt ;? PHP kun taas (have_posts ()): the_post (); ? & gt;
& lt; div luokka = "kontti" & gt;
& lt; div luokka = "rivi" & gt;
& lt; div luokka = "COL-SM-4" & GT; Sisältö & Lt; / Div & Gt;
& lt; div luokka = "COL-SM-4" & GT; Sisältö & lt; / div & gt;
& lt; div luokka = "COL-SM-4" & GT; Sisältö & Lt; / Div & Gt;
& lt; / div & gt;
& lt; / div & gt;
& lt ;? PHP päädään; // silmukan loppu. ? & gt;
& lt; / main & gt; & lt;! - #main - & gt;

12. Käytä PHP: tä, jos haluat soittaa dynaamisiin arvoihin

Käyttämällä toimintoa "The_field", toiminto, joka sisältää kehittyneitä mukautettuja kenttien laajennusta, mukautettujen kenttien dynaaminen sisältö syötetään asiakasmalliin. "Field_name" on vaihe, joka syötettiin vaiheeseen 3. 

 & lt; div luokka = "kortti tekstin keskusta" & gt;
& lt; div luokka = "Card-body" & gt;
& lt; h5 class = "kortti-otsikko" & gt; lyhyt & lt; / h5 & gt;
& lt; p class = "kortti-teksti" & gt; Tämä on alkuperäinen lyhyt asiakirja & lt; / p & gt;
& lt; a href = "& lt;? php the_field (" lyhyt ") ;? & gt;" Target = "Ei mitään" Class = "BTN BTN-ensisijainen" & gt; avoin & lt; / a & gt;
& lt; / div & gt;
& lt; / div & gt;

13. Tee testi asiakas, jolla on joitakin nukketietoja

Build a client portal with WordPress: Make a test customer with some dummy data

Siirry WordPress-hallintapaneeliin tehdäksesi nuken asiakkaan (Image Credit: Web Designer)

WordPress-hallintapaneelin käyttö, uusi asiakas voidaan lisätä vasemmanpuoleisesta palkista. Asiakkaat & GT; Lisää uusi asiakas. Postinäkymä on tuttu, mutta alaspäin paljastaa kaikki uudet mukautetut kentät. Syötä joitakin testitietoja varmistaaksesi, että kaikki toimii oikein.

14. Käsittele virheitä puuttuvista tiedoista

Build a client portal with WordPress: Handle errors for any missing data

Varmista, että on selvää, kun asiakirjat eivät ole käytettävissä (Image Credit: Web Designer)

Jos asiakirja on unohdettu, tai se on yksinkertaisesti liian aikaisin kyseisen asiakirjan prosessista, se voi olla sekava asiakkaalle, kun painike ei toimi. Tarkastuksen lisääminen, että arvo on olemassa ennen kuin se osoittaa, että se antaa mahdollisuuden näyttää kortin "puuttuvan kentän" vaihtelun. Luokan "käytöstä" lisätään korttiin, kun arvo puuttuu, antaa meille mahdollisuuden tyytyä ei ole käytettävissä kortteja. 

 & lt ;? PHP jos (Get_field ('field_name') :? & gt;
Näytetään, kun kenttävällä numerolla on arvo
& lt ;? PHP muut: // field_name palasi FALSE? & GT;
Näytetään, kun kenttää ei ole
& lt;? PHP Endif; // jos field_name logiikka? & gt;

15. Siivota käyttöliittymä

Nyt kun rajapinnan rakenne on viimeistelty, se voidaan muotoilla kunnolla. CSS: n avulla voidaan parantaa korttien ja värejä sivulle. Navigoinnin väri on muuttunut kevyemmäksi siniseksi, ja käyttäjän suunnan on parannettu lisäämällä esittelytapaa.

16. Sulje se sivukartta

Mukautettuja post-tyyppejä ei pitäisi löytää hakukoneissa. Postin tyyppi on jätettävä sivuston sivustokartan ulkopuolelle joko SEO-laajennuksen kautta tai manuaalisesti käyttämällä metallia ja robots.txt. 

 & lt; meta nimi = "Robotit" sisältö = "Noindex, nofollow" / & gt;
Käyttäjä agentti: *
Estä: / Asiakkaat /

Haluatko suunnitella uuden verkkosivuston? Käytä loistavaa Verkkosivuston rakentaja tehdä prosessi erittäin yksinkertainen.

Aiheeseen liittyvät artikkelit:

  • Paras Wordpress Hosting -palvelut vuonna 2019
  • 13 suurta työkalua asiakkaille
  • WordPress-sivustot: 14 Awesome esimerkkejä

Miten tehdään - Suosituimmat artikkelit

Miten sijoittaa Google

Miten tehdään Sep 13, 2025

(Kuva luotto: BuzzFeed) Joten, haluat tietää, miten sijoitetaan Googlessa. Hyvä uutinen on, että sinun ei tarvits..

Perspectionin tekeminen

Miten tehdään Sep 13, 2025

Oppiminen näkökulmasta oikein voi muuttaa oikein koko piirustusprosessia. Olipa piirrä perinteisesti lyijykynällä ja paperilla tai digitaalisesti käyttämällä grafiikkatablettia, olen..

3 Essential Zbrush Retopology Techniques

Miten tehdään Sep 13, 2025

(Kuva luotto: Glen Southern) Zbrush Retopology tai miten rotologisoida malli yleensä, on yksi asia, että kaikki 3D-..

Rakenna blogi verkkoon ja flexboxilla

Miten tehdään Sep 13, 2025

Viimeiset kaksi tai kolme vuotta ovat nähneet asettelun eteenpäin harppauksissa ja rajoissa. Nyt kun nämä modernit tekniikat ..

Kuinka luoda aito manga-sarjakuva

Miten tehdään Sep 13, 2025

Sivu 1/2: Sivu 1 Sivu 1 Sivu 2 Vaikka tyyli ja viimeistely ..

Kuinka maalata kaupunkikuva värillä

Miten tehdään Sep 13, 2025

Henkeäsalpaavat näkymät, upeat skylines ja kauniit kaupunkimaisemat tekevät suuria valokuvia, mutta voi olla melko pelottava ..

7 Killer tapoja vaikuttaa käyttäjän käyttäytymiseen

Miten tehdään Sep 13, 2025

Verkkosivustot käyttävät psykologisia tekniikoita vaikuttamaan käyttäjien käyttäytymiseen. Piirustus vuosikymmeninä akateemisen tutkimuksen, joka selittää, miten mielemme toimii ja ..

Sekoitusmuotojen käyttäminen merkitsemiseksi

Miten tehdään Sep 13, 2025

Kun olet varannut 3D-mallit Luut voivat olla erittäin tehokkaita, joskus tämä menetelmä ei ole sopiva - ja kasvojen ilmaisut ovat yksi näistä aikoista. Täl..

Luokat