ワードプレスで会員サイトを簡単に作っちゃうよ！15分で作る会員サイト構築編

投稿日 2019年2月9日
更新日 2019年10月19日
著者 wpuser2019
カテゴリーワードプレス

こんにちは！こんばんは！

突然ですが、「会員サイトを作って、レベルに合わせて情報を公開したい」なんて考えた事ありませんか？

ネットで人とのやり取りが多くなると、資料やマニュアル類のコンテンツを限定配布したくなる事も増えてくると思います。

そんな時はワードプレスのパスワード機能使ったりすると良いよって言われるんですけど、この人達に見せたいとか、ちょっと複雑な配布をしたいなって思ってくると、記事パスワードでは少し役不足なんですよね。

そんな悩みをある程度解決してくれるのは、グループに応じたコンテンツ配布が可能な会員管理的なサイトです。

でも、会員サイトって結構敷居が高いんですよ。

会員サイトだとCyfons（サイフォンス）が有名ですが、ちょっとやってみたいだけなのでわざわざ買うのもなー、それになんか難しそうだし・・・

なんて思って諦めてしまっている人も多々いると思います。

そこで、今回は、慣れ浸しんだワードプレスで、そこそこイケてる会員サイトを無料で簡単に作る方法について解説していきます。

既存のワードプレスサイトに追加することも出来るので使い方によってはかなり面白い事が出来ます

今回、作るデモサイトはコレ！　⇒　ワードプレスでつくるデモ会員サイト

今回作成する会員サイトについて

今回はデモサイトなので、ほぼノーカスタマイズで作っていきます。コンテンツの追加を除けば15分位で構築可能です。

画面構成

会員登録画面

ここから会員登録を行ってもらいます。新規登録フォームはプラグインで簡単に設置出来ます。

ログイン画面

会員登録が終わっているユーザはココからログインします。パスワード再設定機能もプラグインで簡単に生成されます。

講座申込み画面

会員登録が終わったユーザーが受けたい講座を選んで申込みをする画面です。グループ別けで一つのサイトで複数の講座が管理出来ます。

コンテンツ画面

レベルに応じたコンテンツ配信が行えます。今回はサイドバーに進捗を表示していきます。

会員情報画面

所属メンバー一覧が見られます。もちろん、非公開にも出来ますし、設定によりメンバー間の交流にも利用できます。

今回作る会員サイトの機能

会員のレベルによって情報コンテンツを制御（○○コース、◇◇コース）
会員登録が簡単に出来る

今回、作るサイトはコレ！　⇒　ワードプレスでつくる会員サイト

この機能を実現するために使うプラグイン

Groups
Ultimate Member

では、各プラグインの特徴を押さえておきましょう。

Groupsとは

ワードプレス内にグループを作成し、コンテンツの公開範囲を制限できるプラグイン。

これを使用することで、無料会員や有料会員といった会員をグループ別に分けることができ、公開内容を変えることができます。

今回のシステムの肝となります。

Ultimate Memberとは

会員サイトを簡単に作るプラグインなのですが、結構、癖があるので今回はUltimate Memberの一部の機能だけ使います。

groupsだけでも殆どの要件は満たすのですが、Ultimate Memberを使うと会員登録フォームが簡単に作れたりするので、その機能だけを使っていきます。

今回はこの2つのプラグインを使用して、会員サイトを作っていきます。

役割としては、

Groups：コンテンツの配布制限管理全般を行う（権限管理）

Ultimate Member：会員登録とログイン制御を行う（UI）

それでは、詳しく見ていきましょう。

会員サイトの作成手順

テーマをインストール（ワードプレス）
プラグイン「groups」のインストール（groups）
グループを作成する（groups）
コンテンツ（記事を作る）（投稿記事）
コンテンツに権限設定をする（投稿記事）
ステップアップボタンを作る（投稿記事）
ウィジットを制御してメニューを作成する（デザイン）
プラグイン「Ultimate Member」のインストール（Ultimate Member）
ログインフォームを生成する（固定ページ）（Ultimate Member）
ログインフォームを設置する（ナビゲーションメニュー）
会員登録許可設定をする（ワードプレス）

サイトの原型を作る

今回の会員サイト作成に使用したワードプレスのテーマは、Cocoonです。

今回は無料でシンプルなインターフェイスのCocoon選択しましたが、プラグインを使用して作って行くので自分の好きなテーマを使って会員サイトを作ることが可能です！

wordpressを導入したあとは、使用するテーマを入れてから各プラグインを入れましょう。

コンテンツを公開レベルを設定する

会員サイトはレベル（権限）に応じたコンテンツが配信されるようになっている事が殆どですがいざやろうとすると、ワードプレスの機能ではパスワード制限くらいしかありません。

パスワード制限では、コンテンツや会員のレベルが増えてくると会員に応じたコンテンツ制御は中々難しくなってきますが、このセクションでは会員に応じたコンテンツの公開の管理がより複雑に出来るようGroupsと言うプラグインを使って制御していきます。

プラグイン「groups」のインストール

プラグインを入れるときは、ワープレスの管理メニュー「プラグイン」から操作を行います。

メニュー「プラグイン」を押す
「新規追加」を押す
「Groups」を検索する
ダウンロードして有効化する

無事に有効化できると、ワードプレスの管理メニューに「Groups」が表示されます。インストールが終わったら実際に設定いきましょう！

グループを作成する

管理メニュー「Groups」から、使用するグループを作成しましょう。

グループを作成してコンテンツを制御する理由

初級・中級・上級等のグループを作ってその中にユーザーを所属させておくと、初級の人は初級コースのコンテンツだけ公開、上級の人は初級・中級・上級コースのコンテンツを公開等のコンテンツの公開管理がしやすくなります。

これを記事パスワードでやろうと思うと、最低でもパスワードが３つ必要になり記事別にパスワードを管理する必要が発生するので、コンテンツが増えれば増えるほど、管理が大変になる上、ユーザビリティが極端に下がります。

この問題を解決してくれるのがグループによるコンテンツ管理です。

「Groups」を開く

「New Group」を押す

入力して「Add」を押す

この画面で入力する項目は、以下になります。

Name	グループの名前
Parent	親グループの指定
Description	グループの説明
Capabilities	公開レベルの指定

こちらを入力して「Add」を押すと、新たなグループを登録することができます。

「Name」と「Capablitities」を設定しましょう。

今回は3つのレベルに分けるため、次のように指定しています。

LV1の指定

Name	LV1
Parent
Description
Capabilities	Choose Capabilities

LV2の指定

Name	LV2
Parent	LV1
Description
Capabilities	Choose Capabilities

※Parentに「LV1」を入れて階層化する

LV3の指定

Name	LV3
Parent	LV2
Description
Capabilities	Choose Capabilities

※Parentに「LV2」を入れて階層化する　

Parentを設定するのは権限をツリーにして管理したいからで、ツリーにする必要が無い場合はParent設定は不要です。
※後からでも変更出来ます。

権限をツリーにする理由は？

権限をツリーにするのは権限管理のメンテナンス性を良くする為です。このサイトでは、有料・上級・無印の2つのコースが設定されています。

無印
上級コース
有料コース

※Registeredの役割については追々説明致します。

ちょっとした例で解説します。。

無印コースSTEP1：記事に付与された公開権限　LV1（無印）
無印コースSTEP2：記事に付与された公開権限　LV2（無印）
無印コースSTEP3：記事に付与された公開権限　LV3（無印）

このような権限が記事に設定されていて、権限がツリー上に設定されている場合、LV3の権限を持つ人はLV1とLV2の公開設定の記事も見ることが出来ます。

これがツリー上の権限になっていない場合、LV3の人はLV3の記事しか見れない、LV2の人はLV2の記事しか見れない、LV1の人はLV1の記事しか見れない事になってしまうのです。本来、レベルUPして来ているので全部見れた方が自然ですので今回はツリー上の権限管理を使用しています。

ツリーを使わずに同じ公開設定をするには、下記のような設定になります。

無印コースSTEP1：記事に付与された公開権限　LV1（無印）
無印コースSTEP2：記事に付与された公開権限　LV1（無印）、LV2（無印）
無印コースSTEP3：記事に付与された公開権限　LV1（無印）、LV2（無印）、LV3（無印）

ちょっと煩雑ですよね。こういう、権限設定も必要な場合もあるとは思いますが、僕は基本的にはツリー管理をお勧めします。

どう言う時に使うの？もうちょっと簡単に教えて！

有料コースで1万円と10万円では見られるコンテンツの量が違う場合、有料10万コース権限を付与すれば、有料コース（緑枠）の権限が付与された全部のコンテンツが見られるようになります。

制限をするページの設定

グループが作成できたら、ページのアクセス制限をしましょう。

制限内容のカスタマイズは、管理メニュー「Groups」の「Options」から行います。

チェックを付けた項目に表示制限をすることができるので、今回は以下の3つにチェックをつけています。今回、作成するユーザーはそもそもの権限が投稿者となっている為、閲覧の制限だけしたいので3つだけにチェックが入っています。

メディア
固定ページ
投稿

公開制限をする記事を作成する

しっかりと公開制限ができるかを確認するために、まずは作成したグループごとに3記事ずつ投稿してみましょう。

投稿記事の公開制限は、記事編集画面の右側にある「Groups」から指定できます。

例えば、グループのLV1に該当する会員のみが見れるようにする場合は、編集画面のGroupsは「LV1」を指定しましょう。

このような方法で、LV1を3記事・LV2を3記事・LV3を3記事ほど作ると、動作確認が行いやすいのでオススメです。

次のグループにステップアップ（権限変更）させるリンクを作る

Groupsを使うと権限変更をユーザーに行って貰う事が出来るようになります。

今回の場合では、LV1の記事の3つ目を読むとLV2の記事が読めるようになるというステップアップ方式です。

Groupsのショートコードを使うと簡単に作成できます。

[groups_join group="LV2"   submit_text="1章が終わりました"]

それぞれのコードは、以下を指定することができます。

groups_join group	付与する権限を指定する
submit_text	リンクに表示するテキスト

ですので、

LV1の3つ目の記事に「groups_join group=”LV2″」
LV2の3つ目の記事に「groups_join group=”LV3″」

と、このように指定を変えてショートコードを貼っておきましょう。

ここまでで、記事の公開範囲の制限が一通り完成です。

クリック一発で権限変更が可能！権限変更が簡単に出来るメリットは？

Gropusではクリックによってユーザーが権限の変更を行う事が出来ます。この機能により会員サイトの制御の幅が広がります。

ユーザーがクリックで権限変更出来ると何が嬉しいかと言うと・・・・
例えば、初級コース（初級グループ）の講義が終わった時に講義修了ボタンを押して貰います。

このボタンに、中級コース（中級グループ）の権限を付与する機能を設定しておけば、ボタンを押す事によりユーザーが中級グループの権限を付与されるので、終了したと同時に中級コースのコンテンツを公開する事が可能になります。

この機能を応用すれば、アンケートに回答して貰った後に自動返信で権限変更のリンクを発行する等で権限レベルを制御して、コンテンツの自動配信が出来るようになり、よりレベルに合ったコンテンツの配布を行う事が可能になります。

ウィジットを制御してメニューを作成する

次に進捗に応じたメニューを表示される設定を行って行きます。記事単体に公開範囲をかけているので公開設定自体は問題ありませんがワードプレスは記事の表示順を上手く制御することが出来ません。

その為、読んで欲しい順序を指定する為にウィジットにメニューを作っていきます。

作るメニューはこんな感じです。画像は全部表示されていますが権限管理により、レベルに応じたメニューが表示されるようになります。

完成イメージ

設定する場所

今回はウィジットを使って設置していきます。今回は3つのレベルを設定するので、ウィジットに3個のカスタムHTMLの項目を設置して行きます。

一番上のカスタムHTML(LV1)

ポイント

[groups_member group=”LV1,LV2,LV3″]

ソースコード

[/groups_member]

このタグで囲んだ部分に公開制限がかかります。この場合、LV1,LV2,LV3のグループ権限を持ったユーザーにメニューが表示されます。

初期ユーザーRegistedのみのユーザーには表示されません

[groups_member group="LV1,LV2,LV3"]
<aside class="widget widget-sidebar widget-sidebar-standard widget_recent_entries">
  <h3 class="widget-sidebar-title widget-title">LV1コンテンツ</h3>
  <ul>
    <li> <a href="https://gabyou.net/member/lv1-1/">1.システム概要</a> </li>
    <li> <a href="https://gabyou.net/member/lv1-2/">2.プラグインのインストール</a> </li>
    <li> <a href="https://gabyou.net/member/lv1-3/">3.まとめ</a> </li>
  </ul>
</aside> 
[/groups_member]

真ん中のカスタムHTML(LV2)

ポイント

この場合、LV2,LV3のグループ権限を持ったユーザーにメニューが表示されます。
逆に言うとLV1の権限しか持っていない人には表示されません。

[groups_member group="LV2,LV3"]
<aside class="widget widget-sidebar widget-sidebar-standard widget_recent_entries">
  <h3 class="widget-sidebar-title widget-title">LV2コンテンツ</h3>
  <ul>
    <li> <a href="https://gabyou.net/member/lv2-1/">1.STEP1</a> </li>
    <li> <a href="https://gabyou.net/member/lv2-2/">2.STEP2</a> </li>
    <li> <a href="https://gabyou.net/member/lv2-3/">3.STEP3</a> </li>
  </ul>
</aside>
[/groups_member]

一番下のカスタムHTML(LV3)

ポイント

この場合、LV3のグループ権限を持ったユーザーだけにメニューが表示されます。
逆に言うとLV1とLV2の権限しか持っていない人には表示されません。

[groups_member group="LV3"]
<aside  class="widget widget-sidebar widget-sidebar-standard widget_recent_entries">
  <h3 class="widget-sidebar-title widget-title">LV3コンテンツ</h3>
  <ul>
    <li> <a href="https://gabyou.net/member/lv3-1/">1.STEP1</a> </li>
    <li> <a href="https://gabyou.net/member/lv3-2/">2.STEP2</a> </li>
    <li> <a href="https://gabyou.net/member/lv3-3/">3.STEP3</a> </li>
  </ul>
</aside> 
[/groups_member]

これで、とりあえず公開制限付きのメニューが設置出来ました。デザインはCSSで制御出来るので好みに合わせて修正して下さい。CSS設定については後で解説しますのでとりあえず、次に進みましょう！

ちなみに、[groups_member]を使って権限管理を行う場合は、ツリーの権限が有効にならないようなので、一つ一つ設定して行く必要があります。

Groups導入のまとめ

以上で権限管理の設定が終わりました！

ここまでやれば、ユーザーグループに応じたコンテンツの限定配布が出来るようになります。

ただ、このままではユーザーが会員登録を行うことができないので、管理者がワードプレスの管理画面にログインしてコツコツ登録する事になります。初期登録は管理者が全部やるぜ！ログイン、ログアウトはワードプレスの標準画面使ってやるぜ！って場合はココで終了で運用可能です。

ただ、登録作業って地味に面倒だし、場合によってはユーザーさんを待たせてしまうので、ユーザーさん自らが会員登録できるような仕組みが望ましいと思っていますので、この後はその辺の機能を実装していきます。その機能を実現する為に、「Ultimate Member」プラグインを利用します。
それでは、会員登録フォームが簡単に作れる、プラグイン「Ultimate Member」を導入して行きましょう！

ユーザーが自ら会員登録ができるようにする

この会員サイトではワードプレスのユーザーを機能を利用していますので、ワードプレスにユーザーを追加して行く必要があります。

ユーザー登録機能はワードプレスに標準装備されていますが、結構おそ松さんなのでプラグインUltimate Memberを使って、ユーザ登録やログイン関係の機能をカスタマイズして行きます。

ほぼ、プラグインを入れるだけでかなりリッチなログインフォームが出来るので気分もノリノリになってくること間違い無しです！それでは設定していきましょう！

プラグイン「Ultimate Member」のインストール

インストール手順は、Groupsと同じです。

メニュー「プラグイン」を押す
「新規追加」を押す
「Ultimate Member」を検索する
ダウンロードして有効化する

無事に有効化できると、ワードプレスの管理メニューに「Ultimate Member」が表示されます。

固定ページを生成する

管理メニュー「Ultimate Member」を開くと、固定ページを作成するか聞かれるので、YESで必要な固定ページを自動生成しましょう。
ここで固定ページを生成しておかないと後で面倒なので必ずCreatePagesボタンをクリックしておきましょう！

作成された固定ページについて

Members	会員の一覧が表示されるページ
アカウント	ユーザーアカウントの詳細設定やカスタマイズができるページ
パスワードリセット	パスワードをリセットできるページ
ユーザー	ユーザーのプロフィールが表示されるページ
ログアウト	ログアウトできるページ
ログイン	ログインができるページ
新規登録	新規登録ができるページ

ナビゲーションメニューに表示する

このまま全てのページを並べると、ログイン中に使用しないページやログアウト中に開けないページが表示されてしまいます。

そのため、ログイン中とログアウト中のナビゲーションメニューを作成しましょう。

メニューを作る

管理メニューの「外観」にある「メニュー」を開きましょう。

メニュー名を設定する

グローバルナビやヘッダーメニューなどのわかりやすい名前を設定しましょう。

生成された固定ページを選択し、メニューに追加する

サイトを新設した直後であれば、サンプルページと新規登録以外の全ての固定ページを選択しましょう。

各メニューをカスタマイズする

ナビゲーションラベルを変更すると、表示させる名前を変更することができます。

「元の名前」に表示されているページにリンクが貼った状態となるので、好きな名前に変更しましょう。

ちなみにですが、今回は以下のように変更しています。

デフォルト名	変更後の名前	表示される人
Members	会員一覧	すべてのユーザー
アカウント	アカウント設定	Logged In Users （全てチェック有）
パスワードリセット		Logged In Users （全てチェック有）
ユーザー	プロフィール	Logged In Users （全てチェック有）
ログアウト		Logged In Users （全てチェック有）
ログイン		Logged Out Users