/

【自作】wordpressでログイン機能を作成する

【自作】wordpressでログイン機能を作成する

今回はwordpressで自作のログイン機能を作成する方法を紹介します。

「ログインフォームの作成」と「ログイン処理の機能」を作成していきます。

独自のユーザー権限を作成している場合などに使用すると便利です。

ログインフォームの作成

<?php $redirect_to = home_url(). '/private/'; ?>
<p class="login-form-text">IDとパスワードを入力してください。</p>
<form name="loginform" id="loginform" action="" method="POST" class="login-form">
    <input id="user_login" type="text" name="user_login" required>
    <input id="user_pass" name="user_pass" type="password" required>

    <button type="submit" value="login" name="submit"> ログイン</button>
    // リダイレクト先
    <input type="hidden" value="<?php echo esc_url( $redirect_to ); ?>" name="redirect_to">
  // ナンス
    <?php my_nonce_field( 'my_nonce_action', 'my_nonce_field' ); ?>
</form>

ユーザーフォームは今回シンプルにログイン名とパスワードにしています。

その他に参照したい情報があれば追加してください。ログイン状態保存のチェックボックスはよく見られますね。

リクエストの正当性をチェックするためにナンスを使用しています。

ログイン処理機能

add_action( 'after_setup_theme', function() {
    if ( isset( $_POST['submit'] ) && $_POST['submit'] === 'login') {

        $errors = new WP_Error();
        // ナンスチェック
        if ( !isset( $_POST['my_nonce_field'] ) || !wp_verify_nonce( $_POST['my_nonce_field'], 'my_nonce_action' ) ) {
            $errors->add( 'wrong_nonce', '不正なアクセスです。再読み込みしてください。' );
        }
        // 院コードチェック
        if( !isset( $_POST['user_login'] ) || !validate_username( $_POST['user_login'] ) || !username_exists( $_POST['user_login'] ) ) {
            $errors->add( 'user_login', '登録されていないIDです。');
        }
        // エラーがあれば吐出し
        if( $errors->get_error_codes() ) {
            ?>
            <div>
                <?php 
                foreach( $errors->get_error_messages() as $message ) {
                    echo '<p>' . esc_html( $message ) . '</p>';
                }
                ?>
            </div>
            <?php
        } else {
            $user_pass = isset( $_POST['user_pass'] ) ? sanitize_text_field( $_POST['user_pass'] ) : '';
            $creds = array(
                'user_login'    => $_POST['user_login'],
                'user_password' => $user_pass,
            );
            $user = wp_signon( $creds );
            // エラーがあれば表示
            if ( is_wp_error( $user ) ) {
               echo $user->get_error_message();
            } else {
                wp_redirect( $_POST['redirect_to'] );
                exit;
            }
        }
    }
});

上から順番に処理を追っていくと

  • ログインフォームから送信されたPOSTか確認
  • エラーインスタンス作成
  • ナンスチェック
  • ユーザー名チェック(空、使用可能文字、存在)
  • ナンス・ユーザー名でエラーがあれば出力
  • パスワードサニタイズ
  • ログイン(wp_signon)
  • ログインに失敗していたらエラー表示
  • ログイン成功でリダイレクト

というようになっています。

ユーザー名チェックの存在確認はお好みにしてください。公開している環境で作成する際にはないほうがセキュアだと思います。公開しないクローズドな際には出してあげた方が親切かもしれません。

エラーが吐かれる場所は今回は最上部になります。もし、ログインフォーム内に入れたい場合はグローバル変数を使用して、ログインフォーム内で吐き出す処理を作成しておくと良いです。

wp_signon関数は成功したらログインしWP_Userが返り、失敗したらWP_Errorが返ってきますので、それをもとに処理を分けています。

「$user->get_error_message();」でエラーを出力していますが、このタイミングでのエラーはパスワード間違いなので、デフォルトのメッセージが気に入らない場合は変えていいかもしれません。

「wp_redirect($url)」でリダイレクト処理しています。後ろに「exit;」がない場合またログインフォームが表示されてしまう可能性があるため「exit;」を記載しておきましょう。(ローカルは問題ありませんでしたが、サーバーでは再度ログインフォームが表示されました。。。)

フックの場所は「after_setup_theme」にしています。Cookies処理の後なら問題ないかと。

もし、ユーザーのログイン情報を使用して上記のような処理を行いたい場合、この段階ではユーザー情報が取得できていないので、「init」後か明示的に現在のユーザーをセットする関数を呼び出す必要があります。

まとめ

wp_redirect( $_POST[‘redirect_to’] )の後にexitをつけていなくて私は結構悩みました。。。

公式で調べてみるとしっかり「exit;」を書けって書いてあるんですけどね。(笑)

あと、WP_Errorってログインとかがないとあまり使用する機会がないので、自作する際にはどんな感じなのかさっと目を通しておくと使い勝手のいいクラスだと感じれると思います。