Съдържание
- 01. Инсталирайте ново копие на WordPress
- 02. Премахнете приставките по подразбиране
- 03. Добавете персонализиран тип публикация
- 04. Добавяне / редактиране на потребителски интерфейс от тип публикация
- 05. Създайте персонализиран пренаписване на охлюв
- 06. Добавете поддръжка за персонализирани полета
- 07. Добавете персонализирани полета
- 08. Настройте полетата
- 09. Създайте файла на шаблона на WordPress
- 10. Създайте оформление на единична публикация с пълна ширина
- 11. Стартирайте цикъла и създайте съдържанието
- 12. Използвайте PHP за извикване на динамични стойности
- 13. Направете тестов клиент с някои фиктивни данни
- 14. Обработвайте грешки за липсващи данни
- 15. Подредете интерфейса
- 16. Изключете го от картата на сайта
Наличието на зона, която позволява на потребителите да влизат и изтеглят или преглеждат документи, се очаква от потребителите, от телефонни договори до комунални услуги.
Когато дизайнерите работят със своите клиенти, обаче всичко може бързо да се разпадне в бъркотия от имейли, връзки към макети и прикачени файлове.
Този урок за WordPress ще покаже как да разширите WordPress (налични са и други услуги за уеб хостинг) в клиентски портал, способен да съхранява документи, видеоклипове и чертежи, така че клиентът да има достъп до всички тях на едно място. Порталът ще обслужва всеки клиент с уникална и защитена с парола връзка, която не се появява в редовната навигация.
Персонализирани типове публикации и полета ще бъдат използвани за съхраняване на данните и те ще бъдат добавени чрез приставки, за да се избегне загуба на данни, ако темата се промени. Темата ще бъде леко модифицирана.
Наличието на клиентски портал дава на клиентите удобството за достъп до техните файлове на едно и също място, винаги когато имат нужда от тях, подобно на това, когато използват облачно съхранение. Той има редица бизнес предимства, включително показване на налични продажби или може да се използва за представяне на преглед на работния процес от самото начало, като визуално очертава резултатите.
Изтеглете файловете за този урок.
- Как да превърнете WordPress във визуален конструктор
01. Инсталирайте ново копие на WordPress
На сървъра за разработка е инсталирано ново копие на WordPress, а темата "understrap" е избрана, за да даде основата на шаблон, за да започне бързо работа. Ще се използва приставката за потребителски интерфейс по избор, така че нашите персонализирани типове публикации са независими от темата.
02. Премахнете приставките по подразбиране
Ако с копието на WordPress са дошли приставки по подразбиране, изтрийте ги. Приставките, необходими за този урок, са „Разширени персонализирани полета“ и „Персонализиран потребителски интерфейс от тип публикация“. Инсталиран е и „Класически редактор“.
03. Добавете персонализиран тип публикация
Използвайки потребителския интерфейс на потребителския интерфейс, добавете нов тип публикация, наречен "клиент". Когато въвеждате „Slug type post“, използвайте долни черти вместо интервали и пишете в единствено число, тъй като това ще улесни създаването на шаблони по-късно. Префиксът tu_ е добавен, за да намали вероятността от конфликт.
04. Добавяне / редактиране на потребителски интерфейс от тип публикация
Добавете множествено число с етикет "клиенти" и единствено число "клиент", тъй като това ще се появи в административното меню на WordPress. В тези полета се приема главна буква, което ще направи менюто на WordPress по-подредено.
05. Създайте персонализиран пренаписване на охлюв
Използването на префикс за плъзга от тип публикация ще означава, че клиентите, добавени към портала, ще бъдат създадени с връзка, която изглежда като "/ tu_customer / example-company". Това не изглежда подредено и за подобряване на това се използва персонализираното пренаписване на охлюв. Задаването на пренаписване на охлюв на "клиенти" позволява персонализираният тип публикация да се показва като / customers / example-company.
06. Добавете поддръжка за персонализирани полета
Последната опция, която е активирана за персонализирания тип публикация, е „Поддържа> Потребителско поле“, която се намира в долната част на страницата. Отметнете това и след това „добавете тип публикация“ в долната част на страницата. Това изпраща промените и регистрира типа публикация.
07. Добавете персонализирани полета
Потребителските полета сега трябва да се добавят и да се присвоят на току-що създадения тип публикация. Добавянето на група полета с име „клиентски портал“ е първата стъпка, последвана от добавяне на персонализирани полета към нея с бутона за добавяне на поле. Първото поле „кратко“ ще бъде зададено като тип поле „файл“, което позволява на администратора да качи файл на това място. Задайте връщаната стойност на "url на файла".
08. Настройте полетата
Следващото поле за добавяне е „въпросник за марката“. Това ще се състои от връзка към google формуляр, който клиентът трябва да попълни. Най-подходящият тип поле за това е „URL“. Същият метод може да се използва за всички полета, които ще се свързват с външна услуга. Когато приключите, превъртете надолу до полето "местоположение" и използвайте логиката "Покажи дали тип на публикацията" = "Клиент". След това публикувайте полевата група.
09. Създайте файла на шаблона на WordPress
WordPress трябва да знае как да показва таблото за управление на клиентите. За това се следва йерархията на шаблона на WordPress, за да се създаде файл с шаблон за този специфичен тип публикация. Създайте файл, наречен single-tu_customer.php в основната директория на темата.
10. Създайте оформление на единична публикация с пълна ширина
Отворете файла single-tu_customer.php и добавете функциите на get_header и get_footer WordPress. Между тези функции създайте оформление с пълна ширина, за да съхранявате съдържанието, което работи с вашата тема.
? php get_header ();?> div id = "single-wrapper"> div id = "content" tabindex = "- 1"> div> div id = "primary"> main id = "main"> -! Съдържание -> / main> / div> / div>! - .row -> / div>! - #content -> / div>! - # single-wrapper ->? Php get_footer () ;?>
11. Стартирайте цикъла и създайте съдържанието
В рамките на елемента main> извикайте the_post и създайте елементите на контейнера, за да съхранявате информация. Използвайте информация за заместител, за да получите представа за оформлението и започнете да оформяте елементите. Елементите на картата ще бъдат първоначални карти с заглавка, описание и връзка.
main id = "main">? php while (have_posts ()): the_post (); ?> var13 -> div> div> div> Content / div> div> Content / div> div> Content / div> / div> / div>? php endgether; // край на цикъла. ?> var13 -> / main>! - #main ->
12. Използвайте PHP за извикване на динамични стойности
Използвайки функцията "the_field", функция, която идва с приставката за усъвършенствани потребителски полета, динамичното съдържание от потребителските полета се въвежда в шаблона на клиента. „Име_поле“ е стойността, въведена в стъпка 3.
div> div> h5> Brief / h5> p> Това е вашият оригинален кратък документ / p> a href = "? php the_field ('кратко');?> var13 ->" target = "none"> Open / a > / div> / div>
13. Направете тестов клиент с някои фиктивни данни
Достъп до таблото за управление на WordPress, нов клиент може да бъде добавен от лявата лента. Клиенти> Добавяне на нов клиент. Изгледът на публикацията ще бъде познат, но превъртането надолу ще разкрие всички нови персонализирани полета. Въведете някои тестови данни, за да се уверите, че всичко работи правилно.
14. Обработвайте грешки за липсващи данни
Ако документът е забравен или просто е твърде рано в процеса, за да може той да бъде достъпен, това може да обърка клиента, когато бутонът не работи. Добавянето на чек, че дадена стойност съществува, преди да я покаже, дава възможност да се покаже вариант на "липсващо поле" на картата. Добавянето на клас „деактивиран“ към картата, когато стойността липсва, ще ни позволи да стилизираме недостъпни карти.
? php if (get_field ('field_name')):?> var13 -> показва се, когато името на полето има стойност? php else: // field_name върна false?> var13 -> показва, когато полето не съществува? php endif ; // край на логиката на поле_име?> var13 ->
15. Подредете интерфейса
Сега, когато структурата на интерфейса е финализирана, той може да бъде стилизиран правилно. Използвайки CSS, външният вид на картите и цветовете на страницата могат да бъдат подобрени. Цветът на навигацията е променен на по-светло син, а посоката на потребителя е подобрена чрез добавяне на въвеждащ текст.
16. Изключете го от картата на сайта
Потребителските типове публикации не трябва да се намират в резултатите от търсачките. Типът публикация трябва да бъде изключен от картата на сайта на уебсайта, или чрез приставка за SEO, или ръчно с помощта на мета тагове и robots.txt.
meta name = "robots" content = "noindex, nofollow" /> Потребителски агент: * Забрана: / customers /
Искате ли да създадете нов уебсайт? Използвайте брилянтен конструктор на уебсайтове, за да улесните процеса.
