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 🙂