web-dev-qa-db-fra.com

Personnaliser correctement le formulaire de connexion/inscription

Je travaille sur un formulaire de connexion personnalisé pour WordPress. J'ai remarqué qu'il est assez difficile de réaliser ce que je voulais.

Voici le code HTML du formulaire:

<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>

En raison de l'exigence de style, j'ai mis div entoure les cases input et le bouton d'envoi est une balise d'ancrage. Selon le document , wp_login_form et ses crochets ne pourront pas implémenter cette conception.

J'ai donc suivi les suggestions sur cette question (j'ai demandé) Profil d'utilisateur personnalisé, enregistrement, page de connexion avec thème , et j'ai obtenu un résultat proche de http://digwp.com/2010/12/login-register-password-code/ . Fondamentalement, il vous permet de placer le formulaire de connexion n'importe où, mais vous renvoie quand même à wp-login.php lors de la soumission.

Mais il a un défaut majeur. Lorsque la connexion est incorrecte, il vous renvoie à wp-login.php. Comme cette démo , si vous cliquez sur "Connexion" sans rien entrer, cela vous ramènera au formulaire wp-login.php par défaut.

Je suis en train de mettre le formulaire ci-dessus dans l'une des pages personnalisées. J'avais un filtre relié à template_include et utilisais ce code HTML comme formulaire de connexion. Je voulais seulement changer le style, je ne prévois pas d'ajouter de fonctions.

Que faut-il pour implémenter cette conception de formulaire de connexion? Dois-je commencer à partir de wp-login.php et le changer? Si oui, comment puis-je commencer (en termes de thème et de forme)?

customizationloginwp-login-form
1
He Shiming

Pour rediriger votre formulaire de connexion personnalisé après l'échec de la connexion, essayez le code suivant:

// 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;
    }
}

Vous devrez également rechercher un mot de passe ou un identifiant vide - lorsque le formulaire de connexion de l'interface utilisateur (votre formulaire de connexion personnalisé) est soumis vide, vous vous retrouverez de nouveau sur le fichier wp-login.php standard. Pour éviter cela, ajoutez ce code:

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; 
    }   
}

Si vous souhaitez également vous connecter correctement après l'échec de votre inscription, consultez mon article de blog sur ce sujet.

1
david.binda