Cómo personalizar la pantalla login en WordPress

por | Jun 4, 2021 | Aprender WordPress

Cómo personalizar la pantalla login en WordPress

La página de login en WordPress no solo es nuestra puerta de entrada al área de administración de la web, también es la página de recuperación de la contraseña.

Y la verdad, teniendo en cuenta que siempre hay que pasar por ella su aspecto es de lo más básico que se podría tener.

 

Por qué personalizar el diseño del login de WordPress

 

Quizás si solo gestionas tú tu web no te hayas planteado nunca cambiar el diseño de la página para acceder a la administración de WordPress, pero cada vez es más frecuente que en aquellos WordPress sobre los que trabajan varios empleados como puede ser una web de empresa o tienda online se quiera conseguir un acceso con un aspecto más corporativo.

Pero si además tenemos instalado algún plugin que conlleva gestión de usuarios puede ser que dicho plugin utilice también esa página para el acceso y recuperación de contraseñas de los usuarios no administradores, y darle un diseño acorde con la web sea también una buena opción.

Si has decidido modificar el diseño del login en este artículo te muestro cómo hacerlo a través de código pero también te cuento cómo cambiar el diseño de tu página de acceso con un plugin.

 

Cambiar diseño del login de WordPress con código

 

Modificar el diseño de la página de acceso mediante código no es complicado pero necesitaremos crear un tema hijo y en él, un fichero de estilos css y editar el fichero functions.php para agregar código CSS en WordPress.

Para cambiar el logotipo podemos subir en el tema hijo las imágenes que queramos usar o subirlas a través de los Medios de WordPress y después utilizar la ruta absoluta de la imagen.

El primer paso es crear el archivo de estilos. Podéis crearlo en la raíz de la plantilla y crear una carpeta para tenerlo mejor ordenado. Yo voy a crear el fichero login.css en la raíz.

Antes de editarlo necesitamos cargarlo en la página WP Login para que funcione. Para hacerlo editamos el fichero functions.php de la plantilla. Tenemos que añadir la siguiente función y acción:

 


add_action( 'login_enqueue_scripts', 'my_login_logo' );

function my_login_logo() {

wp_enqueue_style( 'login-custom-style', get_bloginfo('stylesheet_directory'). '/login.css', array('login') );

}

 

Con este código añadimos la hoja de estilos en la cabecera de la página de acceso junto al resto de hojas de estilos.

Ahora podemos modificar todo el aspecto de la página editando el fichero login.css. Vamos a cambiar el logotipo, el fondo y el aspecto del formulario.

Cambiar el logotipo. Para cambiar el logotipo tenemos que añadir el siguiente estilo:

 


.login h1 a {

background-image: url(‘https://dominio.com/wp-content/uploads/2021/03/wp-facil.png’);

background-size: 100%;

width: 310px;

height: 90px;

}

 

Tenemos que cambiar el ancho (width) y alto (height) para ajustar el tamaño de nuestro logotipo. Por defecto el ancho y alto del logotipo de WordPress de 84px.

 
 

Modificar diseño de la página Wp-login
 

 

Cambiar el fondo. Para darle un toque de color vamos a cambiar el color del fondo de la página.


body.login {

background: #e6e7b6;

}

 
 

Modificar diseño de la página Wp-login

 

 

Si quisiéramos colocar una imagen de fondo que ocupara toda la pantalla el código sería:


body.login {

background-image: url(‘https://dominio.com/wp-content/uploads/2021/03/wp-facil.png’);

background-size: cover;

background-position: center;

}

 

Formulario. Ahora vamos modificar el aspecto del formulario y a alinear los enlaces de la parte inferior.


.login form {

border: none;

box-shadow: 1px 1px 13px -2px rgba(0, 0, 0, 0.3);

}

.login form .input, .login input[type=password], .login input[type=text] {

border-radius: 0;

background: #ebebeb;

border: 1px solid #d9d9d9;

}

.wp-core-ui .button-primary {

border-radius: 0;

background: #cc0000;

border-color: #cc0000;

}

.wp-core-ui .button-secondary {

color: #6e6e6e;

}

#nav, #backtoblog {

text-align: center;

}

.login #backtoblog a, .login #nav a {

color: #cc0000;

}

 

Resumiendo los estilos, lo que he hecho ha sido modificar el borde del formulario por una sombra, he quitado el redondeado de los campos y el botón y les he cambiado el fondo y el borde. También he cambiado el color del ojo que hay en el campo de la contraseña.

Por último he centrado y cambiado el color a los enlaces de la parte inferior.

Combinándolo con una imagen de fondo el resultado sería este:

 
 

Modificar diseño de la página Wp-login

 

 

Trabajando un poco los estilos podemos conseguir una página mucho más agradable y adaptada a nuestra web.

Cambiar la ruta de acceso a WordPress. Cambiar la url de acceso a WordPress es una medida de seguridad recomendada para evitar ataques de intento de acceso.

El modo más fácil y recomendado de hacerlo es utilizando un plugin, aunque ahora voy a explicar cómo hacerlo por código. Pero tranquilo, al final también incluyo cómo hacerlo mediante plugin.

Para hacerlo mediante código necesitaremos acceder por FTP a la raíz de nuestra instalación de WordPress.

Antes de realizar cualquier cambio en un fichero, descárgate una copia de seguridad de manera que puedas recuperar lo que tenías en cualquier momento.

El método consiste en editar el fichero wp-login.php. El primer paso es renombrarlo por el nombre de acceso que queramos. Yo lo renombraré como wp-acceso.php.

A continuación abrimos el fichero para editarlo. Tenemos que reemplazar todas las referencias a wp-login.php por wp-acceso.php. Si utilizas algún editor como Sublime Text podrás hacerlo más rápido.

 
 

Modificar diseño de la página Wp-login

 

 

Ahora la ruta de acceso a WordPress será: https://tudominio.com/wp-acceso.php.

 

Cambiar diseño del login de WordPress con un Plugin (3 mejores plugins para cambiar diseño de WP Login)

 

Si lo tuyo no es jugar con el CSS e introducir código en el function.php voy a describirte tres plugins para poder cambiar el diseño del login de WordPress de forma muy sencilla con resultados muy profesionales.

 

1- Admin Custom Login

 

 

Modificar diseño de la página Wp-login

 

Aunque prácticamente los tres plugins que voy a describir tienen las mismas características cada uno de ellos tiene alguna peculiaridad que los otros no tienen.

En este caso yo destacaría que a parte de poder obviamente cambiar el diseño de la página del login este plugin de WordPress te permite añadir tus redes sociales a la página de acceso también te permite añadir Google CAPTCHA.

Este sería el más completo de los tres en cuanto a opciones de personalización que es lo que nos interesa.

 

Modificar diseño de la página Wp-login

 

DISEÑO DEL FONDO

 

Admin Custom Login te permite tres opciones para el fondo de la página, un color, una imagen estática o un carrusel de diapositivas.

Quizás el poder usar un slide de fondo sea una de las características que más llama la atención frente a los otros plugins descritos en este artículo.

Nos permite elegir número de diapositivas y el efecto de transición. No son muchas las opciones pero existe una versión de pago que lo complementa.

 

CONFIGURACIÓN DEL FORMULARIO DE INICIO DE SESIÓN

 

En este caso tenemos tres opciones, la que viene por defecto en WordPress, flotante y flotante con personalización.

Aquí cuidado, si elegimos Flotante con personalización podremos poner el formulario en la posición que queramos a través de configurar el margen izquierdo y derecho y el margen superior e inferior. Pero este formulario no será responsive.

La opción Flotante nos permite ponerlo a la izquierda, centrado o a la derecha de la pantalla.

Y a partir de aquí nos ofrece bastantes aspectos a configurar como son el fondo del formulario, permitiendo no poner, poner un color o poner una imagen, y también determinar la opacidad del fondo elegido,

Así como el color, estilo y grosor del borde, redondear las esquinas y por supuesto el tamaño del formulario y se le pueden añadir estilos para generar una sombra.

En este apartado tendremos que añadir los textos que queramos mostrar en la parte de “Username” y “Password” tanto en la parte superior del campo como dentro del formulario (Placeholder Text). Y por último el texto del botón de Login.

 

CONFIGURACIÓN DE FUENTES

 

En este apartado podemos configurar el color, tamaño y tipo de fuente de todos los textos del formulario y del botón de Login.

También nos permite seleccionar qué textos mostrar.

 

CONFIGURACIÓN DEL LOGO

 

Este plugin te permite añadir tu logo junto al formulario de login. Desde este apartado podremos activar esta función, darle tamaño y ponerle un link.

 

AJUSTES SOCIALES

 

Las opciones de configuración para las redes van desde el tamaño del icono, el tipo de icono, rectangular o circular, color, color del fondo, color cuando pasas el ratón por encima y las redes que queremos mostrar.

Por último este plugin tiene dos opciones más que le diferencia del resto. Por un lado nos permite poner un CAPTCHA en WordPress para mejorar la seguridad de acceso y por otro lado nos permite exportar e importar configuraciones de la página de login.

 

2- Custom Login Page Customizer by Colorlib

 

Modificar diseño de la página Wp-login

 

Este plugin no tiene un área propia de configuración si no que los desarrolladores han utilizado el apartado de personalización visual propio de WordPress. Por lo que para poder cambiar el diseño deberás acceder a Apariencia > Personalizar > Colorlib Login Customizer.

 

Modificar diseño de la página Wp-login

 

A simple vista desde la zona de personalización vemos las dos ventajas que tiene este plugin. Por un lado al utilizar el personalizador visual, ya esto nos permite de manera más fácil ir viendo los cambios realizados y por otro lado nos ofrece una serie de plantillas predefinidas que nos van a permitir diseños elaborados a un solo clic.

El resto de las opciones ya son muy similares al plugin anterior:

 

OPCIONES DE LOGOTIPO

 

Desde aquí elegimos si lo queremos mostrar o no, la URL del enlace y el tamaño. También nos permite añadir un título debajo del logo.

 

OPCIONES DE DISEÑO

 

En este apartado configuramos la estructura de la página. Elegimos una o dos columnas y la posición vertical y horizontal del formulario. Se pueden conseguir diseños bastante elaborados jugando con las combinaciones posibles.

 

OPCIONES GENERALES DEL FORMULARIO

 

A la hora de darle diseño al formulario debemos recurrir a este apartado que nos permite darle tamaño, insertarle una imagen de fondo o un color plano, darle relleno interior para separar el borde del contenido, ponerle borde y redondear las esquinas, añadir sombra, modificar el tamaño y el diseño de los campos del formulario y los textos asociados a esta parte.

Vemos que este apartado es más completo que el del plugin anterior.

Y con las opciones que quedan podemos cambiar textos y darle diseño al botón del login.

 

3- Custom Login Page Customizer

 

Modificar diseño de la página Wp-login

 

Es sin duda el más sencillo de los tres. La página de settings la encontramos en Ajustes > Custom Login.

Con una solo página de configuración, en este caso en inglés, podemos crear nuestra página de login a través de las opciones simples que nos ofrece.

Nos permite añadir un fondo de color o por imagen y darle estilos al formulario. Y aunque visualmente esta área de configuración sea la más básica vamos a poder hacer prácticamente lo mismo que en los otros plugins.

 

Plugin Extra:

 

Una de las funcionalidades que echo en falta en los tres plugins descritos es la posibilidad de cambiar la URL de la página de login del WordPress. Como ya he comentado es una acción de seguridad muy recomendable y que no deberíamos hacerla por código.

Por eso os dejo este último plugin para ello:

 

WPS Hide Login

 

Modificar diseño de la página Wp-login

 

Es un plugin muy sencillo que nos va permitir justo lo que necesitamos.

La nueva URL la vamos a poder poner en Ajustes > Generales del propio WordPress, ni siquiera tiene su propia página de configuración.

Dos opciones, la nueva url y una segunda opción que nos permite redirigir a la página que queramos cuando alguien intenta acceder a la URL antigua de acceso.

Mucho cuidado porque nada más activar el plugin te cambia la url de acceso a /login/ por lo que si no la vas a cambiar en el momento no actives el plugin.

 

Hosting WPFácil