Crear una página de inicio de sesión personalizada de WordPress

Siempre es mejor crear una página de inicio de sesión personalizada en lugar de una aburrida página de inicio de sesión de WordPress. Como máximo, puede añadir su propio logotipo y etiqueta blanca al panel de administración. ¿Pero qué pasa con el acceso al panel de administración? Por lo tanto, si no desea que el acceso del panel de administración a cada usuario conectado, necesita una página de inicio de sesión personalizada. Pero, ¿cómo crear una página de inicio de sesión personalizada para WordPress? Existen dos métodos básicos para crear su propia página de inicio de sesión personalizada, a saber

Crear una página de inicio de sesión personalizada WordPress sin plugin

Puedes crear una página de inicio de sesión personalizada de WordPress usando código. Necesita conocimientos básicos de HTML, PHP, CSS, etc. Realizará cambios en el archivo function.php de su tema. Sin embargo, recuerda que perderás estos cambios si actualizas WordPress.

Las modificaciones básicas para personalizar una página de inicio de sesión

Hay algunas cosas básicas que desea cambiar en su página de inicio de sesión personalizada. Para ello, las principales modificaciones que puede hacer son las siguientes

  • Agregar un fondo personalizado.
  • Añada un logotipo personalizado.
  • Personalice el aspecto del formulario de inicio de sesión.
  • Cambiar la URL del logotipo de inicio de sesión.
  • Eliminar el enlace de la contraseña perdida.
  • Quitar el enlace “Volver a”.
  • Ocultar el mensaje de error de inicio de sesión.
  • Eliminar el batido de la página de inicio de sesión.
  • Cambiar la URL de redireccionamiento.
  • Ponga “Remember Me” en “Remember Me” (Recuérdame) para marcarlo.

¿Cómo procederá usted?

WordPress no carga la hoja de estilo del tema ya que la página de inicio de sesión no forma parte de la configuración del tema de WordPress. Por lo tanto, usted tiene que hacer su propia hoja de estilo para la página de inicio de sesión personalizada. Antes de eso, creará una nueva carpeta en su carpeta temática llamada Login. En este caso, cree un nuevo archivo.txt y guárdelo como custom-login-style.css.

Una vez que tengas un CSS para la página de inicio de sesión, tienes que decirle a WordPress que lo cargue explícitamente. Para ello, pondrás este código en function.php

function my_custom_login() { echo ''; } add_action('login_head', 'my_custom_login');
La página de inicio de sesión personalizada de WordPress resultante tendrá el siguiente aspecto
Ahora, veamos el código CSS en particular para hacer modificaciones específicas
  • Adición de un fondo personalizado
Puede añadir cualquier imagen de fondo a su página de inicio de sesión. Simplemente especifique su nombre correcto en la segunda línea de su página CSS personalizada. El código para establecer el fondo es el siguiente
Body.login { background-image:url("../image/login-page-bg.jpg"); background-repeat:no-repeat; background-attachment:fixed; background-position:center; }
  • Adición de un logotipo personalizado
Este es el paso más importante para marcar la identidad de una marca. Puede agregar su propio logotipo personalizado en lugar del logotipo de WordPress. Guarde la imagen del logotipo personalizado en la carpeta Login/image. Lo hará de la siguiente manera
login h1 a { background-image: url("../image/logo-1.png"); background-size: 75px; }
  • Personalización del formulario de inicio de sesión
Ahora, usted modificará la apariencia del formulario de inicio de sesión para que coincida con la apariencia de su sitio. Puede configurar el relleno, el margen de la forma. También le gustará cambiar el color de fondo, la etiqueta, etc. Para ello, puede consultar el siguiente código de ejemplo
.login form{ box-shadow:none; padding:20px; } #login { background: #FFF; margin: 50px auto; padding: 40px 20px; width: 400px; } .login label { color: #555; font-size: 14px; } .login form .forgetmenot{ float:none; }
Además de modificar la apariencia del botón de envío, puede establecer el margen, el borde, la altura, el ancho y el color del mismo. Por lo tanto, incluya estas líneas en su CSS
#login form p.submit{ margin-top:15px; } .login.wp-core-ui .button-primary { background: #7B417A; border-color: #7B417A; box-shadow: 0 1px 0 #7B417A; color: #FFF; text-shadow: none; float: none; clear: both; display: block; width: 100%; padding: 7px; height: auto; font-size: 15px; }
  • Cambiar la URL del logotipo de inicio de sesión
La URL del Logotipo enlaza a WordPress.org por defecto. Puede redirigirlo a otra URL de la siguiente manera
function custom_login_logo_url() { return get_bloginfo( 'url' ); } add_filter( 'login_headerurl', 'custom_login_logo_url' ); function custom_login_logo_url_title() { return 'Default Site Title'; } add_filter( 'login_headertitle', 'custom_login_logo_url_title' );
  • Eliminar el enlace de contraseña perdida
El enlace de contraseña perdida es útil cuando olvida su contraseña. Pero puede ser usado indebidamente para que usted pueda quitarlo. Usted simplemente agregará este código
p#nav { display: none; }
  • Quitar el enlace “Volver a
El enlace “Volver a…” permite a los usuarios volver a la página principal. Pero si quieres un aspecto limpio y sencillo, puedes quitarlo. Para esto, usted agregará lo siguiente
p#backtoblog { display: none; }
  • Ocultar el mensaje de error de inicio de sesión
A veces los usuarios introducen la información incorrecta por error, lo que resulta en la generación de mensajes de error de inicio de sesión. La razón puede ser cualquiera, ya sea que el nombre de usuario sea incorrecto o que la contraseña sea incorrecta. Este mensaje es útil para los usuarios, pero crea un vacío ya que los hackers pueden descifrar las credenciales de inicio de sesión de los usuarios. Ellos pueden entonces acceder a su sitio. Por lo tanto, es mejor cambiar el mensaje de error en el archivo function.php de la siguiente manera
function custom_login_error_message() { return 'Please enter valid login credentials.'; } add_filter('login_errors', 'custom_login_error_message');
  • Eliminar la vibración de la página de inicio de sesión
El formulario de inicio de sesión tiembla cuando el usuario envía credenciales de inicio de sesión incorrectas. Pero si no te gusta esta función, puedes quitarla.
function custom_login_head() { remove_action('login_head', 'wp_shake_js', 12); } add_action('login_head', 'custom_login_head');
  • Cambiar la URL de redireccionamiento
Si inicias sesión en WordPress, te redirige directamente al panel de control. Puede redirigir a todos a la página de inicio excepto al administrador de la siguiente manera
function custom_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", "custom_login_redirect", 10, 3);
  • Poner “Remember Me” en Checked
La casilla Recordarme no está marcada de forma predeterminada. Puede cambiarlo a estado verificado de la siguiente manera:
add_filter( 'login_footer', 'default_rememberme_checked' ); } add_action( 'init', 'default_checked_remember_me' ); function default_rememberme_checked() { echo ""; }
Se trataba de personalizar una página de inicio de sesión con código. Puedes probar todas las modificaciones al código CSS simple.