Diviを使用した学習管理(LMS)Webサイトの作成

公開: 2017-10-30

オンラインでコースを受講するのが大好きです。 いくつかの素晴らしいコンテンツを使用して、適切に設計され、適切に編成されたeコースを開始することについて何かがあります。 うまくいけば、これらのeコースは達成感を持ってやる気を維持することができます。 しかし、優れたeコースから学ぶことと、eコースを作成することは、まったく異なる2つの経験です。 そして私の経験では、LearningManagmentまたはE-CourseWebサイトの作成は圧倒的なプロセスになる可能性があります。

この投稿では、Diviの既製のLearning Management Layoutパックを使用して完全に機能するeコースWebサイトを作成する方法を紹介することで、独自のeコースを構築するという脅迫から抜け出すことを望んでいます。

構築に入る前に、一緒に達成することの内訳を次に示します。

      1.既存のレイアウトの一部を使用してレッスンページを作成します。
      2.コースのすべてのレッスンを表示する各レッスンページに表示されるコースメニューを作成します。
      3. WP Complete Pluginを使用して、ユーザーが各コースの進捗状況を追跡できるようにします。
      4. Restrict Content Proプラグインを使用して、無料と有料の両方のメンバーシップレベルを設定します。
      5.既存のレイアウトの要素を使用して、Webサイトに一致するようにメンバーシップページをすばやく設計する方法を学びます。
      もっと…

そして、好奇心を満たすために、サイドバーのコースメニューの上にある完全なボタンとプログレスバーを使用して作成するレッスンページのスニークピークを次に示します…

レッスンページ

しかし、最初に、物事を準備しましょう。

Diviを使用した学習管理(LMS)Webサイトの作成

私たちのYoutubeチャンネルを購読する

すべてを設定する

#1-Diviをインストールする

最新バージョンのDiviがインストールされていることを確認してください。 また、子テーマもアクティブにすることは常に良いことです。

#2 –レイアウトパックをDiviライブラリにアップロードする

DiviのLearningManagement(LMS)LayoutPackを使用します。 レイアウトパックをダウンロードして解凍し、coding-school_All.jsonファイルをDiviライブラリにインストールします。 次に、対応する各レイアウトを使用して、9つの新しいページを作成します。

#3 – Restrict ContentProプラグインをインストールしてアクティブ化する

これは、eコースサイトのメンバーシップ機能に使用するプラグインです。 これを使用して、コースの無料およびプレミアム(有料)サブスクリプションを設定します。

#4 – WP CompleteProプラグインをインストールしてアクティブ化する

このプラグインは、メンバー(または学生)が各コースの各レッスンを完了するときに進捗状況を認識できるようにするために使用されます。 進行状況を示すクールな円と棒グラフのビジュアルと、完了した各レッスンのナビゲーションメニューの横にある便利なチェックマークがあります。

すべての設定が完了すると、eコースを構築する準備が整います。

始めましょう。

コースページの名前を変更する

レイアウトパックには、コースページレイアウトが付属しています。

コースページ

そのレイアウトにリストされている各コースは、(それらすべてのコースを教えることを計画している場合)コースページレイアウトを使用する特定のコースページにリンクする必要があります。

コースページ

注:上記のコースページのヘッダーにあるボタンをビデオモジュールに置き換えたことに注意してください。 そうすれば、コースのプレビューを表示するために別のページにリダイレクトする必要がありません。 ただのアイデア。

ご覧のとおり、この例では、コースページのレイアウトはUXデザインコースを使用しているため、先に進んでページを編集し、コースページ名を「コース」から「UXデザイン」に変更します。 また、パーマリンクも更新してください。

コースページの名前を変更する

レッスンページの作成

現在「UXデザイン」という名前の新しいコースページは、章ごとに分類されており(レッスンと考えることもできます)、それぞれについて簡単に説明しています。 これらの各章/レッスンは、独自のレッスンページにリダイレクトする必要があります。 このレッスンページを作成するために、コースページのレイアウトを使用していくつかの調整を行います。

UXデザインコースページにリストされている最初の章/レッスンは「第1章:基本の紹介」と呼ばれます。 このためのレッスンページを作成しましょう。

先に進んで新しいページを追加し、タイトルに「第1章:基本の概要」と入力します。

このレッスンはUXデザインコースページの子ページであるため、右側のサイドバーの[ページ属性]ボックス内の親ドロップダウンをクリックし、親としてUXデザインを選択します。

次に、Divi Builderを使用するためにクリックし、[ライブラリから追加]をクリックして、コースレイアウトを選択します。

新しいレッスンページを追加する

下書きを保存

ヘッダーレイアウトを調整する

次に、クリックしてVisual Builderを使用し、ページレイアウトを調整します。 まず、上部のヘッダーのレイアウトを少し変更しましょう。 ビジュアルビルダーから、右側の列の画像モジュールと最初の列の下部にある緑色のボタンを削除します。

画像とボタンを消去する

次に、クリックして最初の列の一番上のテキストモジュールの設定を編集し、h1ヘッダーテキストを「第1章:基本の概要」に変更します。

タイトルを更新

次に、行の列構造を2列ではなく1列に変更します。

行を変更する

これで、ヘッダーは次のようになります。

変更されたヘッダー

宣伝文の内容を変更する

以下の専門セクションで、左側のコンテンツセクションの最初の宣伝文の設定を編集し、以下を更新します。

[コンテンツ]タブ

タイトル:パート1
コンテンツ:[これがコースのコンテンツになります。 今のところ、モックコンテンツはそのままにしておきます]
アイコンを使用:はい
アイコン:右矢印アイコンを選択します

宣伝文の内容を更新する

注:アイコンの色は、テーマカスタマイザーで設定されたテーマアクセントカラーから取得されるため、サイトに一致する色で更新してください。

設定を保存する

これで1つの宣伝文モジュールが作成されたので、これをページ上のレッスンの各部分を分割するためのテンプレートとして使用できます。 先に進んで、作成したモジュールを2回(または必要な数のパーツ)複製し、それぞれを異なるタイトル(つまり、パート2、パート3など)で更新します。

次に、不要になった他の宣伝文を削除します。

これで、レイアウトは次のようになります。

更新されたレイアウト

サイドバーウィジェットの追加

専門セクションの右側のサイドバーのボタンモジュールの下にサイドバーモジュールを追加します。 そして、今のところ、サイドバーウィジェット領域のコンテンツをプルするデフォルトのコンテンツ設定のままにしておきます。 コースのメニューを含むカスタムウィジェット領域を作成したらすぐに、これを変更します。

[コンテンツ]タブで、モジュールに白い背景を追加します。

サイドバーモジュールをページのデザインと一致させるには、次のように[デザイン]タブの設定を更新します。

カスタムマージン:-80pxトップ
カスタムパディング:上30px、右40px、下30px、左40px
ボックスシャドウの水平位置:0px
Box Shadwo垂直位置:0px
ボックスシャドウブラー強度:60px
ボックスシャドウスプレッド強度:0px
影の色:rgba(71,74,182,0.12)

アニメーションスタイル:ズーム
アニメーションの方向性:上
アニメーション強度:20%
アニメーションの開始不透明度:100%

設定を保存する

注:将来の更新のために1つのモジュールを調整するだけで済むように、先に進んでこれをグローバルモジュールにすることをお勧めします。 これを行うには、[ライブラリに追加]を選択し、「レッスンメニューサイドバーモジュール」という名前を付け、[グローバルモジュール]を選択して、[保存]をクリックします。

最後に、インストラクターと「フルプロファイル」ボタンモジュールを使用して宣伝文句モジュールを削除します。 ページは次のようになります。

サイドバーモジュールの設計

ページを保存

レッスンページの1つが作成されたので、それをライブラリに保存して、他のレッスンで使用できるようにします。 ビジュアルビルダーから、ボタンメニューの[ライブラリに追加]ボタンをクリックし、テンプレートの名前として「レッスンページレイアウト」と入力して保存します。

ライブラリに追加

先に進み、上記の手順を繰り返して、さらに2つのレッスンページを追加します。 今回のみ、コースページレイアウトを使用する代わりに、「レッスンページレイアウト」と呼ばれる作成した新しいレイアウトを使用します。

完了すると、次のタイトルで3つのレッスンページが作成されます。

1.第1章:基本の概要
2.第2章:情報アーキテクチャ
3.第3章:レスポンシブデザイン

3つのレッスン

コースメニューの作成

レッスンが作成されたので、コースメニューを作成できます。 WordPressダッシュボードから、 [外観]> [メニュー]に移動します。

[メニュー]ページから、次の手順を実行します。

1.「新しいメニューの作成」を選択します
2.「UXデザイン」という名前を付けます
3.作成したメニューの3つのレッスンページ/章を選択します。
4. [メニューに追加]をクリックします
5.メニューを保存します

作成したコースメニュー

カスタムウィジェットエリアを作成する

メニューをレッスンページに追加するには、最初にそのメニューのカスタムウィジェット領域を作成する必要があります。 WordPressダッシュボードから、 [外観]> [ウィジェット]に移動します。 既存のウィジェット領域の下で、新しいウィジェット領域を作成するために使用されるボックスを見つけます。 「UXデザイン」という名前を入力し、「作成」をクリックします。 次に、ページを更新します。 これで、新しいカスタムの「UXデザイン」ウィジェット領域が表示されます。 カスタムメニューウィジェットを「UXデザイン」ウィジェット領域内にドラッグします。 カスタムメニューウィジェットで、メニュー「UXデザイン」を選択します。 次に、[保存]をクリックします。

コースメニューの作成

レッスンページのサイドバーモジュールを新しいウィジェット領域で更新

コースメニューでウィジェット領域を作成したので、作成したコースページに戻り、サイドバーモジュールを更新して、ウィジェット領域「UXデザイン」を選択します。 これで、メニューがサイドバーに表示されます。

サイドバーウィジェットを更新する

注:サイドバーモジュールをグローバルにした場合、このモジュールに対してこの調整を1回行うだけで、他の2つは自動的に更新されます。

この時点で、コースとレッスンを作成するためのかなり良い基盤ができたので、コース進行の追跡を組み込んでUXを改善しましょう。

コース進行追跡を追加する

eコースのWebサイトにコース進行状況の追跡を追加することは、コースを受講する際のユーザーエクスペリエンス、エンゲージメント、およびモチベーションを高めるための優れた方法です。 各コースの進捗状況を示すために、WP CompleteProプラグインを使用します。 プラグインをインストールしてアクティブ化することをまだ確認していない場合。

プラグインがアクティブ化されたら、WordPressダッシュボードから[設定]> [WPComplete]に移動します。 これにより、プラグインの設定に移動します。

次の設定を更新します。

学生の役割の種類:サブスクライバー
レッスンのコンテンツタイプ:ページタイプ(投稿ではなくページを使用してレッスンを作成しているため)
「有効な投稿とページに完全なボタンを自動的に追加する」オプションのチェックを外します。 (これらのボタンをショートコードで手動で追加します。)
完全なボタンの色をマーク:#7377fc
グラフ設定原色:#7377fc

次に、[変更を保存]をクリックします。

wpcomplete設定

レッスンページへの完全なボタンを有効にする

これで、WPCompleteのセットアップが完了しました。 レッスンページに「完了」ボタンを追加しましょう。

「第1章:基本の概要」というタイトルの最初のレッスンページに移動し、クリックしてページを編集します。 デフォルトのページエディタから、ページの下部にあるWPCompleteボックスを見つけます。 ボックス内で、「完了ボタンを有効にする」オプションをクリックします。 これにより、ユーザーのためにこのページを追跡することがプラグインに通知されます。 次に、「これはの一部です」と表示された直後の入力ボックスに、追跡するコースの名前である「UXデザイン」を入力します。 これは、各コースの下でレッスンをグループ化する方法です。 たとえば、3つのレッスンがあり、それらの各レッスンページでコースとして「UXデザイン」を選択した場合、ユーザーが完了ボタンをクリックしてページを完了すると、プラグインはユーザーが33%完了したことを記録できます。 (3レッスン中1レッスン)そのコース。 複数のコースがある場合は、ボックスに新しいコース名を入力するだけで、新しいコースグループが開始されます。

有効化ボタン

レッスンページに完全なボタンを追加する

レッスンページに[完了]ボタンを追加するには、編集したばかりの同じレッスンページにビジュアルビルダーを展開します。

ページ下部の最後の宣伝文モジュールの下にテキストモジュールを追加します。 [テキスト設定]で、コンテンツボックスに次のショートコードを入力します。

[wpc_button text =”クリックして完了してください!” complete_text =” YAY! 完了しました」]

注:ショートコードのテキストを変更することにより、ボタンに表示されるテキストと完成したテキストを変更できます。

設定を保存する

追加ボタン

このショートコードは、ユーザーがボタンをクリックしてレッスンを完了したものとして記録できるボタンを作成します。

完全なボタン

ボタンをクリックしてレッスンを完了すると、対応するレッスンのサイドバーのメニュー項目がわずかにフェードし、右側にチェックマークが表示されることに注意してください。

ボタンgif

先に進み、作成したテキストモジュールを「CompleteButton」という名前でライブラリに保存します。 これで、そのライブラリアイテムを使用して、必要に応じてすべてのページに同じモジュールを入力できます。

注:将来のレッスンページを作成するときにセカンダリアイテムとして追加し続ける必要がないように、完了ボタンを含めて、レッスンページレイアウトの新しいバージョンをライブラリに保存することをお勧めします。

プログレスバーグラフをサイドバーに追加する

WPCompleteプラグインを使用すると、特定のコースの進捗状況をユーザーに示すグラフを表示することもできます。 レッスンのサイドバーにUXデザインコースの進捗状況を示す棒グラフを追加します。

レッスンページのサイドバーにコースメニューを表示するために、UXデザインコースのカスタムウィジェット領域を作成した方法を覚えていますか? さて、コースメニューのすぐ上にプログレスバーグラフを追加します。 そうすれば、ユーザーはクールなビジュアルディスプレイで進行状況を確認できます。

棒グラフを追加するには、WordPressダッシュボードに移動し、 [外観]> [ウィジェット]に移動します。 次に、前に作成した「UXデザイン」カスタムウィジェットを切り替えて開き、HTMLウィジェットを現在そこにあるカスタムメニューウィジェットの上のウィジェット領域にドラッグします。 [HTMLコンテンツ]ボックスに、次のショートコードを入力します。

[wpc_progress_barcourse =” UXデザイン”]

棒グラフを追加

このショートコードは、特定のコース「UXデザイン」の進捗棒グラフを表示します。 このコース名は、「これはの一部です:」の横にあるWPCompleteボックスオプションに入力したものに対応しています。 将来別のコースがある場合は、そのコースのショートコードを追加するときに、「UXデザイン」の代わりに新しいコース名を入力するだけです。

注:このプラグインで使用できるショートコードの完全なリストについては、ショートコードのチートシートにアクセスしてください。

次に、「第1章:基本の概要」に進んで、どのように表示されるかを確認します。

ページの下部にある[完了]ボタンをクリックします。 次に、サイドバーをチェックして、何が変更されたかを確認します。 棒グラフは、コースの33%を完了したことを示しています。 また、レッスンページのメニュー項目が色あせて表示され、右側にチェックマークが付いて、レッスンが完了したことを示します。

棒グラフ

かなりかっこいいですね。

これまでの内容を確認しましょう。

1.今後のレッスンのgotoテンプレートとして機能する新しいレッスンページテンプレートがあります
2.コースごとにカスタムメニューを作成するシステムがあります。
3.各コースのカスタムウィジェット領域を設定して、その特定のコースのカスタムメニューをレッスンページに表示するシステムがあります。
4.レッスンページに完全なボタンを追加する機能があります。このボタンをクリックすると、棒グラフと対応するメニューリンクに進行状況が表示されます。

私たちのサイトを機能するeコースに変える最終段階は、コンテンツを有料の顧客に制限するためにメンバーシップレベルを統合することです。

メンバーシップページの作成

まだ行っていない場合は、Restrict ContentProプラグインをインストールしてアクティブ化します。 インストールされると、プラグインはメンバーシッププロセスを処理するための5ページを自動的に作成します。

5ページ

デフォルトのページエディタで各ページを見ると、各ページのコンテンツに追加されるのはショートコードだけであることがわかります。 たとえば、[登録]ページに移動すると、コンテンツエディタに表示されるのは、登録フォームを表示するショートコード「[register_form]」だけであることがわかります。

ショートコード

これらの自動生成された各ページのコンテンツを表示するために必要なのはショートコードだけなので、DiviBuilderを使用してこれらのページのレイアウトを簡単に作成できます。 たとえば、登録ページをすばやく簡単にカスタマイズする方法が必要な場合は、コースページに移動してビジュアルビルダーを展開します。 レイアウトの上部を「e-coursepageheader」(またはそのような名前)でライブラリに保存します。

コースヘッダーを保存する

次に、コースを表示している宣伝文の1つをクリックし、そのモジュールを「e-course宣伝文コンテンツボックス」(またはそのようなもの)という名前でライブラリに保存します。

宣伝文コンテンツモジュールを追加する

次に、[登録]ページに移動し、ショートコードをクリップボードにコピーします(ショートコードを強調表示して、ctrl + cをクリックします)。 次に、Divi Builderをデプロイし、次にVisualBuilderをデプロイします。 ライブラリから「e-courseページヘッダー」と呼ばれる新しく保存されたセクションを追加します。

セクションを追加

タイトルを含むテキストモジュールを更新して、「コース」ではなく「登録」と言います。

レジスタの名前を変更

次に、クリックして、セクションの現在のモジュールの下にあるライブラリからモジュールを追加します。 ライブラリに保存した「eコース宣伝文コンテンツボックス」モジュールを選択します。

宣伝文を追加

次に、次のように設定を更新します。

[コンテンツ]タブの下…

タイトルを消去
内容:ctrl + vを押して、クリップボードに保存したショートコード[register_form]を入力します。
画像のURLを消去します

設定を保存する

カスタム宣伝文

注:これはすばやく簡単な方法でした。 モジュールのスタイルを引き継ぐ最も簡単な方法だったので、宣伝文句モジュールを使用しました。 代わりにテキストモジュールを使用することをお勧めします。

次に、シークレットブラウザで登録ページを確認します。

最終登録ページ

フォームのデザインをカスタマイズする必要がありますが(このチュートリアルではカスタマイズしません)、検査とカスタムCSSを使用して簡単に行うことができます。

同じプロセスに従って、プラグインによって生成された5つのメンバーシップページすべてを更新できます。 メンバーシップの処理に使用されているページを表示するには、WordPressダッシュボードに移動し、 [制限]> [設定]に移動すると、[全般]タブに使用されているすべてのページのリストが表示されます。

無料のサブスクリプションレベルを追加する

無料のサブスクリプションレベルをeコースに追加することは、リードを獲得し、それらをEメールマーケティングキャンペーンに追加し、プレミアムメンバーシップでアップセルするための優れた方法です。 無料のサブスクリプションレベルを追加するには、WordPressダッシュボードに移動し、[制限]> [サブスクリプションレベル]に移動します。 次に、設定を入力して無料メンバーシップを作成します。 無料のサブスクリプションレベルに入力する内容の例を次に示します。

名前:無料
説明:これはコーディングスクールの無料サブスクリプションです。
ユーザーの役割:サブスクライバー

他のオプションはデフォルト設定のままにします。

次に、[メンバーシップレベルの追加]をクリックします

無料で追加

プレミアムサブスクリプションレベルの追加

プレミアムメンバーシップは通常、無料のメンバーシップではアクセスできない、より高いレベルのコンテンツにアクセスするためにお金を請求できる場所です。 無料会員のように、ユーザーは登録フォームに登録する必要があります。 唯一の違いは、サブスクリプションを購入するために支払いフォームに転送されることです。 ユーザーがすでに無料メンバーである場合は、現在の登録情報を使用してプレミアムサブスクリプションにアップグレードし、アップグレードの料金を支払うことができます。

Premiumnサブスクリプションレベルを追加するには、WordPressダッシュボードに移動し、[制限]> [サブスクリプションレベル]に移動します。 次に、設定を入力してプレミアムサブスクリプションを作成します。 プレミアムサブスクリプションレベルに入力する内容の例を次に示します。

名前:プレミアム
説明:これはコーディングスクールのプレミアムサブスクリプションです
期間:1年
価格:29
ユーザーの役割:サブスクライバー

プレミアムを追加

サブスクリプションレベルに基づいてレッスンを制限する

これで、無料およびプレミアムサブスクリプションレベルが作成されました。 ユーザーのサブスクリプションレベルに基づいて、ページ/投稿または特定のコンテンツを制限することを選択できます。 プラグインはこのプロセスを本当に簡単にします。 頭を下げて、作成した最初のレッスンへのアクセスを無料サブスクリプションに制限しましょう。 これを行うには、「第1章:基本の概要」というタイトルのレッスンページを編集します。 ページエディタの上部にある[このコンテンツを制限する]ボックスに注目してください。 ボックスには、コンテンツにアクセスできるユーザーを選択できるドロップダウン入力ボックスがあります。 サブスクリプションレベルのメンバーを選択します。 選択すると、さらに多くのオプションが表示されます。 「任意のサブスクリプションレベルのメンバー」という最初のオプションを選択します。 これは、プレミアムサブスクリプションを持つメンバーにもこのコンテンツへのアクセス権を持たせたいためです。

無料サブスクリプションを追加

注:この設定により、サブスクライブされていないユーザーからページ全体が非表示になります。 ページ上の特定のコンテンツを非表示にして、無料またはプレミアムサブスクライバーのみが利用できるようにする場合は、ショートコードを使用して非表示にするコンテンツをラップできます。 divi Builderを使用しているため、ショートコードを使用してコンテンツをラップするのは難しいかもしれませんが、宣伝文の実際のコンテンツボックス内のコンテンツのみをショートコードでラップし、タイトルを表示したままにすることを検討できます。

「第2章:情報アーキテクチャ」というタイトルの次のレッスンでは、ページをプレミアムサブスクライバーのみに制限します。 これを行うには、ページの編集に移動し、ページエディタの上部にある[このコンテンツを制限する]ボックスで、[サブスクリプションレベルのメンバー]を選択します。 次に、「特定のサブスクリプションレベルのメンバー」オプションを選択します。 次に「プレミアム」を選択します。 これで、プレミアムサブスクリプションを持つユーザーのみがそのページにアクセスできるようになります。

ページを更新して変更を保存します。

プレミアムサブスクリプションを追加する

制限付きコンテンツのリダイレクトページを変更する

ユーザーが制限されているコンテンツにアクセスしようとすると、ユーザーを特定のページにリダイレクトできます。 コースにアクセスするためにユーザーに登録してもらいたいので、ユーザーを登録ページにリダイレクトすることは理にかなっています。 これを行うには、WordPressダッシュボードに移動し、[制限]> [設定]に移動して、[その他]タブをクリックします。 [ページのリダイレクト]オプションを見つけて、ドロップダウン入力ボックスから[登録]ページを選択します。

リダイレクトを追加

オプションの保存

これで、サブスクライブしていないユーザーが制限されたページにアクセスしようとするたびに、それらは自動的に登録ページにリダイレクトされます。

あなたはこれを本当に素早くテストすることができます。 ページを保存し、シークレットブラウザでページを開いて、まだ登録されていないときにユーザーに表示される内容を確認します。

注:このユースケース用に追加の登録ページを作成して、「申し訳ありませんが、現在このコンテンツにアクセスできません。以下で登録してください」などのより具体的な行動を促すことができます。 その下の登録フォームで。

支払いゲートウェイの追加

この時点で、支払いゲートウェイがRestrict ContentProと統合されていることを確認する必要があります。 これを行うには、[制限]> [設定]に移動し、 [支払い]タブをクリックします。 そこで、有効にするゲートウェイを選択したり、ゲートウェイを統合するために必要な情報を入力したりできます。 StripeとPaypalを含む9つのオプションから選択できます。

支払い

これらの設定に関する詳細については説明しませんが、支払いゲートウェイが機能することを確認して徹底的にテストすることをお勧めします。 あなたはお金を失いたくない。

メール通知のカスタマイズ

Restrict Content Proを使用すると、新しいメンバーが登録するたびに、新しいメンバーと管理者の両方の通知メールをカスタマイズできます。 このオプションを利用するには、最初のレッスンへのリンクからコースを開始するようユーザーに促す適切な召喚状をメール本文に含めます。 メール設定を見つけるには、[制限]> [設定]に移動し、[メール]タブをクリックします。

メール

オプションのEメールマーケティング統合

登録時にメンバーを追加したいMailchimpまたはAweberアカウントを持っている場合があります。 これは、Restrict ContentProプラグインで利用できる多くのアドオンの1つを使用して行うことができます。 [制限]> [アドオン]に移動して、必要なメールプラットフォームを見つけるだけです。

アドオン

今何?

eコースWebサイトの設定が完了したので、各ページのすべてのコンテンツの設定を完了し、ボタンにURLを追加するなど、さまざまな調整を行う必要があります。 しかし、基盤は整っています。 うまくいけば、これで簡単に構築できるプラットフォームをセットアップできます。

最終的な考え

WordPressの世界にあるすべての優れたツールを使用すると、オンラインコースを非常に簡単に立ち上げて実行できると主張する人もいるかもしれません。 しかし、それからデザインの挑戦があります。 デザインが得意でない場合、これらのサイトを適切に見せることは簡単ではありません。 幸いなことに、「Learning Management Layout Pack」のような事前に作成されたDiviレイアウトは、設計の問題に対する優れたソリューションを提供します。 レイアウトは箱から出してすぐに機能的で美しいです。

しかし、美しいレイアウトを機能的なオンラインコースに変換するための適切なプラグインを見つけるという問題があります。 さまざまな程度のコストと複雑さを持つ多くの優れたメンバーシッププラグインと学習管理システムがあります。 この投稿の目的は、簡単なメンバーシップで低コストで見栄えの良いeコースサイトを立ち上げて実行することでした。 無料のプラグインを使用してこれを作成したい方は、失望させて申し訳ありません。 私はすべて無料のプラグインについてですが、最終結果は私の意見ではすべてのペニーの価値があるので、このチュートリアルにはProバージョンを使用するのが最善だと思いました。

コメントでお返事をお待ちしております

乾杯!