Entradas

Login personalizados con wordpress

En ocasiones nos gustaría cambiar ciertas cuestiones del estilo en la página de login de nuestro wordpress, por ejemplo a mi se me ocurrió cambiar el logotipo y enlace de la cabecera así como, mandar a llamar a otra hoja de estilo, la librería jQuery y un script.

Login personalizados de wordpress

Login personalizados de wordpress

Primero analizamos el código html con el que vamos a trabajar, el cual es el siguiente:

 

 <div id="login">
    <h1>
        <a href="http://es.wordpress.org/" title="Funciona gracias a WordPress">
            nombre de nuestro sitio
        </a>
    </h1>
    <form ... >
        <!-- contenido del formulario -->
    </form>
</div>

Mi intensión es cambiar tanto la referencia  `href` a la vez que el titulo `title` del enlace a la vez que cambiamos la imagen de fondo y agregamos una hoja de estilo que me modifique el diseño del login, atienda al siguiente código el cual deberá agregarse en las funciones ( function.php ) de nuestra plantilla:

 <?php
/*
Configurando el login
*/
function mi_login_personalizado() {
?>
<!-- Agregando twBootstrap -->
<link rel="stylesheet" type="text/css" media="all" href="<?php 
    echo get_bloginfo( 'template_directory' );
?>css/bootstrap.css" />
<!-- Modificando el estilo del login -->
<style type="text/css">
body.login div#login h1 a {
    height: 63px;
    padding-bottom: 0;
    background-image: url(<?php 
        echo get_bloginfo( 'template_directory' );
    ?>/images/login.jpg);
}
/* aquí modificamos mas estilos, necesarios */
</style>
<!-- Agregando libreria y script restante -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="<?php
    echo get_bloginfo( 'template_directory' );
?>js/login.js"></script>
<?php }
add_action( 'login_enqueue_scripts', 'mi_login_personalizado' );

Lo que acabamos de hacer fue definir la función mi_login_personalizado y la ligamos a la pila de scripts que imprimirá worpdress en la cabecera, de esta forma lo primero que hace la funcion es agregar una hoja de estilo en este caso la hoja de estilo de twitter bootstrap, posteriormente le cambiamos el fondo al enlace que se encuentra dentro del titulo nivel 1, por una imagen con el nombre login.png ubicada en la carpeta images/ de nuestra plantilla, y finalmente cargamos la libreria de jQuery y un script con el nombre login.js ubicado en la carpeta js/ de nuestra plantilla.

La función de js/login.js va hacer la de cambiar tanto la referencia como el titulo del enlace, el script es muy simple y es el siguiente:

 jQuery(function() {
    $('#login').find('h1 a').attr({
        'title' : 'Regresar a mundosica.com',
        'href'  : 'https://mundosica.com'
    });
});

Finalmente accedemos a /wp-login.php y vemos el resultado de nuestros cambios :).

Pueden ver la referencia en la siguiente liga:

http://codex.wordpress.org/Customizing_the_Login_Form