wordpressの会員登録・ログインフォームをプラグインなし・キャプチャありで実装する
スポンサーリンク

wordpressにデフォルトである会員登録・ログインフォーム(/wp-admin)を一切使わないで、会員登録・ログインフォームを自作しました。プラグインは使わず、尚且つキャプチャもつけました。

スポンサーリンク

ログイン・会員登録機能を実装する

functions.phpにコードを貼り付ける

まずは、会員登録・ログイン機能を作ります。キャプチャは次でつけるのでお待ちを。
下の四つ全てをお使いのテーマのfunctions.phpに追記してください。
(/wp-content/themes/<使っているテーマ>/functions.php)

ちなみにHTMLのフォームはショートコードで表示する形にしてあります。そうすればログイン時にログインページ・会員登録ページをそれぞれ非表示にできるからです。当サイトは代わりにユーザー名を表示するようにしました。
もしショートコードを使わず直接htmlで貼りたいようでしたら、会員登録・ログインフォーム(下の2、4つめ)の

<<<HTML

から

HTML;

までをカスタムHTMLで貼ってください。

php コピー

/**
 * 会員登録の処理をまとめた関数
 */
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();
    }
});
php コピー

//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');
php コピー

/**
 * ログイン処理をまとめた関数
 */
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();
    }
});
php コピー

//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

を貼り付けるだけです!

「更新に失敗しました」と出る場合
  1. 先ほど貼り付けた
    add_shortcode('register', 'register');
    add_shortcode('login', 'login');

    add_shortcode('registers', 'register');
    add_shortcode('logins', 'login');
    と一度変える。
    二つあるうちの前を変えてください。変えれば文字は何でもいいです。
  2. ショートコードで[]の中でlogin, registerをはる。記事、固定ページ保存。
  3. add_shortcode('register', 'register');
    add_shortcode('login', 'login');
    に戻す

とりあえず先にショートコードの文字列を決定して、そのあとにコードの文字を変えればいいみたいです。

スポンサーリンク

キャプチャを実装する

キャプチャは「securimage」を使います。(「secureimage」ではないですよ!!)

securimageはphpで動作する 画像認証ライブラリです。かなり簡単に設定することができます。

「securimage」をダウンロード

ここからダウンロードできます。

人によってやり方は違うかもしれませんが、ダウンロードしたら、wp-adminやwp-content, wp-imcludeがある階層に「securimage」の名前で保存してください。
私はパソコンにzipで保存して、Cyberduckを使ってFTPS経由で保存しました。
もちろん階層、名前は自由ですが、自分が載せたコードでは/securimageでアクセスするようにしています。
なのでそこを変えれば任意の階層、名前でも動きます。

スポンサーリンク

関係する記事

ここでは説明していないことが書いてあります。ぜひ参考にしてください。

ログアウト機能をつけたい

ログアウト機能をつけたウィジェットがあります。参考にしてみてください。

https://sukiburo.jp/code/wordpress/widget-login-logout-form/

securimageをカスタマイズしたい

カスタマイズできるところをのせました。

https://sukiburo.jp/code/php/customize-securimage/

参考サイト

https://wemo.tech/2338
(フォームの大枠を参考にしました。)

https://helog.jp/php/securimage/
(securimageの導入の基本を参考にしました。)

以上です。ご覧いただきありがとうございました。

スポンサーリンク
おすすめの記事