WordPress 会員制サイトの作り方 WP-Members

2012/10/5: 記事を加筆しました

会員制サイトの主な要件

・すべての記事、特定の記事、記事の一部にアクセス制限をかける
・サイト上にログインフォームを設置する
・サイト上から新規ユーザー登録ができる
・パスワード変更、パスワードリセット、登録情報の変更ができる
・管理者ユーザーは登録ユーザーを一覧管理できる

WP-Membersプラグインの仕組み

新たにユーザー管理の構造を持たせるのではなく、WordPressディフォルトのユーザー管理機能をそのまま使います。

WordPressのユーザー管理では、管理者、編集者、投稿者、寄稿者、購読者という5つの権限グループが用意されています。
WP-Membersでの会員登録とは、「購読者」ユーザーとしてユーザを追加することを意味します。
購読者は記事の閲覧と自分のプロフィール編集のみ可能です。

参考: ユーザーの種類と権限/WordPress Codex 日本語版

日本語ローカライズについて 2012/07/11

日本語ローカライズファイルを作りました の記事で、WP-Members の日本語ローカライズファイルを作成しました。
そしてめでたく正式に採用していただき、現在はプラグイン自体にパッケージされています。

しかし、現在パッケージされているローカライズファイルはちょっと古く、誤字や未翻訳の部分があります。
最新版は以下にアップしてありますので、しばらくはこちらから直で持っていってください。
github /hijiriworld / WP-Members-ja

設定

WP-Membersのインストールと有効化

WordPress経由でインストールと有効化を行ってください。
直接インストールする場合はこちら↓

WordPress Plugin Directory URI: WP-Members
Plugin URI: WP-Members | ButlerBlog

設定 > WP-Members

初期状態では上部に警告文が表示されます。
次項に従って推奨されるWordPressの設定を行います。

WordPressの設定

WP-Membersで推奨される設定を行います。

1. コメント設定(設定 > ディスカッション)

「ユーザー登録してログインしたユーザーのみコメントをつけられるようにする」にチェック

2. RSS/Atom フィードでの各投稿の表示(設定 > 表示設定)

「抜粋のみを表示」にチェック

3. パーマリンク設定(設定 > パーマリンク設定)

ディフォルト以外を推奨

4. メンバーシップ(設定 > 一般)

「だれでもユーザー登録ができるようにする」のチェックをはずす

WP-Membersの設定

オプション Options

会員制サイトを構築する上で肝になる部分。
日本語化されているので読めば大体分かると思います。
後で実例を示しながら解説します。

フィールド Fields

会員登録時の入力項目の設定です。

オリジナルの入力項目を追加することもできます。
「WPネイティブ」 と表記されているものは、WordPressのユーザープロフィールにディフォルトで設置されている項目です。

ログインパスワードはメールで通知される仕様なので、メールアドレスの入力は必須です。

ダイヤログ Dialogs

各種ダイアログメッセージの設定です。

メール Emails

新規ユーザー登録時、パスワードリセット時などに自動送信されるメールの設定です。
※ここは他言語化されていなかったので翻訳はしていません。

reCAPTCHA

reCAPTCHAの設定です。
オプションで「reCAPTCHAの使用」にチェックを入れた場合に有効になります。

投稿記事にアクセス制限をかける

すべての記事に制限をかける

・オプション > 「個別記事をブロック」にチェック

未ログイン状態だとこうなります↓

特定の記事に制限をかける

2パターンの設定方法があります。

ディフォルトですべての記事にアクセス制限をかけておき、特定の記事だけ解除する方法と、ディフォルトですべての記事のアクセス制限を解除しておき、特定の記事だけアクセス制限をかける方法。

・オプション > 「個別記事をブロック」のチェックをはずす
・アクセス制限を設定する投稿記事に「block」という名前のカスタムフィールドを作成して、値を「true」にする。

or

・オプション > 「個別記事をブロック」にチェック
・アクセス制限を解除する投稿記事に「unblock」という名前のカスタムフィールドを作成して、値を「true」にする。

記事の一部に制限をかける

・オプション > 「個別記事をブロック」にチェック
・オプション > 「抜粋を表示」にチェック
・投稿記事内にmoreタグを挿入

moreタグ以降の内容にアクセス制限がかかります。

ちょっと分かりずらいですが、moreタグ以前に記述した”全員に公開”は表示されて、moreタグ以降の”会員にのみ公開”は非表示になっています。

固定ページにアクセス制限をかける

・オプション > 「固定ページをブロック」
・以下、投稿記事と同様。

注意事項 – 一覧ページなどについて

アクセス制限は、パーマリンクのURL単位で設定されます。

投稿記事でも固定ページでも、アクセス制限がかかるのは、そのシングルページということです。

シングルページ以外に投稿記事一覧ページなどを設置している場合、投稿記事一覧ページのパーマリンクURLはシングルページのURLとは異なりますので、アクセス制限はかかりません。

もし、投稿記事一覧ページなど、シングルページ以外のURLに対してアクセス制限をかけたい場合は、該当するテンプレート内に、「アクセス制限がある記事はログインユーザのみ表示する」という条件分岐タグを記述するなどの対策が必要です。

特定の記事にカスタムフィールド(block=true)でアクセス制限をかけている場合の例

WP-Membersの設定

「投稿記事をブロック」にチェック

記事

一部会員限定 – moreタグ
会員限定 – カスタムフィールド(block=true)
全員 – 設定なし

通常のWordPressループで記事一覧を表示するなら、こうなります。

<?php if (have_posts()) : ?>
	<?php while (have_posts()) : the_post(); ?>
		<h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
		<div><?php the_content(); ?></div>
	<?php endwhile; ?>
<?php endif; ?>

このままでは会員限定の記事まで表示されてしまいますので、以下のようにします。

<?php if (have_posts()) : ?>
	<?php while (have_posts()) : the_post(); ?>
		<?php if (get_post_meta($post->ID, 'block', true)) : ?>
			<?php if (is_user_logged_in()) : ?>
				<h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
				<div><?php the_content(); ?></div>
			<?php endif; ?>
		<?php else : ?>
			<h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
			<div><?php the_content(); ?></div>
		<?php endif; ?>
	<?php endwhile; ?>
<?php endif; ?>

カスタムフィールド(block = true)の記事は、ログインしていないと表示されないようにしています。

ログインフォームの設置

ウィジェットとして設置

「WP-Mmbers Login」ウィジェットを、表示させたいサイドバーに追加します。

固定ページとして設置

ログインフォーム用の固定ページを作成してショートコードを埋め込みます

[wp-members page="login"]

メンバーズページと新規ユーザー登録ページの設置

会員用のページを作成します。

メンバーズページ(Members-area)

固定ページを作成して、ショートコードを埋め込みます

[wp-members page="members-area"]

ページを設定

オプション > 「メンバーズページのURL」に登録します。

ログイン後にこのページにアクセスすると、登録ユーザーは「登録情報の編集」と「パスワードの変更」が行えるようになります。

さらに、ログイン画面に「パスワードリセット」のリンクが追加されます。

メンバーズページを登録すると、「登録情報の編集」「パスワード変更」「パスワードリセット」の機能が追加される。

新規ユーザー登録ページ(Register)

新規ユーザー登録のページを作成します。

固定ページを作成して、ショートコードを埋め込みます

[wp-members page="register"]

ページを設定

オプション > 「新規ユーザー登録ページのURL」に登録します。

未ログインでこのページにアクセスすると、新規登録ページになります。

さらに、ログイン画面に「新規ユーザー登録」のリンクが追加されます。

新規ユーザー登録画面が作成されると同時に、ログイン画面に「新規ユーザー登録」のリンクが追加される。

新規ユーザー登録の流れ

1. 新規ユーザ登録を行う

2. 登録したメールアドレスにランダムに生成されたパスワードが自動応答メールにて通知される

自動応答メールのサンプル

※ディフォルトの英文ですが、WP-Membersのメール設定で設定してください。

3. パスワードの変更

メンバースページからパスワードを変更して完了。

登録ユーザーの管理

ユーザー > WP-Members から、登録ユーザーの一覧を閲覧したり、CSVファイルでダウンロードできます。

デザインのカスタマイズ

例えば、ログインフォームと新規登録フォームのディフォルトのデザインは以下のようになります。

正直かっこいいとは言えないですよね。
フォームのデザインもカスタマイズしたいところです。

まず、WP-Members のフォームには2パターンの出力方法があります。

オプション設定画面の「従来のフォーム」によって切り替えられます。

1. チェックしない場合

ディフォルトのCSSが適用されたフォームが出力されます。

2. チェックした場合

CSSレスのフォームが出力されます。
またテーブルレイアウトにもなっています。

フォームのデザインをカスタマイズしたいなら、CSSレスのフォームを元にした方がやりやすいと思います。

カスタマイズの基本は、マークアップ構造を分析してCSSを上書きする方法です。

オプション設定画面に「カスタムCSS」を読み込む項目がありますので、WP-Members 用に新たにスタイルシートを用意してもいいですし、style.css に追記してもいいです。

他要件への応用(1つのパスワードを使いまわす場合)

新規登録はなしで、会員にはあらかじめ登録しておいた1ユーザを使いまわさせる場合。
つまり、会員用のユーザ名とパスワードを知っていれば誰でもログインできる仕組み。

購読者ユーザにはプロフィール変更が許可されています。
つまりパスワード変更が可能なのでマズいです。

「権限なし」ユーザとして登録しておけば、一切の管理権限はなくなります。

プロフィール変更を許可しないので、メンバーズページも作成しません。
メンバーズページを作成しなければ、ログインフォームからも不要なリンクは消えます。

どうせはじかれるるので、サイト上部の管理メニューも消しておくとよいと思います。

> テーマフォルダ/functions.php

add_filter('show_admin_bar', '__return_false');