Зміст
- 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. Додайте власний тип публікації
Використовуючи інтерфейс користувацького інтерфейсу користувацького типу, додайте новий тип публікації під назвою "клієнт". Вводячи "Шаблон типу", використовуйте підкреслення замість пробілів і пишіть у формі однини, оскільки це полегшить подальше створення шаблонів. Префікс tu_ додано, щоб зменшити ймовірність конфлікту.
04. Додавання / редагування користувацького інтерфейсу типу публікації
Додайте множину з міткою "клієнти" та однину "клієнт", оскільки це з'явиться в меню адміністратора WordPress. У цих полях прийнято використання великих літер, що зробить меню WordPress акуратнішим.
05. Створіть власний переписувальний кульок
Використання префіксу для типу slug типу означатиме, що клієнти, додані на портал, будуть створені із посиланням, яке має вигляд "/ 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. Запустіть цикл і створіть вміст
У головному елементі> викличте 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> Короткий / h5> p> Це ваш оригінальний короткий документ / p> a href = "? php the_field ('короткий');?> var13 ->" target = "none"> Відкрити / a > / div> / div>
13. Зробіть тестового клієнта з деякими фіктивними даними
Відкривши інформаційну панель WordPress, нового клієнта можна додати з лівої панелі. Клієнти> Додати нового клієнта. Перегляд публікації буде звичним, але прокрутка вниз відкриє всі нові власні поля. Введіть деякі дані тесту, щоб переконатися, що все працює правильно.
14. Обробляти помилки для будь-яких відсутніх даних
Якщо документ забутий або просто занадто рано в процесі, щоб цей документ був доступним, це може заплутати клієнта, коли кнопка не працює. Додавання перевірки того, чи існує значення перед тим, як показати його, дає можливість показати варіацію картки "відсутнє поле". Додавання класу "вимкнено" на картку, коли значення відсутнє, дозволить нам стилізувати недоступні картки.
? php if (get_field ('ім'я_поля')):?> var13 -> відображається, коли ім'я_поля має значення? php else: // ім'я_поля повернуто false?> var13 -> відображається, коли поле не існує? php endif ; // кінець логіки if_name_поля?> var13 ->
15. Наведіть порядок в інтерфейсі
Тепер, коли структура інтерфейсу доопрацьована, її можна правильно стилізувати. За допомогою CSS можна покращити вигляд карток та кольори на сторінці. Колір навігації змінено на більш світлий блакитний, а напрямок користувача покращено шляхом додавання вступного тексту.
16. Виключіть це з карти сайта
Спеціальні типи публікацій не можна знаходити в результатах пошуку. Тип публікації потрібно виключити з мапи сайту веб-сайту, або за допомогою плагіна SEO, або вручну, використовуючи мета-тег та robots.txt.
meta name = "robots" content = "noindex, nofollow" /> User-agent: * Заборонити: / customers /
Хочете створити новий веб-сайт? Скористайтеся блискучим конструктором веб-сайтів, щоб зробити процес надзвичайно простим.
