Как создать динамический веб-сайт для встреч с OceanWP и Crocoblock

Вы хотите создать динамичный веб-сайт бронирования встреч? Для тех, кто думает, что это сложно развернуть, есть хорошие новости — это не так. В настоящее время вам не нужны разработчики, кодеры и дизайнеры. Вам просто нужны правильные инструменты.

В этой статье вы узнаете, что делает хороший веб-сайт назначения. Мы проведем вас через всю процедуру создания сайта и раздадим инструменты, которые мы использовали. В итоге вы поймете, как создать систему бронирования, используя только OceanWP и несколько плагинов Crocoblock.

Что делает OceanWP и Crocoblock отличными вместе

• Визуальное сайтостроение . Поскольку Gutenberg — это редактор визуальных блоков, разработчики веб-сайтов могут сэкономить время, переключаясь между панелью администратора и внешним интерфейсом. Достаточно создать структуру страницы в редакторе и убедиться, что интерфейсная версия выглядит так же.
• Меньше внешних плагинов . Забудьте об отдельных плагинах для настраиваемых типов сообщений, форм, управления бронированием, настраиваемых полей и т. д. Чтобы настроить и запустить функциональность встреч, вам понадобятся только два плагина Crocoblock.
• Никаких посредников . Это означает, что разработчикам не нужно полагаться на дизайнеров. Вы можете взять демо-шаблон от OceanWP, переработать его макет по своему усмотрению и добавить в него динамический функционал Crocoblock.

Назначение Веб-сайт 101

Что такое сайт бронирования встреч?

Веб-сайты для записи на прием — это платформы, предоставляющие услуги, где можно забронировать определенный временной интервал. Часто эти веб-сайты предлагают услуги с почасовой оплатой.

Как выглядят сайты для встреч?

Это могут быть одностраничные сайты-визитки, где можно заказать ту или иную услугу у одного поставщика. С другой стороны, на веб-сайтах назначений может размещаться несколько поставщиков услуг. В этом случае на веб-сайте есть отдельные страницы и каталоги поставщиков и услуг.

Сложно ли создать сайт для встреч?

Уже нет. В наши дни вы можете создать динамический веб-сайт с нуля, используя нужные инструменты — предпочитаемый вами конструктор страниц, поставщик тем, какой-нибудь плагин для динамического контента и ядро ​​бронирования встреч.

Каковы основные элементы веб-сайта назначения?

Это могут быть тема, настраиваемые типы сообщений, механизм бронирования встреч, формы бронирования, страницы поставщиков, страницы услуг, страницы каталога и списки.

Могу ли я добавить несколько провайдеров на один и тот же сайт?

Почему нет? Одну услугу могут оказывать несколько специалистов. Обязательно назначьте поставщика услуги, чтобы избежать путаницы на этапе заполнения формы бронирования.

Веб-сайт назначения: основные приготовления

Мы решили опустить подготовительные этапы на раннем этапе, такие как получение доменного имени и выбор хостинг-провайдера. Вместо этого мы сосредоточимся на сути. Для тех, кто хочет углубиться в детали, есть суперинформативное видео Ферди Корпершука.

Получить плагины Crocoblock

Crocoblock представил свои обновленные цены шесть месяцев назад. Что делает его крутым? Это индивидуальный план подписки . Теперь, чтобы создать работоспособный веб-сайт для встреч, вам не придется тратить много денег. Перейдите на страницу с ценами Crocoblock, разверните вкладку JetPlugins и добавьте нужные плагины в корзину.

Вам понадобится JetEngine — плагин динамического контента, который позволяет создавать пользовательские типы сообщений — и JetAppointment – плагин WordPress для бронирования услуг.

Такой индивидуальный пакет будет стоить вам 45 долларов в год за один сайт и 93 доллара в год за неограниченное количество сайтов. Кроме того, вы будете получать обновления плагинов и качественную поддержку в течение всего года. Загрузите эти плагины на панель инструментов WordPress и подготовьте их к дальнейшей работе.

Установите тему OceanWP и выберите шаблон сайта

Есть два способа установить основную тему — традиционный и способ Crocoblock.

Установка темы OceanWP традиционным способом

Перейдите в « Внешний вид» > «Темы » в панели администратора WordPress и нажмите « Добавить новую ». Вы можете использовать строку поиска, чтобы найти тему. Найдя, установите OceanWP и активируйте его.

Установка темы OceanWP способом Crocoblock

Воспользуйтесь мастером установки Crocoblock. Его можно загрузить из учетной записи Crocoblock, а затем использовать для установки OceanWP.

Чтобы выбрать демо-шаблон, перейдите на панель тем > установить демо -версии и выберите тот, который вам нужен. Сегодня мы будем использовать демо-шаблон Gym . Помните, что демоверсия не может работать должным образом, если отсутствуют некоторые премиум-расширения. Возможно, вы захотите получить их в первую очередь.

Как только установка демонстрационного шаблона будет завершена, вы готовы создать динамический веб-сайт для встреч.

Создание индивидуального веб-сайта для встреч

На каждом веб-сайте планирования встреч и мероприятий есть настраиваемые типы сообщений для поставщиков и услуг , ядро ​​автоматического бронирования встреч, интеграция с календарем и форма бронирования. Это основные элементы, но вы можете расширить список по своему усмотрению.

Теперь давайте применим плагины JetEngine и JetAppointment.

Создание пользовательских типов сообщений

Зачем нужно создавать КПП? Они помогут вам организовать посты на сайте — сервисы для сервисов, провайдеры для провайдеров. Впоследствии эти сообщения можно легко связать между собой, чтобы пользователи сайта могли бронировать конкретную услугу у тех, кто ее предоставляет.

Следуйте JetEngine > Типы записей > Добавить новый путь в панели администратора WordPress, чтобы создать CPT. Помните, что вам нужно два типа сообщений — один для поставщиков и один для услуг. Поскольку мы создаем веб-сайт Gym, типы сообщений будут соответственно называться « Тренеры » и « Тренировки ».

Добавьте необходимые мета-поля в оба типа сообщений. Для CPT тренеров это могут быть:

• Фото;
• короткая биография;
• опыт работы;
• достижения;
• галерея;
• контакты.

Для Workouts CPT метаполя могут быть следующими:

• галерея;
• описание;
• максимальная емкость;
• оборудование;
• польза для здоровья.

Подсказка : JetEngine имеет полезную функцию Глоссария . Это позволяет вам создать набор мета-полей и использовать их в качестве опций для пользовательских типов сообщений.

Затем добавьте столько сообщений во вновь созданные типы сообщений, сколько необходимо. Для этого наведите указатель мыши на имя CPT в панели администратора WordPress и нажмите « Добавить новый ».

После этого вы можете приступить к настройке плагина JetAppointment.

Настройка JetAppointment

Установить плагин бронирования встреч от Crocoblock не так уж и сложно. Все, что вам нужно сделать, это запустить мастер установки и выполнить четыре шага установки.

Перейдите в « Встречи» > «Настроить» в панели администратора. Вы попадете на страницу настроек JetPlugins , а именно на вкладку « Настройка » JetAppointment. Нажмите на одноименную кнопку, чтобы запустить Мастер.

• Шаг 1 . Вам нужно выбрать типы сообщений «Услуги» и «Поставщики» в соответствующих раскрывающихся списках. Не забудьте включить переключатель Добавить поставщиков ; в противном случае поле не появится. Нажмите « Далее ».

• Шаг 2 . Здесь вы можете увидеть необходимые столбцы таблицы базы данных. Продолжите установку, если вам не хочется добавлять дополнительные столбцы. Мы добавим Телефон и Комментарии.

• Шаг 3 . Этот шаг предназначен для настройки услуги и сведений о поставщике, таких как продолжительность, буферное время, выходные дни, рабочее время и т. д. Подробный обзор шагов можно найти в этом видеоруководстве.

• Шаг 4 . Наконец, вы можете интегрировать WooCommerce и создать две формы бронирования встреч. Доступные варианты включают «Формы JetEngine» и «JetFormBuilder». Первый предназначен для Elementor, а второй — для Gutenberg.

Нажмите кнопку «Готово» , чтобы завершить настройку.

Прежде чем редактировать формы бронирования встреч, вам необходимо связать посты «Поставщики» и «Услуги». Откройте сообщение поставщика и найдите вкладку « Сопутствующие услуги » на левой боковой панели. Введите три символа в эту текстовую область и выберите необходимую услугу, как только система предложит ее.

Повторите процедуру столько раз, сколько есть выделенных постов провайдера. После этого вы готовы поиграть с формами.

JetFormBuilder и добавление форм на страницы

Что хорошо в продуктах Crocoblock, так это то, что некоторые из них на самом деле бесплатны. Возьмите ДжетФормБилдер. Это плагин для создания форм WordPress, позволяющий разработчикам сайтов создавать динамические формы в редакторе страниц Gutenberg. Вы можете скачать плагин, активировать его и сразу же использовать.

Перейдите в раздел JetFormBuilder > Формы . Там будут две сгенерированные формы. Нам придется отредактировать их, так как мы добавили два столбца в таблицу БД во время настройки встречи. Теперь нам нужно добавить необходимые мета-поля в форму и действия после отправки.

Нажмите, чтобы отредактировать форму бронирования статической страницы и добавить отсутствующие метаполя, перетащив соответствующие блоки Gutenberg. Нам понадобится два — текстовое поле и поле текстовой области — чтобы добавить поля «Телефон» и «Комментарий».

Затем вам нужно ввести эти поля в действия отправки сообщения. Для этого перейдите на вкладку JetForm , прокрутите вниз до раздела « Действия отправки сообщения » и щелкните значок карандаша под названием действия. Вы увидите окно редактирования Post Submit Action, где вы должны выбрать поля формы, которым они принадлежат.

Кроме того, вы можете настроить интеграцию WooCommerce здесь, при условии, что вы включили ее на шаге 4. После этого нажмите кнопку « Обновить ».

Быстрый совет . Не стесняйтесь добавлять сразу несколько действий Post Submit, но следите за тем, чтобы их условия не противоречили друг другу. В этом случае отправка формы невозможна.

Закончив настройку формы бронирования статической страницы, обновите ее и добавьте на страницу веб-сайта. Мы создали специальную страницу « Все тренировки », на которой отображается динамический список JetEngine. Форма бронирования будет прекрасно смотреться под сеткой.

Откройте страницу, на которой вы хотите разместить форму, найдите блок JetForm на левой боковой панели, перетащите его в нужную область, а затем выберите форму, которую вы только что отредактировали, в раскрывающемся списке « Выбрать форму » на правой боковой панели. .

Обновите страницу и посмотрите, как она выглядит в интерфейсе.

Теперь самые внимательные читатели спрашивают: «Как так получается, что форма стилизована?». Это потому, что мы добавили еще один плагин. Продолжайте читать, чтобы узнать, какие.

Вернитесь на панель управления WordPress и откройте путь « Встречи» > «Встречи». Вот и все — все встречи отложены. Вы можете просматривать, редактировать, удалять их, фильтровать и изменять их статус здесь.

Как видите, функция записи на прием запущена и работает. Тем не менее, есть еще много вещей, которые вы можете сделать, чтобы сделать веб-сайт планирования встреч еще более динамичным.