決済システム「Stripe」のアカウント作成と使い方

Stripeは、シンプルでプログラムやコードなどの専門知識がない初心者でも扱いやすいオンラインの決済システムです。本記事ではStripeのアカウント登録から決済フォームの作成まで、基本的な使い方を画像入りで紹介します。

gungii.com

2024.06.08

プラグイン(WP Simple Pay Lite)の導入

プラグインのインストール

プラグイン検索

検索窓より、「wp simple pay」と入力して検索します。

スクロールすると見つかります。

stripeとの連携

初めてインストールするとウィザードが表示されますので、ウィザードに沿って設定します。

stripeと提携します。

「stripeと提携しています。」と表示されていますので、wp simple payに戻ります。

WP Simple Payメニューの表示

WP Simple Payメニューの表示が表示されました。

固定ページの編集

wp simple payをインストールすると、自動的に固定ページが追加されていますので、ページタイトルや内容を日本語に書き直しておきます。
注意:
「Payment Confirmation」と「Payment Failed」という固定ページが作成されています。「Payment Confirmation」は、いわゆるサンクスページとなりますので、タイトルは「ご購入ありがとうございます。」に変更します。「Payment Failed」は、支払いエラーやキャンセルの場合となりますので、タイトルは「支払いができませんでした。」に変更します。

Payment Confirmationページの編集

タイトルを「ご購入ありがとうごさいます。」と書き換えます。タイトルの変更の他、ショートコードしかありませんので、簡単な文言を追加します。

Payment Failedページの編集

タイトルを「支払いができませんでした。」と書き換えます。こちらは、ショートコードがありませんので、英語を日本語に置き換えるのみです。

一般設定

「Currency(通貨)」の選択

Currency Positionとは$や\マークの表示位置です。

「Payment Mode(接続モード)」の確認

stripe側で「テストモード」となっていれば自動的に「テストモード」となっています。
注意:
stripe側で「本番モード」となっている場合は、こちらで「テストモード」or「本番モード」に切り替えることができます。が、stripe側が「テストモード」の場合は、「本番モード」に切り替えるにはstripe側で切り替えて再接続の必要があります。

「Payment Confirmation(支払い確認)」

先ほど変更した固定ページが表示されています。

• Payment Success Pageの欄では支払いが完了したあとに表示するページを指定します。
• Payment Failure Pageの欄では支払いが失敗したあとに表示するページを指定します。
• Payment Cancelled Pageの欄では支払いがキャンセルされたあとに表示するページを指定します。

※カスタマイズする場合は、いづれも固定ページを作成してここでそのページを指定します。

支払い確認メッセージ

「設定(settings)」→「Payment Confirmations」→「One Time Payment」を開きます。決済後に表示されるメッセージです。デフォルトは英語で記載されていますので、記載されているスマートタグを使って日本語に書き直します。

設定した「支払い確認メッセージ」は、次のように表示されます。

サンクスページ(ダウンロードページ)の作成

決済だけをしてもらって、後から別途連絡する（有料講座など）の場合は、基本機能で表示されるサンクスページでも構いませんが、動画やPDF商材などをダウンロードしてもらう場合は、支払いが完了したらすぐにダウンロードページに遷移した方が顧客にとってわかりやすいですね。
ここでは商品として「有給休暇管理表V3.0」というexcelのテンプレートをダウンロード販売します。支払いが完了したあとに、商品のダウンロードURLの記載されたページに飛ぶようにして、そのURLをクリックすることで決済後、すぐに商品をダウンロードできるようにします。商品(「有給休暇管理表V3.0」)は後程、設定するとしてまず、商品のzipファイルをアップロードして、そのURLを専用サンクスページに記載します。

ダウンロード商品のアップロード

商品である「有給休暇管理表V3.0」のファイル(zip)をアップロードします。アップロード先のURLをコピーしておきます。

サンクスページ(ダウンロードページ)の作成

固定ページの作成

新しく固定ページ(サンクスページ)を追加して、そのページにダウンロードURLを記載します。商品は、複数ありますので、初期設定で作成されているページではなく新たに商品毎にページを追加します。ここでは、「有給休暇管理表V3.0」のzipファイルのダウンロードURLを記載したサンクスページとして「テンプレートのご購入ありがとうございます。」というページを追加します。つまり、支払いリンクをクリックして決済が完了すると、こちらのページに飛んで、商品(テンプレート)をダウンロードできるという流れとなります。

固定ページの編集

コピーしたダウンロードURLを貼り付けます。
注意:
ショートコードは初期設定で追加されている固定ページのショートコードをそのまま貼り付けています。(支払い確認メッセージのショートコード)

「更新」をクリック

編集が完了しましたら「更新」をクリックします。

支払いフォームの作成と設置

商品支払いフォームの作成

「Add New」をクリック

日本語に翻訳して確認します。色々な支払いフォームが用意されています。

ここでは、基本的なフォームを選択します。「すべての・・・アクセスします」以下は、有料のプロ仕様にアップグレードする必要があります。

商品名の入力

「General」タブを選択して、商品情報(商品名、商品説明)を入力します。ここでは、「有給休暇管理表V3.0」というexcelのテンプレートをダウンロード販売します。
注意:
商品(「有給休暇管理表V3.0」)は、zipファイルとしてアップロードして、そのURLをダウンロードページに記載しています。

価格の設定

「Payment(支払い)」タブをクリックして、価格等を入力します。

「Payment mode(支払いモード)」を「グローバル設定」にします。グローバル設定にすると一般設定で指定されている値が使用されます。

「支払いボタン」の編集

「Form Field(フォームフィールド)」タブをクリックして、「支払いボタン」を編集します。初期設定のままだと、「Pay now」のままなので、ボタンのテキストを変更します。

できたボタンが、以下の様になります。

支払いフォームの設定

「Confirmation Page(支払いフォーム)」タグをクリックして、「Payment Success Page(支払い成功ページ)」で決済後の飛び先を指定します。Gloval Setting(グローバル設定)にするとSetting(一般設定)で指定されたページが使用されます。ここで、用意したダウンロードページを指定しますので「Custom Page(特定のページ)」を✔して、追加した「テンプレートのご購入ありがとうございます。」という固定ページを選択します。

「公開」をクリック

「商品ページ」に貼り付ける為、ショートコードをコピーした後、「公開」をクリックします。

商品の確認

「Payment Forms」をクリックすると、商品一覧が表示されますので、登録されたことが確認できます。

ショートコードを、商品ページに貼り付ければ完成です！

商品支払いフォームの設置

ここでは、gungii.comのブログのLP(ランディングページ)に作成した支払いフォームを設置します。

プレビューすると、

支払い(決済)のテスト

設定が完了しましたので、実際に商品(「有給休暇管理表V3.0」)を購入してみます。

「購入する。(クレカ決済)」をクリック

商品(「有給休暇管理表V3.0)」の販売ページから「購入ボタン」をクリックして、商品を購入します。

クレジット決済

決済画面の表示

必要事項の入力

メールアドレス、カード情報、カード保有者の名前を入力して「支払う」をクリックします。

• メールアドレス
  テストの場合はメールは送信されませんので何でも良いです
• カード情報
  テストの場合は、テスト用のカード番号(ここでは、 4242 4242 4242 4242) を入力し、有効期限とCVCは何でも大丈夫です。
• 所有者名
  テストの時は何でもOK

決済

支払いが正常に終わると「テンプレートのご購入ありがとうございます」のページに移り、テンプレートのダウンロードができます。

商品のダウンロード

商品(「有給休暇管理表V3.0」)のzipファイルがダウンロードできました。

留意:
←戻るをクリックすると、「支払いができませんでした。」のページに飛びます。

「Payment Mode(接続モード)」を「Live Mode(本番モード)」にすることで、本番環境に移行しますので実際に商品が購入できるようになります。

サンクスページの流入対策

クレジットカードで決済しなければ商品をダウンロードできない仕組みを作っても、例えば、「ダウンロード」や「決済」などのキーでダウンロードページを検索して見つけられると、購入せずに商品をダウンロードされてしまいますので、そのような未購入者の流入を防ぐ必要があります。

URLからの流入をブロック

現象

ダウンロードページのURLを見つけられてURLを直接入力されることを防ぐ為、URLを複雑なものに変更します。

原因と対処

単純なURLだと見つけられますので、パスワード生成ツールを使ってパスワードを生成して、それをパーマリンクとします。(https：//www.luft.co.jp/cgi/randam.php)
パスワード生成サイトにアクセスしたら、↓画像の様に設定します。

生成ボタンをクリックすると、文字の羅列が10個ほど生成されるので、この中から好きなものをコピーして、パーマリンクとして設定します。

文字列をコピーしたら、ワードプレス上で作成した「支払い成功ページ」のパーマリンクに貼り付けます。

検索エンジンからの流入をブロック

現象

googleによってインデックスされて、検索される。

原因と対処

googleに検索されない様に、ダウンロードページは「noindex」とします。WordPressテーマ:Cocoonの場合は簡単です。「テンプレートのご購入ありがとうございます。」のページのサイトを下にスクロールして「インデックスしない（noindex)」にチェックをいれ、保存します。

ブログ内検索からの流入をブロック

現象

例えば、「ダウンロード」と入力してブログ内検索すると、「テンプレートのご購入ありがとうございます。」のページが検索されてしまいます。

原因と対処

ダウンロードURLやパスワード等の文字が記事に中にある為、検索されてしまいます。そこで、「Search Exclude」というプラグインを使って検索されない様にします。

インストールして有効化します。設定は何もありません。該当のページの下部にある「Exclude from Search Results」に✔をいれるだけです。

再度、検索するとそのページのみ検索されません。

サンクスページのレイアウト調整

最後に、LP(ランディングページ)には、サンクスページ(支払い成功ページ)や支払い不能ページには、ヘッダーやサイドバーなどは不要なので非表示とします。

「有給休暇管理表のサンクスページ」

変更前

変更後

「戻る」ボタンで、トップページに戻ります。

変更方法

変更方法については、以下を参照下さい。

【WordPressテーマCocoon】1カラムのLPを作る方法

WordPressのテーマcocoonで、LPを作る方法を解説します。ブログでcocoonを使っていますので、cocoonでLPを作ってみることとしました。LPを固定ページで作成すると、ヘッダーやサイドバー等を非表示とする必要があります。

gungii.com

2024.07.24

「支払い不能ページ」

変更前

変更後

「OK」ボタンで、トップページに戻ります。

「支払いボタン」のセンタリング

変更前

変更後

変更方法

テキストのセンタリング

支払いボタンのセンタリング

.simpay-form-control {
　text-align: center;
}
.simpay-test-mode-badge-container {
　text-align: center;
}

商品の追加方法

「労働者名簿V2.0」というExcelのテンプレートをダウンロード販売しますので、商品登録します。今度は、LPではなく、投稿ページで支払いボタンを設置してみます。

商品支払いフォームの作成

「Add New」をクリック

「WP Simple Pay」から「Add New」を選択して、「basic form」をクリックします。

商品名の入力

「General」タブを選択して、商品情報(商品名、商品説明)を入力します。
注意:
商品(「労働者名簿V2.0」)は、zipファイルとしてアップロードして、そのURLをサンクスページ(ダウンロードページ)に記載します。

価格の設定

「Payment(支払い)」タブをクリックして、価格等を入力します。

「Payment mode(支払いモード)」を「グローバル設定」にします。グローバル設定にすると一般設定で指定されている値が使用されます。

下書き保存

ここで一旦、下書き保存をします。
「労働者名簿V2.0」のExcelテンプレートをzipファイルとしてメディアにアップロードして、そのURLを取得して、固定ページに「サンクスページ」を作成して、そのURLを記載します。

サンクスページ(ダウンロードページ)の作成

ダウンロード商品のアップロード

商品である「労働者名簿V2.0」のファイル(zip)をアップロードします。アップロード先のURLをコピーしておきます。

サンクスページ(ダウンロードページ)の作成

固定ページの作成

新しく固定ページ(サンクスページ)を追加して、そのページにダウンロードURLを記載します。商品は、複数ありますので、初期設定で作成されているページではなく新たに商品毎にページを追加します。ここでは、「労働者名簿V2.0」のzipファイルのダウンロードURLを記載したサンクスページとして「労働者名簿V2.0のご購入ありがとうございます。」というページを追加します。つまり、支払いリンクをクリックして決済が完了すると、こちらのページに飛んで、商品(テンプレート)をダウンロードできるという流れとなります。

固定ページの編集

コピーしたダウンロードURLを貼り付けます。
注意:
ショートコードは初期設定で追加されている固定ページのショートコードをそのまま貼り付けています。(支払い確認メッセージのショートコード)

「更新」をクリック

編集が完了しましたら「更新」をクリックします。

サンクスページのレイアウト調整

今回は、LP(ランデングページ)ではなく投稿ページをサンクスページとしていますので、ヘッダーやサイドバーなどはそのまま表示します。従って、グローバルメニューも表示していますので「戻る」ボタンは設置していません。

但し、支払い不能ページは、共通のページを使用していますので、以下のようなレイアウトとなっています。

「支払いボタン」の編集

「Form Field(フォームフィールド)」タブのクリック

下書き保存していた「WP Simple Pay」を開いて、「Form Field(フォームフィールド)」タブをクリックして、「支払いボタン」を編集します。初期設定のままだと、「Pay now」のままなので、ボタンのテキストを変更します。

できたボタンが、以下の様になります。

支払いフォームの設定

「Confirmation Page(支払いフォーム)」タグをクリックして、「Payment Success Page(支払い成功ページ)」で決済後の飛び先を指定します。Gloval Setting(グローバル設定)にするとSetting(一般設定)で指定されたページが使用されます。ここで、用意したダウンロードページを指定しますので「Custom Page(特定のページ)」を✔して、追加した「労働者名簿V2.0のご購入ありがとうございます。」という固定ページを選択します。

「公開」をクリック

「商品ページ」に貼り付ける為、ショートコードをコピーした後、「公開」をクリックします。

商品の確認

「Payment Forms」をクリックすると、商品一覧が表示されますので、登録されたことが確認できます。

ショートコードを、商品ページに貼り付ければ完成です！

商品支払いフォームの設置

ここでは、gungii.comのブログ(商品ページ)に作成した支払いフォームを設置します。

プレビューすると、

[ 改定履歴 ]

2022.11.23
2次不具合が発生した為、インストールしていたプラグインを削除して、元の状態に戻しました。
(但し、サイトステータスは「永続オブジェクトキャッシュ」のメッセージは非表示としました)

2022.11.08
プラグイン(Redis Object Cache)をインストールして、解決しました。

現象

WordPress V6.1にバージョンアップして、サイトヘルスステータスに勧告が表示されていたので確認すると、「停止中のテーマを削除してください」と「永続オブジェクトキャッシュを使用してください」の2つのおすすめ改善項目となっていました。

前者は、バージョンアップするといつも表示されます(テーマはcocoonを使っています)ので、使っていないテーマを削除するだけですが、後者の方は初めて見る勧告です。

原因

エラーではないので、「原因」という表現は正しくありません。「改善」というのが正しい表現となりますが、永続オブジェクトキャッシュは、サイトのデータベースの効率を上げ、その結果、WordPress がサイトのコンテンツや設定を迅速に取得できるようになるため、読み込み時間を短縮できるということです。

そして、レンタルサーバーの会社へ、永続オブジェクトキャッシュのインストール等を依頼すればプラグインをすすめてくれるはずとの事です。

対処

記載されているRedis Object Cacheというプラグインをインストールします。

Redis Object Cacheのインストール

プラグインの選択

インストール

「今すぐインストール」をクリックして、「有効化」をクリックします。

設定

設定画面が表示されますので、「Enable Object Cache」をクリックします。

文字が反転して、「Disable Object Cache」となれば完了です。

結果

サイトヘルスのステータスが消えました。

その後(二次不具合発生)

現象

Redis Object Cacheのインストールして、サイトステータスは消えて「すばらしい」と表示されていたのですが、1日から2日位経って以降は、いつまで経っても「まだ情報がありません」と表示されたままの状態が直りません。

サイトヘルス画面にアクセスすると、常に「予約したイベントの実行に失敗しました」と表示されます。

どうもRedis Object Cacheのステータスが「Not connected」のまま変わらないことに原因があるようです。

原因

WordPressにプラグインとしてRedis Object Cacheをインストールしましたが、Redis Object CacheのStatusは「Not connected」のままとなっていると思います。これはWordPressをインストールしているサーバ(今回はXserver)でRedisが起動されていないことが原因です。つまり、XserverへRedisをインストールして起動することが必要なのです。

では、インストールすれば良いのですが、これがとても難しいことなのです。
通常、レンタルサーバーではユーザーにroot権限はありませんので、簡単にはインストールできません。ソースコードからインストールしてコンパイルするという方法をとらなければならず、とても知識のない者にはできません。

結果、インストールしたRedis Object Cacheは、削除することとしました。

対策

Redis Object Cacheのインストールして、「永続オブジェクトキャッシュ」の表示はなくなったものの、新たな現象が発生するのではあまり意味はありません。ならば、プラグインはインストールせずに、「永続オブジェクトキャッシュ」が表示されたままの方が良いように思います。

Redis Object Cacheを削除(止める)すると

Cocoonのフォーラムで、「永続オブジェクトキャッシュ」に関する記事があがっていて、プラグインをインストールしても違うエラーが発生したという事例や、xserverに問い合わせをするも「サポート対象外」との回答だったという対策の事例が掲載されていました。
その中で、「永続オブジェクトキャッシュを使用してください」という表示自体を停止する方法が記載されていましたので、これを実施することとしました。
つまり、プラグインを削除すると、元の「永続オブジェクトキャッシュを使用してください」というメッセージ勧告が表示されますので、このメッセージ表示を止めるのです。

cocoonフォーラムで、表示を消す方法を公開して頂きましたAkiraさん、ありがとうございました。また、cocoonフォーラムの皆さん、わいひらさん、ありがとうございました。

add_filter( 'site_status_should_suggest_persistent_object_cache', '__return_false' );

Cocoonフォーラム

私は、以下のようにfunction.phpに追記しました。

//--------------------------------------------------
//オブジェクトキャッシュのチェックを無効にする。
//--------------------------------------------------
function disable_object_cache_check( $tests ) {
    unset( $tests['direct']['persistent_object_cache'] );
    return $tests;
}
add_filter( 'site_status_tests', 'disable_object_cache_check' );
//--------------------------------------------------
//ページキャッシュのチェックを無効にする。2022.12.27
//--------------------------------------------------
function disable_full_page_cache_check( $tests ) {
    unset( $tests['async']['page_cache'] );
    return $tests;
}
add_filter( 'site_status_tests', 'disable_full_page_cache_check' );

結果

メッセージは消えて、二次不具合も解消しました。

プラグインのインストール

「What’ New Generator」のインストール

プラグインの検索

WordPressの管理画面にログインした状態で、左側メニューにある「プラグイン」の「新規追加」をクリックします。

インストール

右上にある検索窓に「What’s New Generator」と入力して、検索されたらインストールして有効化します。

インストールの完了

インストールして有効化すると、プラグイン一覧に表示されます。

プラグインの設定

「What’s New Generator」の設定

「What’s New設定」をクリック

WordPress管理画面の設定から、「What’s New設定」をクリックします。

設定

プラグインの使い方

ショートコードの貼り付け

固定ページや投稿でショートコードを貼り付ければ完成です。

ショートコードの取得

「What’s New Generator設定」画面の上部のショートコードをコピーします。

ショートコードの貼り付け

表示の確認

プレビュー表示すると、新着情報が表示されました。

サイトスピードが遅い

PageSpeed Insightsのスコア

今回、計測したのは、次の環境です。

• WordPress:V5.8
• WordPressテーマ:ルクセリタスV3.20.1

モバイル

モバイルは、明らかにスコアがアップしています。

パソコン

パソコンもアップしています。

注意:
gungii.siteは、まだアドセンス広告を表示していませんので、表示させると大幅に評価は下がると思います。逆に言えば、アドセンスがなければ、100点も可能という事です。

PageSpeed Insightsの「改善できる項目」

改善できる項目としてトップに挙がっているのが「使用していないJavaScriptの削除」です。詳細を見ると、「recaptcha__ja.js」や、「adsbygoogle.js」とあります。いづれもgoogleに関連するもので、reCAPTCHAやAdSenseを止めてしまえば良いのですが、スパムメールを防ぐ為であり、アドセンス収入確保の為であり、やめる訳にはいきません。

モバイル

パソコン

サイトスピードの改善

改善できる項目としてトップに挙がっているのが「使用していないJavaScriptの削除」です。そして次に素人でも取り組めそうなのが「適切なサイズの画像」です。

改善策:「適切なサイズの画像」

Googleが開発した画像圧縮アプリ「Squoosh」で、画像サイズを削減します。Squooshで削減した画像をアップすることで、さらにWebp(ウェッピー)と言うGoogleが開発した高圧縮率の次世代の静止画フォーマットに変換します。

改善策:「使用していないJavaScriptの削除」

こちらは、素人では難しい為、プラグインを使用して削除します。「Flying Scripts by WP Speed Matters」というプラグインをインストールします。
ユーザーが何等かの操作(マウスホバーやスクロール等)を起こすまでJavaScriptの実行を遅らせるというプラグインです。そして、ユーザーが何もしなくても指定した時間が経過するとJavaScriptが実行されるので、遅延時間をあまりに伸ばさない限りは、画面表示が崩れるようなことは起こる可能性は低いようです。

インストール

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

「Flying Scripts by WP Speed Matters」の設定

Flying Scripts」の起動

Javascriptの登録

設定画面が表示されますので、「Include Keywords」欄にJavaScriptを登録します。
注意:Pagespeed Insightの「使用していないJavaScript」を登録します。

※Timeoutは2秒。何もしないで2秒経過するとJavascriptが稼働します。

PageSpeed Insightの再計測

「適切なサイズの画像」

再度、計測すると「改善できる項目」から「適切なサイズの画像」はなくなりました。(0.45Sが無くなりました。)

「使用していないJavaScriptの削除」

登録したJavaScriptが全て消えたわけでなく、消えていないものもあります。ただ、これは2秒後にはJavaScriptが稼働するため、PageSpeed Insightで計測する時点では稼働している為、消えてないように見えるのかも知れません。このへんのところは、知識がない為、全くわかりません。が、スコアは上がってします。(0.46Sが、0.32S)

サイトのスピード改善の評価

サイトのスピードアップ対策は、必要ですが、それぞれの環境によっても異なり、原因は複雑な為、常に同じ結果となることはありません。今回、WordPressのテーマ「ルクセリタス」を使って、「PageSpeed Insight」で表示された゛改善できる項目゛の一部「適切なサイズの画像」については、画像を圧縮して、「使用していないJavaScriptの削減」については、プラグインを使うことで、大きな改善をすることができました。但し、アドセンス広告がない状態なので、アドセンス広告を貼って、どのくらいのスコアとなるか?です。そして、WordPressのテーマ「Cocoon」で同様の対策を行ってみましたが、「ルクセリタス」ほどの大きな改善は見られましたが、以下のような改善となりました。(こちらは、アドセンス広告付きです。)

[ 計測環境 ]

• WordPress:V5.8
• WordPressテーマ:CocoonV2.3.5.1

Elementorのインストール

ページビルダーのインストール

「新規追加」をクリック

プラグインの「新規追加」をクリックします。

Elementor Website Builderの選択

検索窓からElementorと入力して検索します。

Elementorのインストール

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

ASTRAのインストール

テーマのインストール

「ASTRA」で検索して、インストール、有効化します。

基本操作(WordPrssとElementor)

ページの作成

固定ページの追加

WordPressの管理画面から、固定ページを新規追加します。

テンプレートの選択

タイトルを入力して、テンプレートを選択します。

「下書き保存」をクリック

タイトルを入力して、テンプレートを選択したら、一旦、「下書き保存」します。
注意:「下書き保存」したページをElementorで編集後は、「更新」又は「公開」となります。

WordPressとElementorの遷移方法

ページの編集

「下書き保存」したページを読み込み、「ELEMENTORで編集」をクリックします。

WordPressの管理画面へ戻る

Elementorでページの編集が終わり、WordPressの管理画面に戻ります。

ハンバーガーメニューのクリック

ハンバーガーメニューをクリックして、「ダッシュボージに戻る」を選択します。

WordPressボタンをクリック

WordPressの固定ページの編集画面が表示されましたら、さらに、WordPressボタンをクリックすると、ダッシュボートの管理画面に戻ります。

作成中のページのプレビュー方法

ウィジェットを配置してレイアウトを組んだ時に、実際にどのように表示されるのかを、作成途中ですが、確認することができます。

パソコン

戻る場合は、再度三角ボタンをクリックします。以下の方法でも見ることができます。
画面の左下の眼のマーク(変更プレビュー)をクリックしても見ることができます。

スマホ

下書き保存と公開

完成ではなく、出来上がったところまでを保存する場合は「下書き保存」しておきます。公開する場合は、「公開」をクリックします。画面左下の「設定を保存」をクリックして、「下書き保存」を選択します。

公開の場合は、公開をクリックします。

タイトル設定、パーマリンク設定

WordPressの編集画面に戻る

WordPressの編集画面

例えば、タイトルを変えたい場合、こちらで編集できます。

薄くなっていますが、ここでタイトルの変更ができます。

パーマリンクの設定

基本操作(テンプレートの選択)

テンプレートの変更

固定ページの「編集」

WordPressの固定ページ一覧から該当の固定ページの「編集」をクリックします。

テンプレートの変更

WordPressの固定ページの編集画面が表示されましたら、テンプレートを「Elementorキャンバス」から「Elementor全幅」に変えてみます。テンプレートを変更したら、「下書き保存」します。

「下書き保存」しましたら、再度「Elementorで編集」をクリックして、確認します。

Elementor編集画面の表示

「Elementorキャンパス」と異なり、今回はヘッダーとフッターが表示されています。このヘッダーとフッターは、WordPressテーマのデザインが適用されています。

テンプレートを戻す

この状態から、テンプレートを「Elementorキャンバス」に戻します。

設定をクリック

固定ページレイアウトの変更

「Elementor全幅」を「Elementorキャンバス」に変更します。

すると、ヘッダーとフッターが消えて「Elementorキャンバス」に変更されます。

留意:
Elementorキャンパスはヘッダー、フッターがなく、Elementor全幅はヘッダー、フッターがあります。ElementorキャンパスはLPなど、Elementor全幅は、コーポレートサイト、Webサイトに利用されます。

基本操作(セクションとカラムの追加、削除)

セクションの追加と削除

セクションの追加

「+」ボタンをクリック

構造を選択

ここでは、1カラムを選択します。

留意:
水色の線で囲われているのがセクションです。Elementorはセクションを積み重ねて構築していきます。

セクションの削除

セクション3を削除しました。

セクション追加ボタンの挿入

自分のセクションの上に、セクションを追加できるようになります。

さらに、セクション追加すると、

真ん中にセクションが追加される。

セクションの編集

セクションの複製

「セクション編集」ボタンを右クリックして、「複製」をクリックします。

全く同じものが複製されました。

ウィジェットやカラムについても同じ方法で複製ができます。また、セクションをドラッグ&ドロップで場所の移動ができます。

カラムの追加と削除

大きい枠がセクションで、仕切りとなっている+マークの部分がカラムです。クションの中のカラムに、左側のウィジェットを追加していってサイトを構築します。

カラムの追加

「カラムの編集」マークにカーソルを位置づけて右クリックすると、メニューが表示されますので、「新しいカラムの追加」を選択します。

カラムが1つ増えて、2カラムとなりました。

カラムの削除

真ん中のカラムの「カラムの編集」マークにカーソルを位置づけて右クリックすると、メニューが表示されますので、「削除」を選択します。

真ん中のカラムが削除され2カラムとなりました。

内部セクションの追加(インナーセクション)

セクションのカラムの中に内部セクションを追加します。
内部セクションを追加すると、その中にまたカラムがあります。

一番外側のセクションを複製すると

カラム2つと、中にセクションが1つづつ、その中にカラムも1つづつそして、中のカラムも複製できます。

但し、さらにこの中に内部セクションを入れることはできません。

基本操作(セクションとカラムの編集)

セクションの編集

コンテンツの幅

コンテンツの幅は、ボックスと全幅の2通りがあります。

• ボックス:カラムの中身の幅を調整することができ、最小は500px,最大は画面幅まで拡げることができます。カラムのコンテンツの中身の幅を揃える場合に便利です。

• 全幅:画面幅一杯にコンテンツを使いますという指定

カラムギャップ

カラムの間の調整で、あまり使いませんが、使うとしたら「すき間なし」で繋がっている様にする場合に使います。通常デフォルトのまま

高さ

セクションの高さを調整できます。「画面幅に合わせる」とすると画面幅一杯に高さがなります。サイトのトップページに写真をUPする場合等で使われます。「最小の高さ」を確保するという設定もできます。(最低限400px確保という指定)中身が少なくペチャンコになるのを最低限度の高さを確保するという設定です。

カラム位置

「上」を選択すると、カラムが上で揃うようになります。「ストレッチ」とは、中身に合わせてストレッチしてくれます。(セクションの高さに合わせて伸びる)。カラムの上下の位置を決めることができます。

垂直方向に整列

中身のコンテンを整列します

オーバーフロー

例えば中身がセクションからはみ出した時、どうしますかという設定。デフォルトではそのまま表示しますが、非表示という設定もできます。

構造

今回はデフォルト設定なので、3カラムの場合は33:33:33ですが、これを50:25:25等と設定できます。

注意:伸縮セクション、HTMLタグは使わないので省略します。

カラムの編集

カラム幅

任意のカラム幅(%)に設定できます。

数値で設定

調節バーで設定

垂直方向に整列

カラムの中のコンテンツをどのように整列するのか

注意:ウィジェットスペース、HTMLタグはあまり使いませんので省略します。

基本操作(ウィジェットの追加と削除)

ウィジェットの追加と削除

ボタンマークをクリックすると、使えるウィジェットが一覧表示されます。但し、プロ版」は無料版では使えませんが、基本のウィジェットと一般のウィジェットが使えます。

ウィジェットの追加

ウィジェットを選んで、ドラッグ&ドロップで、カラムへ持っていきカラムが青色になれば追加可能ですのでウィジェットを離します。

※1つのカラムに複数のウィジェットを入れることも可能です。

「見出し」ウィジェットと、「ボタン」ウィジェットを1カラムに入れています。

ウィジェットの削除

ウィジェットにカーサルを位置づけると、右上にペンマークが表示されますので、こちらで右クリックして表示されたメニューから「削除」を選択します。

削除されました。

画像の挿入

セクションの編集

セクションを追加

1カラムのセクションを追加します。

高さを最小の高さ

スタイルの選択

スタイルを選択して、「背景タイプ」から「クラシック」をクリックします。

背景に色を塗ってます。

背景色をつけない時は、クリアボタンをクリックすると元に戻ります。

画像の編集

画像の挿入

画像の位置調整

中央/中央

固定

画像が固定され背景が動きます。

繰り返し

画像が収まるように調整されます。2つの画像が表示されているのは、デフォルトで繰り返しとなっている為で、「繰り返しなし」と設定すると

サイズ

画像が画面一杯を覆うようなサイズに勝手に調整されます。

背景オーバーレイ

背景のオーバーレイ

色がかぶってわかりにくいのを解決する為に、背景に色を重ねてウィジェットを見やすく、浮きだたせるようにします。

背景色の変更

色を黒味がかった灰色にします。

不透明度を調整して、少し黒味がかっている様にします。

文字色の変更

見出しの編集で、文字色を白にします。これで文字が見やすくなりました。

シェイプ区切り

セクションの編集

「新着情報」のセクションで、背景に薄い黄色に塗ります。

その下のセクションにも同様に、背景に薄い水色を付けます。

この薄い黄色と薄い水色の境目を色々なデザインで調整できる方法がシェイプ区切りです。

「シェイプ区切り」のクリック

上の「シェイプ区切り」をクリック

上のセクションの「シェイプ区切り」をクリックします。

下の「シェイプ区切り」をクリック

下を選択して、タイプ:波を選択します。

すると、波線となります。

色を下のセクションの薄い水色に合わせます。

※セクションを超えたデザインができます。

レスポンシィブ対応

PC・スマホでの確認方法

スマホの確認

PCの確認

PCに戻るときは、再度、レシポンシィブモードをクリック

スマホの修正

スマホでの表示方法を変更してみます。

「カラムを逆にする」を「はい」とする。

高度な設定の中のレシポンシィブデザインで、「カラムを逆にする」を選択します。

モバイルの時だけ、逆にするといったことができます。

モバイルの時だけ、見出しを非表示とする。

ベーシックウィジェットの使い方

見出しウィジェトの使い方

タイトルの変更

スタイルの調整

スタイルで文字色やサイズ、行の高さ等も変えることができます。

画像ウィジェットの使い方

画像の挿入

スタイルの調整

ボタンウィジェットの使い方

タイプの選択

タイプの内容により、例えば「情報」だと水色、「警告」だとオレンジ色等と予め設定されている色もあります。もちろん色は変更できます。

テキストの変更

アイコンの付加

区切り線

サイズの調整

テキストの変更

アイコンの挿入

線の種類がありますので、ただの区切り線ではなく、デザインに使えます。

Googlemapウィジェット

所在地を入力するとmapとして反映されます。

一般ウィジェットの使い方①

画像ボックスウィジェット

コンテンツ

画像と見出しとテキストエディターが1つになっています。

画像の位置を変えられます。

お客様の声などを簡単に作れます。

スタイル

画像とコンテンツの間隔、画像の幅や画像の枠の丸み、ホバー時のアニメ、不透明度の設定等また、色や書体はもちろんコンテンツの配置やタイトルとの幅なども調整できます。

アイコンボックス

アイコンか画像かの違いで、操作は画像ボックスウィジェットと同じ

LPの場合、3つ並べて、サービスの特徴というような使い方をします。

スター評価

コンテンツ

評価尺度、評価

評価は小数点までつけることができ、最大は10

スタイル

画像カルーセル

所謂、スライダーです。画像を登録して使います。

最初に表示する画像の数や、いくつ毎にスライドさせるか等、細かい調整もできます。

実績の表示に便利。例えば作成したHPの実績なんかを表示させる時、便利です。

ベーシックギャラリー

コンテンツ

スライダーとは違い、ギャラリーなので全ての画像が表示されます。

カラムを4としていますので、4枚目がスペースとなっています。

カラムを2とすると、

枠線の丸みを調整して

一般ウィジェットの使い方②

アイコンリスト

コンテンツ

・や数値などが一般的ですが、これをアイコンでリストできる様になっています。

スタイル

リスト同志の間隔、配置、リストの区切り線等、細かい設定もできます。

カウンターウィジェット

数字がカウントアップされるウィジェットです。

開始から終了までの数字を選択でき、例えば10から100まで等、また数字の前や後ろに文字を入れることができます。(円、人etc)

プログレスバー

０から100までの到達割合を表示する。

技術者がポートフォリオで、スキルをバーで表現する際に便利です。

タブウィジェット

アコーディオンと切り替えウィジェット

アコーディオンウィジェットで良くあるのはQ&A。アコーディオンと切り替えの違いは、アコーディオンの方は、例えばQ1が開いている時は、他は閉じています。が、切り替えの方は、どこかが開いていても閉じることはありません。

推薦文ウィジェット

お客様の声、レビュー文があり、その人の写真を加えるような使い方となります。

メニユーアンカーウィジェット

特定の位置まで飛ばすことができます。

アンカーの作成

見出しテキストの上に、「メニューアンカー」ウィジェットを挿入して、アンカーid=tobu1と入力します。

ボタンの設置

トップページのヘッダー画像の下にボタンを設置します。リンクに「#tobu1」と入力します。

「飛びます」ボタンをクリックすると、tobu1まで飛んできます。メニューに仕込んでおいて、それぞれのコンテンツに飛ばすことができます。

サイドバーウィジェット

ブログを作る際に使えますが、1ページ1ページ作るのであれば、これでOKですが、有料版のElementorのPRO版のテーマビルダーが必要となります。

サイドバーウィジェットの挿入

サイドバーの選択

メインスライダーを選択すると、通常サイドバーに表示される内容が表示されます。

見出しテキストと、テキストを追加すれば、ブログデザインができあがります。

ソーシャルアイコンウィジェット

アラート

その他

リビジョン機能の使い方

例えば、セクションを消した場合に、前に戻りたい時、「履歴」をクリックすると、いままで行った操作が履歴として残っていますので、それを選択することで戻ることができます。

ナビゲータ機能

セクションに名前を付けて管理することができます。

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

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

gungiiのオンライン学習帳 – 1ランク上のスキルを身につける。

kaitsuburi.net

ページのカスタマイズ

トップページの変更

変更前

変更後

コース表示の変更

変更点

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

変更方法

カテゴリーは、「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をクリックします。

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

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

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

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

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

gungiiのオンライン学習帳 – 1ランク上のスキルを身につける。

kaitsuburi.net

留意：
2020.10.08現在、「オンライン学習帳」はカスタマイズを行なって、画面が異なっています。そのカスタマイズの方法は、ブログ「WordPressで作成したオンライン講座をカスタマイズした。」で解説しております。操作の手順は変わっておりませんので、ご確認下さい。

オンライン学習帳の操作

オンライン学習帳の起動

ブラウザから、https://kaitsuburi.netを入力してサイトを起動します。

コースの選択

注意：
このコースは、Simple Menbershipの設定で、゛限定公開しない゛として「いいえ」にチェックを入れています。コース内の2つのレッスンの内、1つは限定公開としていますがコース設定では、゛限定公開しない゛として設定します。

レッスンの表示

コース「Excelの使い方」を選択すると、作成した2つのレッスンが表示されます。

※プレビューと表示されているのは、「誰でも閲覧できるレッスン」として指定したレッスンです。

レッスンの選択

①誰でも閲覧できるレッスン

最初のレッスン「フォームコントロールのオプションボタンの挿入方法」を選択すると、すると、以下のようにレッスンが開始されます。

注意：
このレッスンは、SenseiLMSの設定で、プレビューにチェックを入れています。

Simple WP Menbershipの設定で、゛限定公開しない゛として「いいえ」にチェックを入れています。

②会員のみ閲覧できるレッスン

2番目のレッスン「レーダーチャートの作り方」を選択すると、次のように表示され、レッスンは閲覧できません。
注意：ログインすれば、閲覧できます。

注意：このレッスンは、SenseiLMSの設定で、プレビューにチェックを入れていません。

Simple Menbershipの設定で、゛限定公開する゛として「はい」にチェックを入れて、無料会員、有料会員、管理者の会員レベルを選択しています。

ログイン、ログアウト

ログイン

ログイン、ログアウトボタンのクリック

ユーザー名、パスワードの入力

ログインすると、トップページが表示されますので、コースを選択して閲覧します。

ログアウト

ログイン、ログアウトボタンのクリック

ログアウトのクリック

ログアウトすると、トップページが表示されます。

留意：
ログアウトをしなくても、ブラウザを閉じた時点で、システムが強制的にログアウトします。
Simple Membershipの設定の「詳細設定」にて、以下にチェックを入れておきます。

会員管理の方法

新規会員登録

利用者登録のクリック

会員ページから利用者登録をクリックします。

会員情報の入力

アカウントの有効化の為に、メールを送信します。

会員登録は終わりましたので、トップページをクリックします。

注意：
「アカウント有効化」のメールが届いていますので、リンクをクリックすることで、会員登録が完了します。

アカウントの有効化

本人宛てに、以下のようなメールが届きますので、リンクをクリックします。

リンクをクリックすると、「あなたのアカウントは有効化されました。」と表示され、ログイン画面が表示されますので、ログインします。

留意：
メールで、本人宛には、ユーザー名とパスワードの記載された゛本登録゛の確認メッセージが送付されます。

会員管理の留意点

WordPressのユーザーとmembershipのmemberとは別物ですので、membershipにも管理者を登録する必要があります。
Simple Membershipをインストールしたことで用意される「メンバー」という会員リストと、もともとwordpressにある権限グループ「ユーザー」という会員リストとが存在しています。新規会員登録をすると双方に同じ会員が登録されていきます。
注意：
名前やメールアドレスなどの変更は同期されますが、会員レベル(権限グループ)は同期されません。

Simple Membershipのメンバー

WordPressのユーザー

WordPress管理画面へのアクセス制御

Simple Membershipの設定

Simple Membershipへ登録したメンバーが、そのままWordPressのユーザーへ登録される為、そのままでは、外部のメンバーがWordPressの管理画面へ入れてしまいます。

①、②のチェックを外すと以下のようなツールバーが表示されます。が、③でダッシュボードへのアクセスを無効にしておけば、管理画面へのログインはできません。

WordPress管理画面へのログイン

Simple Membershipの設定で、上記①②③にチェックをいれておけば、https://kaitsuburi.net/wp-adminでログインしても、https://kaitsuburi.netにリダイレクトされる為、管理画面へログインされることはありません。

会員限定レッスンの受講

レッスンの表示

会員限定のレッスンは、ログインが必要と表示されます。

ログイン

ログインすると、トップページが表示されますので、コースを選択して閲覧します。

コースの選択

コース「Excelの使い方」をクリックします。

レッスンの表示

①「このコースを受講する」をクリック

注意：
会員限定のレッスンがない場合は、以下の通り、「このコースを受講する」のボタンは表示されません。

留意：
「このコースを受講する」をクリックせずにレッスンをクリックしても必ず、「このコースを受講する」をクリックしなければ進みません。

②レッスンの再表示

「このコースを受講する」をクリックすると、レッスンが再表示され進捗度が表示されます。

レッスンの選択

会員のみ閲覧できるレッスン「レーダーチャートの作り方」を閲覧できる様になりました。

留意：
レッスンが終了しましたら、「レッスン完了」をクリックすることで、進捗度が更新されます。

コースは2つのレッスンがあり、1つのレッスンが完了しましたので、進捗度は50%となりました。

小テストの実施

①「レッスン小テストを表示」をクリック

会員の場合、小テストがあれば小テストを実施できますので、「レッスン小テストを表示」をクリックします。

②小テストの表示

注意：
「小テストを保存」をクリックすると内容が保存され、次回に開いた時に、前回の入力内容が表示され、続きからテストを開始することができます。

③結果の表示

「小テストを完了」をクリックすると、テスト結果が表示さます。

「小テストをリセット」をクリックすると、再度、小テストの表示へ戻ります。100%を合格基準としていますので、全問正解するまで、繰り返します。

④コースに戻る

テストに合格したので、「派遣先管理台帳の作成」をクリックして、コースに戻ります。

LMS(学習管理システム：Learning Management System)とは、eラーニングの実施に必要な学習教材の配信や成績などを統合して管理するシステムのことです。

但し、今回の設定では、有料会員については対象としていません。つまり有料販売での使い方は説明しておりませんので、ご了承下さい。

完成版のサイトは、こちらです。

gungiiのオンライン学習帳 – 1ランク上のスキルを身につける。

kaitsuburi.net

留意：
2020.10.08現在、「オンライン学習帳」はカスタマイズを行なって、画面が異なっています。そのカスタマイズの方法は、ブログ「WordPressで作成したオンライン講座をカスタマイズした。」で解説しております。操作の手順は変わっておりませんので、ご確認下さい。

テーマのインストール

Astraのインストール

今回は、無料のテーマのAstraを利用しています。子テーマもインストールします。

ご留意:
2020.10.09サイトをgoogleアナリティクスへ追加する為、トラッキングコードをheader.phpに埋め込むことから、子テーマは削除しました。

サイトの確認

サイトを表示してみると、こんな感じです。完成イメージです。

LMSプラグインのインストール

Sensei LMSのインストール

LMSのコース設定やレッスン設定ができるSensei LMSというブラグインをインストールします。

SenseiLMSのアップロード

「今すぐインストール」をクリックして、「有効化」をクリックします。

①「次へ」をクリック

②「次へ」をクリック

③目的の選択

このプラグインを利用する目的を選択して、「次へ」をクリック。

④追加オプションの選択

よくわかりませんが、無料のものを選択して、「次へ」をクリック。

⑤インストール開始確認

「今すぐインストール」をクリックします。

⑥インストール完了確認

「次へ」をクリックします。

⑦最終確認

「コースへ退出」をクリックします。

SenseiLMSのインストール完了

WordPressの管理画面に戻れば、インストール完了です。

WordPressメニューに「コース」、「レッスン」、「問題」などが追加され、固定ページには、コース、参加講座が追加されました。

SenseiLMSの設定

設定をクリック

一般設定

アクセス許可にチェックを入れる。(デフォルト)

レッスン

レッスンの表示で、投稿者が表示されるのを非表示とする場合は、Sensei LMSの設定画面で、チェックを外します。

トップページの作成

固定ページに、「トップページ」を作成して、ヘッダー画像を挿入して、SenseiLMSのショートコードを挿入します。

ショートコードは、[sensei_user_courses]ですが、うまく動作しなかった為、SenseiLMSショートコードの説明サイトを見て、以下の様に設定しました。
[sensei_user_courses number=”5″ order=”asc”]

注意:
特定のコンテンツを表示するために、任意のページにショートコードを追加できます。SenseiLMSのショートコードは、以下のサイトに記載されていますので、ご確認下さい。

例：[sensei_user_courses number=”5″ order=”asc” status=”complete”]、
[sensei_user_courses categoriesexclude=”music” order=”asc”]

講座の作成

コースの作成

今回は、次のようなコースを設定してみます。

• コース1:Excelの使い方
  レッスン1:フォームコントロールのオプションボタンの挿入方法
  レッスン2:レーダーチャートの作り方
• コース2:派遣の管理
  レッスン1:派遣管理台帳の作成

コース1の作成

①コースの新規追加をクリック

②コース名、コース内容を入力します。

入力が終わりましたら、「公開」をクリックします。

コース2の作成

コース1と同様にして、コース2を作成します。

レッスンの作成

コース1のレッスン1の作成

①レッスンの新規追加をクリック

②レッスン名、レッスン内容を入力する。

③コースの紐づけ

レッスンを追加する場合は、追加したレッスンがどのコースのものなのか？を必ず紐づけが必要です。

④プレビューの設定

このレッスンは、誰でも見れる様にする為に、プレビューにチェックを入れます。

コース1のレッスン2の作成

続けて、レッスンの新規追加をクリックして、レッスン名、レッスン内容を入力します。

コースの紐づけを行ない、プレビューの設定を行います。
2つ目以降のレッスンは、誰もは見れない様(会員のみ)とします。

コース2のレッスン1の作成

コース1のレッスンの作成と同様にして、コース2のレッスン1を作成します。

小テストの作成

レッスンには、小テストの問題を作ることができます。

小テストの設定

小テストの結果の扱いについて設定します。

小テスト問題の作成

①作成済みの問題の表示

既に作成している問題は、以下に表示されています。

②問題の作成

問題は、こんな感じで作っていきます。

※問題のタイプは色々ありますので、試してみて下さい。

注意：
レッスンでは、小テストを設定することができますが、会員でなければ小テストは表示されません。また、レッスンで使用した資料等のファイルをダウンロードすることもできますが、こちらも会員登録しなければできません。以下のように、チェックが入っていると、表示されませんので、ご注意ください。

その他の設定

メッセージ機能の停止

①メッセージ機能を停止していない時

②メッセージ機能を停止した時

「コース講師に問い合わせ」ボタンが非表示となり、講師への問い合わせメールを停止することができます。

③置き換え画像を使う。

会員制プラグインのインストール

Simple Menbershipのインストール

新しいユーザーはWordPressの管理者が毎回作成するのであれば、ウィジットでログイン画面さえ設定すれば、ＯＫですが、毎回、管理者が登録するのではなく、利用者が直接会員登録ができるようにするためには、会員登録フォームの作成が必要です。

プラグインのアップロード

有効化

「今すぐインストール」をクリックして、「有効化」をクリックします。

Simple Membershipの設定

会員レベルの設定

会員レベルをクリックすると、会員ランクの画面が表示されますので、「レベルの追加」から必要な会員レベルを設定します。

レベルの追加

「新規追加」をクリックして、各レベルを追加します。無料会員、有料会員、管理者を作成します。
注意:ID(会員レベル)はシステムが自動採番しますので、先に何番かを指定はできません。

①無料会員の作成

会員レベル名を入力して有効期限を選択して、「メールで有効化する」にチェックを入れて、「新規メンパーシップレベルの追加」をクリックします。

無料会員がID=2で、できました。同様にして、「レベルの追加」をクリックして、有料会員も作ります。

②有料会員の作成

有料会員を登録しますが、今回は対象としていませんので、使いません。

有料会員がID=3でできました。

③管理者の作成

WordPressの管理者と、SimpleMembershipの管理者とは異なりますので、管理者を作っておかないと管理者すら閲覧できなくなります。

管理者がID=4でできました。

一般設定

「設定」を開き、一般設定を以下のように設定します。設定が終わりましたら、それ以外は、デフォルトのままなので、一番下の「変更を保存」をクリックします。

留意:デフォルトアカウントステータスの設定
新規登録の許可を管理者が手動で行う場合は「保留中」を選ぶと記載されていたので設定してみたが、他にも変更しなければならない項目があるのか？「有効」で設定した場合と変わらなかった。

会員登録フォームの設置

Simple WP Membershipの設定が完了しましたので、ログイン機能の実装、会員登録フォームの実装を行います。

ログイン機能の実装

Simple Membershipをインストールした際に、固定ページとして「ログイン」ページができていますので、メニューを作成すれば実装は完了します。(ページの名称「ログイン・ログアウト」は、変更しております。)

①固定ページの確認

固定ページにショートコードが記述されていることを確認します。

②メニューの作成

会員登録フォームの実装

Simple WP Membershipをインストールした際に出来上がっている「登録」のページが新規会員登録のページとなっていますので、「会員について」をクリックした時に、こちらのページに飛ぶようにします。

①登録ページのURLをコピー

注意:ページの名称「登録」を「利用者登録」に変更しております。

②ページ設定のURLを変更

一般設定の中のページ設定から、「会員登録の案内ページURL」を登録ページのURLで置き換えます。

これで「会員について」をクリックすると、新規会員登録ページが表示されるようになります。

閲覧権限の設定

設定したレッスンに対して、どのレッスンが無料会員も見れて、どのレッスンが有料会員のみなのか？閲覧権限を設定しなければなりません。

レッスンの選択

Simple Membershipのプロテクションの設定

レッスンの一番下のプロテクションの設定をします。

①このコンテンツを限定公開しますか？

一部の人しか見れない様にするには、「はい、コンテンツを保護します」にチェックを入れます。

②このコンテンツを閲覧できる会員レベルを選択してください。

閲覧できる会員レベルにチェックを入れます。

③プロテクションの設定が済めば、「更新」をクリックします。

Simple Membershipのメール設定

メール設定の日本語化

Simple Membershipのメール設定を日本語化します。

メール設定

メール設定(登録完了のお知らせ)

メール設定(登録完了)

新規会員登録のお知らせ

メール設定(パスワードリセット)

メール設定(会員レベルのアップグレードのお知らせ)

Email Setting

メール設定(メールによる有効化)

Simple Membershipのプログラムの変更

現象

会員限定のレッスンを受講しようとすると、当然、「ログインが必要です。」と表示されますが、そのメッセージが変な日本語となっています。また、行も詰まっています。

対応

直接、プログラムを修正します。このプログラムは「wp-content/plugins/simple-membership/classes」の中のclass.swpm-access-control.phpとなります。

修正前

修正後

対応結果

プラグイン(flowpaper)の検索

「新規追加」をクリック

「flowpaper」を検索

プラグイン(flowpaper)のインストール

「今すぐインストール」をクリックした後、「有効化」をクリックします。

flowpaperの使い方

設定画面はなく、投稿画面で以下のショートコードを記載するだけです。

実際の運用

記事の投稿

pdfのアップロード

pdfの表示

PDFファイルは、flowpaperのサーバーにアップロードされ、1ファイル15MBまでのようです。PDFファイルのダウンロード、拡大、縮小もできます。左クリックしたまま(つかんだまま)で、画面をずらすことができます。
注意:パラメータのカスタマイズもできますが、詳細は、Wordpress.orgのflowpaperのサイトを確認下さい。

Created using FlowPaper Flipbook Maker ↗