Изградете клиентски портал с WordPress

Изградете клиентски портал с WordPress
(Кредит за изображение: Уеб дизайнер)

Наличието на зона, която позволява на потребителите да влизат и изтеглят или преглеждат документи, се очаква от потребителите, от телефонни договори до комунални услуги.

Когато обаче дизайнерите работят със своите клиенти, всичко може бързо да се разпадне в бъркотия от имейли, връзки към макети и прикачени файлове.



Това Урок за WordPress ще покаже как да разширите WordPress (други уеб хостинг услугите са налични) в клиентски портал, способен да съхранява документи, видеоклипове и чертежи, така че клиентът да има достъп до всички тях на едно място. Порталът ще обслужва всеки клиент с уникална и защитена с парола връзка, която не се появява в редовната навигация.



Персонализирани типове публикации и полета ще се използват за съхраняване на данните и те ще бъдат добавени чрез приставки, за да се избегне загуба на данни, ако темата се промени. Темата ще бъде леко модифицирана.

Наличието на клиентски портал дава на клиентите удобството за достъп до файловете им на едно и също място, винаги когато имат нужда от тях, подобно на използването им съхранение в облака . Той има редица бизнес предимства, включително показване на налични продажби или може да се използва за представяне на общ преглед на работния процес от самото начало, като визуално очертава резултатите.



Изтеглете файловете за този урок.

01. Инсталирайте ново копие на WordPress

На сървъра за разработка е инсталирано ново копие на WordPress, а темата „understrap“ е избрана, за да даде основата на шаблон, за да започне бързо работа. Ще се използва приставката за потребителски интерфейс по избор, така че нашите персонализирани типове публикации са независими от темата.

02. Премахнете приставките по подразбиране

Ако с копието на WordPress се доставят някакви приставки по подразбиране, изтрийте ги. Плъгините, необходими за този урок, са „Разширени персонализирани полета“ и „Персонализиран потребителски интерфейс от тип публикация“. „Classic Editor“ също е инсталиран.



03. Добавете персонализиран тип публикация

Използвайки потребителския интерфейс на потребителския интерфейс, добавете нов тип публикация, наречен „клиент“. Когато въвеждате „Slug type post“, използвайте долни черти вместо интервали и пишете в единствено число, тъй като това ще улесни създаването на шаблони по-късно. Префиксът tu_ е добавен, за да намали вероятността от конфликт.

04. Добавяне / редактиране на потребителски интерфейс от тип публикация

Изграждане на клиентски портал с WordPress: Добавяне / редактиране на потребителски интерфейс от тип публикация

Добавете едновременно и множествено число етикети(Кредит за изображение: Уеб дизайнер)

Добавете множествено число с етикет „клиенти“ и единствено „клиент“, тъй като това ще се появи в администраторското меню на WordPress. В тези полета се приема главна буква, което ще направи менюто на WordPress по-подредено.

плъгин с маслена боя за Photoshop cs6

05. Създайте персонализиран презапис на охлюв

Изградете клиентски портал с WordPress: Създайте персонализиран пренаписване на охлюв

Използвайте персонализираното пренаписване на охлюв за по-добро потребителско изживяване(Кредит за изображение: Уеб дизайнер)

Използването на префикс за плъзга от тип публикация ще означава, че клиентите, добавени към портала, ще бъдат създадени с връзка, която изглежда като „/ tu_customer / пример-компания“. Това не изглежда подредено и за подобряване на това се използва персонализираното пренаписване на охлюв. Задаването на пренаписване на охлюв на „клиенти“ позволява персонализираният тип публикация да се показва като / customers / example-company.

06. Добавете поддръжка за персонализирани полета

Изградете клиентски портал с WordPress: Добавете поддръжка за персонализирани полета

Отметнете опцията „Потребителско поле“ и изпратете промените(Кредит за изображение: Уеб дизайнер)

Последната опция, която е активирана за персонализирания тип публикация, е „Поддържа> Потребителско поле“, която се намира в долната част на страницата. Отметнете това и след това добавете тип публикация в долната част на страницата. Това изпраща промените и регистрира типа публикация.

07. Добавете персонализирани полета

Изградете клиентски портал с WordPress: Добавете персонализирани полета

Сега трябва да добавите персонализирани полета към новия си тип публикация(Кредит за изображение: Уеб дизайнер)

Потребителските полета сега трябва да се добавят и да се присвоят на току-що създадения тип публикация. Добавянето на група полета с име „клиентски портал“ е първата стъпка, последвана от добавяне на персонализирани полета към нея с бутона за добавяне на поле. Първото поле „кратко“ ще бъде зададено като тип поле „файл“, което позволява на администратора да качи файл на това място. Задайте връщаната стойност на 'file url'.

08. Настройте полетата

Следващото поле за добавяне е „въпросник за марката“. Това ще се състои от връзка към google формуляр, който клиентът трябва да попълни. Най-подходящият тип поле за това е „URL“. Същият метод може да се използва за всички полета, които ще се свързват с външна услуга. Когато приключите, превъртете надолу до полето „местоположение“ и използвайте логиката „Показване на типа публикация“ = „Клиент“. След това публикувайте полевата група.

Генериране на CSS

Резервирайте билетите си за Генериране на CSS сега, за да спестите £ 50(Кредит за изображение: Гети / Бъдеще)

09. Създайте файла на шаблона на WordPress

WordPress трябва да знае как да показва таблото за управление на клиентите. За това се следва йерархията на шаблона на WordPress, за да се създаде файл с шаблон за този специфичен тип публикация. Създайте файл, наречен single-tu_customer.php в основната директория на темата.

10. Създайте оформление на единична публикация с пълна ширина

Изградете клиентски портал с WordPress: Създайте оформление на единична публикация с пълна ширина

Направете оформление с пълна ширина за вашето съдържание(Кредит за изображение: Уеб дизайнер)

Отворете файла single-tu_customer.php и добавете функциите get_header и get_footer WordPress. Между тези функции създайте оформление с пълна ширина, за да съхранявате съдържанието, което работи с вашата тема.

11. Стартирайте цикъла и създайте съдържанието

Изградете клиентски портал с WordPress: Стартирайте цикъла и създайте съдържанието

Използвайте заместители, за да изложите съдържанието си(Кредит за изображение: Уеб дизайнер)

В рамките на елемента извикайте the_post и създайте елементите на контейнера, за да съхранявате информация. Използвайте информация за заместител, за да получите представа за оформлението и започнете да оформяте елементите. Елементите на картата ще бъдат първоначални карти с заглавка, описание и връзка.

Content Content Content

12. Използвайте PHP за извикване на динамични стойности

Използвайки функцията 'the_field', функция, която идва с приставката за усъвършенствани потребителски полета, динамичното съдържание от потребителските полета се въвежда в шаблона на клиента. „Име_поле“ е стойността, въведена в стъпка 3.

Brief

This is your original brief document

Open

13. Направете тестов клиент с някои фиктивни данни

Изградете клиентски портал с WordPress: Направете тестов клиент с някои фиктивни данни

Отидете до таблото за управление на WordPress, за да направите фиктивен клиент(Кредит за изображение: Уеб дизайнер)

Достъп до таблото за управление на WordPress, нов клиент може да бъде добавен от лявата лента. Клиенти> Добавяне на нов клиент. Изгледът на публикацията ще бъде познат, но превъртането надолу ще разкрие всички нови персонализирани полета. Въведете някои тестови данни, за да се уверите, че всичко работи правилно.

14. Обработвайте грешки за липсващи данни

Изградете клиентски портал с WordPress: Обработвайте грешки за липсващи данни

Уверете се, че е ясно, когато документите не са налични(Кредит за изображение: Уеб дизайнер)

Ако документът е забравен или просто е твърде рано в процеса, за да може той да бъде достъпен, това може да обърка клиента, когато бутонът не работи. Добавянето на чек, че дадена стойност съществува, преди да я покажете, дава възможност да се покаже вариация на „липсващото поле“ на картата. Добавянето на клас „деактивиран“ към картата, когато стойността липсва, ще ни позволи да стилизираме недостъпни карти.

displayed when the field_name has a value displayed when the field does not exist

15. Подредете интерфейса

Сега, когато структурата на интерфейса е финализирана, той може да бъде стилизиран правилно. Използвайки CSS, външният вид на картите и цветовете на страницата могат да бъдат подобрени. Цветът на навигацията е променен на по-светло син, а посоката на потребителя е подобрена чрез добавяне на въвеждащ текст.

16. Изключете го от картата на сайта

Потребителските типове публикации не трябва да се намират в резултатите от търсачките. Типът публикация трябва да бъде изключен от картата на сайта на уебсайта, или чрез приставка за SEO, или ръчно с помощта на мета тагове и robots.txt.

User-agent: * Disallow: /customers/

Искате ли да създадете нов уебсайт? Използвайте брилянтен уеб конструктор за да направите процеса супер прост.

Свързани статии: