OceanWPとCrocoblockを使用して動的な予定のWebサイトを作成する方法

公開: 2022-01-12

ダイナミックな予約予約ウェブサイトを構築したいとお考えですか? 展開するのが難しいと思う人にとっては、良いニュースがありますが、そうではありません。 今日では、開発者、コーダー、デザイナーは必要ありません。 適切なツールが必要です。

この記事では、良い予定のWebサイトを作成する理由を説明します。 サイト作成ルーチン全体を紹介し、使用したツールを配布します。 最後に、OceanWPといくつかのCrocoblockプラグインだけを使用して予約システムを作成する方法を理解します。

OceanWPとCrocoblockを一緒に素晴らしいものにするもの

  • ビジュアルサイト構築。 グーテンベルクはビジュアルブロックエディターであるため、Webサイト開発者は、管理パネルとフロントエンドを切り替える時間を節約できます。 エディターでページ構造を作成し、フロントエンドバージョンが同じように見えることを確認するだけで十分です。
  • 外部プラグインが少なくなります。 カスタム投稿タイプ、フォーム、予約管理、カスタムフィールドなどの個別のプラグインを忘れてください。予定機能を起動して実行するには、2つのCrocoblockプラグインのみが必要です。
  • 仲買人はいません。 これは、開発者がデザイナーに依存する必要がないことを意味します。 OceanWPでデモテンプレートを取得し、必要に応じてレイアウトを作り直して、Crocoblock動的機能を追加できます。

アポイントメントウェブサイト101

予約予約サイトとは何ですか?

アポイントメントWebサイトは、特定の時間帯を予約できるサービス提供プラットフォームです。 多くの場合、これらのWebサイトは時間単位の支払いサービスを提供します。

予約ウェブサイトはどのように見えますか?

単一のプロバイダーから特定のサービスを予約できる1ページの名刺Webサイトにすることができます。 反対に、予約Webサイトには複数のプロバイダーを収容できます。 その場合、Webサイトには専用のプロバイダーとサービスの単一ページとカタログがあります。

予約サイトを作るのは難しいですか?

もう違います。 最近では、適切なツール(好みのページビルダー、テーマプロバイダー、動的コンテンツプラグイン、予約コア)を使用して、動的なWebサイトを最初から構築できます。

主な予定のウェブサイトの要素は何ですか?

これらは、テーマ、カスタム投稿タイプ、予約予約エンジン、予約フォーム、プロバイダーページ、サービスページ、カタログページ、およびリストになります。

同じWebサイトに複数のプロバイダーを追加できますか?

なぜだめですか? 複数の専門家が1つのサービスを提供できます。 予約フォームに記入する段階で混乱を避けるために、必ずプロバイダーをサービスに割り当ててください。

アポイントメントウェブサイト:基本的な準備

ドメイン名の取得やホスティングプロバイダーの選択など、初期段階の準備を省略することにしました。 代わりに、本質に焦点を当てます。 詳細を掘り下げたい人のために、FerdyKorpershoekによる非常に有益なビデオがあります。

Crocoblockプラグインを入手する

Crocoblockは、6か月前に更新された価格設定を導入しました。 何がクールなのですか? これはカスタムサブスクリプションプランです。 今、実行可能な予定のウェブサイトを作成するために、あなたは多くを費やす必要はありません。 Crocoblockの価格設定ページに移動し、[ JetPlugins ]タブを展開して、必要なプラグインをカートに追加します。

JetEngineが必要です –カスタム投稿タイプの作成を可能にする動的コンテンツプラグイン–およびJetAppointment –サービス予約WordPressプラグイン。

予約Webサイトに必要な、ショッピングカート内のjetengineおよびjetappointmentプラグインのスクリーンショット

このようなカスタムパッケージの費用は、1つのWebサイトで年間45ドル、無制限のWebサイトで年間93ドルです。 さらに、プラグインのアップデートと品質サポートを1年間受けることができます。 これらのプラグインをWordPressダッシュボードにアップロードして、今後の作業に備えてください。

OceanWPテーマをインストールし、Webサイトテンプレートを選択します

コアテーマをインストールするには、従来の方法とCrocoblockの方法の2つの方法があります。

OceanWPテーマを従来の方法でインストールする

WordPress管理パネルの[外観]>[テーマ]に移動し、[新規追加]を押します。 検索バーを使用してテーマを見つけることができます。 見つかったら、OceanWPをインストールしてアクティブにします。

アポイントメントWebサイトにOceanWPテーマをインストールするスクリーンショット

OceanWPテーマをCrocoblockの方法でインストールする

Crocoblockインストールウィザードを使用します。 Crocoblockアカウントからダウンロードして、OceanWPのインストールに使用できます。

デモテンプレートを選択するには、 [テーマパネル]> [デモのインストール]に移動し、必要なものを選択します。 今日はジムのデモテンプレートを使用します。 一部のプレミアム拡張機能が欠落している場合、デモは意図したとおりに機能しないことに注意してください。 最初にそれらを取得することをお勧めします。

ジムデモのOceanWPコアとプレミアム拡張機能

デモテンプレートのインストールが完了するとすぐに、動的な予定のWebサイトを構築する準備が整います。

カスタムアポイントメントWebサイトの構築

すべての予定およびイベントスケジューリングWebサイト内には、プロバイダーサービスのカスタム投稿タイプ、自動予約予約コア、カレンダー統合、および予約フォームがあります。 これらは不可欠な要素ですが、自由にリストを拡張できます。

それでは、JetEngineプラグインとJetAppointmentプラグインを有効に活用しましょう。

カスタム投稿タイプの作成

なぜCPTを作成する必要があるのですか? 彼らはあなたがウェブサイトの投稿を整理するのを助けます–サービスからサービスへ、プロバイダーからプロバイダーへ。 その後、これらの投稿を簡単に相互に関連付けて、Webサイトユーザーがサービスを提供する人から特定のサービスを予約できるようにすることができます。

JetEngine>投稿タイプ>WordPress管理パネルで新しい経路を追加してCPTを作成します。 2つの投稿タイプが必要であることを忘れないでください。1つはプロバイダー用、もう1つはサービス用です。 ジムのウェブサイトを構築しているため、投稿の種類はそれに応じてトレーナーワークアウトという名前になります。

必要なメタフィールドを両方の投稿タイプに追加します。 トレーナーCPTの場合、次のようになります。

  • 写真;
  • 短い経歴;
  • 実務経験;
  • 成果;
  • ギャラリー;
  • 連絡先。
アポイントメントWebサイトのトレーナーカスタム投稿タイプに追加されたメタフィールド

Workouts CPTの場合、メタフィールドは次のようになります。

  • ギャラリー;
  • 説明;
  • 最大容量;
  • 装置;
  • 健康上の利点。
予定のWebサイトのワークアウトカスタム投稿タイプに追加されたメタフィールド

クイックヒント:JetEngineには便利な用語集機能があります。 一連のメタフィールドを作成し、それらをカスタム投稿タイプのオプションとして使用できます。

次に、新しく作成した投稿タイプに必要な数の投稿を追加します。 これを行うには、WordPress管理パネルでCPT名の上にマウスを置き、[新規追加]を押します。

完了したら、JetAppointmentプラグインの構成に進むことができます。

JetAppointmentの設定

Crocoblockで予約プラグインを設定するのはそれほど難しくありません。 セットアップウィザードを実行して、4つのインストール手順を完了するだけです。

管理パネルで[予定]>[設定]に移動します。 JetPlugins設定ページ、つまりJetAppointmentの[設定]タブに移動します。 同様の名前のボタンをクリックして、ウィザードを実行します。

  • ステップ1 。 対応するドロップダウン選択で、サービスとプロバイダーの投稿タイプを選択する必要があります。 [プロバイダーの追加]トグルを有効にすることを忘れないでください。 そうしないと、フィールドは表示されません。 「次へ」をクリックします。
予約プラグインのセットアップのスクリーンショット–ステップ1
  • ステップ2 。 ここでは、必要なデータベーステーブルの列を確認できます。 列を追加したくない場合は、インストールを続行してください。 電話とコメントを追加します。
予約プラグインのセットアップのスクリーンショット–ステップ2
  • ステップ3 。 このステップは、サービスと、期間、バッファー時間、休日、労働時間などのプロバイダー固有の詳細を構成するためのものです。詳細なステップの概要については、このビデオチュートリアルを確認してください。
  • ステップ4 。 最後に、 WooCommerceを統合して、2つの予約フォームを作成できます。 使用可能なオプションには、「JetEngineForms」および「JetFormBuilder」が含まれます。 1つ目はElementorを対象とし、2つ目はGutenbergを対象としています。
予約予約プラグインのセットアップのスクリーンショット–ステップ4

「完了」ボタンを押して、セットアップを完了します。

予定設定の最終画面のスクリーンショット

予約フォームを編集する前に、プロバイダーとサービスの投稿を相互に関連付ける必要があります。 プロバイダーの投稿を開き、左側のサイドバーにある[関連サービス]タブを見つけます。 そのテキスト領域に3文字を入力し、システムが提案したら必要なサービスを選択します。

プロバイダーの投稿にサービスを適用する

専用のプロバイダー投稿がある回数だけ、この手順を繰り返します。 完了すると、フォームを試す準備が整います。

JetFormBuilderとページへのフォームの追加

Crocoblock製品の優れている点は、実際には無料のものもあることです。 JetFormBuilderを取ります。 これはWordPressのフォーム作成プラグインであり、サイト開発者はGutenbergページエディターで動的フォームを作成できます。 プラグインをダウンロードしてアクティブ化し、すぐに使用できます。

JetFormBuilder>フォームに移動します。 生成された2つのフォームがそこにあります。 アポイントメントのセットアップ中にDBテーブルに2つの列を追加したため、これらを編集する必要があります。 次に、必要なメタフィールドをフォームと送信後のアクションに追加する必要があります。

クリックして静的ページ予約フォームを編集し、対応するグーテンベルクブロックをドラッグアンドドロップして、欠落しているメタフィールドを追加します。 電話フィールドとコメントフィールドを追加するには、テキストフィールドとテキストエリアフィールドの2つが必要です。

予約予約フォームにテキストフィールドブロックを追加する

次に、これらのフィールドを送信後アクションに入力する必要があります。 これを行うには、[ JetForm ]タブを押し、[送信アクションの投稿]セクションまで下にスクロールして、アクション名の下にある鉛筆アイコンをクリックします。 [送信後のアクション]編集ウィンドウが表示されます。このウィンドウで、フォームフィールドが属するフォームフィールドを選択する必要があります。

送信後の予定の挿入アクションの設定

さらに、ステップ4で有効にした場合は、ここでWooCommerce統合を設定できます。完了したら、[更新]ボタンをクリックします。

クイックヒント。 一度に複数の送信後アクションを自由に追加できますが、それらの条件が互いに矛盾しないようにしてください。 その場合、フォームの送信は失敗します。

静的ページ予約フォームのカスタマイズが完了したら、それを更新してWebサイトページに追加します。 動的なJetEngineリストを表示する専用のAllWorkoutsページを作成しました。 予約フォームはグリッドの下で素敵に見えます。

フォームを配置するページを開き、左側のサイドバーでJetFormブロックを見つけて、目的の領域にドラッグアンドドロップし、右側のサイドバーの[フォームの選択]ドロップダウンで編集したフォームを選択します。 。

グーテンベルクのページに予約フォームを追加する

ページを更新して、フロントエンドでどのように表示されるかを確認します。

さて、最も注意深い読者は、「どうしてフォームがスタイルアップされたのか」のようなものです。 これは、別のプラグインをミックスに投入したためです。 どれを見つけるために読み続けてください。

WordPressダッシュボードに戻り、 [予定]>[予定]パスウェイを開きます。 そこにあなたはそれを持っています-すべての予定はしっかりと座っています。 ここで、それらを表示、編集、削除、フィルタリング、およびステータスを変更できます。

リストビューのすべてのジムの予定

ご覧のとおり、予約機能が稼働しています。 ただし、予約スケジュールのWebサイトをさらに動的にするためにできることは他にもあります。