- Introducción.
- Lo primero que hay que hacer.
- Añadir un fondo personalizado.
- Reemplazer el logo de WordPress con un logo personalizado.
- Personalizar el aspecto del formulario de login.
- Cambiar la URL a la que apunta el logo.
- Eliminar el enlace de contraseña perdida.
- Eliminar el enlace “Volver a”.
- Ocultar el mensaje de error de inicio de sesión.
- Remover la agitación del formulario de login.
- Cambiar la URL de redireccionamiento.
- Establecer el checkbox de “Recuérdame” a marcado.
- Introducción (Volver al índice General)
En este artículo vamos a personalizar el formulario de inicio de sesión de WordPress. Para conseguirlo, tendremos que realizar algunas modificaciones utilizando código PHP y CSS.El objetivo de estas modificaciones es consegir que el formulario de inicio de sesión de WordPress coincida con la apariencia de nuestro sitio (colores, formatos de las fuentes, logotipos, etc).
Muchos desarrolladores de temas no se molestan en diseñar la página de inicio de sesión y cuando creamos un sitio para un cliente, descuidar el estilo, y lo que es más importante, la marca, la página de inicio de sesión rompe con la experiencia que el usuario tiene con el resto del sitio web, ya que por lo general el aspecto de la página de inicio de sesión no tiene el mismo aspecto que el tema activo.
Si tenemos usuarios conectándose regularmente a nuestro sitio, vale la pena el tiempo y esfuerzo empleado en la personalización de la página de inicio de sesión ya que conseguimos igualar globalmente el aspecto de nuestro sitio.
En las imágenes siguientes se puede observar el cambio entre el formulario por defecto de la página de inicio de sesión y el aspecto final que podemos conseguir aplicando los cambios indicados en este artículo.
Como puede verse en las imágenes más abajo, tras las modificaciones, la página de inicio de sesión es mucho más elaborada que la que WordPress trae por defecto. Para conseguir el aspecto del ejemplo más abajo mostrado, os dejo este enlace con las modificaciones realizadas en el archivo de funciones y en la hoja de estilos que tendremos que modificar y crear, respectivamente: Ejemplo de página de inicio de sesión de WordPress.
Por un lado añadiremos algunas funciones al archivo functions.php y debido a que la página de inicio de sesión no forma parte del tema de WordPress que tengamos activo, no se cargará la hoja de estilos del tema, por lo que tendremos que crear una hoja de estilos para la página de inicio de sesión de WordPress.Con las modificaciones en el archivo functions.php y la hoja de estilos que crearemos conseguiremos los siguientes objetivos:
- Agregar un fondo personalizado.
- Reemplace el logotipo de WordPress con un logotipo personalizado.
- Personalizar el aspecto del formulario de inicio de sesión.
- Cambiar la URL a la que apunta el logotipo de inicio de sesión.
- Eliminar el enlace de contraseña perdida.
- Eliminar el enlace ‘Volver a’.
- Ocultar el mensaje de error de inicio de sesión.
- Remover la agitación del formulario de login cuando se produce un error de credenciales.
- Cambiar la URL de redireccionamiento.
- Establecer el checkbox de “Recuérdame” a marcado.
De todos los objetivos anteriores puede que os interese aplicar todos o solo algunos, eso dependerá de vuestras necesidades. Como veréis, no es obligatorio realizar todos los cambios.
NOTA IMPORTANTE 1: Hacer copia de seguridad del archivo functions.php antes de realizar las modificaciones. En caso de salir algo mal, solo tendremos que restaurar el archivo a su estado original.
NOTA IMPORTANTE 2: Tras realizar las modificaciones, hacer copia de seguridad del archivo functions.php. Cada vez que actualicemos el tema activo, el archivo functions.php será reemplazado por el de la nueva versión, por lo que perderemos los cambios realizados. Tras actualizar el tema sería conveniente editar el nuevo functions.php y copiar de nuevo, desde la copia de seguridad, las funciones. No es aconsejable reemplazar a las bravas el archivo functions.php nuevo por el de backup.
¡NOTA MUY IMPORTANTE!: Existe una forma de mantener los cambios realizados en este artículo sobre el archivo functions.php tras actualizar el tema. Los cambios serán permanentes y no se perderán cada vez que actualicemos el tema activo. Ya no tendremos que preocuparnos de mantener copias de seguridad del mismo.
Consiste en utilizar un tema hijo o child theme. En el artículo publicado en ZeppelinuX, Cómo crear un tema hijo en WordPress se explica como implementarlo. Por lo tanto, os animo a leerlo antes de seguir con este artículo. - Lo primero que hay que hacer (Volver al índice General)
En la carpeta raíz de nuestro sitio web, crearemos una nueva carpeta llamada login. En nuestro ejemplo, hemos creado dicha carpeta colgando de otra a la que hemos llamado comun ya que es dentro de esta carpeta donde colgaremos todo aquello que no se controle desde WordPress. La elección de la ubicación de la carpeta login es libre.
En la carpeta RaizDelSitio/comun/login, crearemos un archivo de texto y le daremos el nombre custom-login-styles.css (podemos darle el nombre que queramos). A continuación, tendremos que decirle a WordPress que cargue este archivo CSS, por lo que tendremos que abrir el archivo functions.php de nuestro tema activo ubicado en RaizDelSitio/wp-content/themes/TemaActivo y añadir el siguiente código:/* Indicar la hoja de estilos para el login */ Function my_custom_login () { echo '<link rel="stylesheet" type="text/css" href="https://www.midominio.com/comun/login/custom-login-styles.css" />'; } add_action('login_head', 'my_custom_login');
Donde www.midominio.com será el host de nuestro sitio web.
- Añadir un fondo personalizado (Volver al índice General)
Para nuestra página de inicio de sesión, vamos a utilizar una imagen de fondo personalizada. Para lograrlo, añadiremos el siguiente código a nuestro archivo CSS custom-login-styles.css:1 2 3 4 5 6 7 8
/* Fondo personalizado con una imagen */ body.login { background-image: url('imagen-fondo.jpg'); background-repeat: no-repeat; background-attachment: fixed; background-position: center 10px; background-size: 600px !important; }
!important es una declaración especial. Hará que determinadas propiedades tomen mayor importancia y por lo tanto no puedan ser sobrescritas por otras.
No olvides reemplazar el nombre de archivo en la línea 3 por el nombre de tú propia imagen de fondo. Si no indicáis ruta a la imágen, tendréis que subirla a la carpeta login. - Reemplazer el logo de WordPress con un logo personalizado (Volver al índice General)
El Codex de WordPress brinda una explicación ordenada de cómo reemplazar el logotipo, pero como ya hemos creado un archivo CSS, lo utilizaremos agregando el siguiente código al archivo custom-login-styles.css:1 2 3 4 5 6
/* Remplazar el logo de WordPress */ .login h1 a { width: auto !important; background-image: url('zeppelinux.png'); background-size: auto !important; }
Al igual que con la imagen de fondo, la imagen del logo la guardaremos en la carpeta login.
No olvides reemplazar el nombre de archivo en la línea 4 por el nombre de tú propio logo. - Personalizar el aspecto del formulario de login (Volver al índice General)
Ahora vamos a modificar el aspecto del formulario de login. Aquí podremos cambiar el CSS y adaptarlo a la apariencia de nuestro sitio en lo relativo a colores, tamaño de fuente, bordes, tipo de fuente, etc.- Diseñaremos las etiquetas para que el texto sea más oscuro y darle un aspecto más redondeado a los cuadros de texto de entrada del formulario:
/* Personalizar texto y cuadros de texto para el nombre de usuario y password */ /* Tamaño y color de la fuente */ .login label { font-size: 13px; color: #117b9c; } /* Modificaciones de los cuadros de texto tipo text y password, color de fondo, color del borde y aspecto redondeado de las esquinas */ .login input[type="text"]{ background-color: #ffffff; border-color:#117b9c; -webkit-border-radius: 4px; } .login input[type="password"]{ background-color: #ffffff; border-color:#117b9c; -webkit-border-radius: 4px; }
- Modificamos el estilo del botón para que sea un tono más claro del azul:
/* Personalizar el botón de acceso */ .login .button-primary { width: 120px; float:right; background-color:#117b9c !important; background: -webkit-gradient(linear, left top, left bottom, from(#117b9c), to(#117b9c)); background: -webkit-linear-gradient(top, #117b9c, #117b9c); background: -moz-linear-gradient(top, #117b9c, #117b9c); background: -ms-linear-gradient(top, #117b9c, #117b9c); background: -o-linear-gradient(top, #117b9c, #117b9c); background-image: -ms-linear-gradient(top, #117b9c 0%, #117b9c 100%); color: #ffffff; -webkit-border-radius: 4px; border: 1px solid #0d9ed9; } .login .button-primary:hover { background-color:#117b9c !important; background: -webkit-gradient(linear, left top, left bottom, from(#117b9c), to(#0d9ed9 )); background: -webkit-linear-gradient(top, #117b9c, #0d9ed9 ); background: -moz-linear-gradient(top, #117b9c, #0d9ed9 ); background: -ms-linear-gradient(top, #117b9c, #0d9ed9 ); background: -o-linear-gradient(top, #117b9c, #0d9ed9 ); background-image: -ms-linear-gradient(top, #0b436e 0%, #0d9ed9 100%); color: #fff; -webkit-border-radius: 4px; border: 1px solid #0d9ed9; } .login .button-primary:active { background-color:#117b9c !important; background: -webkit-gradient(linear, left top, left bottom, from(#0d9ed9), to(#117b9c)); background: -webkit-linear-gradient(top, #0d9ed9, #117b9c); background: -moz-linear-gradient(top, #0d9ed9, #117b9c); background: -ms-linear-gradient(top, #0d9ed9, #117b9c); background: -o-linear-gradient(top, #0d9ed9, #117b9c); background-image: -ms-linear-gradient(top, #0d9ed9 0%, #117b9c 100%); color: #fff; -webkit-border-radius: 4px; border: 1px solid #0d9ed9; }
- Diseñaremos las etiquetas para que el texto sea más oscuro y darle un aspecto más redondeado a los cuadros de texto de entrada del formulario:
- Cambiar la URL a la que apunta el logo (Volver al índice General)
Por defecto, el logo de la página de inicio de sesión enlaza con wordpress.org. Podemos cambiar esto haciendo que apunte a nuestro sitio. Para ello añadiremos el siguiente código a nuestro archivo functions.php:1 2 3 4 5 6 7 8 9 10 11 12
/* Cambiar el enlace hacia el que apunta nuestro logo * en este caso, apuntamos a nuestro propio sitio web */ function my_login_logo_url() { return get_bloginfo( 'url' ); } add_filter( 'login_headerurl', 'my_login_logo_url' ); /* Modificamos el ALT text de nuestro logo */ function my_login_logo_url_title() { return 'El nombre de nuestro sitio e información del mismo'; } add_filter( 'login_headertitle', 'my_login_logo_url_title' );
Remplaza “El nombre de nuestro sitio e información del mismo” en la línea 9 con el nombre y la información de tu sitio. Esto es un simple ALT text para el logo.
- Eliminar el enlace de contraseña perdida (Volver al índice General)
El enlace “¿Olvidaste tu contraseña?” es útil si has perdido tu contraseña, pero si alguien ha hackeado tu correo electrónico, podrían acceder a tu contraseña de WordPress y tomar el control de tu sitio.
Para eliminar el enlace, añadiremos el siguiente código al archivo CSS:/* Eliminar el enlace de contraseña perdida */ p#nav { display: none; }
- Eliminar el enlace “Volver a” (Volver al índice General)
El enlace “Volver a” permite a los usuarios volver a la página de inicio de nuestro sitio. Para conseguir una apariencia limpia y no mostrar el texto bajo el formulario, añadiremos el siguiente código al archivo CSS:/* Eliminar el enlace de Volver a la página de inicio del sitio */ p#backtoblog { display: none; }
- Ocultar el mensaje de error de inicio de sesión (Volver al índice General)
Cuando se ingresa un nombre de usuario o una contraseña incorrecta, la página de inicio de sesión devuelve un mensaje de error que indica los detalles de la equivocación. Si el nombre de usuario es correcto pero la contraseña es incorrecta, dirá que su contraseña fue incorrecta. Si el nombre de usuario es incorrecto, se nos indica «Nombre de usuario no válido». Aunque el mensaje puede ser útil para nosotros, el problema está en que un intruso mal intencionado pueden usar esta información para adivinar nuestras credenciales de acceso y obtener acceso a nuestro sitio web.Para evitar esto añadiremos el siguiente código en el archivo functions.php:
1 2 3 4 5 6
/* Ocultar el mensaje de error por defecto cuando el usuario o contraseña introducidos son incorrectos e introducir un texto personalizado */ function login_error_override() { return 'Datos de inicio de sesión incorrectos.';} add_filter('login_errors', 'login_error_override');
No olvides reemplazar el mensaje de error en la línea 4 por el mensaje de error que queráis mostrar.
- Remover la agitación del formulario de login (Volver al índice General)
Cuando se introduce un nombre de usuario o contraseña incorrecta el formulario de login se agita a modo de alerta visual.Si esta característica la encontráis molesta, se puede eliminar agregando el siguiente código al archivo functions.php:
/* Remover la agitación del formulario de login cuando se introduce un usuario o contraseña incorrecta */ function my_login_head() { remove_action('login_head', 'wp_shake_js', 12); } add_action('login_head', 'my_login_head');
- Cambiar la URL de redireccionamiento (Volver al índice General)
Tras el login del usuario, WordPress, por defecto, redirecciona al usuario hacia el Escritorio (Dashboard). Se puede fácilmente cambiar esto redireccionando a los usuarios a su página de inicio (Homepage).Añadiendo el siguiente código, todos los usuarios que no sean administradores serán automáticamente redirigidos:
/* Función que redirecciona al usuario tras el login hacia su página de inicio en lugar del Escritorio o Dashboard */ function admin_login_redirect( $redirect_to, $request, $user ) { global $user; if( isset( $user->roles ) && is_array( $user->roles ) ) { if( in_array( "administrator", $user->roles ) ) { return $redirect_to; } else { return home_url(); } } else { return $redirect_to; } } add_filter("login_redirect", "admin_login_redirect", 10, 3);
- Establecer el checkbox de “Recuérdame” a marcado (Volver al índice General)
El checkbox “Recuérdame” está desmarcado por defecto. Para dejar este checkbox siempre marcado, añadiremos el siguiente código al archivo functions.php:/* Funciones para marcar por defecto la casilla de verificación de "Recuérdame" que aparece en el cuadro de dialogo para el login */ function login_checked_remember_me() { add_filter( 'login_footer', 'rememberme_checked' ); } add_action( 'init', 'login_checked_remember_me' ); function rememberme_checked() { echo "<script>document.getElementById('rememberme').checked = true;</script>"; }
Enlaces externos (Volver al índice General)
Espero que este artículo os haya sido de utilidad. Si pensáis que podéis colaborar para mejorar este artículo, que hay algo erróneo en él o simplemente deseáis comentarlo, por favor, dejad vuestra opinión más abajo.
Configuración de privacidad y de cookies.
Deja una respuesta