Cómo personalizar el login de WordPress sin plugins
La pantalla de login de WordPress es una de las páginas más visitadas de cualquier instalación. Es el objetivo número uno de los ataques de fuerza bruta y, por defecto, es idéntica en todos los sitios del mundo: misma URL, mismo logo, mismo aspecto.
Cambiar eso no requiere ningún plugin. WordPress ofrece todos los hooks necesarios para personalizar el login completamente desde el tema o desde un plugin propio.
Cambiar el logo de la pantalla de login
El logo de WordPress en la pantalla de login se reemplaza con CSS a través del hook login_enqueue_scripts:
add_action( 'login_enqueue_scripts', 'mi_plugin_login_logo' );
function mi_plugin_login_logo() {
?>
<style>
#login h1 a {
background-image: url('<?php echo esc_url( get_stylesheet_directory_uri() . '/assets/images/logo-login.png' ); ?>');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
width: 320px;
height: 80px;
}
</style>
<?php
}
El logo es un enlace. Por defecto apunta a wordpress.org. Para cambiarlo a tu sitio:
add_filter( 'login_headerurl', 'mi_plugin_login_logo_url' );
function mi_plugin_login_logo_url() {
return home_url();
}
add_filter( 'login_headertext', 'mi_plugin_login_logo_text' );
function mi_plugin_login_logo_text() {
return get_bloginfo( 'name' );
}
Personalizar el estilo completo del formulario
Con el mismo hook login_enqueue_scripts puedes añadir todo el CSS que necesites para cambiar el aspecto del formulario:
add_action( 'login_enqueue_scripts', 'mi_plugin_login_styles' );
function mi_plugin_login_styles() {
?>
<style>
/* Fondo de la página */
body.login {
background-color: #1a1a2e;
}
/* Contenedor del formulario */
#login {
background: #ffffff;
border-radius: 12px;
padding: 30px 30px 20px;
box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}
/* Campos del formulario */
.login input[type="text"],
.login input[type="password"] {
border-radius: 6px;
border-color: #ddd;
}
/* Botón de acceso */
.wp-core-ui .button-primary {
background: #e94560;
border-color: #e94560;
border-radius: 6px;
width: 100%;
height: 42px;
font-size: 15px;
box-shadow: none;
}
.wp-core-ui .button-primary:hover {
background: #c73652 !important;
border-color: #c73652 !important;
}
</style>
<?php
}
Cambiar la URL de acceso al login
La URL /wp-login.php es conocida por cualquier bot de fuerza bruta. Cambiarla no es una medida de seguridad definitiva, pero elimina el ruido de los ataques automatizados que simplemente buscan esa URL.
// Cambiar la URL de login en todos los enlaces generados por WordPress
add_filter( 'login_url', 'mi_plugin_custom_login_url', 10, 3 );
function mi_plugin_custom_login_url( $login_url, $redirect, $force_reauth ) {
return home_url( '/acceso' );
}
add_filter( 'logout_url', 'mi_plugin_custom_logout_url' );
function mi_plugin_custom_logout_url( $logout_url ) {
return str_replace( site_url( 'wp-login.php' ), home_url( '/acceso' ), $logout_url );
}
// Redirigir el acceso directo a wp-login.php a una página 404
add_action( 'init', 'mi_plugin_bloquear_wp_login' );
function mi_plugin_bloquear_wp_login() {
$request = isset( $_SERVER['REQUEST_URI'] ) ? parse_url( $_SERVER['REQUEST_URI'], PHP_URL_PATH ) : '';
if ( '/wp-login.php' === $request && ! is_user_logged_in() ) {
wp_redirect( home_url( '/404' ), 302 );
exit;
}
}
Mensajes de error genéricos
Por defecto, WordPress es demasiado informativo en sus mensajes de error de login. Si el usuario no existe, lo dice. Si la contraseña es incorrecta, también. Eso facilita la enumeración de usuarios. Cambia todos los errores por un mensaje genérico:
add_filter( 'login_errors', 'mi_plugin_login_error_generico' );
function mi_plugin_login_error_generico() {
return 'Usuario o contraseña incorrectos. Por favor, inténtalo de nuevo.';
}
Redirigir tras el login según el rol
Por defecto, WordPress lleva a todos los usuarios al panel de administración después de hacer login. Puedes cambiar ese comportamiento según el rol del usuario:
add_filter( 'login_redirect', 'mi_plugin_login_redirect', 10, 3 );
function mi_plugin_login_redirect( $redirect_to, $requested_redirect_to, $user ) {
if ( is_wp_error( $user ) ) {
return $redirect_to;
}
// Administradores van al panel
if ( in_array( 'administrator', $user->roles ) ) {
return admin_url();
}
// El resto va a la home
return home_url();
}
Todo junto: un plugin completo de login personalizado
Todo lo que hemos visto en este artículo está implementado en mi plugin Login Shield & Customizer, que publiqué hace unas semanas. Puedes verlo en la sección de plugins de este sitio y revisar el código completo para entender cómo están organizadas todas estas funciones.
Conclusión
Personalizar el login de WordPress sin plugins es sencillo y tiene un impacto real tanto en la seguridad como en la imagen del sitio. Con cinco o seis hooks tienes control total sobre el aspecto, los mensajes de error, la URL de acceso y el comportamiento después del login.
La regla es siempre la misma: antes de instalar un plugin, comprueba si WordPress ya ofrece un hook para lo que necesitas. Casi siempre lo tiene.
¿Qué sigue?
- → Seguridad WordPress: las 10 medidas básicas sin plugins
- → Cómo limitar intentos de login con PHP puro
- → Nonces en WordPress: qué son y por qué son imprescindibles
