この記事はブロックされています。続きを読みたい方はログインをして下さい。会員ではない方は新規会員登録をして下さい。


ワードプレスで会員制ポイントサイト作るための覚え書き その4 非ログインユーザーと非会員に登録フォームを提供する方法

  • 会員制ポイントサイトの作り方

前回はブロック記事でかつログインユーザーであれば通常表示し、非ログインユーザーと非会員であればmoreタグ以降を表示しないという処理を説明しました。

今回は省略されたmoreタグ以降に「続きを読む」などのリンクを表示し、非ログインユーザーと非会員向けにログインまたは新規会員フォームを提供する方法です。

ログインフォームと新規会員登録フォームについてはワードプレスに既に機能があります。
「wp-login.php」というのがそうで、例えば以下のようなリンクでアクセスできます。
ドメインはご自身のものに変更して解釈してください。

▼ログインフォーム

▼新規会員登録フォーム(管理画面の一般設定でメンバーシップを有効にすると使用可)

これをそのまま利用すればいい気がしますが、それだと記事内に表示できません。
一旦、記事を離れてフォームに変遷する必要があって不親切です。
できれば「続きを読む」のあとにフォームがあったほうがいいですね。
そうしないとログイン後に元の記事に戻れないからです。

となると、ワードプレスの元からあるフォームの機能を利用しつつ、オリジナルのフォームを用意する必要が出てきそうです。
というわけで、今回はログインフォームと新規会員登録フォームについてみてみます。

まずログインフォームですが、このようになっています。

<form name="loginform" id="loginform" action="http://sample.com/wp-login.php" method="post">
	<p>
		<label for="user_login">ユーザー名<br />
		<input type="text" name="log" id="user_login" class="input" value="opadmin" size="20" /></label>
	</p>
	<p>
		<label for="user_pass">パスワード<br />
		<input type="password" name="pwd" id="user_pass" class="input" value="" size="20" /></label>
	</p>
		<p class="forgetmenot"><label for="rememberme"><input name="rememberme" type="checkbox" id="rememberme" value="forever"  /> ログイン状態を保存する</label></p>
	<p class="submit">
		<input type="submit" name="wp-submit" id="wp-submit" class="button button-primary button-large" value="" />
		<input type="hidden" name="redirect_to" value="http://sample.com/wp-admin/" />
		<input type="hidden" name="testcookie" value="1" />
	</p>
</form>

これをそのまま流用すればログインが可能です。デザインも変更できます。
ポイントとしてリダイレクトURLを元記事にすることです。
リダイレクトするURLは以下の箇所で指定します。

<input type="hidden" name="redirect_to" value="http://sample.com/wp-admin/" />

みるとログイン後にユーザー管理画面に飛ばされるのが分かります。
これを元記事のURLに変えれば、ログイン後に管理画面に飛ばず元記事にリダイレクトされます。
リダイレクト先は必要に応じて変更すればいいですね。

次に新規会員登録フォームです。

<form name="registerform" id="registerform" action="http://sample.com/wp-login.php?action=register" method="post">
	<p>
		<label for="user_login">ユーザー名<br />
		<input type="text" name="user_login" id="user_login" class="input" value="" size="20" /></label>
	</p>
	<p>
		<label for="user_email">メール<br />
		<input type="text" name="user_email" id="user_email" class="input" value="" size="25" /></label>
	</p>
		<p id="reg_passmail">パスワードをメールで送信します。</p>
	<br class="clear" />
	<input type="hidden" name="redirect_to" value="" />
	<p class="submit"><input type="submit" name="wp-submit" id="wp-submit" class="button button-primary button-large" value="登録" /></p>
</form>

これもリダイレクト先が指定できます。

<input type="hidden" name="redirect_to" value="" />

ワードプレスの新規会員登録はユーザー名とメールアドレスを入力すると、自動生成されたパスワードが送付されます。
新規会員登録の場合は一旦メールを受信してパスワードを確認する必要があります。

では早速改作してみます。

関連記事