WordPressで作成した オンライン講座をカスタマイズした。

Windows

ブログ「WordPressで会員制のオンライン講座を作ってみた」で、LMS(Learning ManagementSystem)の作り方をご紹介しましたが、Astraというテーマをそのまま使っていましたので、今回、見栄えを良くし、メンテナンス性を向上させるべく、WordPressの無料のページビルダープラグイン「Elementor 」を使ってトップページやコースページ、レッスンページの編集を行いました。また、レッスンページにドキュンメント等のダウンロードができる機能を追加して、講座を利用しやすくカスタマイズしましたので、ご紹介します。

ただし、Elementorの操作につきましては、ここではご紹介しておりませんので、ネット等で検索して、ご確認下さい。
尚、ブラウザIEでは表示が崩れてしまいますので、IE以外のブラウザでご確認下さい。WordPressのページビルダープラグイン Elementorが書き出すCSS(スタイルシート)がIEに対応していない為です。

完成したサイトは、こちらです。

gungiiのオンライン学習帳 – Just another WordPress site
スポンサーリンク

ページのカスタマイズ

トップページの変更

変更前

変更後

コース表示の変更

変更点

変更前のトップページでは、ヘッダー画像の下に、直接、コース一覧を表示していましたが、変更後のトップページでは、カテゴリーアイコンを表示した上で、クリックすることで、そのカテゴリーに属するコース一覧を表示する様にしました。

変更方法

カテゴリーは、「information technology(IT学習帳)」を含めて4つとしています。ここでは、「information technology(IT学習帳)」を例に説明します。

①アイコンの設置

トップページのヘッダーの画像の下に、「information technology(IT学習帳)」のアイコンを設置します。そのアイコンのリンク先に、固定ページの「IT学習帳」を指定します。
注意:実践では、リンク先の設定は、固定ページを作成した後となります。

②固定ページ「IT学習帳」の作成

固定ページに、「IT学習帳」のタイトルでページを作成します。

③ショートコードの挿入

固定ペード「IT学習帳」にSenseiLMSのショートコードを挿入します。

注意:
ショートコードにより、同一のカテゴリーをもつコースをのみを抜き出すことができます。

レッスン表示の変更

変更点

レッスンページの中の動画埋め込みコードに記述していましたが、これを削除して、レッスンページの中でリンクを貼るようにしました。

変更方法

①動画埋め込みコードを削除

②リンクの挿入

ヘッダー、フッターのカスタマイズ

Astraのテーマのそのままでも良いのですが、Elementorにヘッダー、フッター専用のプラグインが用意されていますので、これを使ってヘッダー、フッターをカスタマイズします。

Header, Footer & Blocksのインストール

インストールして有効化します。

ヘッダー、フッターの変更

変更前

変更後

ヘッダー、フッターの変更方法

変更点

Astraのテーマそのまま利用していましたが、ヘッダー、フッターを独立して作成することで、メニューの色を変えたり、タイトルの大きさの変更等がやりやすくなります。

変更方法

ヘッダー、フッターそれぞれのページを作成して、Elementorで編集します。

①Header Footer & Blocksをクリック

②ヘッダーページの作成

③ページの設定

注意:
Type of Templateを「Header」、Display Onを「Entire Website」を指定します。この設定を忘れると、Elementoerで編集しても反映されませんのでご注意下さい。

④Elementorで編集

⑤フッターの作成
フッターは、ヘッダー同様に作成して下さい。

ダウンロードプラグインの導入

SenseiLMSで作成したレッスンで使用するドキュンメント等をダウンロードできる様にする為にプラグインのSimple Download Monitorをインストールします。
留意:
SenseiLMSでは会員か非会員かでの制御はできますが、会員となれば、すべてのレッスンを閲覧することができる為、全てのレッスンのダウンロードもできるようになります。これをレッスン毎にダウンロードに制限をかける為、レッスン毎のパスワードを入力することで初めて、ダウンロードできるようにします。

Simple Download Monitorのインストール

インストールして有効化します。

ダウンロード機能の追加

変更点

レッスンページのupLoad Fileに、zip形式でファイルを指定していましたが、これを止めて、プラグインを導入しました。

変更方法

①DownloadsからAdd Newをクリックします。

②ダウンロードページの作成
ダウンロードページを作成して、ダウンロードファイルをアップロードします。

ダウンロードする際に必要なパスワードを設定します。

③レッスンページの編集
レッスンページに、ダウンロードページの作成でできたショートコードを挿入します。

これで、各レッスン毎にパスワードを入力しなければダウンロードできない仕組みが完成しました。

コメント

タイトルとURLをコピーしました