
wordpressにデフォルトである会員登録・ログインフォーム(/wp-admin)を一切使わないで、会員登録・ログインフォームを自作しました。プラグインは使わず、尚且つキャプチャもつけました。
目次
ログイン・会員登録機能を実装する
functions.phpにコードを貼り付ける
まずは、会員登録・ログイン機能を作ります。キャプチャは次でつけるのでお待ちを。
下の四つ全てをお使いのテーマのfunctions.phpに追記してください。
(/wp-content/themes/<使っているテーマ>/functions.php)
ちなみにHTMLのフォームはショートコードで表示する形にしてあります。そうすればログイン時にログインページ・会員登録ページをそれぞれ非表示にできるからです。当サイトは代わりにユーザー名を表示するようにしました。
もしショートコードを使わず直接htmlで貼りたいようでしたら、会員登録・ログインフォーム(下の2、4つめ)の
から
HTML;
までをカスタムHTMLで貼ってください。
/**
* 会員登録の処理をまとめた関数
*/
function my_user_signup() {
$user_name = isset( $_POST['user_name'] ) ? $_POST['user_name'] : '';
$user_pass = isset( $_POST['user_pass'] ) ? $_POST['user_pass'] : '';
$user_email = isset( $_POST['user_email'] ) ? $_POST['user_email'] : '';
$user_cap = isset( $_POST['capcha_code'] ) ? $_POST['capcha_code'] : '';
//空じゃないかチェック
if ( empty( $user_name ) || empty( $user_pass ) ) {
echo 'full blanks';
exit;
}
//すでにユーザー名が使われていないかチェック
$user_id = username_exists( $user_name );
if ( $user_id !== false ) {
echo 'name「'. $user_name .'」is already used';
exit;
}
//すでにメールアドレスが使われていないかチェック
$user_id = email_exists( $user_email );
if ( $user_id !== false ) {
echo 'mailaddress「'. $user_email .'」is already used';
exit;
}
//メールの文字列確認
if (preg_match("/^([a-z0-9\+_\-]+)(\.[a-z0-9\+_\-]+)*@([a-z0-9\-]+\.)+[a-z]{2,6}$/iD", $user_email)) {
}else {
echo 'not good email';
exit;
}
//キャプチャの確認
include_once $_SERVER['DOCUMENT_ROOT'] . '/securimage/securimage.php';
$securimage = new Securimage();
if ($securimage->check($user_cap) == false){
echo 'not good chapcha';
exit;
}
//問題がなければユーザーを登録する処理を開始
$userdata = array(
'user_login' => $user_name, // ログイン名
'user_pass' => $user_pass, // パスワード
'user_email' => $user_email, // メールアドレス
);
$user_id = wp_insert_user( $userdata );
// ユーザーの作成に失敗した場合
if ( is_wp_error( $user_id ) ) {
echo $user_id -> get_error_code(); // WP_Error() の第一引数
echo $user_id -> get_error_message(); // WP_Error() の第二引数
exit;
}
//登録完了後、そのままログインさせる( 任意 )
wp_set_auth_cookie( $user_id, false, is_ssl() );
//登録完了ページへ
wp_redirect( 'https://sukiburo.jp/member' );
exit;
return;
}
/**
* after_setup_theme に処理をフック
*/
add_action('after_setup_theme', function() {
if ( isset( $_POST['my_submit'] ) && $_POST['my_submit'] === 'signup') {
// 会員登録フォームからの送信があれば、登録処理を開始
my_user_signup();
}
});
//registar form
function register() {
$body = <<<HTML
<form class="my_form" name="my_signup_form" id="my_signup_form" action="" method="post">
<input type="checkbox" name="agreement" id="agreement" value="1" required /><label for="agreement">Agree/ 同意する</label>
<div>
<label for="signup_user_name">user name</label>
<input id="signup_user_name" name="user_name" type="text" required>
</div>
<div>
<label for="signup_email">mail address</label>
<input id="signup_email" name="user_email" type="email" required>
</div>
<div>
<label for="signup_password">password</label>
<input id="signup_password" name="user_pass" id="user_pass" type="password" required>
</div>
<div>
<label>capcha</label>
<br>
<img id="captcha" src="/securimage/securimage_show.php" alt="CAPTCHA Image">
<br>
<a href="#" onclick="document.getElementById('captcha').src = '/securimage/securimage_show.php?' + Math.random(); return false">Different Image</a>
<br>
<input name="capcha_code" type="text" size="10" maxlength="6" required/>
</div>
<br>
<button type="submit" name="my_submit" class="my_submit_btn" value="signup">register</button>
</form>
HTML;
$user = wp_get_current_user();
if(is_user_logged_in()){
echo 'Hi, '.$user->display_name;
} else {
echo $body;
}
}
add_shortcode('register', 'register');
/**
* ログイン処理をまとめた関数
*/
function my_user_login() {
$user_name = isset( $_POST['user_name'] ) ? $_POST['user_name'] : '';
$user_pass = isset( $_POST['user_pass'] ) ? $_POST['user_pass'] : '';
$user_cap = isset( $_POST['capcha_code'] ) ? $_POST['capcha_code'] : '';
//キャプチャの確認
include_once $_SERVER['DOCUMENT_ROOT'] . '/securimage/securimage.php';
$securimage = new Securimage();
if ($securimage->check($user_cap) == false){
echo 'not good chapcha';
exit;
}
// ログイン認証
$creds = array(
'user_login' => $user_name,
'user_password' => $user_pass,
);
$user = wp_signon( $creds );
//ログイン失敗時の処理 echo $user->get_error_message();
if ( is_wp_error( $user ) ) {
echo 'Bad request';
exit;
}
//ログイン成功時の処理
wp_redirect( 'https://sukiburo.jp/' );
exit;
return;
}
/**
* after_setup_theme に処理をフック
*/
add_action('after_setup_theme', function() {
if ( isset( $_POST['my_submit'] ) && $_POST['my_submit'] === 'login') {
// ログインフォームからの送信があれば
my_user_login();
}
});
//login form
function login() {
$body = <<<HTML
<form class="my_form" name="my_login_form" id="my_login_form" action="" method="post">
<div>
<label for="login_user_name">user name</label>
<br>
<input id="login_user_name" name="user_name" type="text" required>
</div>
<div>
<label for="login_password">password</label>
<br>
<input id="login_password" name="user_pass" id="user_pass" type="password" required>
</div>
<div>
<label>capcha</label>
<br>
<img id="captcha" src="/securimage/securimage_show.php" alt="CAPTCHA Image">
<br>
<a href="#" onclick="document.getElementById('captcha').src = '/securimage/securimage_show.php?' + Math.random(); return false">Different Image</a>
<br>
<input name="capcha_code" type="text" size="10" maxlength="6" required/>
</div>
<br>
<button type="submit" name="my_submit" class="my_submit_btn" value="login">login</button>
</form>
HTML;
$user = wp_get_current_user();
if(is_user_logged_in()){
echo 'Hi, '.$user->display_name;
} else {
echo $body;
}
}
add_shortcode('login', 'login');
軽い説明
会員登録でユーザーid、メールアドレス、パスワードを登録してもらうようにしています。
メールアドレスに関しては変な形式にされると登録されないようなのでバリデーションをつけました。
調べると色々あるようなので自由に変更してください。
ログインではユーザーid、パスワードでログインできます。
また、会員登録・ログインそれぞれキャプチャ認証を付けてあります。
ショートコードを使って導入する
あとはもう簡単です!任意の場所にショートコード(下の文字を[]で囲って入れる)で
login
と
register
を貼り付けるだけです!
- 先ほど貼り付けた
add_shortcode('register', 'register');
add_shortcode('login', 'login');
を
add_shortcode('registers', 'register');
add_shortcode('logins', 'login');
と一度変える。
二つあるうちの前を変えてください。変えれば文字は何でもいいです。 - ショートコードで[]の中でlogin, registerをはる。記事、固定ページ保存。
- add_shortcode('register', 'register');
add_shortcode('login', 'login');
に戻す
とりあえず先にショートコードの文字列を決定して、そのあとにコードの文字を変えればいいみたいです。
キャプチャを実装する
キャプチャは「securimage」を使います。(「secureimage」ではないですよ!!)
securimageはphpで動作する 画像認証ライブラリです。かなり簡単に設定することができます。
「securimage」をダウンロード
ここからダウンロードできます。
人によってやり方は違うかもしれませんが、ダウンロードしたら、wp-adminやwp-content, wp-imcludeがある階層に「securimage」の名前で保存してください。
私はパソコンにzipで保存して、Cyberduckを使ってFTPS経由で保存しました。
もちろん階層、名前は自由ですが、自分が載せたコードでは/securimageでアクセスするようにしています。
なのでそこを変えれば任意の階層、名前でも動きます。
関係する記事
ここでは説明していないことが書いてあります。ぜひ参考にしてください。
ログアウト機能をつけたい
ログアウト機能をつけたウィジェットがあります。参考にしてみてください。
securimageをカスタマイズしたい
カスタマイズできるところをのせました。
参考サイト
https://wemo.tech/2338
(フォームの大枠を参考にしました。)
https://helog.jp/php/securimage/
(securimageの導入の基本を参考にしました。)
以上です。ご覧いただきありがとうございました。