WordPress – Brandizzare la finestra di login

Oltre a conferire maggiore professionalità al vostro lavoro, brandizzare  un sito web, può rivelarsi una scelta accattivante ed apprezzata.

Nel caso di WordPress, i vostri clienti senz’altro gradiranno il loro logo aziendale nella schermata di login. Vediamo come fare in maniera veloce.

É vero: esistono dei plugin apposta, ma oggi vedremo come farne a meno per almeno due ragioni: la prima è che meno plugin utilizzate e meglio è; la seconda è che mettere mano al codice da sempre più soddifazione!

Piccola parentesi teorica

L’immagine predefinita con il logo di WordPress, non é inserita tramite il tag “img”, ma come sfondo di un tag specifico, che é quello dei titoli: il tag h1.

Per fare in modo che il logo ad essere visualizzato sia il nostro e non quello classico di WordPress, dovremo sfruttare un hook (login_enqueue_script), tramite il quale accoderemo del codice css, sovrascrivendo le regole relative al tag di cui sopra.

Il codice

Per prima cosa portatevi nella cartella del vostro tema in wp-content/themes e create una sottocartella “images”all’interno della quale salverete il vostro file per il logo come login-logo.png;

aprite il file "functions.php" ed aggiungete il seguente codice:

function my_login_logo() { ?>

<styletype="text/css">
#login h1 a, .login h1 a {
background-image: url(<?php echo get_stylesheet_directory_uri(); ?>/images/login-logo.png);
height:100px;
width:300px;
background-size: cover;
background-repeat: no-repeat;
padding-bottom: 30px;
}
</style>
<?php }

add_action( 'login_enqueue_scripts', 'my_login_logo' );

?>

Se non vi interessa creare una sottocartella, rimuovete la funzione get_stylesheet_directory_uri() e incollate il percorso dell’immagine che preferite.

Impostate le dimensioni dell’area coi parametri width ed height, e se non vi dovesse andare bene l’attributo “cover” potrete sempre smanettare con css fino ad ottenere il risultato sperato.

Alternativamente potreste includere un file css vero e proprio, intervenire anche sullo sfondo delle pagina e altro ancora. I passi sarebbero gli stessi.

Ecco che in quattro e quattr’otto avrete la vostra pagina di login personalizzata.

Et voilá!