BLOG
25年新卒 WEBエンジニア インターンシップ 受付中

WP-Membersで会員サイトを作成しよう!

更新日:2022/02/28


もしウェブサイトに会員機能があれば、何ができるようになると思いますか?
会員専用の限定コンテンツが作れたり、ユーザーが継続的にサイトを訪れるようになったりします。
他にも魅力がたくさんある会員サイトですが、実はWordPressのプラグインで手軽に作成できます。
ということで今回は「WP-Members」で会員サイトを作成する方法を紹介しています。
ぜひ最後までご覧ください。

WP-Membersとは

WP-Membersとは会員サイトを作成することができるWordPressのプラグインです。
通常のサイトでは、サイト管理をする方のみ以下のユーザーを適宜追加しますよね。

WP-MembersではそのWordPressのユーザー登録機能を利用し、新規登録ページで登録された情報をユーザーに追加します。
サイトに直接ユーザーを追加するのは不安と思われるかもしれませんが、権限グループというものがあるので心配ありません。
WP-Membersを介して登録されたユーザーは、一番下の購読者に設定することをオススメします。

▼ 権限グループ

管理者 全権限を保持
編集者 投稿や固定ページに関するほぼすべての権限を保持
投稿者 新規投稿の作成と、自分の投稿の公開する権限を保持
寄稿者 新規投稿の作成できる権限を保持(公開はできない)
購読者 閲覧のみ

参考 : 【WordPressのユーザー権限】5種類の権限がそれぞれできること

また、ログイン機能はプラグイン側でやってくれるので、シンプルな設定のみで利用することができます。
基本的に無料で使用することができるため、導入しやすいですね。
有料のPro Bundle(拡張機能)を購入すると、有料購読機能やユーザー利用状況追跡機能などが利用できるようになります。
機能ごとの購入もできるようなので、必要に応じて購入してみてください。

導入

それではさっそくプラグインの導入について説明します。
プラグインをインストールします。
管理画面からプラグインを選択し、新規追加をクリックします。

WP-Membersと検索し、プラグインをインストール・有効化します。

設定にWP-Membersが追加されていれば完了です。

設定

各種設定について説明します。
こちらの流れに沿って進めていただければと思います。

  1. 注意メッセージの解消
  2. ページ作成
  3. 登録ページのフィールドを選択
  4. ダイアログメッセージ
  5. メール

注意メッセージの解消

まずはこちらの注意メッセージを解消していきましょう。

設定 > ディスカッション から「ユーザー登録してログインしたユーザーのみコメントをつけられるようにする」にチェックを入れます。

設定 > 表示設定 から「フィードの各投稿に含める内容」で「抜粋」を選択します。

設定 > WP-Members から「警告メッセージを表示しない」にチェックを入れます。

以上で注意メッセージは解消されます。

ページ作成

WP-Membersではたくさんのショートコードが用意されています。
ショートコードを入力するだけで新規登録ページやログインページを作成できます。
下記ショートコードを利用して、それぞれのページを作成しましょう。

ログインページ [wpmem_form login]
新規登録ページ [wpmem_form register]
プロフィールページ [wpmem_profile]

用意されているすべてのショートコードを確認したいという方はこちらのサイトから確認してください。

【チートシート】WP-Members ショートコード一覧
実際にページを作成してみましょう!
固定ページを作成して、ショートコードを貼り付けます。

もし○○-○○.php上でショートコードを出力させたいのならば、

と記述しましょう。

登録ページの入力フィールド表示・非表示

新規登録ページをデフォルトのまま確認してみると、このように表示されます。

名前や住所、郵便番号などさまざまな入力フィールドが表示されていますが、管理画面側から表示・非表示をコントロールできます。

設定 > WP-Members > フィールド を開くとこのようなテーブルが表示されます。

表示させたいフィールドや必須項目にしたいフィールドなど、それぞれ設定してください。
また、設定完了後に「設定を保存」を選択し「適用」をクリックするのを忘れないでください。

ユーザー名(username)を非表示にする方法

ユーザー名のフィールドを非表示にしたいと思っても、チェックボックスがありません。
そういう時は、Email as Username for WP-Membersというプラグインの使用をオススメします。
プラグインをインストール・有効化するだけで、「Emailをユーザー名」として扱うことができます。
そのため、ユーザー名のフィールドは非表示になります。

ダイアログメッセージ

ダイアログメッセージとは、状況によってサイトに表示されるメッセージです。
たとえば登録されていない情報でログインしようとした場合、以下のようなダイアログメッセージが表示されます。

メッセージの内容を変更したい時は、設定 > WP-Members > ダイアログ から適宜変更しましょう。

英語で入力されていますが、サイトに表示される際には翻訳されます。
文言がおかしいと思う場合や文言を丸ごと変えたいという場合、変更して頂ければと思います。

メール

設定 > WP-Members > メール にてユーザーへ自動送信されるメールの設定をします。

赤枠部分は送信者情報です。
送信元として設定したいメールアドレス送信者名を入力してください。

以下のメールの本文を設定することができます。

  • 新規ユーザー登録

  • パスワードのリセット

  • ユーザー名の回復

デフォルトのままの場合、英語のメッセージが送信されてしまうので必ず文言を設定しましょう。
メール本文にショートコードを利用したい場合は、以下サイトを参考にしてください。

【チートシート】WP-Members ショートコード一覧

仮登録機能

仮登録機能を追加すると、本人確認ができます。
具体的に登録フローがどのように変化するか見てみましょう。

追加前 : 登録ページで情報入力 ➡ 登録完了
追加後 : 登録ページで情報入力 ➡ 仮登録メール送信メールのURLをクリック ➡ 本登録完了

ほとんどの会員サイトでは仮登録機能を追加しているのではないかと思います。
WP-Membersでは仮登録機能を簡単に追加できます。
追加方法はこちらです。

  • 設定を有効にする

    設定 > WP-Members > WP-Membersオプションその他設定で、「確認用リンク」にチェックを入れます。

  • ページ作成

    設定 > WP-Members > WP-Membersオプション固定ページで、それぞれ作成したページを登録しましょう。

  • 本登録URLが送られるようにする

    メールで本登録URLが送られるように設定します。
    設定 > WP-Members > メール新規ユーザー登録の本文を編集します。
    URLを出力するショートコードが用意されているので、そちらを使いましょう。

    メール本文の編集後、このようなURLが送られるようになれば設定完了です。

    参考 : WP-Members会員仮登録メール機能導入

ログイン後のリダイレクト

ユーザーがログイン後すぐに表示されるページを、リダイレクトによって設定することができます。
今回はユーザーのプロフィールページにリダイレクトさせてみようと思います。

returnの部分にリダイレクトさせたいURLを適宜記述してください。

まとめ

いかがでしたでしょうか。
会員サイトを作るのは難しそうと思われがちですが、WP-Membersを導入すれば気軽に作成できます。
また、プラグイン : Gianism を使用すればソーシャルログインの導入も可能です。

【Gianism】SNSログインの導入からカスタマイズまで詳しく解説!
カスタマイズ次第では本格的な会員サイトができると思うので、ぜひチャレンジしてみてください!
以上、最後までお読みいただきありがとうございました。

FOLLOW US