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.
Artículos Relacionados
(2 votos, promedio: 3,50 de 5)
Cargando...
Hola. Muy interesante. He pesonalizado mi WP Login, pero no acabo de dar con la manera de poder cambiar el logo del tick del checkbox “recuérdame” de color azul (defecto) a blanco. ¿Se te ocurre alguna idea?
Hola, en el código CSS, usa !important para las sentencias , por ejemplo: color:white!important;
excelente tutorial, sabes cual es el id de la palabra “registrarse” ? Quiero quitarlo o que redireccione a mi formulario de incripcion, gracias
Hola, busca el archivo wp-login.php, allí verás la construcción de este formulario, veo que hay un filtro que podrías probar llamado ‘register’ en la línea 633 aprox.
Hola Jhon gratis por tus consejos. Estoy utilizando tema Buddyboss y he tenido un problema grande es que me muestra Sign In. — Sign Up , en ingles, ya traduje al español todo el tema y la plataforma, pero no funciona sigue en Ingres, ademas el formulario de registro aparece en español, pero el de ingresar en Ingles!!! Podrías ayudarme?
Olvide mencionar , que el Registro me enlaza con una pagina de registro, mientras que el Sign In me lleva es al wp-login.php gracias!!
Hola, podrías probar usando el plugin Loco Translate, veo que tu theme es un theme de pago, podrías consultar directamente con los desarrolladores ya que tiene soporte.
Hola Jhon, muchas gra lo hice mi que quedó genial. ¿Habría la posibilidad de crear un plugin con todos estos cambios?
Hola Daniel, si, puedes revisar: https://decodecms.com/usar-un-plugin-para-crear-plugins/
Hola Jhon, muchas gracias por tu ayuda. He realizado el tutorial y me ha quedado genial. Soy novato en wordpress y he intentado crear un plugin que haga todo esto en mi web, pero lo activo y no me realiza los cambios. ¿Alguna recomendación o algún sitio para consultar?
Hola, entiendo que a nivel de tu theme si te funciona, podrías igual aislar tu código creando un tema hijo.
Gracias Jonh por la respuesta. Así lo haré 🙂
Excelente tutorial! felicitaciones
Gracias Hernan. Saludos