PR

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

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

Elementorが検索されたWordPressプラグイン追加画面

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

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

スポンサーリンク

ページのカスタマイズ

トップページの変更

変更前

変更前のトップページ

変更後

変更後のトップページ

コース表示の変更

変更点

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

カテゴリー選択後のコース一覧表

変更方法

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

①アイコンの設置

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

カテゴリーアイコンのリンク先を入力する画像編集画面

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

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

「IT学習帳」が追加された固定ページ一覧

③ショートコードの挿入

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

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

SeseiLMSのショートコードを挿入したトップページ

レッスン表示の変更

変更点

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

リンクを貼ったレッスンページ

変更方法

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

動画埋め込みコードを削除したレッスンページ

②リンクの挿入

リンクを挿入した動画の編集画面

スポンサーリンク

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

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

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

Header, Footer & Blocksプラグインを追加したWordPressのプラグイン追加画面

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

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

変更前

変更前のヘッダーメニュー

変更後

変更後のヘッダーメニュー

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

変更点

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

変更方法

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

①Header Footer & Blocksをクリック

Header, Footer & Blocksを選択したWordPressの外観メニュー

②ヘッダーページの作成

ヘッダーというタイトルの固定ページ

③ページの設定

Header, Footer & Blocksのページ設定画面

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

④Elementorで編集

Elementorのヘッダーメニューの編集画面

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

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

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

Simple Download Monitorのインストール

「Simple Download Monitor」が選択されたWordPressのプラグイン追加画面

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

ダウンロード機能の追加

変更点

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

使用を中止したレッスンページのUploadファイルの設定画面

変更方法

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

「Add New」を選択したWordPressのDownloadsメニュー

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

ダウンロードファイルをUploadしたダウンロードページ

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

パスワード設定したダウンロードページ

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

ダウンロードのショートコードを記入したレッスンページ

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