Vi piacerebbe poter personalizzare liberamente la pagina di login di WordPress?
Per farlo molti si affidano a vari plugin: uno per l’immagine di background, un altro per il logo… insomma, mai ce ne fosse uno che permette una totale personalizzazione nei colori, nello stile, e in ogni singolo dettaglio!
Come fare?
Io, come spesso e volentieri, ho fatto da me e mi son creato un mini plugin da mettere direttamente in /wp-content/mu-plugins
Pubblico direttamente il codice (prevalentemente php e css, e giusto un pizzico di jquery per personalizzare il form).
/mu-plugins/_custom-wp_login.php
<?php
/*
* Plugin Name: Custom Login Page
* Description: Custom Login Page
* Author: Salvatore Noschese - <a href='https://www.laltroweb.it'>laltroweb.it</a>
*/
defined( 'ABSPATH' ) or exit;
// Start!
function my_custom_login_page()
{
// Config:
$_customloginlogo = '//www.mywebsite.it/wp-content/uploads/***/website-logo.png';
$_customloginbackground = get_background_image(); // or your custom url image;
?>
<script type="text/javascript" src="<?php echo includes_url(); ?>js/jquery/jquery.js"></script>
<script type="text/javascript">
var $j = jQuery.noConflict();
$j(document).ready(function() {
$j( "#user_login" ).attr( "placeholder", "\uD83D\uDC64 Username" ).attr( "required", "required" );
$j( "#user_pass" ).attr( "placeholder", "\uD83D\uDD11 Password" ).attr( "required", "required" );
$j( "#wp-submit" ).attr( "value", "Login \u2714" );
});
</script>
<style type="text/css">
body {
background: url("<?php echo $_customloginbackground; ?>") no-repeat fixed center top / cover !important;
}
body * {
font-weight: bold;
}
#login #nav, #login #backtoblog {
padding: 10px 24px;
font-size: 12px;
}
#loginform label[for=user_login]::before,
#loginform label[for=user_pass]::before {
content: "*\00a0";
color: red;
}
#loginform #user_login,
#loginform #user_pass {
font-weight: normal;
}
#loginform,
#login #nav,
#login #backtoblog {
background: rgba(255, 255, 255, 0.9) none repeat scroll 0 0;
border-radius: 5px;
}
#login h1 a {
background: rgba(0, 0, 0, 0) url("<?php echo $_customloginlogo; ?>") no-repeat scroll center center / cover ;
height: 35px;
width: 254px;
}
</style>
<?php
}
// Logo function:
function my_login_logo_url() { return home_url(); }
function my_login_logo_url_title() { return get_bloginfo( 'name' ). ' - ' .get_bloginfo( 'description' ); }
# Run Action/Filter
add_action( 'login_enqueue_scripts', 'my_custom_login_page' );
add_filter( 'login_headerurl', 'my_login_logo_url' );
add_filter( 'login_headertitle', 'my_login_logo_url_title' );
Sia chiaro che bisogna correggere l’indirizzo del logo e dell’immagine di background (quest’ultima lascio che la prenda automaticamente con get_background_image() , ma potreste anche preferire un’immagine diversa…)
Poi, ovviamente, alcuni ritocchi al css per meglio adattare il tutto ai vostri gusti e alle vostre preferenze.
Ma direi che va molto meglio rispetto alla versione originale, non trovate? 😀
Anteprima!
Cliccando sull’immagine vedrete la versione live: identica all’immagine, ma con l’aggiunta del captcha e del social login (via plugin – rimossi solo dallo screen tramite console del browser semplicemente per evitare confusione).
Bene, direi che è tutto (e che il risultato è davvero ottimo considerando che non abbiamo installato nessun plugin)!
Se avete altre idee, dubbi, domande, curiosità… Non vi rimane altro da fare che commentare 🙂