Personalizar el login de WordPress (login con email, texto, imagen, url de imagen, alt de la imagen)
Hace casi un mes desde la última publicación, por lo que toca un post largo con varias funciones.
Identificarse con nombre o email
La primera hace referencia al hook 'wp_authenticate'
y permite identificarse en tu WordPress con nombre o email sólo incluyendo este snippet en el archivo functions.php de tu tema o en el de tu Child-Theme:
function login_with_email_address( &$username ) {
$user = get_user_by('email', $username);
if ( ! empty($user->user_login) ) {
$username = $user->user_login;
}
return $username;
}
Notad el ampersand de la variable $username
. Es una variable pasada por referencia Esto, en un hosting normal, puede no arrojar error si no añadimos el ampersand pero en hostings más exigentes como por ejemplo Amazon, no funcionaría.
Después de definir la función hay que anclarla al hook correspondiente con un 'add_action'
y una variable admitida:
add_action('wp_authenticate', 'login_with_email_address', 1);
Con esto, vuestros usuarios podrán hacer login tanto con su nombre de usuario como con el email con el que se registraron.
Cambiar el texto del login
Con esta otra función, cambiaremos el texto del login para poder avisar a nuestros usuarios que pueden hacer login tanto con el nombre como con el email. Igual que antes, la añadimos al archivo de funciones del tema.
function change_username_wps_text( $text ) {
if (in_array($GLOBALS['pagenow'], array('wp-login.php'))) {
if ($text == 'Nombre de usuario') {
$text = 'Nombre de usuario / Email';
}
}
return $text;
}
Anclando la función al hook 'gettext'
ya la tenemos lista:
add_filter('gettext', 'change_username_wps_text', 1);
Modificar aspecto de la página de login
La siguiente función permite añadir (y sobreescribir) estilos a la página de login. Tambien se puede hacer una página de login totalmente personalizada desde cero como indica el Codex, pero si no exige mucha modificación, quizás te apañes con este código:
function my_login_head() {
echo '<style type="text/css">
body.login {
background:#788186;
padding-top: 8%;
position:relative;
}
body.login #login {
width: 350px;
padding: 1% 8% 1% 8%;
margin: auto;
background: #ffffff;
}
body.login #login h1 a {
background: url("'.get_bloginfo('template_url').'/images/login-logo.png") no-repeat scroll center top transparent;
height: 100px;
width: 330px;
}
.login #login_error {
border: 1px solid #ff0066;
background: #fff;
color: #ff0066;
}
body.login form {
-webkit-box-shadow: none;
box-shadow: none;
}
body.login #loginform p #wp-submit.button.button-primary.button-large {
background-color: #ff0066;
border-color: #FF0050;
}
</style>';
}
Evidentemente, entre las etiquetas [html]<style></style>[/html] incluís el CSS que necesitéis.
Ahora lo anclamos al hook 'login_head'
con esta línea:
add_action("login_head", "my_login_head");
Personalizar la URL del logotipo de la página de login de WordPress
Esta función cambia la URL de la imagen de la página de login cuando haces click en ella (http://wordpress.org por defecto):
function my_custom_login_url()
{
return wp_make_link_relative(home_url('/'));
}
add_action('login_headerurl', 'my_custom_login_url');
Donde pone home_url('/')
lo cambiamos por la URL deseada. En este caso concreto iría a la home del blog.
Personalizar el atributo ALT
de la imagen de la página de login de WordPress
Con este último snippet modificamos el atributo ALT
del la imagen que tenemos asignada como logotipo en la página de login de nuestro WordPress (texto que aparece al «posar» el cursos en la imagen, para entendernos).
function my_custom_login_title() {
return 'Diseñado y creado en WordPress para usuarios exigentes';
}
add_action("login_headertitle","my_custom_login_title");
2 Replies to "Personalizar el login de WordPress (login con email, texto, imagen, url de imagen, alt de la imagen)"
Gracias Amigo!!! así era!!
Me alegro que te sirviera