web-dev-qa-db-fra.com

Comment personnaliser les pages de connexion/enregistrement de wordpress?

Ma question est de savoir comment personnaliser la page de connexion et d'inscription de WordPress par défaut sans modifier les fichiers de base de WP. Je pense plus dans le sens d'un code functions.php.

Quelqu'un peut-il m'aider en trouvant un tutoriel ou quelque chose? N'oubliez pas que je ne souhaite pas modifier les fichiers de base WP. Merci!

theme-developmentadminlogin
3
Jared

Voici mon functions.php que vous pouvez copier les fonctions. Mon CSS est certes jeté ensemble rapidement et pourrait être plus ordonné. Je suis dans une phase de lancement précipitée en ce moment. Mais vous pouvez utiliser les fonctions. Le premier ajoute CSS à votre tête de la page de connexion pour remplacer les styles. Les deux dernières fonctions changent les attributs url et title du lien du logo.

 // LOGIN - style personnalisé 
 Function my_login_style () {
 Echo '
 #Login {
 Background: none; 
 frontière: 0; 
 box-shadow: 0; 
 -moz-box-shadow: néant;/* Firefox */
 -Webkit-box-shadow: aucun;/* Safari, Chrome */
 Boîte-ombre: aucune;/* CSS3 */
} 
 #Nav {
 Arrière-plan: aucun; 
} 
 forme {
 -moz-box-shadow: 0 4 pixels 18 pixels # 0b0b0b; 
 -webkit-box-shadow: 0 4px 18px # 0b0b0b; 
 box-shadow: 0 4px 18px # 0b0b0b; 
} 
 
 #. login form # loginform, #login form # registerform, #login form # lostpasswordform {
 border: 1px solid #fff; 
} 
 
 #login h1 {
 margin-bottom: 10px; 
} 
 
 #login h1 a {
 width: 300px; 
 height: 85px; [. .____.] margin: 0 auto 31px; 
} 
 
 # formulaire #login # loginform # journal_utilisateur, formulaire #login # loginform # utilisateur_email, # formulaire informatif # registerform # utilisateur_login, #login form # registerform #user_email, #login form # lostpasswordform # user_login, #login form # loginform #user_pass, #login form # loginform #openid_identifier 
 {
 frontière: 1px solide #aaa; 
} 
 
 # formulaire de connexion .submit input {
 background: # 2bab44 url ​​("zhttp: //www.domain.com/site/themes/mytheme /img/login-button-gradient8.png ") gauche en haut répéter-x! important; 
 border: 1px solid # 008717! important; 
 texte-ombre: -1px -1px 0 rgba (0, 0, 0, 0,3); 
 remplissage: 5px 20px; 
} 
 
 # formulaire de connexion .submit input: hover {
 background: url ("http://www.my.com/site/themes/my /img/login-button-gradient7.png ") à gauche -24px repeat-x! important; 
 border: 1px solid # 2b8c35! important; 
 texte-ombre: -1px -1px 0 rgba (0, 0, 0, 0,3); 
} 
 
 # formulaire de connexion .submit input: active {
 padding: 5px 20px;/* demande ici pour une raison quelconque */
} 
 
 body.login p # nav a {
 color: # 888! important; 
 text-shadow: none; 
 taille de la police: normal; 
 espacement des lettres: 0; 
} 
 body.login p # nav a: hover {
 couleur: # 88eb86! important; 
 texte-décoration: souligné; 
} 
 
 .login #backtoblog a {
 display : none; 
} 
 
 #login #login_error {
 taille de police: 13px; 
 taille de police: normal; 
 ombre du texte: aucune; 
 marge: -11px auto 0; 
 remplissage: 12px; 
 largeur: 275px; 
 arrière-plan: # ffb5b4; 
 border: 1px solide # db5858; 
 -moz-border-radius: 10px! important; 
 border-radius: 5px; 
} 
 
 #login .message {
 font-weight: normal; 
 couleur: #bbb; 
 text-shadow: none; 
} 
 #user_pass, #user_login, #user_email {
 background: #fff; 
} 
 '; 
} 
 add_action (' login_head ',' my_login_style '); 
 
 //// CONNEXION - fonction pour changer le lien du logo sur la page de connexion 
 function my_login_custom_site_url ($ url) {
 return get_bloginfo ('siteurl'); // retourne l'url actuel du blog wp 
} 
 add_filter ("login_headerurl", "my_login_custom_site_url"); 
 
 //// LOGIN - fonction permettant de changer le titre du lien du logo sur la page de connexion (supprimer le slogan de WordPress) 
 Function my_login_header_title ($ message) {
 Return Faux;/* retourne la description du blog actuel */
} 
 add_filter ("login_headertitle", "my_login_header_title");
5
Thompson

Vous pouvez utiliser la fonction add_action pour ajouter des éléments à la fonction de connexion sans avoir à modifier le noyau WP.

Voici un tutoriel pour vous montrer comment créer votre login wordpress personnalisé: http://www.problogdesign.com/wordpress/custom-wordpress-login-screen/

Il existe également des plug-ins capables de créer des logins WordPress personnalisés, mais j’ai le sentiment qu’ils ne peuvent pas atteindre le même niveau de personnalisation que celui-ci.

3
Evan Yeung

Bonnes réponses ici: Comment changer le logo sur la page de connexion?

2
markratledge

Je pense que ce code est meilleur:

function login() {

    if( is_user_logged_in() ) {

        echo 'Bạn đã đăng nhập rồi ! có thể bạn muốn <a href="' . wp_logout_url( home_url() ) . '">đăng xuất</a> ?';

    } else { ?>

        <div id="login">

            <form method="post" action="<?php echo wp_login_url(); ?>" id="loginform" name="loginform">
                <p>
                    <label>Tên đăng nhập<br>
                    <input type="text" tabindex="10" size="20" value="" class="input" id="user_login" name="log"></label>
                </p>
                <p>
                    <label>Mật khẩu<br>
                    <input type="password" tabindex="20" size="20" value="" class="input" id="user_pass" name="pwd"></label>
                </p>
                <p class="forgetmenot"><label><input type="checkbox" tabindex="90" value="forever" id="rememberme" name="rememberme"> Tự động đăng nhập lần sau</label></p>
                <p class="submit">
                    <input type="submit" tabindex="100" value="Đăng nhập" class="button-primary" id="wp-submit" name="wp-submit">
                    <input type="hidden" value="<?php bloginfo( 'url' )?>" name="redirect_to">
                    <input type="hidden" value="1" name="testcookie">
                </p>
            </form>

            <p id="nav"><?php wp_register( '', '' ); ?> | <a title="Tạo mật khẩu mới" href="<?php echo wp_lostpassword_url() ?>">Bạn quên mật khẩu?</a></p>

        </div>

    <?php }

}

Et maintenant, ajoutez ce code à header.php dans votre modèle:

if( $_GET['msv'] == 'login' ){

    login();
    get_sidebar();
    get_footer();

} else {

    // add more or display home page 

}

Ensuite, vous verrez le meilleur écran de connexion.

2
user3750

Voici un didacticiel approfondi publié récemment par des développeurs très bien informés WP: http://digwp.com/2010/12/login-register-password-code/

Démo: http://digwp.com/custom-login-demo/

Mettre à jour

L'un des _ WP devs principaux vient de publier ce tutoriel sur la personnalisation du logo de votre écran de connexion:

http://markjaquith.wordpress.com/2011/02/01/customized-wordpress-login-screen/

1
joelhaus