¿Cómo personalizar las páginas de inicio de sesión y registro en WordPress?

Question

¿Cómo personalizar las páginas de inicio de sesión y registro en WordPress?

28 ene 2011, 04:09:40

Vistas: 15.5K

Votos: 3

Mi pregunta es cómo puedo personalizar la página de inicio de sesión y registro predeterminada de WordPress sin editar los archivos core de WP. Estoy pensando más en términos de código para el functions.php.

¿Alguien puede ayudarme encontrando un tutorial o algo similar? Recuerda, no quiero editar los archivos core de WP. ¡Gracias!

Jared

3.84K

desarrollo de temas admin iniciar sesión

Todas las respuestas a la pregunta

Puedes usar la función add_action para añadir funcionalidad al proceso de inicio de sesión sin necesidad de editar el núcleo de WordPress.

Aquí tienes un tutorial que muestra cómo crear tu propio inicio de sesión personalizado en WordPress: http://www.problogdesign.com/wordpress/custom-wordpress-login-screen/

También existen plugins que pueden crear inicios de sesión personalizados en WordPress, pero considero que no alcanzan el mismo nivel de personalización que este método.

Evan Yeung

3.52K

28 ene 2011 06:19:06

Buenas respuestas aquí: ¿Cómo cambio el logo en la página de inicio de sesión?

markratledge

8.74K

28 ene 2011 06:19:03

Creo que este código es mejor:

function login() {

    if( is_user_logged_in() ) {

        echo '¡Ya has iniciado sesión! ¿Quizás quieras <a href="' . wp_logout_url( home_url() ) . '">cerrar sesión</a>?';

    } else { ?>

        <div id="login">

            <form method="post" action="<?php echo wp_login_url(); ?>" id="loginform" name="loginform">
                <p>
                    <label>Nombre de usuario<br>
                    <input type="text" tabindex="10" size="20" value="" class="input" id="user_login" name="log"></label>
                </p>
                <p>
                    <label>Contraseña<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"> Recordarme</label></p>
                <p class="submit">
                    <input type="submit" tabindex="100" value="Iniciar sesión" 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="Crear nueva contraseña" href="<?php echo wp_lostpassword_url() ?>">¿Olvidaste tu contraseña?</a></p>

        </div>

    <?php }

}

Y ahora añade este código a header.php en tu plantilla:

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

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

} else {

    // añade más o muestra la página de inicio 

}

Entonces verás una pantalla de inicio de sesión mejorada.

User

100

6 mar 2011 12:11:40

Aquí hay un tutorial completo publicado recientemente por unos desarrolladores de WP muy conocedores: http://digwp.com/2010/12/login-register-password-code/

Demo: http://digwp.com/custom-login-demo/

Actualización

Uno de los desarrolladores principales de WP acaba de publicar este tutorial sobre cómo personalizar el logo de tu pantalla de inicio de sesión:

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

joelhaus

264

28 ene 2011 08:38:45

Comentarios

Aunque vale la pena señalar las preocupaciones de XSS planteadas por uno de los usuarios que comentó en ese artículo (que aún no han sido abordadas).

t31os

28 ene 2011 12:50:26

Thompson 92 · Accepted Answer · 2011-01-28T06:40:17Z

Aquí está mi functions.php del que puedes copiar las funciones. Admito que mi CSS está hecho rápidamente y podría estar más ordenado. Estoy en una fase de lanzamiento acelerado ahora mismo. Pero puedes usar las funciones. La primera añade CSS al encabezado de la página de inicio de sesión para sobrescribir los estilos. Las dos funciones siguientes cambian la URL y el atributo de título del enlace del logo.

// LOGIN - estilo personalizado  
function my_login_style() {  
    echo '  
    #login {  
        background:none;  
        border:0;  
        box-shadow:0;  
        -moz-box-shadow: none; /* Firefox */  
        -webkit-box-shadow: none; /* Safari, Chrome */  
        box-shadow: none; /* CSS3 */  
        }  
    #nav {  
        background:none;  
        }  
    form {  
        -moz-box-shadow: 0 4px 18px #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;
        }

    #login form#loginform #user_login, #login form#loginform #user_email, #login form#registerform #user_login, #login form#registerform #user_email, #login form#lostpasswordform #user_login, #login form#loginform #user_pass, #login form#loginform #openid_identifier   
        {  
        border: 1px solid #aaa;  
        }  

    #login form .submit input {  
        background: #2bab44 url("http://www.domain.com/site/themes/mytheme/img/login-button-gradient8.png") left top repeat-x !important;   
        border: 1px solid #008717 !important;  
        text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);  
        padding: 5px 20px;  
        }  

    #login form .submit input:hover {   
        background: url("http://www.my.com/site/themes/my/img/login-button-gradient7.png") left -24px repeat-x !important;   
        border: 1px solid #2b8c35 !important;  
        text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);  
        }  

    #login form .submit input:active {
        padding: 5px 20px; /*requerido aquí por alguna razón */
        }

    body.login p#nav a {
        color: #888 !important;
        text-shadow:none;
        font-weight:normal;
        letter-spacing:0;
        }
    body.login p#nav a:hover {
        color: #88eb86 !important;
        text-decoration: underline;
        }   

    .login #backtoblog a {
        display:none;
        }

    #login #login_error {
        font-size: 13px;
        font-weight: normal;
        text-shadow: none;
        margin: -11px auto 0;
        padding: 12px;
        width: 275px;
        background: #ffb5b4;
        border: 1px solid #db5858;
        -moz-border-radius: 10px !important;
        border-radius: 5px;
        }   

    #login .message {
        font-weight: normal;
        color: #bbb;
        text-shadow: none;
        }
    #user_pass, #user_login, #user_email {
        background: #fff;   
        }   
    ';
    }
    add_action('login_head', 'my_login_style');

//// LOGIN - función para cambiar el enlace del logo en la página de inicio de sesión  
function my_login_custom_site_url($url) {  
    return get_bloginfo('siteurl'); //devuelve la URL actual del blog de WordPress  
    }  
    add_filter("login_headerurl","my_login_custom_site_url");  

//// LOGIN - función para cambiar el título del enlace del logo en la página de inicio de sesión (elimina el eslogan de WordPress)  
function my_login_header_title($message) {  
    return False; /*devuelve la descripción del blog actual */  
    }  
    add_filter("login_headertitle","my_login_header_title");