WordPress 無料会員ページ作成

④ 無料会員サイトを作る(Simple WordPress Membership)

「会員サイト」とは、サイトの利用者が自身の情報を登録することでそのサイトの会員となり、ログインを行うことで会員限定のページや機能を提供できるウェブサイトのことを指します。WEBサイトにおけるレンタルショップや図書館の会員証のようなものです。
会員サイトを作成する前に利用者が会員登録完了から登録後に行う主な項目までの流れを頭に入れてください

利用者の会員登録の流れ

① 登録フォームページから会員情報を入力して登録(無料登録)
② 登録有効化への確認ページが表示される
③ ①で登録したメールアドレス宛に「登録有効化メール」が届くので本文内にある有効化へのURLを
クリックすると登録が有効化し会員登録が完了する。
④ ログインページから「ユーザー名またはメールアドレス」「パスワード」を入力して会員ページに移動できるようになる
⑤「登録完了通知メール」が届く

利用者が登録後に行う主な項目

・ 会員専用ページの閲覧‥‥‥‥会員専用のページが閲覧利用できる
・ パスワードの再発行‥‥‥‥‥パスワードを忘れてしまった場合に新しいパスワードを発行できる
・ 会員プロフィールの編集‥‥‥会員の登録情報を変更、編集できる
・ 退会‥‥‥‥‥‥‥‥‥‥‥‥会員登録を解除する

Simple Membershipのインストールと初期設定


それでは会員サイトを作成します。会員サイトはプラグイン「Simple Membership」を使って作成します。

①「プラグイン」
②「新規追加」
③「プラグインの検索」に「Simple Membership」と入力
④ Simple Membershipのプラグイン内の「今すぐインストール」をクリックするとインストールがはじまり、完了すると同じ場所に「有効化」と出るのでクリック。
ダッシュボードに「WP Membership」が追加されSimple Membershipが使用可能になる
⑤固定ページに
「Join Us」
「-登録」
「Thank You」
「メンバーログイン」
「ーパスワードのリセット」
「ープロフィール」
「利用規約」
の8つのページが自動で作成される。

こちらでは会員の有効期限、メールによる登録有効化などの設定を行います

①「WP Membership」
②「会員レベル」
③「新規追加」
④「レベルの追加」
⑤「会員レベル名(必須)」に任意の言葉を入力(“無料会員”でよい)
⑥「WordPress のデフォルトユーザー権限 (必須)」はそのまま”購読者”でよい
⑦「有効期限(必須)」は無期限に☑を入れる
⑧「メールで有効化する」に☑を入れる
⑨「新規メンバーシップレベルの追加」
⑩「会員レベル」
⑪ 欄に新たに会員レベルが追加される

①「WP Membership」
②「設定」
③「一般設定」
④「無料会員を有効にします」に☑を入れる
⑤「無料会員レベルの ID」に前項で設定した無料会員レベルのIDを入力(※IDの確認方法:「WP Membership」⇨「会員レベル」⇨ 登録した無料会員欄の左に表示される数値)
⑥「More タグ以下のコンテンツを限定公開」に☑を入れる。※「Moreタグ」とは「続きを読む」などの限定公開したい場合に使います。限定公開を有効化するためにこちらは☑を入れる
⑦「管理バーを表示」は非表示がお勧めなのでチェックを入れない。※表示させたい場合は☑を入れる
⑧「管理人に管理ツールバーを表示」に☑を入れる
⑨「WP ダッシュボードへのアクセスを無効にする」にチェックを入れる
⑩「変更を保存」

①「WP Membership」
②「会員レベル」
③「新規追加」
④「レベルの追加」
⑤「会員レベル名(必須)」に任意の言葉を入力(“管理者”でよい)
⑥「WordPress のデフォルトユーザー権限 (必須)」から管理者を選択
⑦「有効期限(必須)」は無期限に☑を入れる
⑧「メールで有効化する」はなにもしない
⑨「新規メンバーシップレベルの追加」
⑩「会員レベル」
⑪ 欄に新たに会員レベルが追加される

Simple Membershipで会員サイト作成する手順


・会員サイト作成の全行程は利用者が会員登録する流れに合わせて順に解説いたします。

会員登録ページを以下の順に設定します
・「会員登録ページ」へのリンクを設定
・「会員登録フォーム」の設定
・「メールアドレス確認ページ」


・まずはヘッダーメニューに会員登録ページへのリンクを設置します。

①「外観」
②「メニュー」
③「編集するメニューを選択」欄から「ヘッダーメニュー」を選択
④「すべて表示」
⑤「-登録」に☑を入れる
⑥「メニューに追加」
⑦ に『-登録』のメニューが追加される
・次に名前を『-登録』から『会員登録』に変更する
⑧「-登録」の右側の「▼」をクリック
⑨「ナビゲーションラベル」欄の「-登録」を削除して「会員登録」と入力する。こちらは任意の言葉で構いませんが会員登録ページへのリンクだとわかりやすい言葉にしてください。
⑩「メニューの位置」欄の「ヘッダーメニュー」に☑を入れる
※iPadなどのタブレットでヘッダーメニューを表示させたい場合は「ヘッダーモバイルメニュー」に☑を入れる。未チェックの場合はメニューをまとめたメニューアイコンとして表示される。
⑪「メニューを保存」


・次に会員登録ページ(利用者が会員登録をするページ)と、メールアドレス確認ページを設定します。
会員登録ページとは利用者が会員登録するために必要な項目(ユーザー名、メール、パスワード、名、性)を入力するフォームページです。メールアドレス確認ページとは会員登録後に表示されるページです。
※「会員登録ページ」と「メールアドレス確認ページ」の設定は同一となります。
※ 会員登録フォーム自体をカスタマイズしたい場合は、有料アドオンが必要です

・設定手順
①「固定ページ」
②「ー 登録」
③ のコードの箇所が会員登録フォームとなります

[swpm_registration_form]

④ 更新


備考:登録フォームから「名」と「性」を非表示にする
登録フォームの項目にある名と性が必要ない場合は非表示にできます。こちらの設定は任意です。必ずしなければいけないものではありません

①「外観」
②「カスタマイズ」
③「追加CSS]
④ の最後尾に以下のコードを張り付ける
※他のコードは消さないように気を付けてください

tr.swpm-registration-firstname-row{
display:none;
}tr.swpm-registration-lastname-row{
display:none;
}

⑤「公開」

会員登録直後に登録者に届く登録有効化メールを設定します。登録者はこの段階では会員登録は完了していません。登録有効化メールの本文内に会員登録を有効化するURLを設置し、そのURLを登録者がクリックすることで会員登録が完了します。

①「WP Membership」
②「設定」
③「メール設定」
④「送信元メールアドレス」に社名や店名などを入力。
※こちらの設定は会員登録に使用する全てのメールに共通の設定となります。

(記入例)広告制作会社アイ・イエス

⑤「メール設定 (メールによる有効化)」欄の「メール件名」に件名を入力します。

(記入例)会員登録を完了してください

⑥「メール本文」欄に以下を参考に入力してください。

当サイトをご利用いただき、誠にありがとうございます。
{user_name}
下記のリンクをクリックして登録を完了してください。

{activation_link}

・緑文字はメールに表示される文章。
・{user_name}には利用者が登録時に設定したユーザー名が表示される。
・{activation_link}には登録有効化へのリンクが表示される。
⑦「変更を保存」

登録完了通知メールとは、登録を有効化した直後に登録者に届くメールです

登録完了通知メールの設定手順

①「WP Membership」
②「設定」
③「メール設定」
───────────────────────────────────────
※こちらは前項で設定済です。特に変更がなければ飛ばして⑤に進んで下さい。
④「送信元メールアドレス」に社名や店名などを入力。
※会員登録に使用する全てのメールに共通の設定となります。
記入例:広告制作会社アイ・イエス
───────────────────────────────────────
⑤「メール設定(登録完了)」欄の「メール件名」に件名を入力します。以下記入例

登録完了のお知らせ

⑥「メール本文」欄に以下を参考に入力してください。

当サイトをご利用いただき、誠にありがとうございます。
{user_name}

本登録が完了いたしました。

登録の詳細はこちら
ユーザーネーム:
{user_name}
パスワード:
{password}

下記よりログインしてご利用くださいませ。
{login_link}

・緑文字はメールに表示される文章。
・{user_name}には利用者が登録時に設定したユーザー名が表示される。
・{login_link}にはログインへのリンクが表示される。
⑦「変更を保存」

管理者への通知メールとは登録者が会員登録を完了(登録を有効化した後)したときに管理者(あなた)に届くメールです。

管理者への通知メールの設定手順

①「WP Membership」
②「設定」
③「メール設定」
───────────────────────────────────────
※こちらは前項で設定済です。特に変更がなければ飛ばして⑤に進んで下さい。
④「送信元メールアドレス」に社名や店名などを入力。
※会員登録に使用する全てのメールに共通の設定となります。
記入例:広告制作会社アイ・イエス
───────────────────────────────────────

⑤「管理者に通知を送信」にチェックを入れる
⑥「管理者のメールアドレス」にメールの送信先となるアドレスを入力

※管理者(あなた)のメールアドレスを入力

⑦「管理者通知メールの件名」欄の「メール件名」に件名を入力します。以下記入

新規会員登録者のお知らせ

⑥「管理者通知メール本文」欄に以下を参考に入力してください。

新規会員登録が行われました。

登録の詳細はこちら
ユーザーネーム: {user_name}
メール:{email}
パスワード: {password}

・緑文字はメールに表示される文章。
・{user_name}には利用者が登録時に設定したユーザー名が表示される。
・{email}には利用者が登録時に設定したメールが表示される。
・{password}には登録時に設定したパスワードが表示される。
⑦「変更を保存」

ログインページを以下の順に設定します
・「ログインページ」へのリンクの設置
・「ログインフォーム」の設定
・「ログイン直後」の設定
・「ログアウト直後」の設定

・まずは「ログインページ」へのリンクをヘッダーメニューに設置します

①「外観」
②「メニュー」
③「編集するメニューを選択」からヘッダーメニューを選んで「選択」
④「すべて表示」
⑤「ログイン」にチェックを入れる
⑥「メニューに追加」
⑦ に『ログイン』のメニューが追加される
—————————————
※ こちらでメニューの名前を変更できます。
変更する場合は⑧「▼」をクリックし⑨「ナビゲーションラベル」欄に変更したい名前を入力
—————————————
⑩「メニューの位置」欄の「ヘッダーメニュー」に☑を入れる
※iPadなどのタブレットでヘッダーメニューを表示させたい場合は⑪「ヘッダーモバイルメニュー」に☑を入れる。未チェックの場合はメニューをまとめたメニューアイコンとして表示される。
⑫「メニューを保存」

①「外観」
②「メニュー」
③「編集するメニューを選択」からフッターメニュー(フッターメニュー)を選んで「選択」
④「すべて表示」
⑤「ログイン」にチェックを入れる
⑥「メニューに追加」
⑦ に『ログイン』のメニューが追加される
—————————————
※ こちらでもメニューの名前を変更できます。
変更する場合は⑧「▼」をクリックし⑨「ナビゲーションラベル」欄に変更したい名前を入力
—————————————
⑩「メニューの位置」欄の「ヘッダーメニュー」に☑を入れる
⑪「メニューを保存」

パーマリンクとはサイトのURLの最後尾の文字です。※こちらの設定は任意です。

https://●●●.com/●●●

●●●がパーマリンク。ディフォルトでは『menbership-login』となっています。
①「固定ページ」
②「メンバーログイン」にカーソルを合わせ「クイック編集」をクリック
③「スラッグ」にパーマリンクにしたい文字を入力
④「更新」


・次にログインフォームとログイン直後を設定します。

「ログインフォーム」とは登録者がログインをするために必要な情報を入力するフォームです。
「ログイン直後」とは登録者がログイン後に表示される項目です。
「ログインフォーム」と「ログイン直後」の設定は同一です。ログインしていない状態では「ログインフォーム」が表示され、ログインしている時は「ログイン直後」が表示されます。

①「固定ページ」
②「メンバーログイン」
③ のコードの箇所がログインフォームとログイン直後となります。

[swpm_login_form]

※「ログインフォームとログイン直後」自体を編集することはできません
※上記コード以外の編集は自由に可能です。

※例として新規に「会員登録ページ(固定ページ)」を作成し、そのページ内に「ログインフォームとログイン直後」を設置する手順を解説します。

・まず「会員登録ページ(固定ページ)」を作成する
①「固定」
②「新規追加」
③「タイトルを追加」欄に「会員登録」と入力④「ブロックを選択するには「/」を入力」欄に以下のコードを張り付ける。

[swpm_login_form]

※こちらのコードを張り付けた箇所が「ログインフォームとログイン直後」の場所となります。コードはページ内の任意の場所に張り付けても大丈夫です。
⑤「公開」
⑥「公開」※公開したくない場合は「下書き保存」
⑦ の場所に「固定ページを表示」アイコンが表示されるのでクリックしてブラウザで編集中のページを表示する
⑧ 表示されたページの「URL」をコピーする

・次に上記で作成したページのURLを「ログインページとログイン直後」に指定する
⑦「WP Membership」
⑧「設定」
⑨「一般設定」
⑩「ログインページ URL」欄に⑧のURLを張り付ける
④「変更を保存」

※こちらの設定はフッターに『ログインフォーム自体』を表示させます。

①「外観」
②「ウィジェット」
③「テキスト」を④「フッター中」にドラッグ
⑤「タイトル」に任意の文字を入力
(” ログイン状態 “でよい)
⑥ に以下のショートコードを入力

[swpm_login_form]


⑦「保存」


・最後にログアウト直後に表示されるページの設定です

ログアウトした後に表示されるページはトップページとなります

利用者がパスワードを忘れてしまった時などに、パスワードを再発行するめの設定です。


「パスワードリセットのページ」の設定
※「 パスワード発行完了ページ」の設定も同一となります。

①「固定ページ」
②「ーパスワードのリセット」
③ のコードがパスワードリセット時の入力フォームとなります。

[swpm_reset_form]

③ 「更新」


「パスワード再発行メール」の設定

パスワード再発行メールとは利用者がパスワードリセットのページでパスワードリセットをした後に利用者に届くメールです。メール本文中に新しいパスワードとログインページへのURLを設定します。

パスワード再発行メールの設定手順

①「WP Membership」
②「設定」
③「メール設定」
───────────────────────────────────────
※こちらは前項で設定済です。特に変更がなければ飛ばして⑤に進んで下さい。
④「送信元メールアドレス」に社名や店名などを入力。
※会員登録に使用する全てのメールに共通の設定となります。
記入例:広告制作会社アイ・イエス
───────────────────────────────────────

⑤「メール設定(パスワードリセット)」欄の「メール件名」に件名を入力します。以下記入例

パスワードのリセットと再発行

⑥「メール本文」欄に以下を参考に入力してください。

{user_name}
ログインパスワードのリセットの申請を受け付けました。
新しいパスワードを再発行いたしましたので以下のパスワードよりログインしてください。

新しいパスワード: {password}
ログイン:{login_link}

・緑文字はメールに表示される文章。
・{user_name}には利用者が登録時に設定したユーザー名が表示される。
・{password}には新しいパスワードが表示される。
・{login_link}にはログインへのリンクが表示される。

⑦「変更を保存」

「会員について」のページとは、ログインフォームの項目にある「会員について」のリンクから入るページです。こちらのリンク先はデフォルトでは「Join Us」という英文のページが表示されるので以下の3つの設定のどれかをお選びください。お勧めは設定①です。


設定①:「会員についてのページを非表示にする

①「外観」
②「カスタマイズ」
③「追加CSS]
④ の最後尾に以下のコードを張り付ける
※他のコードは消さないように気を付けてください

.swpm-join-us-link { display:none; }

⑤「公開」


設定②:リンク先を変更して「会員についてのページを「Join Us」から新たなページに変更す

・まず「会員についてのページ」にしたいページを作成する。
①「固定」
②「新規追加」
③「タイトルを追加」欄に「会員について」と入力
④「ブロックを選択するには「/」を入力」欄にページに表示したい文章を入力

会員登録について:

⑤「公開」
⑥「公開」
⑦ の場所に「固定ページを表示」アイコンが表示されるのでクリックしてブラウザで編集中のページを表示する
⑧ 表示されたページの「URL」をコピーする

・次に作成したページのURLを「会員についてページ」に指定する
⑨「WP Membership」
⑩「設定」
⑪「一般設定」
⑫「会員登録の案内ページ URL」欄のURLを全て削除し⑧のURLを張り付ける
⑬「変更を保存」


設定③:「会員についてページを「ー登録ページ=(会員登録ページ)に変更する

①「固定」
②「-登録」
③「固定ページを表示」アイコンをクリックしてブラウザで―登録ページを表示する
④ 表示されたページの「URL」をコピーする
⑤「公開」※ページの内容を変更していなければ「公開」をクリックする必要はありません

⑥「WP Membership」
⑦「設定」
⑧「一般設定」
⑨「会員登録の案内ページ URL」欄のURLを全て削除し⑧のURLを張り付ける
⑩「変更を保存」

「プロフィール編集」とは会員がログインした後に 登録したプロフィールを閲覧、変更できるページの設定です。ログインしていない状態では「ログインしていません」と表示されます。
「退会設定」とは会員が退会するための設定です。
以下の順に解説します。
・「プロフィール編集フォーム」の設定
・「退会設定」の設置
・「会員プロフィールページ」へのリンクの設置


・プロフィール編集フォームの設定

①「固定ページ」
②「ープロフィール」
③ のコードの箇所が会員プロフィール変更のフォームとなります。

[swpm_profile_form]

※「プロフィール編集フォーム」自体を編集することはできません
※上記コード以外の編集は自由に可能です。
④「更新」


・「退会設定」の配置

・会員が退会するためのボタン「アカウントの削除」をプロフィール編集フォームに配置します。
①「WP Membership」
②「設定」
③「詳細設定」
④「アカウント削除の許可」に☑を入れる
⑤「変更を保存」
これでプロフィール編集フォームの一番下に「アカウントの削除」ボタンが追加されます。

・まず「会員のプロフィールページ」にしたいページを作成します。
①「固定」
②「新規追加」
③「タイトルを追加」欄に「プロフィール編集」と入力
④「ブロックを選択するには「/」を入力」欄に以下のコードを張り付ける

[swpm_profile_form]

⑤「公開」
⑥「公開」
⑦ の場所に「固定ページを表示」アイコンが表示されるのでクリックしてブラウザで編集中のページを表示する
⑧ のURLをコピーする

・次に作成したページのURLを「会員のプロフィールページ」に指定する
⑨「WP Membership」
⑩「設定」
⑪「一般設定」
⑫「プロフィールの編集ページURL」欄のURLをすべて削除して⑧のURLを張り付ける
⑬「変更を保存」


・最後に「会員プロフィールページ」へのリンクをヘッダーメニューに配置します。

①「外観」
②「メニュー」
③「編集するメニューを選択」からヘッダーメニューを選んで「選択」
④「すべて表示」
⑤「プロフィール」にチェックを入れる
⑥「メニューに追加」
⑦ に『プロフィール』のメニューが追加される
⑨ 右端の『▲』をクリック
⑩「ナビゲーションラベル」欄にリンクのメニュー名として「会員情報」と入力。
※こちらの設定は任意です。当解説では「会員情報」というメニュー名にしていますが以下入力例を参考に好きなものを入力してください

会員情報、登録情報、会員ページ、アカウント、マイページ

⑪「メニューの位置」欄の「ヘッダーメニュー」に☑を入れる
※iPadなどのタブレットでヘッダーメニューを表示させたい場合は「ヘッダーモバイルメニュー」に☑を入れる。未チェックの場合はメニューをまとめたメニューアイコンとして表示される。
⑫「メニューを保存」

会員登録した人のみ閲覧できるページを設定します

まず会員のみ閲覧できるページを選んでください。以下は例としてトップページ(固定ページ)を会員のみ閲覧できるようにする手順です。
①「固定ページ」
②「トップページ」
③「Simple WP Membership」右端の④「▼」をクリック
⑤「このコンテンツを限定公開にしますか ?」の「はい、コンテンツを保護します。」に☑を入れる
⑥「このコンテンツを閲覧できる会員レベルを選択してください:」の「無料会員」と「管理者」に☑を入れる
⑦「更新」


・表示文の変更
デフォルトでは以下のように表示されるので変更する
『このコンテンツを閲覧するにはログインが必要です。お願い Log In. あなたは会員ですか ? 会員について
※こちらの設定を行うと以下の『ログイン直後のページ設定』はできませんのでご留意ください

・アドオン『Custom Messages』使用
①「WP membership」
②「アドオン」
③「Custom Messages」をクリックして詳細ページに移動
④ リンク「Click Here to download the custom messages addon.」をクリックしてダウンロードページに移動
⑤「Down Load」
⑥「simple-membership-after-login-redirection」という圧縮ファイルがダウンロードされる
⑦「プラグイン」
⑧「新規プラグインを追加」
⑨「プラグインのアップロード」
⑩「⑥でダウンロードした圧縮ファイル」を指定して「開く」
⑪「今すぐインストール」
⑫「プラグインを有効化」
⑬「WP membership」の中に「Custom Messages」が追加される
⑭「Custom Messages」

⑮「Restricted Post」
こちらは会員レベルの制限の設定です。例えば無料会員は閲覧できるが有料会員は閲覧できない設定をした時の表示文です。以下を記入してください
───────────────────────
会員レベルを上げてください
───────────────────────

⑯「Restricted Post (Not Logged-in)」
こちらは非会員、ログインしていないユーザーへのメッセージとなります。以下を記入してくださいこのページを閲覧するにはログインが必要です。
───────────────────────
このページを閲覧するにはログインが必要です。
───────────────────────

⑰「変更を保存」
・「Sorry, your nonce did not verify.」と表示されるが設定は反映されている




・『Custom Messages』を無効化する方法
①「プラグイン」
②「インストール済プラグインを検索」欄に「Custom Messages」と記入
③「無効化」


・ログイン直後のページ設定(リダイレクト機能)
上記のページからログインした場合にデフォルトではトップページに移動するがログイン直前のページに変更する。
※こちらの設定を行うと上記の『表示文の設定』はできませんのでご留意ください

・アドオン『After Login Redirection』を使用
①「WP membership」
②「アドオン」
③「After Login Redirection」をクリックして詳細ページに移動
④ リンク「Install the After Login Redirection addon.」をクリックしてダウンロードページに移動
⑤「Down Load」
⑥「simple-membership-after-login-redirection」という圧縮ファイルがダウンロードされる
⑦「プラグイン」
⑧「新規プラグインを追加」
⑨「プラグインのアップロード」
⑩「⑥でダウンロードした圧縮ファイル」を指定して「開く」
⑪「今すぐインストール」
⑫「プラグインを有効化」
⑬「WP membership」の中に「Login Redirection」が追加される
⑭「Login Redirection」
⑮「Enable Redirect to Last Page」横に☑を入れる
⑯「Save」

・『After Login Redirection』を無効化する方法
①「プラグイン」
②「インストール済プラグインを検索」欄に「After Login Redirection」と記入
③「無効化」

ページを閉じたときにログアウトさせる

通常はブラウザを閉じた後数時間はログイン状態のままですが、ブラウザを閉じた際に強制的にログアウトにする設定も可能です。
①「設定」
②「詳細設定」
③「Logout Member on Browser Close」にチェックを入れる。

エラーメッセージを日本語にする

エラーメッセージを日本語にする:フォーム入力時のエラーメッセージを日本語にするには以下の操作が必要です。

必須項目であることを示すエラーメッセージです。「classes/class.simple-wp-membership.php」というファイルを修正します。英語表記を「//」でコメントアウトし、開業して日本語での表記を追加します。

既にユーザー登録がされている旨を示すエラーメッセージです。「wp-content/plugins/simple-membership/classes」フォルダ内の「class.swpm-ajax.php」にて、英語をコメントアウトし、日本語の「既に登録済みです」という文章追加します。

会員登録者(メンバー)の管理


会員登録した会員はWordpressでは一般的にメンバーと呼びます。Wordpressの管理者ページでこのメンバーを管理します。

メンバーは全て以下の場所に管理されます。

①「Simple WP Membership」
②「メンバー」
③ の欄にメンバーの登録情報が一括で表示されます

後の諸々の設定のためにも管理者であるあなた自身もメンバーに登録してください

①「Simple WP Membership」
②「メンバー」
③「メンバーの追加」
④「ユーザー名」に管理者であるあなたの名前を記入 例)master manager
⑤「メール」を記入
⑥「パスワード」を記入
⑦「アカウント状態」から「有効」を選択
⑧「会員レベル」から「管理者」を選択
⑨「新規メンバーを追加」