【初心者向け】WordPressで会員サイトをプラグインなしで作る方法

最近は「会員サイト」が注目されていますよね。そこで本日は「プラグインを使わずにワードプレスで会員制のウェブサイトを立ち上げる方法」について詳しくご紹介させていただきます。

【初心者向け】WordPressで会員サイトをプラグインなしで作る方法

会員制のウェブサイトを構築する上で大切なのは「仕様」を決めることです。

当然ですが「本格的な会員サイトと簡易的な会員サイト」では構築費用もまったくと言っていいほど違います。本格的な会員サイトはプラグインを使って構築すれば予算も大きく抑えることができます。

以下では「簡易的な会員サイトを作る方法」について詳しく解説いたします。

会員サイトの仕様

まずは全体の仕様を決めましょう。会員機能の実装箇所でプラグインは使いません。会員機能とは別で「お問い合わせフォームの設置には「Contact Form 7」などを活用すれば制作時間を大幅に短縮できます。

・会員制のウェブサイトを運営するアカウントは「管理者」を想定する
・社内スタッフの更新作業を考慮して「編集者」が使える状態にしておく
・外部ライターも投稿できるように「投稿者/寄稿者」はそのまま活かす
・会員ユーザーは自らで「購読者」としてフォームからアカウントを発行できる
・アカウントを持っていない来訪者は強制的にログインページへ飛ばされる
・ログインが完了した会員ユーザーは管理画面に入らずコンテンツを閲覧可能

では実際に作っていきましょう。

ちなみに以前にもっと手軽な会員サイトもご紹介していますのでさらにシンプル運用の会員サイトを構築したい方はぜひ以下もご参照くださいませ。記事の中盤に記事をパスワード管理する方法が載っています。

会員しか閲覧できない限定ホームページの仕組みとは

では「プラグインなしで会員が自らアカウント発行する方法」を解説いたします。

管理画面から会員ユーザーが自ら登録できる設定に変更する

ワードプレスでは管理画面で「ユーザー登録」を許可できます。設定を追加すればウェブサイトに訪れたユーザーが自ら会員としてアカウントを発行可能です。設定は以下にチェックを入れるだけでOK。

管理画面内の「設定 > 一般」にあります。

元々はチェックが入っていません。メンバーシップの設定から変更できるので有効化してください。会員ユーザーは購読者で発行するので“新規ユーザーのデフォルト権限グループ”は「購読者」で構いません。

チェックを入れたら「変更を保存」。

以上で「ウェブサイト側から自由にユーザー発行ができる」ようになります。

会員ユーザーが実際に進める登録手順を確認する

一度管理画面からログアウトしてユーザー登録ができるか確認しましょう。

ログアウトすると「会員登録」ができる状態に変わっています。左下に表示されている「登録」をクリックするとユーザーが参加するためのフォームが開きます。実際にユーザー目線で登録を試してみましょう。

以下が登録フォーム画面を開いた状態。

ちなみに登録用のURLは以下となります。

http://example.com/wp-login.php?action=register

以上で来訪者の会員登録が可能になりました。会員登録時に登録専用URLをお知らせするなら上記URLをご自身のドメイン（example.net等）に置き換えて告知するとスムーズに会員登録をしてもらえます。

会員ユーザーのアカウントをテスト登録する

では参考までに実際に来訪者が登録する手順を進めましょう。ユーザー名とメールアドレスを入力して登録。

登録が完了すると以下が表示されます。

入力したメールアドレス宛にメールが届いています。URLをクリックしてパスワード設定画面に進みましょう。

最後に「パスワードの保存」を押せば完了です。自動で強固なパスワードを生成する機能もあって便利ですね。パスワードは手入力も可。来訪ユーザー側で自由に決めることができます。

正常に「パスワードの保存」が完了すると以下の画面が開きます。

ユーザー発行は以上で完了です。

会員ユーザーでログインできるか事前にテストをする

ユーザー名（またはメールアドレス）とパスワードでログインしてみましょう。

会員ユーザーとしてログインできました。

では残りの設定を進めていきましょう。まだいくつか残っていますよね。

・会員ユーザーとしてログインしていない来訪者は強制的にログイン画面を表示する
・会員ユーザーがログインしたら管理画面を開かず自動でトップページURLに飛ばす
・管理者/編集者/投稿者/寄稿者は通常通りの権限で管理画面に入れる状態を維持する

あと少しで完了です。

アカウントがない来訪者のアクセスを指定URLに飛ばす

現時点では誰もがウェブサイトにアクセスできてしまいます。

ではアクセスを制御していきましょう。まずは共通の設定です。

//ログインしていないユーザーを強制的にログインページに飛ばす
add_action( 'wp_head', 'no_login_user_redirect_wp_login',1);
function no_login_user_redirect_wp_login() {
	if (!is_user_logged_in()){
		wp_redirect(get_bloginfo('url') . '/wp-login.php');
	}
}

そして次がログインした会員ユーザーへの個別設定。

//ログインした会員ユーザー（購読者）をトップページに飛ばす
function login_subscriber_members_redirect_top_page() {
	global $current_user;
	get_currentuserinfo();
	extract($current_user->wp_capabilities);
	if ($subscriber) {
		wp_redirect(get_bloginfo('url'));
	}
}
add_action('admin_init', 'login_subscriber_members_redirect_top_page');

最後にログアウト用メニューの追加と管理バーを最低限の項目に変更。不要なメニューは非表示にしましょう。

以下が会員ユーザー向けの処理です。管理バーに表示されているメニューを再構成いたします。

//会員ユーザーの場合は管理バーの要素を非表示に設定する
function remove_admin_bar_menu_control( $wp_admin_bar ) {
	if ( current_user_can( 'subscriber' ) ) {
		$wp_admin_bar->remove_menu( 'wp-logo' );
		$wp_admin_bar->remove_menu( 'site-name' );
		$wp_admin_bar->remove_menu( 'dashboard' );
		$wp_admin_bar->remove_menu( 'user-info' );
		$wp_admin_bar->remove_menu( 'edit-profile' );
		$wp_admin_bar->remove_menu( 'logout' );
		$wp_admin_bar->remove_menu( 'search' );

		//会員ユーザー専用のログアウトメニューを追加する
		function add_subscriber_logout_in_admin_bar() {
			global $wp_admin_bar;
				$wp_admin_bar->add_menu(array(
				'id' => 'new-item-in-admin-bar',
				'title' => __('ログアウト'),
				'href' => wp_logout_url(),
				'meta'   => array(
					'class' => 'ab-top-secondary',
				)
			));
		}
		add_action('wp_before_admin_bar_render', 'add_subscriber_logout_in_admin_bar');
	}
}
add_action('admin_bar_menu', 'remove_admin_bar_menu_control', 111);

以上で設定は完了です。

上記で解説した設定が完了すると「ログイン」していなければ強制的にトップページにリダイレクトされます。そして「会員ユーザー」として登録後にログインすれば全コンテンツの閲覧が可能になります。

さらにカスタマイズするなら「ログイン画面のWordPressロゴを非表示化」したり、WordPressのロゴ画像を別のロゴに入れ替えたりすればさらにオリジナリティが増してウェブサイトの満足度が高まります。

ちなみにロゴを非表示にするカスタマイズは下記です。

//ログイン画面のWordPressロゴを非表示にする
function remove_admin_login_wp_logo_hidden() {
	echo '<style type="text/css">h1 { display:none!important; }</style>';
} 
add_action('login_head', 'remove_admin_login_wp_logo_hidden');

好みにロゴへ差し替えたり、ログイン画面自体をカスタマイズすることも可能です。

背景に画像を設定したり、ログインボックスを半透明にしたり、色々なデザイン変更ができそうですね。念のために上記でご紹介したコードをすべてひとまとめにした状態も残しておきます。

//ログインしていないユーザーを強制的にログインページに飛ばす
add_action( 'wp_head', 'no_login_user_redirect_wp_login',1);
function no_login_user_redirect_wp_login() {
	if (!is_user_logged_in()){
		wp_redirect(get_bloginfo('url') . '/wp-login.php');
	}
}

//ログインした会員ユーザー（購読者）をトップページに飛ばす
function login_subscriber_members_redirect_top_page() {
	global $current_user;
	get_currentuserinfo();
	extract($current_user->wp_capabilities);
	if ($subscriber) {
		wp_redirect(get_bloginfo('url'));
	}
}
add_action('admin_init', 'login_subscriber_members_redirect_top_page');

//会員ユーザーの場合は管理バーの要素を非表示に設定する
function remove_admin_bar_menu_control( $wp_admin_bar ) {
	if ( current_user_can( 'subscriber' ) ) {
		$wp_admin_bar->remove_menu( 'wp-logo' );
		$wp_admin_bar->remove_menu( 'site-name' );
		$wp_admin_bar->remove_menu( 'dashboard' );
		$wp_admin_bar->remove_menu( 'user-info' );
		$wp_admin_bar->remove_menu( 'edit-profile' );
		$wp_admin_bar->remove_menu( 'logout' );
		$wp_admin_bar->remove_menu( 'search' );

		//会員ユーザー専用のログアウトメニューを追加する
		function add_subscriber_logout_in_admin_bar() {
			global $wp_admin_bar;
				$wp_admin_bar->add_menu(array(
				'id' => 'new-item-in-admin-bar',
				'title' => __('ログアウト'),
				'href' => wp_logout_url(),
				'meta'   => array(
					'class' => 'ab-top-secondary',
				)
			));
		}
		add_action('wp_before_admin_bar_render', 'add_subscriber_logout_in_admin_bar');
	}
}
add_action('admin_bar_menu', 'remove_admin_bar_menu_control', 111);

//ログイン画面のWordPressロゴを非表示にする
function remove_admin_login_wp_logo_hidden() {
	echo '<style type="text/css">h1 { display:none!important; }</style>';
} 
add_action('login_head', 'remove_admin_login_wp_logo_hidden');

あとひと手間加えるならRSSフィードの設定を変更すればさらに良し。設定箇所は「設定 > 表示設定 > フィードの各投稿に含める内容」。元々が「全文を表示」なので「抜粋」に変更しておきましょう。

もし「全文を表示」のままだとRSS上に全コンテンツが表示されています。RSSフィードを利用してまでコンテンツを取得する方は稀ですが、会員サイトであれば設定しておくに越したことはありません。

まとめ

本日は「会員ユーザーとしてアカウントを作成しなければ閲覧できない専用サイト」を解説いたしました。

会員サイトとして運営するにはシンプルで使いやすい構成です。使い方としては「商品を購入した人だけが見れる非公開のサポートサイト」や「ワードプレスでサイト構築する際のテスト環境」がありますね。

もちろん、アイデア次第ではまだまだ色々な活用方法があるはずです。ワードプレスではもっと細部までカスタマイズができます。たとえば「会員登録時の送信メール本文や表示される宛名を変更など何でもOK。

ひとことで会員サイトと言ってもかなりのパターンがあるので前回に書いた以下記事も併せてご参照ください。

【必読】会員サイトとは

補足

上記のカスタマイズでは「編集者/投稿者/寄稿者」の権限を持つアカウントには一切影響がありません。

・社内スタッフ向けに編集者権限のアカウントを作ってログイン情報を渡す
・記事の執筆を依頼している外部ライターへ投稿者権限のアカウントを発行する
・管理画面内で記事の下書きまでを行える寄稿者権限のアカウントを活用する

シンプルな会員サイトを運営されたい方はぜひご参考くださいませ。