Побудуйте клієнтський портал з WordPress

Sep 12, 2025

Як

(Кредит зображення: веб-дизайнер)

Маючи область, яка дозволяє користувачам увійти та завантажувати або переглядати документи, очікується споживачам, від телефонних контрактів на комунальні послуги.

Коли дизайнери працюють зі своїми клієнтами, однак, все може швидко зламати в плутанок електронних листів, посилання макети і вкладення.

Це Підручник WordPress покаже, як розширити WordPress (інший веб хостинг Послуги доступні) у клієнтський портал, здатний зберігати документи, відео та малюнки, тому клієнт може отримати доступ до них в одному місці. Портал буде обслуговувати кожного клієнта з унікальним та захищеним паролем, який не відображається в звичайній навігації.

Спеціальні типи та поля публікації будуть використані для зберігання даних, і вони будуть додані через плагіни, щоб уникнути втрати даних, якщо тема змінюється. Тема буде модифікована трохи.

Маючи клієнтський портал надає клієнтам зручність доступу до своїх файлів у одному місці, коли вони потребують їх, так само, як при використанні хмара зберігання . Він має масив бізнес-переваг, у тому числі демонструвати доступ до продажу, або може бути використаний для того, щоб дати огляд робочого процесу з самого початку, візуально окреслюючи поставки.

Завантажте файли Для цього підручника.

Як перетворити Wordpress у візуальний будівельник

01. Встановіть свіжу копію WordPress

На сервері розробки встановлюється свіжа копія WordPress, а тема "understrap" була обрана, щоб дати фундамент, щоб швидко розпочати роботу. Плагін UI власний тип UI буде використовуватися, тому наші типи спеціальних пост не залежать від теми.

02. Видалити плагіни за замовчуванням

Якщо будь-які плагіни за замовчуванням вийшли з копією WordPress, видаліть ці. Плагіни, необхідні для цього підручника, є "розширеними спеціальними полями" та "митним типом типу". "Класичний редактор" також був встановлений.

03. Додайте спеціальний тип повідомлення

Використовуючи інтерфейс UI-типу, додайте новий тип повідомлення під назвою "Клієнт". При введенні "slug slug", використовуйте підкреслення, а не пробіли та пишуть у вигляді сингулярної форми, оскільки це полегшить створення шаблонів пізніше. Префікс TU_ був доданий, щоб зменшити шанс конфлікту.

04. Інтерфейс типу Додати / Редагувати

Build a client portal with WordPress: The add/edit custom post type interface — Додайте як сингулярні, так і множинні етикетки (Кредит зображення: веб-дизайнер)

Додайте множину позначені "клієнти" та єдиним клієнтом ", оскільки це буде відображатися у меню адміністратора WordPress. Капіталізація приймається у цих галузях, що зробить меню WordPress Tidier.

05. Створіть власний переписати slug

Build a client portal with WordPress: Create a custom rewrite slug — Використовуйте користувальницький переписати slug для кращого досвіду користувача (Кредит зображення: веб-дизайнер)

Використання префікса для Slug Slug буде означати клієнти, додані до порталу, будуть створені за допомогою посилання, яке виглядає як "/ tu_customer / example-company". Це не виглядає акуратно, а користувацький переписує Slug використовується для поліпшення цього. Встановлення переписує Slug до "клієнтів" дозволяє спеціальний тип повідомлення виглядати як / клієнти / приклад-компанії.

06. Додайте підтримку спеціальних полів

Build a client portal with WordPress: Add support for custom fields — Позначте опцію «Спеціальне поле» та надішліть зміни (Кредит зображення: веб-дизайнер)

Останній варіант, який увімкнено для митного типу повідомлення, є "підтримує & gt, спеціальне поле", який знаходиться поблизу нижньої частини сторінки. Натисніть це, а потім "Додати тип публікації" внизу сторінки. Це подає зміни та реєструє тип повідомлення.

07. Додайте спеціальні поля

Build a client portal with WordPress: Add custom fields — Тепер вам потрібно додати спеціальні поля до нового типу публікації (Кредит зображення: веб-дизайнер)

Спеціальні поля тепер потрібно додати та призначити тип, який був створений. Додавання поля групи "Customer Portal" - це перший крок, після чого додавши спеціальні поля з кнопкою "Додати поле". Перше поле "Короткий" буде встановлено як файл типу поля ", який дозволяє адміністратору завантажувати файл у цьому місці. Встановіть значення повернення до "URL-адреси файлу".

08. Налаштуйте поля

Наступне поле, яке буде додано, - це "анкета бренду". Це буде складатися з посилання на форму Google, яку клієнт повинен заповнити. Найбільш придатним типом поля для цього є "URL". Цей самий метод може бути використаний для всіх полів, які будуть посилатися на зовнішню службу. Після закінчення, прокрутіть вниз до поля "Location" та скористайтеся логікою "Показати, якщо тип повідомлення" = "клієнт". Потім опублікуйте полену групу.

Generate CSS — Забронюйте квитки, щоб створити CSS зараз, щоб заощадити 50 фунтів стерлінгів (Кредит зображення: Getty / Future)

09. Створіть файл шаблону WordPress

WordPress потрібно знати, як відобразити інформаційну панель клієнтів. Для цього ієрархія шаблону WordPress слід створити файл шаблону для цього конкретного типу публікації. Створіть файл під назвою single-tu_customer.php у каталозі root theme.

10. Створіть повноцінну макет

Build a client portal with WordPress: Create a full-width single post layout — Зробіть повноцінний макет для вашого вмісту (Кредит зображення: веб-дизайнер)

Відкрийте файл single-tu_customer.php та додайте функції get_header та get_footer. Між цими функціями створіть макет повної ширини, щоб утримувати вміст, який працює з вашою темою.

 & lt;? Php get_header ();? & Gt;
& lt; div class = "обгортка" id = "одно-обгортка" & gt;
& lt; div class = "контейнер" id = "вміст" tabindex = "- 1" & gt;
& lt; div class = "row" & gt;
& lt; div class = "col-md вміст" id = "первинний" & gt;
& lt; основний клас = "сайт-головний" id = "головний" & gt; & lt; -! Вміст - & gt; & lt; / main & gt;
& lt; / div & gt;
& lt; / div & gt; & lt;! - .ROW - & gt;
& lt; / div & gt; & lt;! - #content - & gt;
& lt; / div & gt; & lt;! - # одно-обгортка - & gt;
& lt;? PHP Get_Footer ();? & GT;

11. Запустіть петлю та створіть вміст

Build a client portal with WordPress: Start the loop and create the content — Використовуйте заповнювачі, щоб викласти ваш вміст (Кредит зображення: веб-дизайнер)

В межах & lt; main & gt; Елемент, зателефонуйте The_Post і створіть елементи контейнера, щоб утримувати інформацію. Використовуйте інформацію про заповнювач, щоб отримати уявлення про макет і почати стиль елементів. Елементи картки будуть картками завантаження з заголовком, описом та посиланням.

 & lt; основний клас = "сайт-головний" id = "головний" & gt;
& lt;? php while (has_posts ()): the_post (); ? & gt;
& lt; div class = "контейнер" & gt;
& lt; div class = "row" & gt;
& lt; div class = "col-sm-4" & gt; вміст & lt; / div & gt;
& lt; div class = "col-sm-4" & gt; вміст & lt; / div & gt;
& lt; div class = "col-sm-4" & gt; вміст & lt; / div & gt;
& lt; / div & gt;
& lt; / div & gt;
& lt;? PHP закінчується; // кінець петлі. ? & gt;
& lt; / main & gt; & lt;! - #main - & gt;

12. Використовуйте PHP для виклику динамічних значень

Використовуючи функцію "the_field", функція, яка поставляється з розширеними спеціальними полями полями, динамічний вміст з власних полів укладається в шаблон клієнта. "FIELD_NAME" - це значення, яке було введено на кроці 3.

 & lt; div class = "card text-center" & gt;
& lt; div class = "card-body" & gt;
& lt; H5 Class = "Картка-назва" & gt; короткий & lt; / h5 & gt;
& lt; p class = "card-text" & gt; це ваш оригінальний короткий документ & lt; / p & gt;
& lt; href = "& lt;? php the_field (" короткий ");? & gt;" target = "none" class = "btn btn-parisher" & gt; open & lt; / a & gt;
& lt; / div & gt;
& lt; / div & gt;

13. Зробіть тестовий клієнт з деякими манекенними даними

Build a client portal with WordPress: Make a test customer with some dummy data — Перейдіть до інформаційної панелі WordPress, щоб зробити фіктивний клієнт (Кредит зображення: веб-дизайнер)

Доступ до інформаційної панелі WordPress, новий клієнт може бути доданий з лівого бару. Клієнти та GT; Додати новий клієнт. Перегляд пост буде знайомий, але прокрутка вниз покаже всі нові спеціальні поля. Введіть деякі тестові дані, щоб переконатися, що все працює правильно.

14. Ручка помилок для будь-яких відсутніх даних

Build a client portal with WordPress: Handle errors for any missing data — Переконайтеся, що це ясно, коли документи не доступні (Кредит зображення: веб-дизайнер)

Якщо документ забутий, або це просто занадто рано в процесі для цього документа, він може бути заплутаним для клієнта, коли кнопка не працює. Додавання перевірки того, що значення існує, перш ніж показувати, що він дає можливість показати "відсутнє поле" варіації картки. Додавання класу "Вимкнено" до картки, коли значення відсутнє, дозволить нам стилювати недоступні картки.

 & lt;? Php if (get_field ('field_name')):? & Gt;
відображається, коли FIELD_NAME має значення
& lt;? PHP ELSE: // FIELD_NAME повернула FALSE? & GT;
відображається, коли поле не існує
& lt;? PHP Endif; // кінець, якщо логіка field_name? & gt;

15. Прибирайте інтерфейс

Тепер, коли завершена структура інтерфейсу, вона може бути належним чином стильно. Використовуючи CSS, можна покращити вигляд карт та кольорів на сторінці. Колір для навігації був змінений на більш світлий синій, а напрямок користувача було покращено шляхом додавання тексту введення.

16. Виключіть його з Sitemap

Типи спеціальних публікацій не повинні бути знайдені в результатах пошукових систем. Тип повідомлення повинен бути виключений з сайту сайту веб-сайту, або через плагін SEO, або вручну за допомогою метатег та robots.txt.

 & lt; meta name = "robots" content = "noindex, nofollow" / & gt;
Користувач-агент: *
Заборонити: / Клієнти /

Хочете розробити новий веб-сайт? Використовуйте блискучий Веб-будівельник зробити процес супер-простим.

Пов'язані статті:

Найкращі служби хостингу WordPress у 2019 році
13 чудових інструментів для качки до клієнтів
WordPress веб-сайти: 14 прикладів

Побудуйте клієнтський портал з WordPress

01. Встановіть свіжу копію WordPress

02. Видалити плагіни за замовчуванням

03. Додайте спеціальний тип повідомлення

04. Інтерфейс типу Додати / Редагувати

05. Створіть власний переписати slug

06. Додайте підтримку спеціальних полів

07. Додайте спеціальні поля

08. Налаштуйте поля

09. Створіть файл шаблону WordPress

10. Створіть повноцінну макет

11. Запустіть петлю та створіть вміст

12. Використовуйте PHP для виклику динамічних значень

13. Зробіть тестовий клієнт з деякими манекенними даними

14. Ручка помилок для будь-яких відсутніх даних

15. Прибирайте інтерфейс

16. Виключіть його з Sitemap

Як - Найпопулярніші статті

Як додати шрифти в Photoshop

Композиція в анімації: вивчити основи

Як створити місцевий розвиток

Робота розумно з вашим Zbrush UI

Як малювати пір'я

Як малювати фотографію спорідненості для iPad

Як код збільшеного маркера реальності

Як спроектувати промо для уявного бренду

Категорії