Sestavte klientský portál s WordPress

Sep 16, 2025

jak

(Image Credit: Web Designer)

Mít oblast, která umožňuje uživatelům přihlášení a stahování nebo zobrazení dokumentů očekávat spotřebitelé, od telefonních smluv na veřejné služby.

Když návrháři pracují se svými klienty, vše se může rychle rozpadnout do zmatku e-mailů, odkazy na Mockups. a přílohy.

Tento Wordpress tutorial. Ukáže, jak rozšířit WordPress (jiné web hosting Služby jsou k dispozici) do klientského portálu schopného ukládat dokumenty, videa a kresby, takže klient je může přistupovat na jedno místo. Portál bude sloužit každému zákazníkovi jedinečným a heslem chráněným odkazem, který se neobjeví v pravidelné navigaci.

Vlastní typy příspěvků a polí budou použity k ukládání dat a které budou přidány prostřednictvím pluginů, aby se zabránilo ztrátě dat, pokud změna motivu. Téma bude mírně upraveno.

Mít klientský portál dává zákazníkům pohodlí přístupu ke svým souborům na stejném místě, kdykoliv je potřebují, stejně jako při použití cloudové úložiště . Má řadu obchodních výhod, včetně pořizovacích dostupných up-prodává, nebo mohou být použity k poskytnutí přehledu procesu práce od začátku tím, že vizuálně nastiňuje výstupy.

Stáhněte si soubory pro tento tutoriál.

Jak zapnout Wordpress do vizuálního stavitele

01. Nainstalujte čerstvou kopii WordPress

Na vývojovém serveru je nainstalována čerstvá kopie aplikace WordPress a motiv "Understrap" bylo vybráno tak, aby poskytovaly nadaci kotle, aby se rychle začal pracovat. Zásuvný modul UI Type typu Post bude použit tak, aby naše vlastní typy post nezávislé na téma.

02. Odstraňte výchozí pluginy

Pokud přišly výchozí pluginy s kopií WordPress, odstraňte ty. Pluginy potřebné pro tento kurz jsou "Advanced Custom Pole" a "Vlastní post typ UI". Byl také nainstalován "Classic Editor".

03. Přidat vlastní typ příspěvku

Pomocí uživatelského rozhraní typu Post typu UI přidejte nový typ příspěvku s názvem "Zákazník". Při zadávání "Slug typu typu" použijte podtržítko namísto mezer a psát v singulární formě, protože to usnadní vytváření šablon později. Předpona Tu_ byla přidána ke snížení šance konfliktu.

04. Přidat / upravit vlastní rozhraní post

Build a client portal with WordPress: The add/edit custom post type interface — Přidejte singulární i množné štítky (Image Credit: Web Designer)

Přidejte množné číslo označené "Zákazníci" a singulární "zákazník", protože se zobrazí v nabídce Správce aplikace WordPress. Kapitalizace je přijímána v těchto oblastech, která provede Wordpress Menu Tidier.

05. Vytvořte vlastní rewrite slug

Build a client portal with WordPress: Create a custom rewrite slug — Pro lepší uživatelské zkušenosti použijte vlastní rewrite Slug (Image Credit: Web Designer)

Použití předpony pro Slug Type bude znamenat, že zákazníci přidali do portálu budou vytvořeny s odkazem, který vypadá jako "/ tu_customer / příklad-společnost". To nevypadá uklizené, a vlastní přepisovací slug se používá ke zlepšení tohoto. Nastavení přepisu slug na "Zákazníci" umožňuje, aby typ vlastního příspěvku se zobrazí jako / zákazníci / example-company.

06. Přidat podporu pro vlastní pole

Build a client portal with WordPress: Add support for custom fields — Zaškrtněte volbu "Vlastní pole" a odešlete změny (Image Credit: Web Designer)

Poslední možností, která je povolena pro typ vlastního příspěvku, je "podporuje & gt; vlastní pole", které se nachází v blízkosti spodní části stránky. Zaškrtněte toto a pak "Přidat typ příspěvku" v dolní části stránky. To předkládá změny a registruje typ příspěvku.

07. Přidat vlastní pole

Build a client portal with WordPress: Add custom fields — Nyní musíte přidat vlastní pole do nového typu příspěvku (Image Credit: Web Designer)

Vlastní pole musí být nyní přidána a přiřazena typu příspěvku, který byl právě vytvořen. Přidání skupiny pole s názvem "Zákaznický portál" je prvním krokem, následovaný přidáním vlastních polí do ní pomocí tlačítka Přidat pole. První pole "Stručná" bude nastavena jako typ pole ", což umožňuje správci nahrát soubor v tomto místě. Nastavte vrácenou hodnotu do "URL souboru".

08. Nastavte pole

Další pole, které má být přidáno, je "značkový dotazník". To bude obsahovat odkaz na formulář Google, který by zákazník měl vyplnit. Nejvhodnější typ pole pro to je "URL". Stejná metoda lze použít pro všechna pole, která budou odkazovat na externí službu. Po dokončení přejděte dolů na pole "Umístění" a použijte logiku "Zobrazit, pokud typ příspěvku" = "Zákazník". Pak zveřejní skupinu pole.

Generate CSS — Rezervujte si vstupenky na generování CSS nyní ušetřit £ 50 (Image Credit: Getty / Future)

09. Vytvořte soubor šablony WordPress

WordPress musí vědět, jak zobrazit zákaznickou palubní desku. Pro to je Wordpress šablony Hierarchie následuje vytvořit soubor šablony pro tento konkrétní typ příspěvku. Vytvořit soubor s názvem Single-Tu_Customer.php v adresáři motivu Root.

10. Vytvořte plnou šířku s jedním příspěvkem

Build a client portal with WordPress: Create a full-width single post layout — Proveďte rozložení plné šířky pro váš obsah (Image Credit: Web Designer)

Otevřete soubor singl-tu_customer.php a přidejte funkce get_header a get_footer wordpress. Mezi těmito funkcemi vytvořte rozvržení plné šířky pro uspořádání obsahu, který pracuje s tématem.

 & lt;? Php get_header ();? & Gt;
& lt; dig class = "wrapper" id = "jedno-wrapper" & gt;
& lt; dig class = "kontejner" id = "obsah" tabindex = "- 1" & gt;
& lt; divová třída = "řádek" & gt;
& lt; dig class = "col-md obsahová oblast" id = "primární" & gt;

11. Spusťte smyčku a vytvořte obsah

Build a client portal with WordPress: Start the loop and create the content — Použijte zástupné symboly pro rozložení obsahu (Image Credit: Web Designer)

V rámci Main & gt; Prvek, volání the_post a vytvořit kontejnerové prvky, které mají informace. Použijte informace o zástupném zápisu, abyste získali představu o rozvržení a začněte stylem prvků. Prvky karet budou bootstrap karty s záhlaví, popisem a odkazem.

 Hlavní třída = "Site-Hlavní" ID = "MAIN" & GT;
PHP, zatímco (has_posts ()): the_post (); ? & gt;
& lt; dig class = "kontejner" & gt;
& lt; divová třída = "řádek" & gt;
& lt; divové třídy = "col-sm-4" & gt; obsah & lt; / div & gt;
& lt; divové třídy = "col-sm-4" & gt; obsah & lt; / div & gt;
& lt; divové třídy = "col-sm-4" & gt; obsah & lt; / div & gt;
& lt; / div & gt;
& lt; / div & gt;
php endwhile; // konec smyčky. ? & gt;
& lt; / hlavní & gt; & lt;! - #main - & gt;

12. Použijte PHP pro volání dynamických hodnot

Pomocí funkce "The_field", funkce, která je dodávána s moderními vlastními poli plugin, je do šablony zákazníka zadán dynamický obsah z vlastních polí. 'Field_name' je hodnota, která byla zadána v kroku 3.

 & lt; divá třída = "card text-centrum" & gt;
& lt; divové třídy = "karetní tělo" & gt;
& lt; h5 třída = "kartu titul" & gt; krátký & lt; / h5 & gt;
& lt; p tříd = "karetní text" & gt; Toto je váš původní krátký dokument & lt; / p & gt;
& lt; a href = "& lt;? php the_field ('stručný');? & gt;" Cíl = "Žádná" třída = "btn btn-primární" & gt; otevřený & lt; / a & gt;
& lt; / div & gt;
& lt; / div & gt;

13. Udělejte testovacího zákazníka s některými fiktivními daty

Build a client portal with WordPress: Make a test customer with some dummy data — Přejděte do řídicího panelu Wordpress, abyste vytvořili fiktivní zákazník (Image Credit: Web Designer)

Přístup k přístrojové desce WordPress, nový zákazník může být přidán z levého panelu. Zákazníci & GT; Přidat nového zákazníka. Pohled zobrazení bude obeznámen, ale rolování dolů odhalí všechna nová vlastní pole. Zadejte některá zkušební data, abyste se ujistili, že vše funguje správně.

14. Chyby zacházet s chybějícími daty

Build a client portal with WordPress: Handle errors for any missing data — Ujistěte se, že je to jasné, když dokumenty nejsou k dispozici (Image Credit: Web Designer)

Pokud je dokument zapomenut, nebo je to prostě příliš brzy v procesu tohoto dokumentu, který má být k dispozici, mohlo by to být matoucí pro zákazníka, když tlačítko nefunguje. Přidání zkontrolovat, že hodnota existuje dříve, než ukazuje, že dává šanci ukázat "chybějící pole" variace karty. Přidání třídy "Disabled" na kartu, když hodnota chybí, umožní nám stylem nedostupné karty.

 PHP, pokud (get_field ('field_name')):? & Gt;
zobrazí se, když má pole pole hodnotu
PHP Jinak: // Field_name vrátil False?
zobrazí se, když pole neexistuje
PHP Endif; // konec, pokud je to pole_name logika? & gt;

15. Uklidujte rozhraní

Nyní, když je struktura rozhraní dokončena, může být správně stylizována. Použití CSS lze zlepšit vzhled karet a barev na stránce. Barva pro navigaci byla změněna na světlejší modrý a směr uživatele byl vylepšen přidáním úvodního textu.

16. Vylučovat jej z Sitemapu

Vlastní typy post by neměly být nalezeny ve výsledcích vyhledávačů. Typ post musí být vyloučen z mapopisu webových stránek, a to buď prostřednictvím SEO pluginu, nebo ručně pomocí meta tagu a robotů.txt.

 & lt; meta název = "roboty" obsah = "noindex, nofollow" / & gt;
Uživatelská agenta: *
Zakázat: / Zákazníci /

Chcete navrhnout nové webové stránky? Použijte brilantní Webové stránky Builder. aby proces super-jednoduchý.

Související články:

Nejlepší WordPress Hosting Services v roce 2019
13 Skvělé nástroje pro hoření klientům
Wordpress Webové stránky: 14 úžasných příkladů

Sestavte klientský portál s WordPress

01. Nainstalujte čerstvou kopii WordPress

02. Odstraňte výchozí pluginy

03. Přidat vlastní typ příspěvku

04. Přidat / upravit vlastní rozhraní post

05. Vytvořte vlastní rewrite slug

06. Přidat podporu pro vlastní pole

07. Přidat vlastní pole

08. Nastavte pole

09. Vytvořte soubor šablony WordPress

10. Vytvořte plnou šířku s jedním příspěvkem

11. Spusťte smyčku a vytvořte obsah

12. Použijte PHP pro volání dynamických hodnot

13. Udělejte testovacího zákazníka s některými fiktivními daty

14. Chyby zacházet s chybějícími daty

15. Uklidujte rozhraní

16. Vylučovat jej z Sitemapu

jak - Nejoblíbenější články

Jamstack: Sestavte rychlejší, efektivnější webové stránky dnes

21 způsobů, jak zlepšit produktivitu s NPM

Vytvořit příjemný interiér pomocí řadového umění

Jak vytvořit autentický manga komiks

Jak kreslit kovové odrazy

Jak vytvořit ovládací prvky vlastního soutěže v Maya

Jak vyřezávat a představovat kreslený hlavu v Zbrushu

Začínáme s prototypem v Adobe XD

Kategorie