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.
Ver comentarios (20)
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 para las sentencias , por ejemplo: color:white;
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
Hola amigo, que tal? soy nuevo por aquí que grandioso fue encontrar esta información, muchas gracias. Quisiera saber si una vez cambien el logo y los estilos , no se pueden volver a cambiar. Es que puse un logo y me quedo muy pequeño y ahora lo intento cambiar y no me deja, se queda el mismo.
Si ya cambiaste la imagen y se sigue viendo la anterior es posible que sea algo relacionado a la cache de tu navegador, prueba limpiar cache o prueba en incógnito o en otro navegador.
Hola Jhon, espero que te encuentres bien. Como siempre tus guías son las que mejor encuentro y por ello te agradezco. De hecho soy suscriptor tuyo de tu curso, ojalá sacaras uno nuevo.
Lo que quiero preguntar, tras haber visto e implementado este articulo y el video, es si existe una manera, no solo de modificar el look and feel de la página del formulario de registro, (como lo es el caso de este artículo) si no, de re dirigir las páginas wp-admin y wp-login a algo como "dominio.com/slugnuevo", puesto que el ataque de usuarios spam y bots a través de estas dos urls wp-admin y wp-login es constante y agresivo y constantemente me aparecen nuevos usuarios SPAM registrados :(
Yo he hecho una nueva página .../login (claro su slug debería ser algo así como ".../unSLUGbienchingonRAro&dificildeINTUIR" y pues mi idea es que esa nueva página de wp sea donde aterricen las personas que escriban midominio.com/wp-admin o wp-login
Esto que pregunto sería posible?
Bajo qué criterios de búsqueda debería empezar a indagar para lograr este propósito?
Bueno, si es que tú ya tienes un articulo/video con esto, te agradezco si me pudieras indicar cuál es.
Hola, hay plugins de seguridad que te ayudan a ocultar la URL de login, usar un plugin posiblemente sea lo más conveniente en este caso ya que implicaría mucho código, revisa por ejemplo: https://wordpress.org/plugins/wps-hide-login/
Lo he hecho, sin embargo, parece estar lejos de ser lo idóneo, pues, de cualquier manera, si por ejemplo escribo la contraseña o el nombre del usuario en el formulario personalizado de login, este redirecciona al wp-login.php y NO importa que haya quitado u ocultado la opción de registrar nuevo usuario, al parecer los spamers y/o bots terminan registrándose como nuevo usuario "suscriptor". Algo que se evitaría si es que siempre y solamente se puede aterrizar en mi formulario personalizado en la página con mi slug ".../login"
Bueno, de cualquier manera, te agradezco tu respuesta anterior, aunque puedo intuir que no existe esta posibilidad.
Un abrazo y gracias nuevamente y de antemano, por lo queme puedas oientar en esta ocasión.
Hola, para lo que comentas tal vez debas evaluar algún plugin de recaptcha que te proteja esos formularios .