web-dev-qa-db-ja.com

ログイン/登録フォームを正しくカスタマイズする

私はWordPress用にカスタマイズされたログインフォームに取り組んでいます。私が望んでいたことを達成するのはかなり難しいことに気づきました。

これがフォームのHTMLです。

<form method="post" action="<?php bloginfo('url') ?>/wp-login.php">
    <div class="loginbox_fields">
        <div class="loginbox_field"><input type="text" name="log" id="user_login"  value="" placeholder="<?php _e('Username'); ?>"/></div>
        <div class="loginbox_field"><input type="password" name="pwd" id="user_pass" value="" placeholder="<?php _e('Password'); ?>"/></div>
        <div class="loginbox_text">
            <input name="rememberme" type="checkbox" id="rememberme" value="forever"  <?php checked( $rememberme ); ?> />
            <label for="remember"><?php esc_attr_e('Remember Me'); ?></label>
        </div>
        <a href="/nojs.html" class="loginbox_button form_submit" title="<?php esc_attr_e('Log In'); ?>"><?php esc_attr_e('Log In'); ?></a>
        <table>
            <tr>
                <td class="first_column">Not registered?</td>
                <td></td>
                <td>Forgot password?</td>
            </tr>
            <tr>
                <td class="first_column"><a href="<?php echo get_permalink(); ?>?action=register" class="loginbox_stdbutton" title="Register">Register</a></td>
                <td></td>
                <td><a href="<?php echo get_permalink(); ?>?action=lostpassword" class="loginbox_stdbutton" title="Reset Password">Reset Password</a></td>
            </tr>
        </table>
    </div>
</form>

スタイルの要件により、私はdivをinputボックスの周囲に配置し、送信ボタンはアンカータグです。 ドキュメント によると、wp_login_formとそのフックはこのデザインを実装することができません。

だから私は（私が尋ねた）この質問の提案に従った カスタムユーザープロファイル、登録、テーマを持つログインページ 、そして http://digwp.comに近い何かを得ました/ 2010/12/login-register-password-code / 。基本的には、ログインフォームを好きな場所に置くことができますが、送信時にwp-login.phpを指すようにします。

しかし、それには一つ大きな欠点があります。ログインが正しくない場合は、wp-login.phpに戻ります。この デモ のように、何も入力せずに "Login"をクリックすると、デフォルトのwp-login.phpフォームに戻ります。

私は現在、カスタムページの1つに上記のフォームを入れています。私はtemplate_includeにフックされたフィルターを持っていて、そしてログインフォームとしてこのHTMLコードを使いました。スタイルを変更したいだけで、機能を追加する予定はありません。

このログインフォームデザインを実装するために何が必要ですか？ wp-login.phpから始めて変更しますか？もしそうなら、どうやって始めますか（テーマとフォームを入れるという点で）？

customizationloginwp-login-form
1
He Shiming

ログインが失敗した後にあなたのカスタムログインフォームに戻るためにこのコードを試してください：

// hook failed login
add_action('wp_login_failed', 'my_front_end_login_fail'); 

function my_front_end_login_fail($username){
    // Get the reffering page, where did the post submission come from?
    $referrer = add_query_arg('login', false, $_SERVER['HTTP_REFERER']);

    // if there's a valid referrer, and it's not the default log-in screen
    if(!empty($referrer) && !strstr($referrer,'wp-login') && !strstr($referrer,'wp-admin')){
        // let's append some information (login=failed) to the URL for the theme to use
        wp_redirect($referrer . '?login=failed'); 
    exit;
    }
}

空のパスワードまたはログインもチェックする必要があります - フロントエンドからのログインフォーム（あなたのカスタムログインフォーム）が空で送信されると、再び標準のwp-login.phpになります。これを防ぐには、次のコードを追加してください。

add_action( 'login_head', 'my_frontend_login_no_pass_no_username' );

function my_frontend_login_no_pass_no_username(){
    $referrer = add_query_arg('login', false, $_SERVER['HTTP_REFERER']);
    if ( (!isset($_REQUEST['user_login']) || ( isset( $_REQUEST['user_login'] ) && trim( $_REQUEST['user_login'] ) == '' ) ) || (!isset($_REQUEST['user_pass']) || ( isset( $_REQUEST['user_pass'] ) && trim( $_REQUEST['user_pass'] ) == '' ) ) ){
        wp_redirect( add_query_arg('login', 'failed', $referrer) ); 
        exit; 
    }   
}

登録が失敗した後でも適切なログインに興味がある場合は、このトピックの私の ブログ投稿をチェックしてください

1
david.binda