ブログ向けWordPressテーマ「SWELL」をリリースしました!

WordPressで会員登録フォームとログインフォームを自作してみる【プラグインなし】

WordPressで会員登録フォームとログインフォームを自作してみる【プラグインなし】

WordPressで会員サイトを作成するなら必須となる会員登録フォームログインフォーム

今回はこれらをプラグインを使わずに、自作したコードでWordPressに設置する方法をメモしていこうと思います。

もちろん、プラグインを使っても簡単に実装できますが、

  • ユーザー登録させた時にそのままログインさせた状態にしたい
  • ユーザー登録やログイン時に特定の処理を挟みたい

といった場合にはプラグインをカスタマイズしなくてはいけなかったりして逆に面倒だったりします。

私も先日、既存のプラグインでは対応できない会員フォームを実装する必要がありまして、その時にプラグインをカスタマイズするのが面倒すぎて一から自作してみたんです、

難しいかなと思ってたんですが、意外と会員登録やログインさせるフォームは簡単に作れました!

なので、知っておいて損はないと思います!

目次

会員の新規登録フォームを自作する

まずは「会員登録」(新規ユーザー登録)してもらうためのフォームを作っていきましょう。

会員登録フォームのHTML部分

<form class="my_form" name="my_signup_form" id="my_signup_form" action="" method="post">
    <div>
        <label for="signup_user_name">ユーザ名</label>
        <input id="signup_user_name" name="user_name" type="text" required>
    </div>
    <div>
        <label for="signup_password">パスワード</label>
        <input id="signup_password" name="user_pass" id="user_pass" type="password" required>
    </div>
    <div>
        <label for="signup_email">メールアドレス</label>
        <input id="signup_email" name="user_email" type="email" required>
    </div>
    <button type="submit" name="my_submit" class="my_submit_btn" value="signup">会員登録</button>
    <?php wp_nonce_field( 'my_nonce_action', 'my_nonce_name' );  //nonceフィールド設置 ?>
</form>

ユーザー登録に最低限必要な情報は

  1. ユーザー名
  2. パスワード
  3. メールアドレス

の3つです。

name属性はそれぞれuser_nameuser_passuser_emailとしていますが、好きな値で大丈夫です。

各htmlタグの構成やクラスなども必要に合わせて調節してください。

ユーザーとして登録させるPHPコード

次に、会員登録フォームから送信があった場合にユーザー登録させるコードを作成します。

functions.php に下のコードを追記してください

/**
 * 会員登録の処理をまとめた関数
 */
function my_user_signup() {
    $user_name  = isset( $_POST['user_name'] ) ? sanitize_text_field( $_POST['user_name'] ) : '';
    $user_pass  = isset( $_POST['user_pass'] ) ? sanitize_text_field( $_POST['user_pass'] ) : '';
    $user_email = isset( $_POST['user_email'] ) ? sanitize_text_field( $_POST['user_email'] ) : '';

    //空じゃないかチェック
    if ( empty( $user_name ) || empty( $user_pass ) || empty( $user_email ) ) {
        echo '情報が不足しています。';
        exit;
    }

    //すでにユーザー名が使われていないかチェック
    $user_id = username_exists( $user_name );
    if ( $user_id !== false ) {
        echo 'すでにユーザー名「'. $user_name .'」は登録されています';
        exit;
    }

    //すでにメールアドレスが使われていないかチェック
    $user_id = email_exists( $user_email );
    if ( $user_id !== false ) {
        echo 'すでにメールアドレス「'. $user_email .'」は登録されています';
        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( 'リダイレクト先URL' );
    exit;

    return;
}

/**
 * after_setup_theme に処理をフック
 */
add_action('after_setup_theme', function() {

    //会員登録フォームからの送信があるかどうか
    if ( isset( $_POST['my_submit'] ) && $_POST['my_submit'] === 'signup') {

        // nonceチェック
        if ( !isset( $_POST['my_nonce_name'] ) ) return;
        if ( !wp_verify_nonce( $_POST['my_nonce_name'], 'my_nonce_action' ) ) return;

        // 登録処理を実行
        my_user_signup();
    }
});

このコードのポイント

  • username_exists()email_exists()ですでにユーザー名とメールアドレスが使用されていないかをチェック
  • wp_insert_user()を使ってユーザーを登録
  • ユーザー登録にエラーがあったかどうかをis_wp_error()で判定
  • 会員登録の完了後、そのままログイン状態にすることもwp_set_auth_cookie()で可能
  • 会員登録完了後にwp_redirect()で好きなページへリダイレクト

※ エラーがあった時の処理について:
上のコードでは単純にエラー理由を文字列で出力してexit するだけなので、サイトに合わせて調整してください。

会員ログインフォームを自作する

さて、次はログインフォームの作成です。

ログインフォームのHTML部分

<form class="my_form" name="my_login_form" id="my_login_form" action="" method="post">
    <div>
        <label for="login_user_name">ユーザ名</label>
        <input id="login_user_name" name="user_name" type="text" required>
    </div>
    <div>
        <label for="login_password">パスワード</label>
        <input id="login_password" name="user_pass" id="user_pass" type="password" required>
    </div>
    <button type="submit" name="my_submit" class="my_submit_btn" value="login">ログイン</button>
    <p class="my_forgot_pass">
        <a href="/wp-login.php?action=lostpassword">パスワードを忘れた方はこちらから</a>
    </p>
    <?php wp_nonce_field( 'my_nonce_action', 'my_nonce_name' );  //nonceフィールド設置 ?>
</form>

ログインフォームに限必要な情報は

  1. ユーザー名
  2. パスワード

の2つです。

name属性はそれぞれuser_nameuser_passとしていますが、こちらも好きな値で大丈夫です。
各htmlタグの構成やクラスなども、必要に合わせて調節してください。

ログインさせるPHPコード

次に、ログインフォームから送信があった場合に実行するコードを作成します。

functions.php に下のコードを追記してください

/**
 * ログイン処理をまとめた関数
 */
function my_user_login() {
    $user_name = isset( $_POST['user_name'] ) ? sanitize_text_field( $_POST['user_name'] ) : '';
    $user_pass = isset( $_POST['user_pass'] ) ? sanitize_text_field( $_POST['user_pass'] ) : '';

    // ログイン認証
    $creds = array(
        'user_login' => $user_name,
        'user_password' => $user_pass,
    );
    $user = wp_signon( $creds );

    //ログイン失敗時の処理
    if ( is_wp_error( $user ) ) {
        echo $user->get_error_message();
        exit;
    }

    //ログイン成功時の処理 
    wp_redirect( 'リダイレクト先URL' );
    exit;

    return;
}

/**
 * after_setup_theme に処理をフック
 */
add_action('after_setup_theme', function() {
    if ( isset( $_POST['my_submit'] ) && $_POST['my_submit'] === 'login') {

        // nonceチェック
        if ( !isset( $_POST['my_nonce_name'] ) ) return;
        if ( !wp_verify_nonce( $_POST['my_nonce_name'], 'my_nonce_action' ) ) return;

        // ログインフォームからの送信があれば
        my_user_login();
    }
});

このコードのポイント

  • wp_signon()でログイン認証可能
  • ログイン時にエラーがあったかどうかをis_wp_error()で判定
  • ログイン完了後にwp_redirect()で好きなページへリダイレクト

※ エラーがあった時の処理について:
新規登録フォームと同様、サイトに合わせて調整してください。

会員登録フォームとログインフォームの自作は意外と簡単だった

さて、意外と簡単だったのではないでしょうか?

フォームが絡むとどこか複雑そうな気がしていましたが、必要な情報を適切にやりとりすれば特に難しくはありませんでした。

今後も、プラグインで実装したフォームをカスタマイズするくらいなら自作した方が何かと便利かもなと...!

この記事が気に入ったら
フォローしてね!

目次
目次