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

公開日：2019年9月15日
最終更新日：2020年6月26日

ゆう

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

1 ログイン・会員登録機能を実装する
2 キャプチャを実装する
- 2.1 「securimage」をダウンロード
3 関係する記事
- 3.1 ログアウト機能をつけたい
- 3.2 securimageをカスタマイズしたい
4 参考サイト

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

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

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

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

<<<HTML

から

HTML;

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

会員登録　php

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)

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

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)

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、パスワードでログインできます。

また、会員登録・ログインそれぞれキャプチャ認証を付けてあります。

ショートコードを使って導入する

あとはもう簡単です！任意の場所にショートコード（下の文字を[]で囲って入れる）で

と

を貼り付けるだけです！

「更新に失敗しました」と出る場合

先ほど貼り付けた
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でアクセスするようにしています。
なのでそこを変えれば任意の階層、名前でも動きます。