Contents
Introducción
Este artículo muestra, paso a paso y con ejemplos completos, cómo personalizar la pantalla de login de WordPress usando PHP para engancharse a los hooks adecuados y encolar (enqueue) JavaScript y CSS correctamente. Verás cómo crear un plugin mínimo (también válido desde functions.php del tema, aunque se recomienda plugin) que añada estilos, scripts, cambie el logo y el enlace del encabezado, pase variables desde PHP a JS y trate una petición AJAX segura en la pantalla de login.
Requisitos y buenas prácticas
- Entorno: WordPress 5.x o superior.
- Acceso: FTP o acceso a los archivos del servidor para crear el plugin o editar functions.php.
- Seguridad: usar nonces y capacidades correctas, no encolar scripts innecesarios y evitar cargar librerías desde CDNs inseguros.
- Recomendación: crear un plugin en lugar de modificar el tema si quieres que los cambios sobrevivan a cambios de tema.
Estructura mínima de archivos (plugin)
Se recomienda una estructura sencilla situada en wp-content/plugins/custom-login/ :
- custom-login.php (archivo principal del plugin)
- assets/css/login-style.css
- assets/js/login-script.js
- assets/img/login-logo.svg (o png)
1) Plugin base y hooks para encolar
Este ejemplo crea un plugin que encola CSS y JS en la pantalla de login usando el hook login_enqueue_scripts. Además modifica el logo con CSS y cambia el enlace del logo y su título con filtros.
version
)
// Encolar JS (dependencia jQuery si la necesitas)
wp_enqueue_script(
custom-login-script,
plugin_url . assets/js/login-script.js,
array( jquery ),
this->version,
true
)
// Pasar datos de PHP a JS (AJAX URL, nonce, etc.)
wp_localize_script( custom-login-script, CLE_Params, array(
ajax_url => admin_url( admin-ajax.php ),
nonce => wp_create_nonce( cle_nonce ),
) )
}
public function change_login_logo_url() {
return home_url()
}
public function change_login_logo_title() {
return get_bloginfo( name )
}
public function ajax_handler() {
check_ajax_referer( cle_nonce, security )
// Ejemplo: retornar mensaje con la hora del servidor
response = array(
success => true,
message => Servidor responde: . current_time( mysql ),
)
wp_send_json( response )
}
}
new Custom_Login_Enhancer()
Explicación
- login_enqueue_scripts: hook usado exclusivamente en la pantalla de login. Ideal para encolar CSS y JS sin afectar el front-end o el admin.
- wp_localize_script: método estándar para pasar datos PHP a JS (url de AJAX, nonces, datos de configuración).
- wp_ajax_nopriv_…: permite manejar peticiones AJAX de usuarios no autenticados (la pantalla de login es pública).
- check_ajax_referer: valida el nonce enviado desde JS para prevenir CSRF.
2) CSS para personalizar logo y estilos
Un CSS simple para cambiar el logo y estilos del formulario de login.
/ assets/css/login-style.css /
body.login {
background: #f5f7fa
}
.login h1 a {
background-image: url(../img/login-logo.svg)
background-size: contain
width: 320px
height: 80px
}
.login form {
box-shadow: 0 6px 18px rgba(0,0,0,0.06)
border-radius: 8px
padding: 26px
}
.login .button-primary {
background: linear-gradient(90deg, #0073aa, #006799)
border: none
box-shadow: none
text-shadow: none
}
3) JavaScript para mejorar la experiencia (encolado con jQuery)
Ejemplo de script que añade interactividad: animaciones, focus en el primer campo, validaciones simples y un ejemplo de petición AJAX a admin-ajax.php usando el objeto pasado por wp_localize_script.
// assets/js/login-script.js
jQuery( document ).ready( function( ) {
// Efecto de enfoque en inputs
( .login form .input, .login form input ).focus( function() {
( this ).closest( p ).addClass( cle-focused )
}).blur( function() {
( this ).closest( p ).removeClass( cle-focused )
})
// Ejemplo de petición AJAX con nonce
( #loginform ).on( submit, function( e ) {
// Este es solo un ejemplo: no interceptes el submit real salvo que sepas lo que haces.
// Aquí evitamos el envío real y hacemos una llamada de ejemplo.
e.preventDefault()
var data = {
action: custom_login_action,
security: CLE_Params.nonce
}
.post( CLE_Params.ajax_url, data, function( response ) {
if ( response.success ) {
// Mostrar mensaje (puedes insertar DOM)
alert( response.message )
} else {
alert( Error en la petición AJAX )
}
}, json )
} )
} )
Notas sobre el ejemplo AJAX
- En el ejemplo se intercepta el submit únicamente a modo demostrativo. En producción evita bloquear el flujo de login salvo que gestiones el proceso de autenticación tú mismo.
- Si quieres añadir características de seguridad (p. ej. verificación extra), implementa la lógica en el handler PHP y usa wp_signon si gestionas el login por AJAX.
4) Handler PHP para AJAX (ya incluido, ampliación)
El handler registrado con wp_ajax_nopriv_custom_login_action ya valida el nonce y devuelve JSON con wp_send_json. Si necesitas autenticar al usuario por AJAX, usa wp_signon con credenciales seguras y responde con códigos de error claros.
// Fragmento: uso de wp_signon (solo si gestionas login por AJAX)
public function ajax_login_process() {
check_ajax_referer( cle_nonce, security )
creds = array(
user_login => isset( _POST[log] ) ? sanitize_text_field( wp_unslash( _POST[log] ) ) : ,
user_password => isset( _POST[pwd] ) ? _POST[pwd] : ,
remember => ! empty( _POST[remember] )
)
user = wp_signon( creds, is_ssl() )
if ( is_wp_error( user ) ) {
wp_send_json( array( success => false, error => user->get_error_message() ) )
} else {
wp_send_json( array( success => true, redirect => admin_url() ) )
}
}
5) Accesibilidad y usabilidad
- Asegúrate de que los cambios visuales mantienen contraste suficiente y son navegables por teclado.
- Si usas animaciones, ofréceles una duración moderada y prueba que no interfieran con lectores de pantalla.
- Mantén los elementos esenciales (olvido de contraseña, registro) visibles y funcionales.
6) Seguridad y rendimiento
- Usa nonces y check_ajax_referer para todas las peticiones AJAX.
- No incluyas credenciales ni datos sensibles en JavaScript accesible públicamente.
- Evita encolar librerías pesadas solo para la pantalla de login.
- Versiona tus scripts para controlar caché mediante el parámetro version en wp_enqueue_script/style.
7) Depuración y problemas comunes
- Mi CSS/JS no se carga: verifica que el hook es login_enqueue_scripts y que las rutas a los archivos son correctas (plugin_dir_url/ get_stylesheet_directory_uri si lo pones en tema).
- AJAX devuelve 0: indica que WordPress no encontró la acción asegúrate de usar wp_ajax_nopriv_… para usuarios no autenticados y que action en la petición coincide con el hook registrado.
- Nonce inválido: revisa que el nonce enviado desde JS coincida con el generado en PHP y que check_ajax_referer use el mismo nombre.
8) Código final consolidado (plugin listo para copiar)
Reúno aquí el archivo principal con todo lo básico. Asegúrate de crear también los archivos CSS/JS y la imagen según la estructura mostrada.
version )
wp_enqueue_script( custom-login-script, plugin_url . assets/js/login-script.js, array( jquery ), this->version, true )
wp_localize_script( custom-login-script, CLE_Params, array(
ajax_url => admin_url( admin-ajax.php ),
nonce => wp_create_nonce( cle_nonce ),
) )
}
public function change_login_logo_url() {
return home_url()
}
public function change_login_logo_title() {
return get_bloginfo( name )
}
public function ajax_handler() {
check_ajax_referer( cle_nonce, security )
response = array(
success => true,
message => Servidor responde: . current_time( mysql ),
)
wp_send_json( response )
}
// Ejemplo de proceso de login por AJAX (opcional)
public function ajax_login_process() {
check_ajax_referer( cle_nonce, security )
creds = array(
user_login => isset( _POST[log] ) ? sanitize_text_field( wp_unslash( _POST[log] ) ) : ,
user_password => isset( _POST[pwd] ) ? _POST[pwd] : ,
remember => ! empty( _POST[remember] )
)
user = wp_signon( creds, is_ssl() )
if ( is_wp_error( user ) ) {
wp_send_json( array( success => false, error => user->get_error_message() ) )
} else {
wp_send_json( array( success => true, redirect => admin_url() ) )
}
}
}
new Custom_Login_Enhancer()
Conclusión
Personalizar la pantalla de login en WordPress es seguro y robusto cuando usas los hooks adecuados (login_enqueue_scripts, filtros de login_headerurl y login_headertext) y encolas correctamente CSS/JS. Para integrar dinámicamente valores desde PHP a JS usa wp_localize_script y valida todas las peticiones AJAX con nonces y check_ajax_referer. Mantén accesibilidad, rendimiento y seguridad como prioridades.
|
|
Acepto donaciones de BAT's mediante el navegador Brave 🙂 |