Come personalizzare la pagina login di WordPress.

Personalizzare la pagina login di WordPress può rilevarsi molto utile, sopratutto per chi è solito sviluppare siti web per conto di clienti.
Esistono diversi plugin che permettono di fare questo, in alternativa è possibile ottenere lo stesso risultato aggiungendo poche righe di codice al file functions.php del tuo tema, oppure creando un plugin per WordPress.
Personalizzare la pagina login di WordPress.
In quest’articolo ti mostrerò, appunto, come personalizzare la pagina di accesso, interagendo con i filtri e le azioni che ci fornisce WordPress, al fine di generare un codice css che modifichi l’intero aspetto del form di accesso WordPress, inoltre cambieremo l’url del logo, che solitamente porta a WordPress.org, sostituendolo con la home del sito ed il titolo “Powered by WordPress”, con il nome e la descrizione del blog.
In futuro ti spiegherò come aggiungere un’area amministrativa, da cui gestire il plugin, cosa che abbiamo già visto in un precedente articolo
Si tratta di un corso completo per lo sviluppo di temi e plugin per WordPress, seguendo tutti gli standard di codifica di WordPress.org.Acquista il corso o scarica gratuitamente un estratto
Per prima cosa è necessario creare una nuova cartella, all’interno della directory “wp-content/plugins/” e chiamarla “wip-custom-login” (puoi ovviamente cambiare il nome), di seguito andremo ad inserire altre due cartelle; la prima la chiameremo “images” e conterrà il logo e l’immagine di background, la seconda “js”, in cui andremo ad aggiungere uno script che permetterà l’inserimento dell’attributo “placeholder” ai campi del form, visto che non è possibile farlo tramite i filtri di WordPress.
Per l’immagine di sfondo ti suggerisco questo sito:
https://www.toptal.com/designers/subtlepatterns/
Il pattern utilizzato nell’anteprima è il seguente:
https://www.toptal.com/designers/subtlepatterns/photography/
Per comodità andrò ad utilizzare lo stesso logo di WPinProgress
https://www.wpinprogress.com/wp-content/themes/wip/images/logo.png
Adesso copia il file photography.png ed il logo nella cartella creata in precedenza “images”
A questo punto modifica il file principale “index.php” aggiungendo l’intestazione del plugin.
/* Plugin Name: Wip Custom Login Plugin URI: https://www.wpinprogress.com/ Description: Wip Custom Login Author: ThemeinProgress Author URI: https://www.themeinprogress.com/ Version: 1.0.0 License: GPL3 */
Questo codice serve a dichiarare il plugin e permettere a WordPress di riconoscerlo nel backend.
Effettuando l’accesso a WordPress, troverai un nuovo plugin da attivare, attivandolo ovviamente non succederà nulla, poiché non è presente ancora alcun codice da eseguire.
Per modificare l’url del logo, possiamo sfruttare il filtro login_headerurl:
if (!function_exists('wip_login_logo_url')) { function wip_login_logo_url() { return home_url(); } add_filter( 'login_headerurl', 'wip_login_logo_url' ); }
Mentre, per modificare il titolo del logo, dobbiamo usare il filtro login_headertitle
if (!function_exists('wip_login_logo_title')) { function wip_login_logo_title() { return get_bloginfo('name') . " | " . get_bloginfo('description') ; } add_filter( 'login_headertitle', 'wip_login_logo_title' ); }
Infine passiamo al codice css. Per facilitare l’integrazione futura del pannello di controllo del nostro plugin, non utilizzeremo un file esterno, ma caricheremo l’intero codice nella sezione head della pagina HTML. Per fare questo, ci viene incontro l’azione login_enqueue_scripts
if (!function_exists('wip_new_login_logo_style')) { function wip_new_login_logo_style() { ?> <style type="text/css"> body.login div#login h1 a { background-image: url('<?php echo plugins_url('/assets/images/logo.png', __FILE__ ); ?>'); -webkit-background-size: inherit; background-size: inherit ; width:100%; height:100px; } </style> <?php } add_action( 'login_enqueue_scripts', 'wip_new_login_logo_style' ); }
Basteranno queste poche righe di codice per sostituire il logo di WordPress con il nostro. Se invece vogliamo aggiungere, come sfondo della pagina, il pattern scaricato in precedenza, dobbiamo inserire:
body.login { background-image: url('<?php echo plugins_url('/assets/images/photography.png', __FILE__ ); ?>'); background-repeat: repeat; }
Continuando a modificare le giuste classi css generate da WordPress, andremo a personalizzare ulteriormente la pagina di login, il codex di WordPress ci fornisce un elenco di classi da modificare.
body.login {} body.login div#login {} body.login div#login h1 {} body.login div#login h1 a {} body.login div#login form#loginform {} body.login div#login form#loginform p {} body.login div#login form#loginform p label {} body.login div#login form#loginform input {} body.login div#login form#loginform input#user_login {} body.login div#login form#loginform input#user_pass {} body.login div#login form#loginform p.forgetmenot {} body.login div#login form#loginform p.forgetmenot input#rememberme {} body.login div#login form#loginform p.submit {} body.login div#login form#loginform p.submit input#wp-submit {} body.login div#login p#nav {} body.login div#login p#nav a {} body.login div#login p#backtoblog {} body.login div#login p#backtoblog a {}
Per generare la seguente anteprima:
Ho scritto il seguente codice css:
html { background:none; padding-top:150px; } body.login { background-image: url('<?php echo plugins_url('/assets/images/photography.png', __FILE__ ); ?>'); background-repeat: repeat; } body.login div#login h1 a { background-image: url('<?php echo plugins_url('/assets/images/logo.png', __FILE__ ); ?>'); -webkit-background-size: inherit; background-size: inherit ; width:100%; height:100px; } body.login div#login { margin-top:0; margin-bottom:0; padding:0; clear: both; border: 1px solid #d2d2d2; margin-bottom: 24px; text-align: left; border-collapse: separate; padding: 42px 40px; background: #fff; position: relative; display: block; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; width:350px; } body.login div#login #backtoblog, body.login div#login #nav { text-align:center; } body.login div#login #backtoblog a, body.login div#login #nav a { color:#333; } body.login div#login form { background: none; -webkit-box-shadow: none; box-shadow: none; padding:0; margin-top:0; } body.login div#login label { font-size:0; } body.login div#login form .input, body.login div#login input[type="text"] { padding:8px 16px; font-size:14px; } body.login div#login input#user_login { margin-bottom:0; } body.login div#login #backtoblog { margin: 8px 0 16px 0; } body.login div#login p.forgetmenot { line-height:30px; } body.login div#login p.forgetmenot label { font-size: inherit; } body.login div#login #backtoblog, body.login div#login p#reg_passmail, body.login div#login p#registerform, body.login div#login #nav , body.login div#login p.message, body.login div#login .forgetmenot, body.login div#login form .input, body.login div#login input[type="text"] , body.login div#login input[type="submit"] { font-family:'Montserrat'; } body.login div#login p#reg_passmail, body.login div#login p#registerform, body.login div#login #registerform p.submit , body.login div#login #lostpasswordform p.submit { text-align:center; } body.login div#login #lostpasswordform p.submit { margin-top:30px; } body.login div#login #registerform p.submit input , body.login div#login #lostpasswordform p.submit input { float:none; }
Per caricare eventuali file css o javascript, puoi continuare ad utilizzare l’azione login_enqueue_scripts
wp_enqueue_script( 'jquery' ); wp_enqueue_script( 'wip.custom.login.js', plugins_url('/assets/js/custom.login.js', __FILE__ ), array('jquery'), FALSE, TRUE ); wp_enqueue_style( 'google-fonts-css', '//fonts.googleapis.com/css?family=Montserrat%3A400%2C700', FALSE );
Questo è il codice completo del plugin:
/* Plugin Name: WIP pagina login personalizzata Plugin URI: http://www.wpinprogress.com/ Description: WIP pagina login personalizzata Author: ThemeinProgress Author URI: https://www.themeinprogress.com/ Version: 1.0.0 License: GPL3 */ /*-----------------------------------------------------------------------------------*/ /* Modifichiamo l'url del logo */ /*-----------------------------------------------------------------------------------*/ if (!function_exists('wip_login_logo_url')) { function wip_login_logo_url() { return home_url(); } add_filter( 'login_headerurl', 'wip_login_logo_url' ); } /*-----------------------------------------------------------------------------------*/ /* Modifichiamo il titolo del logo */ /*-----------------------------------------------------------------------------------*/ if (!function_exists('wip_login_logo_title')) { function wip_login_logo_title() { return get_bloginfo('name') . " | " . get_bloginfo('description') ; } add_filter( 'login_headertitle', 'wip_login_logo_title' ); } /*-----------------------------------------------------------------------------------*/ /* Creiamo il codice css per personalizzare la pagina */ /*-----------------------------------------------------------------------------------*/ if (!function_exists('wip_new_login_logo_scripts')) { function wip_new_login_logo_scripts() { wp_enqueue_script( 'jquery' ); wp_enqueue_script( 'wip.custom.login.js', plugins_url('/assets/js/custom.login.js', __FILE__ ), array('jquery'), FALSE, TRUE ); } add_action( 'login_enqueue_scripts', 'wip_new_login_logo_scripts' ); } if (!function_exists('wip_new_login_logo_style')) { function wip_new_login_logo_style() { wp_enqueue_style( 'google-fonts-css', '//fonts.googleapis.com/css?family=Montserrat%3A400%2C700', FALSE ); ?> <style type="text/css"> html { background:none; padding-top:150px; } body.login { background-image: url('<?php echo plugins_url('/assets/images/photography.png', __FILE__ ); ?>'); background-repeat: repeat; } body.login div#login h1 a { background-image: url('<?php echo plugins_url('/assets/images/logo.png', __FILE__ ); ?>'); -webkit-background-size: inherit; background-size: inherit ; width:100%; height:100px; } body.login div#login { margin-top:0; margin-bottom:0; padding:0; clear: both; border: 1px solid #d2d2d2; margin-bottom: 24px; text-align: left; border-collapse: separate; padding: 42px 40px; background: #fff; position: relative; display: block; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; width:350px; } body.login div#login #backtoblog, body.login div#login #nav { text-align:center; } body.login div#login #backtoblog a, body.login div#login #nav a { color:#333; } body.login div#login form { background: none; -webkit-box-shadow: none; box-shadow: none; padding:0; margin-top:0; border:none; } body.login div#login label { font-size:0; } body.login div#login form .input, body.login div#login input[type="text"] { padding:8px 16px; font-size:14px; } body.login div#login input#user_login { margin-bottom:0; } body.login div#login #backtoblog { margin: 8px 0 16px 0; } body.login div#login p.forgetmenot { line-height:30px; } body.login div#login p.forgetmenot label { font-size: inherit; } body.login div#login #backtoblog, body.login div#login p#reg_passmail, body.login div#login p#registerform, body.login div#login #nav , body.login div#login p.message, body.login div#login .forgetmenot, body.login div#login form .input, body.login div#login input[type="text"] , body.login div#login input[type="submit"] { font-family:'Montserrat'; } body.login div#login p#reg_passmail, body.login div#login p#registerform, body.login div#login #registerform p.submit , body.login div#login #lostpasswordform p.submit { text-align:center; } body.login div#login #lostpasswordform p.submit { margin-top:30px; } body.login div#login #registerform p.submit input , body.login div#login #lostpasswordform p.submit input { float:none; } </style> <?php } add_action( 'login_enqueue_scripts', 'wip_new_login_logo_style' ); }
Aggiornamento: Esiste anche una versione più avanzata, completa di un pannello di controllo per gestire l’aspetto grafico della pagina di login di WordPress ed una pagamento, con cui puoi visualizzare delle slideshow, al posto di un’immagine di sfondo fissa.
Puoi scaricare la versione gratuita da WordPress.org, mentre quella a pagamento da ThemeinProgress.com