Cómo personalizar la página de inicio de sesión de WordPress

Incluso después de haber trabajado durante mucho tiempo con WordPress, muchas personas todavía se sorprenden al descubrir que su sitio trasero es tan personalizable como el frente y que ninguna de las cosas que se consideran. Abordé esto un poco para personalizar el panel de WordPress y personalizar el editor de WordPress. Hoy queremos continuar con este tema, utilizando otra página interna con la que los usuarios interactúan diariamente: la página de conexión. Al igual que otras partes de WordPress, podemos personalizar completamente la página de inicio de sesión. En primer lugar, analizaremos algunas buenas razones para hacer esto, luego analizaremos los fragmentos de código para personalizar manualmente la página de conexión y, finalmente, una serie de opciones de complementos que nos permiten hacer lo mismo.
¿Estás listo? Entonces comencemos. ¿Por qué personalizar la página de inicio de sesión de WordPress? Desafortunadamente, WordPress no presenta opciones nativas para hacer cambios en su página de autenticación. Sin embargo, hay buenas razones para agregarlos, ya que una página de autenticación de WordPress personalizada ofrece más beneficios:
Branding constante: ¿Qué escenario es mejor: ¿muestra a los usuarios la página de autenticación de WordPress predeterminada o una página personalizada que coincida con el esquema de color, la impresión y tiene su logotipo? Fácil de responder, ¿no? Especialmente si construye sitios de WordPress para otras personas, definitivamente apreciarán esa marca adicional que trae una página de autenticación personalizada.
Experiencia mejorada del usuario: la personalización no solo se refiere al diseño, sino que también puede incluir cambios de funcionalidad, como la redirección automática después de la conexión. Esto da como resultado una mejor guía del usuario y les ayuda a trasladar a los visitantes a las páginas de destino, la página de inicio, los foros o donde prefiera tenerlos. Mejoró: además, puede agregar elementos a la página de conexión para proporcionar un valor adicional a visitantes. Piense en navegar enlaces, íconos sociales o lo que desee.
Mejor seguridad, por fin, crear una página de autenticación de WordPress personalizada puede aumentar la seguridad de su sitio, por ejemplo, al trasladar la página a una dirección personalizada, puede dificultar la búsqueda de scripts y piratas informáticos automáticos. Además, puede agregar Captcha y otras medidas de seguridad.
Como puede ver, hay muchas buenas razones para personalizar la página de autenticación de WordPress. En el siguiente paso, veremos cómo podemos hacer estos cambios.
La personalización manual de la página de inicio de sesión de WordPress, como de costumbre, puede cambiar mucho en WordPress trabajando con código y archivos. La página de autenticación no es una excepción. La mayor parte del código a continuación va a las funciones.php del tema para hacer cambios en la página. Si no, lo capacitaremos para que haga lo contrario. Cree una hoja de estilo personalizada para la página de conexión como primera medida, hablaremos sobre cómo cambiar el diseño de la página. Esto se puede hacer a través de CSS tal como lo haría para el resto de su sitio dentro del tema Style.css. Sin embargo, para hacer las cosas un poco más organizadas, para crear una hoja de estilo personalizada para la página de conexión. Para esto, vaya a la carpeta con temas (niño) (bajo WP-Account/themes/YourTheme) a través de FTP o cualquier interfaz sobre quién Úselo para acceder a su servidor. Aquí, configure un nuevo directorio llamado Login. Aquí guardaremos todos los estilos e imágenes que podríamos usar para nuestra página. Luego cree un archivo de texto vacío y llámelo inicio de sesión-stys.css (de hecho, el nombre no es demasiado importante ya que usa el que está en el código a continuación). Cargue este archivo en el nuevo inicio de sesión. Después de eso, agregue el siguiente código a Functions.php para WordPress para cargar su nueva hoja.
Función custom_login_stylesheet () {
wp_enqueue_style (‘Custom-Login’, get_stylesheet_directory_uri (). ‘/login/login-styles.css’);
}
add_action (‘login_enqueue_scripts’, ‘custom_login_stylesheet’); Ahora, cualquier CSS que agregue a esta hoja de estilo se cargará para la página de conexión. Esto le permite cambiar cualquier parte del diseño como desee. Tenga en cuenta, sin embargo, que WordPress ya tiene archivos para esta página. Como resultado, es posible que deba usar operadores CSS muy específicos para anular los estilos existentes. Afortunadamente, WordPress Codex ofrece una lista de estos: Body.login {}
Body.login div#login {}
Body.login div#login h1 {}
Body.login div#login h1 a {}
Body.login div#Formulario de inicio de sesión#Loginform {}
Body.login div#Formulario de inicio de sesión#Loginform P {}
Body.login div#Formulario de inicio de sesión#Loginform P Label {}
Body.login div#Formulario de inicio de sesión#Input {}
Body.login Div#Formulario de inicio de sesión#Introducción de registro#User_login {}
Body.login Div#Formulario de inicio de sesión#Introducción de registro#user_pass {}
Body.login div#Formulario de inicio de sesión#Loginform P. Forgetminot {}
Body.login div#Formulario de inicio de sesión#Loginform P. ForgetMenot Entrada#RememberMe {}
Body.login div#Formulario de inicio de sesión#Loginform P.Submit {}
Body.login div#Formulario de inicio de sesión#Loginform P.Submit Entrada#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 ejemplo, para cambiar el botón de entrada en la página de autenticación, puede usar el siguiente código:
Body.login Div#Formulario de inicio de sesión#Introducción de registro#WP-Submit {
Color de fondo: naranja;
Chenar: medio Ninguno;
Ray-Limit: 0;
La caja de sombras: ninguno;
Relleno: 0 36px 2px;
Shadow de texto: ninguno;
} El resultado se ve así:
Por supuesto, el operador anterior es un ejemplo extremo extremo. La mayoría de las veces, podrá lograr lo mismo con un código menos dirigido. También puede cambiar cualquier otra cosa en la página, desde el fondo hasta la fuente y el diseño. Con poco conocimiento de CSS, no hay límites para su imaginación. Cambie la página de inicio de sesión de WordPress Una buena idea para que la marca de su sitio sea usar su propio logotipo en la página de inicio de sesión (tan hermoso como el logotipo predeterminado de WordPress). Esto se hace simplemente cambiando la imagen de fondo del enlace H1 en la parte superior de la página de conexión. Puede hacerlo de dos maneras. El primero es usar la hoja de estilo personalizada que acabamos de crear de la siguiente manera: Body.login div#login h1 a {
Imagen de fondo: url (“yourlogo.png”);
} Si ahora coloca un archivo de logotipo con su nombre de suinogo.png en su carpeta de inicio de sesión de directorio, comenzará a aparecer en su página. Si no desea crear la hoja de estilo personalizada, puede cambiar el logotipo directamente a través de las funciones. php: custom_login_logo () {?>

#login h1 a, .login h1 a {
Imagen de fondo: URL (<<
}

<? Php}
add_action ('login_enqueue_scripts', 'custom_login_logo'); Personalmente, prefiero seguir el camino de la hoja de estilo, pero depende de usted.
Después de eso, todo lo que queda es cambiar la URL a la que indican su logotipo y su título (este es el texto que aparece cuando alguien pasa con el mouse sobre el logotipo). Después de todo, ¿no tiene más sentido conectarse a su propio sitio web en lugar de la página de inicio de WordPress? Así es como creemos. Para cambiar la URL y pasar con el mouse, ingrese esto en las funciones de funciones.php: my_login_logo_url () {return home_url ();
}
add_filter ('login_headurrl', 'my_login_logo_url');
función my_login_logo_url_title () {
Devuelve el "nombre e información de su sitio";
}
add_filter ('login_headertitle', 'my_login_logo_url_title'); Recuerde cambiar el "nombre e información de su sitio" Con lo que tenga sentido que cambie el enlace del registro a una URL personalizada y no en su página inicial, use este código:
la función my_login_logo_url () {
Devuelve "http://yourcustomurl.com";
}
add_filter ('login_headurrl', 'my_login_logo_url'); De acuerdo, es suficiente para esta parte de la página de conexión, pasemos a otras cosas. Marque la casilla Recuérdame de forma predeterminada Si los usuarios marcarán la casilla de verificación Renuncerme antes de la autenticación, permanecerán conectados a su sitio durante 14 días. De lo contrario, se desconectan automáticamente después de dos días o cuando cierran su navegador. Por defecto, este cuadro está descargado, sin embargo, puede cambiarlo fácilmente con el siguiente código.
Login_cheched_remember_me function () {
add_filter ('login_footer', 'records_checked');
}
add_action ('init', 'login_checked_remember_me');
RememberMe_Checked Function () {
echo " document.getElementById (‘recordatorio’). checked = true; “;} Como de costumbre, debe ingresar a Functions.php para que funcione. Cambie el mensaje de conexión para conectar cualquier usuario que ingrese credenciales no válidas en el formulario de conexión recibe un mensaje de error automático, que le indica qué lado está mal, nombre de usuario o contraseña. Desafortunadamente, esto puede hacer que su sitio sea menos seguro, porque también ofrece hackers sobre cómo acceder a su sitio. Por lo tanto, algunas personas aconsejan cambiar el mensaje.
Afortunadamente, esto es bastante fácil. Para crear un mensaje personalizado, solo ingrese el siguiente código en funciones.php: custom_error_message () function ()
{
Regrese “Sí, no fue realmente correcto. Por favor intente nuevamente”;
}
add_filter (‘login_errors’, ‘custom_login_error_message’); De ahora en adelante, cualquiera olvida su contraseña o nombre de usuario verá exactamente ese mensaje.
Los usuarios de redirigir después de iniciar sesión generalmente, cualquiera se conecta a su sitio de WordPress irá automáticamente al tablero. Sin embargo, puede tener más sentido enviarlos a una página de reunión personalizada, un área de membresía o en otro lugar. Nada más fácil que eso: function custom_login_redirect ($ redirect_to, $ request, $ user) {

if (isset ($ user-> roles) && is_array ($ user-> roles)) {
if (in_array (‘administrador’, $ user-> roles)) {
devuelve admin_url ();
} de lo contrario {
regresar home_url ();

}
} de lo contrario {
regresar home_url ();
}
}
add_filter (‘login_redirect’, ‘custom_login_redirect’, 10, 3); Con el código anterior, nadie es el administrador se redirige automáticamente a la página de inicio de su sitio. Solicitar, $ user) {if (isset ($ user-> roles) && is_array ($ user-> roles)) {
if (in_array (‘administrador’, $ user-> roles)) {
devuelve admin_url ();
} de lo contrario {
Home_url () return. “/Miembros”;
}
} de lo contrario {
Home_url () return. “/Miembros”;
}
}
add_filter (‘login_redirect’, ‘my_loginredirect’, 10, 3); De esta manera, cualquier usuario sin derechos de administrador se enviará a su sitio web.com/Members. Cambiar según sea necesario. Eliminar los enlaces de la página de autenticación tiene dos enlaces. Uno es “¿Perdiste tu contraseña?” Enlace. Permite a los usuarios restablecer su contraseña si la perdieron. El otro es el enlace “Volver a” que lleva a los usuarios a la página inicial. Hay buenas razones para querer deshacerse de cualquiera de ellos, especialmente para obtener un diseño más limpio. Puede hacer esto ingresando lo siguiente en la hoja de estilo de la página de autenticación: P#Nav {
Pantalla: ninguno;
}
P#BacktoBlog {
Pantalla: ninguno;
} La primera pieza de código elimina el enlace de recuperación de contraseña, el segundo enviar a su página de inicio. Solo los saca fuera de la vista y ni siquiera de la página, pero esto es suficiente para nuestros propósitos. Agregue enlaces adicionales a la página inicial, sin embargo, no solo es posible eliminar los enlaces existentes, sino también agregar otros adicionales. Esto puede tener sentido si desea dar a los visitantes un atajo al blog, documentación, perfiles sociales u otras direcciones. Puede agregarlos a la parte inferior del formulario de autenticación de la siguiente manera: custom_loginfooter () {?>
Para obtener los últimos consejos y trucos, visite nuestro blog!
<? Php}
add_action ('login_footer', 'custom_loginfooter'); Por supuesto, puede cambiar la dirección y el texto del enlace en lo que tiene sentido para su propio sitio. El enlace de clase de clase personalizado también le permite atacar el enlace de acuerdo con su deseo. Esto puede ser útil, por ejemplo, para agregar iconos sociales. Cree una página de inicio de sesión de WordPress hasta ahora hasta ahora he aprendido muchas maneras de cambiar el inicio de sesión existente. Sin embargo, también es posible crear una página completamente nueva. Desafortunadamente, las instrucciones sobre cómo hacer esto son poco fuera del alcance de este artículo. Sin embargo, si está interesado, los siguientes recursos lo guiarán en la dirección correcta.
Crea tu propia página de inicio de sesión de WordPress
Cómo construir una página de autenticación de WordPress totalmente personalizada
Crear una página de conexión personalizada de WordPress a través del complemento, por supuesto, WordPress no sería WordPress si no pudiera realizar todos estos cambios y muchos más a través de un complemento. De hecho, los usuarios tienen una amplia gama de soluciones de complementos para elegir y sobre algunas de ellas, hablaremos ahora. Autenticación personalizada Nuestro primer complemento se preocupa principalmente por el diseño de la página de conexión. Le permite cambiar el color de fondo, la imagen de fondo y el logotipo haciendo clic en un botón. Opcionalmente, también puede agregar CSS, HTML y JavaScript personalizados y puede cambiar otras configuraciones, como el intervalo de tiempo hasta que expire una fecha de conexión. Si esto no es suficiente, también hay una serie de extensiones pagas que le permiten cambiar la URL de conexión, agregar redirecciones y más. Página página página personalizada
Vale la pena mencionar el siguiente complemento, porque agrega opciones de personalización para la página de conexión a WordPress personalizado. Esto significa que puede obtener una vista previa de cualquier cambio que realice antes de enviar en su sitio. Como se esperaba, la personalización de la página de conexión le permite cambiar su logotipo, fondo y formulario de página, así como todos los demás estilos. Sin embargo, las opciones generales se limitan al diseño, no puede agregar ninguna funcionalidad, como redirecciones u otras cosas similares. Personalizar la página de inicio de sesión de WordPress
Personalizar la página de conexión de WordPress ofrece funciones de estilo similares que sus predecesores, sin embargo, viene con una característica especial.El complemento le permite agregar una exposición de diapositivas al fondo de la mochila.Esto significa que los usuarios pueden elegir más imágenes de fondo y pueden mostrarlas con diferentes efectos de presentación de diapositivas.Además, también puede agregar iconos sociales a la página, así como integrar Google para una impresión personalizada.Entonces, si está buscando un dinamismo adicional en su página de inicio de sesión, definitivamente vale la pena verificar este complemento.Logotipo del logotipo de Uber
Si todo lo que desea es cambiar el logotipo en su página de inicio de sesión, este es el complemento para usted. El logotipo de Uber Login es una solución fácil para marcar la página de conexión con su propio logotipo, pero no ofrece otros estilos u opciones. Cambie el nombre de wp-login.php Como probablemente pueda adivinar, este complemento le permite cambiar la página de inicio de sesión de WordPress. Se puede usar para que su sitio sea más consistente o para agregar un nivel adicional de seguridad. Simplemente ingrese la dirección que desea usar, guardar y finalizar. Fácil de sacudir. Redirección de la conexión de Peter Otro complemento para un solo propósito. Esta vez, uno le ofrece opciones para agregar redireccionamientos personalizados. De esta manera, puede enviar visitantes a su página de inicio o cualquier otra página que desee, incluso para cada usuario. Como puede ver, hay muchas soluciones de complementos. Si esto no ha sido suficiente, puede encontrar más opciones para personalizar el sitio de WordPress (incluidos varios complementos pagados) en este artículo. ¿Estás listo para una página de inicio de sesión de WordPress personalizada?