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

<style></style>

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");

Pues eso es todo en esta entrada. Espero que la pongáis en práctica y recordad: Sólo se aprende rompiendo y destripando el código. ¡Practica!.

Compartidlo si lo veis útil.

2 Comentarios

  1. oscar pardo Autor noviembre 9, 2015 (6:14 pm)

    Gracias Amigo!!! así era!!

    Responder a oscar pardo

Deje un Comentario

*Campos obligatorios Por favor valide los campos obligatorios

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.