Geek the Planet


CSS no image

Published on marzo 3rd, 2009 | by Angelfire

2

How To: Personalizar el login de wordpress

Personalizar la pantalla de login de wordpress (por donde accedemos a la dashboard) es muy fácil, recuerdo que hace ya algún tiempo, creo que para la versión 2.5 estuvo muy de buena cambiarle la apariencia al formulario de login, simplemente cambiando un par de imágenes por algo más personalizado.

En general a esta área no deberiamos prestarle mucha atención, pues en teoria el único visitante de esta zona deberia ser el administrador, sin embargo es tán fácil darle un aspecto más profesional que de seguro la mayoria no se resistiran.

Lo primero que tiene que revisar es que el theme que están usando contenga en fichero functions.php, sino pueden crearlo abriendo el block de notas y guardando un archivo con ese nombre.

Deben agregar el siguiente código:

<?php
function custom_login(){
echo '<link rel="stylesheet" type="text/css" href=" '.  get_bloginfo('template_directory') . /custom-login.css" />';
}
add_action('login_head', 'custon_login');
?>


Debemos crear también un fichero con el nombre custom-login.css, allí es donde pondremos nuestro código css. El fichero debe estar en la carpeta principal del theme.

Un ejemplo de un CSS que han hecho es el siguiente:

/* Custom Login Styles */

html {background:#17272d url(../images/pbd-body.jpg) 0 0 repeat-x;} /* Page background. Can't use the body tag for this! */
h1 a { /* Title image (The "WordPress Logo"). Remember to update the height and width your image's dimensions */
background:url(../images/pbd-title.png) 0 0 no-repeat;
width:415px;
height:70px;
}

body.login {border-top-color:#dff4fc;} /* Top bar background color */
.login p#backtoblog a:link, .login p#backtoblog a:visited {color:#17272d;} /* Link effects in top bar */
.login p#backtoblog a:hover, .login p#backtoblog a:active {color:#17272d;text-decoration:underline;} /* Rollover link effects in top bar */

Este es sólo un ejemplo, lo pueden ver funcionando en http://www.problogdesign.com/wp-admin.

wp-admin wordpress

Esta fue una personalización sencilla, sin embargo se pueden hacer mucho más complejas, como esta:

wp-login wordpress

Ya es cuestion de creatividad de uds ver que cosas interesantes pueden hacer, eso sí, se debe tener algo de manejo de CSS.

Visto en: WordPress: Inicio de sesión 100% personalizado

Tags: , , , ,


About the Author

Systems Engineering, Computer Systems Specialist, Social Engineering Specialist. Social Media Analyzer. Usability and SEO enthusiasm (Este es mi perfil de Twitter...)



2 Responses to How To: Personalizar el login de wordpress

  1. jose luis says:

    hola, muy bueno el tutorial, pero tengo una duda y me gustaría que me ayudaras.

    Bueno sabes que wordpress tiene la ventaja de que los invitados puedan registrarse, no es asi? bueno en los campos que aparece para registrarse se pueden cambiar o agregar más campos???
    se que si, pero me podrías ayudar con algun tutorial???
    Gracias
    espero que me ayudes.

  2. Pordo says:

    Excelente! Aporto un par de modificaciones en el script php porque me daba un error:

    <?php
    function custom_login(){
    echo "”;
    }
    add_action(‘login_head’, ‘custom_login’);
    ?>

    (Las modificaciones son las comillas, y que decia “custon” en vez de custom)

    Saludos!

Back to Top ↑