Personalizar el formulario de login de WordPress

[ 14 noviembre 2018 ] [ Actualizado: 28 mayo 2020 ]
[ Autor: Jhon Marreros Guzmán ][ Themes - Avanzado] [ ]

css dashboard

Uno de los formularios que probablemente usarán más los administradores de un sitio es el formulario de login de WordPress, aprende como personalizar este formulario de login y darle un aspecto más profesional acorde con el diseño general de tu web.

Resultado Final

Al final obtendremos el formulario de login personalizado, tal como se muestra en la siguiente imagen:

Generalidades

Existen multitud de plugins que te permiten hacer modificaciones al formulario de login de WordPress, sin embargo en este artículo veremos cómo realizar esto simplemente con estilos CSS y algunos Hooks de WordPress y así evitar el uso de plugins adicionales.

La idea es sobreescribir los estilos que tiene por defecto el formulario, cambiando básicamente la imagen y el color de fondo, para lograr esto necesitaremos cargar un archivo CSS.

Usando un Hook para cargar el archivo CSS

Usaremos el siguiente código para cargar un archivo CSS en la pantalla que muestra el formulario de login de WordPress.

function my_login_stylesheet() {
    wp_enqueue_style( 'custom-login', get_stylesheet_directory_uri() . '/css/style-login.css' );
}
add_action( 'login_enqueue_scripts', 'my_login_stylesheet' );

En el código anterior:

• Usamos el hook login_enqueue_scripts que hace referencia a la función my_login_stylesheet
• Dentro de la función usamos la función de WordPress wp_enqueue_style para agregar un archivo CSS
• Asumimos que existe un archivo style-login.css en la carpeta css del theme que tenemos activo.

Sobreescribiendo los estilos del formulario

Según la documentación podemos sobreescribir estilos CSS teniendo en cuenta las siguientes clases:

body.login {}
body.login div#login {}
body.login div#login h1 {}
body.login div#login h1 a {}
body.login div#login form#loginform {}
body.login div#login form#loginform p {}
body.login div#login form#loginform p label {}
body.login div#login form#loginform input {}
body.login div#login form#loginform input#user_login {}
body.login div#login form#loginform input#user_pass {}
body.login div#login form#loginform p.forgetmenot {}
body.login div#login form#loginform p.forgetmenot input#rememberme {}
body.login div#login form#loginform p.submit {}
body.login div#login form#loginform p.submit input#wp-submit {}
body.login div#login p#nav {}
body.login div#login p#nav a {}
body.login div#login p#backtoblog {}
body.login div#login p#backtoblog a {}

Por lo tanto podemos usar algunas de estas clases para hacer nuestros cambios, al final obtendremos un código CSS como se muestra a continuación:

body.login div#login h1 a {
	width:256px;
	height: 30px;
	background-size: 256px 30px;
    background-image: url("../images/logo.svg");
}

body.login {
	background: #192d38;
}


body.login div#login p#nav a,
body.login div#login p#backtoblog a{
	color:#ccc;
}

body.login div#login p#nav a:hover,
body.login div#login p#backtoblog a:hover{
	color:white;
}

En el código anterior

• Estamos cambiando el logo, asumimos que hay un archivo logo.svg dentro de la carpeta images
• El logo debe tener unas determinadas dimensiones, en nuestro ejemplo 256 x 30
• Cambiamos el color de fondo, el color que usaremos será #192d38
• La última parte del código cambia el color de los enlaces inferiores

Cambiando la url del logo

Finalmente podemos cambiar la url a la que enlaza el logo, ya que por defecto nos lleva al sitio oficial de WordPress, podemos cambiar esto para que nos lleve a la url de nuestro sitio web. También cambiaremos el atributo title que se muestra cuando colocamos el mouse sobre la imagen.

function my_login_logo_url() {
    return home_url();
}
add_filter( 'login_headerurl', 'my_login_logo_url' );

function my_login_logo_url_title() {
    return 'Sitio Web DECODECMS';
}
add_filter( 'login_headertext', 'my_login_logo_url_title' );

Conclusión

Como hemos visto, puedes hacer personalizaciones al formulario de login de WordPress, usando código CSS y algunos Hooks, de manera simple y evitando el uso de plugins adicionales.

¿Aún con dudas?, en el siguiente video se detallan los puntos anteriores.

Valora este artículo : (3 votos, promedio: 4,00 de 5)

Cargando...