Cómo personalizar la página de Login de Wordpress sin plugins

Cómo personalizar la página de Login de Wordpress sin plugins

Cómo personalizar la página de Login de Wordpress sin plugins
Cómo personalizar la página de Login de Wordpress sin plugins

A todo el mundo le gustan las webs personalizadas y que no se parezcan a ninguna otra, pero la pantalla de login de Wordpress es igual en todas y, en ocasiones, nos gustaría personalizarla también. Vamos a solucionar esto de una manera sencilla y sin plugins.

¿Por qué personalizar la pantalla de Login o wp-admin de Wordpress?

Seguramente alguna vez te haya hecho falta personalizar la página de login de un sitio Wordpress, bien porque te lo pida el cliente o bien por hacer todas tus webs en Wordpress con la misma pantalla en wp-admin, con el fin de hacer branding.

Pantalla de Login Wordpress

La pantalla de Login de Wordpress es minimalista, lo cuál es bueno ya que, de esta manera, tarda mucho menos en cargar y apenas consume recursos. Pero si necesitas modificarla te diré cómo hacerlo sin plugins. Eso sí, es necesario tener unos mínimos conocimientos de CSS y saber manejar (que no romper) el archivo functions.php.

¿Por qué hacer la personalización del login de Wordpress en un Child Theme?

Es importante que hagamos los cambios en un Tema Hijo o Child Theme ya que, de lo contrario, si hay alguna actualización del Theme sustituirá el archivo functions.php y perderemos todo nuestro trabajo. Para los que no sepan qué es y cómo se hace un Child Theme, lo explico aquí.

Además, haciéndolo en un Child Theme, si “rompemos” algo en el archivo functions.php no es tanta tragedia como si lo hiciéramos en el original.

Empezamos la personalización

Creamos un fichero de estilos para el login

Nos ponemos a trabajar, y lo primero que tenemos que hacer es crear el archivo que va a contener todas las clases y propiedades modificadas de la pantalla de login. Al archivo lo llamaremos login-style.css y lo almacenaremos en la carpeta /css/ de nuestro proyecto. Si tenemos la carpeta la creamos.

Directorio de carpetas wordpress child-theme

Vincular el archivo de estilos en functions.php

Ya está creado el archivo de estilos, pero no va a funcionar hasta que no modifiquemos el archivo functions.php para vincularlo. Para ello abrimos con un editor de código (yo utilizo Visual Studio Code y Atom) y añadimos una función. En esa función utilizamos el comando de Wordpress ‘wp_enqueue_style‘. Dejo el enlace por si queréis informaros con más detalle.

function custom_login() {
  wp_enqueue_style( 'custom-login-css', get_stylesheet_directory_uri() . '/css/login-style.css', array(), '1.0' );
}
add_action( 'login_head', 'custom_login' );

Este código lo que hace es poner en conocimiento de Wordpress que hemos creado un nuevo archivo de estilos y le decimos que lo cargue en ‘login_head’, que es un Hook de Wordpress.

Comprobamos que Wordpress hemos hecho bien el proceso

Podemos comprobar lo hemos vinculado bien de varias maneras, una de ellas es poniendo el siguiente código CSS en el archivo login-style.css:

body {
  background: #339999;
}

Si al actualizar sale la siguiente pantalla es que lo hemos hecho bien.

custom login

También podemos ver el código fuente de la página y buscar ‘custom-login-css‘, si no lo encontramos es que algo ha fallado, tendremos que revisar lo que hemos hecho.

Si lo hemos hecho bien podemos hacer toda clase de modificaciones que nos permita CSS, incluido cambiar el logotipo por el de nuestro cliente o el nuestro, cambios en el formulario, poner una imagen de background, etc…

Eso ya lo dejo a vuestra imaginación.

También podemos cambiar el enlace del logotipo

En la pantalla de login viene por defecto el logotipo de Wordpress, si hacemos click sobre él nos lleva a la página https://es.wordpress.org/. Podemos cambiar este enlace por otro que nos venga bien a nosotros, como puede ser un enlace a nuestra web.

Esto se hace añadiendo esta función a nuestro archivo functions.php:

function custom_url_login() {
	return 'www.google.es'; // Ponemos la web que queramos.
}
add_filter( 'login_headerurl', 'custom_url_login' );

Y eso es todo, podemos ver como con unas líneas en el archivo functions.php y algún conocimiento de CSS podemos hacer del login de Wordpress una experiencia personalizada.

Resultado final de mi personalización

Os dejo cómo me ha quedado y el código CSS que he añadido:

body {
  background-image: url('../img/backlogin.jpg');
  background-repeat: no-repeat;
  background-size: cover;
}

.login h1 a {
  background-image: url('../../../uploads/2020/01/logo.png');
  background-repeat: no-repeat;
  background-size: 300px;
  width: 300px;
}

.login form {
  background: rgba( 255, 255, 255, .7 );
  border: none;
  border-radius: 5px;
  box-shadow: none;
}

.wp-core-ui .button-primary {
  background: #339999;
  border-color: #339999;
}

a, a:hover {
  color: #339999;
}

.login #backtoblog a, .login #nav a {
  text-decoration: none;
  color: #339999;
}

.login #backtoblog a:hover, .login #nav a:hover {
  text-decoration: underline;
  color: #339999;
}

.login .button.wp-hide-pw .dashicons {
  color: #339999;
}

input[type="checkbox"],
input[type="password"],
input[type="text"] {
  background: transparent !important;
}

input[type="checkbox"]:focus,
input[type="password"]:focus,
input[type="text"]:focus {
  background: transparent;
  border-color: #339999;
  box-shadow: 0 0 0 1px #339999;
}

input[type="text"],
input[type="password"] {
  border-radius: 25px;
  padding: 0 15px !important;
}
Javier Andrés

La diferencia es notable, y esta aparente tontería puede hacer subir la cotización de nuestro trabajo.

Deja un comentario