Ciao a tutti oggi vedremo come impostare un logo personalizzato nella nostra pagina di login di WordPress e personalizzare lo stile della pagina.
Senza di dilungarci troppo, il codice riportato qua sotto vi permetterà di settare il vostro logo in fase di login attraverso la personalizzazione del file functions.php.
// La prima funzione ci servirà per impostare il link associato al logo che rimanderà alla homepage del sito
add_filter('login_headerurl', 'login_url');
function login_url() {
return home_url();
}
// La seconda funzione serve per aggiornare il titolo
add_filter('login_headertext', 'login_title');
function login_title() {
return get_option('blogname');
}
// Infine l'ultima funzione andrà a sovrascrivere il css della pagina impostando le nostre istruzioni
add_action('login_head', 'login_logo');
function login_logo() {
echo '<style type="text/css">#login{ padding-top:2%; } .login h1 a { background:url("https://www.example.com/mio-logo.png") no-repeat top center; background-size: contain; width:100%; height:80px;</style>';
}Il parametro height andrà regolato a seconda della risoluzione del logo in modo da visualizzarlo correttamente.
Come potete vedere andiamo ad innestare delle regole css all’interno della pagina di login, pertanto possiamo aggiornare le dimensioni dei font, colori e bottoni.
Per chi invece ha già impostato il proprio logo personalizzato tramite la personalizzazione di wordpress, consiglio l’utilizzo dell’ultima funzione del codice aggiornata.
Integrata con poche righe di php questa funzione permette di recuperare il logo che avete già impostato per il sito.
add_action('login_head', 'login_logo');
function login_logo() {
$custom_logo_id = get_theme_mod( 'custom_logo' );
$image = wp_get_attachment_image_src( $custom_logo_id , 'full' );
echo '<style type="text/css">#login{ padding-top:2%; } .login h1 a { background:url("'.$image[0].'") no-repeat top center; background-size: contain; width:280px; height:80px;</style>';
}
Per altre guide su wordpress guardate l’archivio, tutte le settimane troverete un nuovo articolo.