【WordPress】WordPressで “会員制サイト” を実現するプラグイン『WP-Members』と『Members Only』(設定晒し有)


Membership: join us todayMembership: join us today / HowardLake

様々なプラグインで、できないことを探すのが難しいくらいに何でもできちゃうWordPressですが、パスワードでログインしないと見ることができないような、いわゆる「会員制サイト」を作ることも可能です。

以前『【WP】WPサイト全体をパスワード認証させて会員制サイトのようにするプラグイン | glad design blog 2.0』という記事でいろんな方法をご紹介しましたが、実際に構築してみたので、自分メモも兼ねてレビューしてみたいと思います。

会員制サイトの仕様

会員制サイトといっても、さまざまな形態がありますので、まずはどんなカタチにするかを決めます。
今回は、

  要件(1)ブログのトップページは会員以外も見えるようにする
  要件(2)第二階層以下はIDとパスワードが必要
  要件(3)IDとパスワードは全会員共通(つまり1通りでいい)

という条件を満たすことを目指します。

今回構築した会員制サイトは、お客様の都合で公開することはできないのですが、よく似たイメージとして具体例を示すと、こんなサイトをイメージしています。
(こちらのサイトは当社とはまったく関係ないです。あくまでイメージとして。)

ザ・レスポンスコピー コピーライター養成プログラム

トップページだけは誰でも閲覧できて、右サイドバーにログインフォームが設置してある。

簡単にまとめますと、

  • 未ログインユーザーが http://example.com へアクセスすると、トップページが表示される
  • この段階ではトップページ以外を見ることができない(リダイレクトでトップページへ戻される)
  • ログインフォームが右サイドバーにある(別途トップページ記事文中にもある)
  • ログインIDとパスワードは別ルートで知らせておく(全会員共通。WordPress上では会員登録ではなく、会員としてログインするという意味。会員登録自体は別で行っておく)
  • ログインに成功すると、再びトップページを表示(右サイドバーではログイン済みの表示)
  • という動きをコードを書かずに2つのプラグインを組み合わせて構築します。

    使用したプラグイン

    今回は以前ご紹介しなかった、以下の2つのプラグインを使いました。

    WP-Members
    WordPress › WP-Members « WordPress Plugins


    Members Only
    WordPress › Members Only « WordPress Plugins


    上記2つのプラグインはどちらも「登録したユーザーだけが閲覧できるようにする」ためのプラグインですが、どちらかひとつでは、全ての要件が満たせないのです。
    つまりどちらかのプラグインを一方だけで適用すると、登録していないユーザーはログイン画面または特定のページに飛ばされます。
    トップページにリダイレクトできれば、要件(1)は満たせます。
    ビジネスで運用するサイトであれば、せめてトップ画面を見せて、どういった主旨のサイトであるのかを知ってもらい、安心感をもたせた上で登録してもらったほうがいいと思いますので、要件(1)はぜひとも実装したいところです。

    WP-Members

    「WP-Members プラグイン」についてはこちらの記事が大変参考になりました。
    WP-Members #01 | ブログでWebサイトを
    WP-Members #02 | ブログでWebサイトを
    WP-Members #03 | ブログでWebサイトを

    installするとサイドバーにログインフォームを設置できます。
    これはウィジェットとして設置したり、外したりできます。

    記事ごとに閲覧制限をかけることができますが、逆に言うと記事ごとに制限タグを付与しないといけないため、今回作る会員制サイトには、このプラグインだけではちょっと物足りないのでした。今回のお客様はWordPressにバリバリ詳しい、というわけではなかったので、記事ごとにタグを・・・と言っても、運用が難しくなると考えました。

    設定例を載せておきます。(あくまでもこれが正しいというものではなく、僕が設定した例ですので、適宜調整してください)
    WP-Members のバージョンは Version: 2.5.1 で説明しています。

    Options:

    Manage Options

      ●Block Posts by default
      ●Block Pages by default
      ●Show excerpts
      ●Notify admin
      ●Moderate registration
      にチェックを入れる

    Fields:

    デフォルトのまま

    Dialogs:(日本語訳[機械翻訳]を追加しました)

    WP-Members Dialogs and Error Messages

    1
    2
    3
    4
    You can customize the text for dialogs and error messages. Simple HTML is allowed - </p><p>, <b>, <i>, etc.
    Restricted post (or page), displays above the login/registration form
    This content is restricted to site members.  If you are an existing user, please login.  New users may register below.<br />
    この内容はサイトメンバーに制限されます。  あなたが既存のユーザであれば、ログインしてください。  新しいユーザは以下に登録するかもしれません。

    Username is taken

    1
    2
    Sorry, that username is taken, please try another.<br />
    すみません、そのユーザ名ではなく、別のものを試みてください。

    Email is registered

    1
    2
    Sorry, that email address already has an account.<br />Please try another.<br />
    すみません、そのEメールアドレスには、アカウントが既にあります。<br />別のものを試みてください。

    Registration completed

    1
    2
    Congratulations! Your registration was successful.<br />You may now login using the password that was emailed to you.<br /><br />
    おめでとうございます! あなたの登録はうまくいきました。<br />あなたは、現在、あなたにメールされたパスワードを使用することでログインできます。

    User update

    1
    2
    Your information was updated!<br />
    あなたの情報をアップデートしました!

    Passwords did not match

    1
    2
    Passwords did not match.<br />Please try again.<br /><br />
    パスワードが合いませんでした。<br />再試行してください。

    Password changes

    1
    2
    Password successfully changed!<br />You will need to re-login with your new password.<br /><br />
    パスワードは変更しました!<br />あなたは、あなたの新しいパスワードで再ログインする必要があるでしょう。

    Username or email do not exist when trying to reset forgotten password

    1
    2
    Either the username or email address do not exist in our records.<br />
    ユーザ名かEメールアドレスのどちらかが私たちの記録に存在していません。

    Password reset

    1
    2
    3
    Password successfully reset!<br /><br />An email containing a new password has been sent to the email address on file for your accont. You may change this random password when re-login with your new password.<br /><br />
    パスワードがリセットされました!
    あなたのアカウントのために新しいパスワードを含むメールをEメールアドレスに送りました。 あなたが新しいパスワードによる再ログイン時に、あなたは、この無作為のパスワードを変えることができます。

    その他詳しくはマニュアルPDFをご覧ください。
    英語ですが、何となく分かると思いますw

    Members Only プラグイン

    未ログインユーザーに対しては、ログイン画面または特定のページへリダイレクトします。
    また、ログイン済みユーザーに対しては、ダッシュボードまたはトップページへリダイレクトできたりします。

    会員制サイトに使う、というよりは、ある程度の人数のグループやコミュニティで共同執筆するのに向いているpluginのような気がします。

    設定例:

    ●Members Only?:
    チェックを入れる

    ●Redirect To:
    「Login Page」にする
    未ログインユーザーに対して、アクセス直後に表示する先を指定します。
    「Login Page」だとWordPressのログイン画面、「Specific Page」だと任意の特定のページへリダイレクトします。

    ●Return User:
    チェックを入れる

    ●Redirection Page:

    1
    2
    http://example.com/member/ [                     ]
    If the field is left blank, users will be redirected to the login page instead. (Only applies if your redirecting to the specific page)

    ここの設定でハマって、挫折しそうになりました。
    入力欄を空欄にしておくと、ログイン画面へリダイレクトするよ、と書かれてあるようなのですが、なぜかうまくリダイレクトされませんでした。
    ドメインの設定やWordPress標準のリダイレクト設定(管理画面→設定→一般)との絡みもあるのかもしれません。
    回避策として入力欄に「?」クエスチョンマークを入れると正常に作動しました。
    「?」をワイルドカードとして見なしているようです。
    もちろん、ある特定のページを設定して飛ばすこともできます。
    その際、設定した任意のページは誰でも閲覧できる状態になるようです。

    ●Login Redirect:
    「Front Page」にする
    ログイン済みユーザーに対して、ログイン後に表示するページを指定します。
    Front Pageだといわゆる「Home」、Dashboardはダッシュボードです。
    今回の会員制サイトでは、会員登録者が記事を書いたりはしないので、Front Pageへ飛ばしています。

    =====

    Members OnlyMembers Only / healthserviceglasses

    さて、上記2つのプラグインの機能を見てもらうとなんとなく分かると思いますが、どちらか一方だけでは、要件1〜3を満たすには不十分です。
    もう一度要件をお浚いします。

      要件(1)ブログのトップページは会員以外も見えるようにする
      要件(2)第二階層以下はIDとパスワードが必要
      要件(3)IDとパスワードは全会員共通(つまり1通りでいい)

    会員制サイトではありますが、登録者がそれぞれ記事を書いたりするわけではないので、ダッシュボードを見せる必要は無いです。
     →Members Onlyで可能。

    また、会員以外の人にはトップページ以外を見せないような作りにしたいわけです。
     →Members Onlyで可能。

    さらにWordPressのログイン画面を経由せずにログイン/ログオフをさせたい。
     →WP-Memberで可能。

    このように2つのプラグインのいいとこ取りをして、希望する要件を満たすことができました。
    もしかしたら、もっとスムーズなやり方があるのかもしれません。
    ていうかきっとあるはず。

    詳しい方、つまづいた方、情報あれば教えていただけると助かります。

    =====

    その他にも会員制サイト構築に向いているプラグインはたくさんありますので、希望する要件に合った方法を模索してみてください。
    そしてその結果をブログに書いてシェアしてください。
    僕も数多くの事例をブログなどで読ませてもらって勉強することができました。
    もし、この記事がお役に立ったなら、Pay it Forward ということで、シェアしてください。

    WordPressで会員制サイトを構築する – フロントエンドユーザー管理プラグインの活用事例2 | WordPressのプラグイン販売サイト CMS×WP

    とにかく簡単に早く構築したい場合は有料ですが、こちらのプラグインが便利かと。

    こちらも参考にさせていただきました。
    WordPressで会員制サイトを作りたい! | StereoCube


    HY-CREATIVE » WordPress-会員制サイトを作る際に役に立つプラグイン-


    pc.casey.jp » WordPress 一部又は全部を会員制にする


    ユーザー管理(会員制サイトなど) | WordPressでホームページ制作 太陽ブログ (大阪府豊中市)


    10日でおぼえる WordPress 入門教室 [WordPress 3.x対応]
    さわだえり
    翔泳社
    売り上げランキング: 7483
    WordPressスーパーカスタマイズ 3.0対応 ポテンシャルを100%引き出すテクニック
    下野 宏 下野 理子
    ソフトバンククリエイティブ
    売り上げランキング: 73188
    WordPress 逆引きデザイン事典PLUS [3.x対応]
    三木 徹 林 亮 酒井 隆
    翔泳社
    売り上げランキング: 28001
    いま一番わかりやすい WordPress日本語版でブログサイト構築入門
    高尾 司
    アスキー・メディアワークス
    売り上げランキング: 31683
    PHPによるWordPressカスタマイズブック―3.x対応
    藤本 壱
    ソシム
    売り上げランキング: 52791

    Related Articles:

    Copy the code below to your web site.
    x 

    Powered by

    コメント

    1. […] 【WordPress】WordPressで “会員制サイト” を実現するプラグイン『WP-Members』と『Members Only』(設定晒し有) | Crazy One – glad design blog -. […]

    2. […] WordPress】WordPressで “会員制サイト” を実現するプラグイン『WP-Members』と『Members Only』(設定晒し有) […]

    3. […] 【WordPress】WordPressで “会員制サイト” を実現するプラグイン『WP-Members』と『Members Only』(設定晒し有)Crazy One – glad design blog – | Crazy One – glad design blog – […]

    4. […] 【WordPress】WordPressで “会員制サイト” を実現するプラグイン『WP-Members』と『Members Only』(設定晒し有)Crazy One – glad design blog – | Crazy One – glad design blog – […]

    5. […] 参照: WordPressで “会員制サイト” を実現するプラグイン『WP-Members』と『Members Only』(設定晒し有) […]

    6. […] 【WP-Members】【Members Only】|WordPressで “会員制サイト” を実現するプラグイン(設定晒し有) | Crazy One – glad desi… […]

    7. […] 『WP-Members』と『Members Only』といるプラグインを利用した会員制サイトの構築について解説してある記事です。 http://gladdesign.net/2011/06/16/wp-members-members-only-wordpress-plugin/ […]

    8. […] 参照: WordPressで “会員制サイト” を実現するプラグイン『WP-Members』と『Members Only』(設定晒し有) […]

    %d人のブロガーが「いいね」をつけました。