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

プラグインでも簡単に実装できますが、自作する方法もそんなに難しくないので、作ってみました!

目次
自分の価値を生み出すWordPressテーマ、SWELL

【限定セール中!】ブログ向け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>
</form>

最低限必要な情報は「ユーザー名」・「パスワード」・「メールアドレス」の3つです。

name属性はそれぞれ「user_name」・「user_pass」・「user_email」としています。各htmlタグの構成やクラスなどは必要に合わせて調節してください。

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

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

functions.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'] : '';

    //空じゃないかチェック
    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') {
        // 会員登録フォームからの送信があれば、登録処理を開始
        my_user_signup();
    }
});

このコードのポイント

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

※ エラーがあった時の処理について:
上のコードでは単純に理由を echo して 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>
</form>

最低限必要な情報は「ユーザー名」・「パスワード」の2つです。

name属性はそれぞれ「user_name」・「user_pass」としています。各htmlタグの構成やクラスなどは必要に合わせて調節してください。

ログインさせるPHPコード

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

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

/**
 * ログイン処理をまとめた関数
 */
function my_user_login() {
    $user_name = isset( $_POST['user_name'] ) ? $_POST['user_name'] : '';
    $user_pass = isset( $_POST['user_pass'] ) ? $_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') {
        // ログインフォームからの送信があれば
        my_user_login();
    }
});

このコードのポイント

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

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

おわりに

必要なことが分かると意外と簡単でした。

プラグインで実装したフォームをどうせカスタマイズするくらいなら、自作した方が何かと便利かもしれません。

- Thank you for reading. -

コメント

コメントする