Spesso, per lavoro o per un semplice fattore estetico, si ha la necessità di dover cambiare il logo di WordPress presente sia nel pannello di login che nella parte alta della dashboard. Molti clienti infatti potrebbero richiedervi un prodotto personalizzato che riporti il brand dell’azienda e che sia il più possibile un prodotto creato ad hoc per loro.
Il file che andremo a modificare è functions.php, un file utilizzato per definire funzioni personalizzate e che non ci obbliga ad intervenire sul core di WordPress evitando di perdere le modifiche al prossimo aggiornamento. Considerata l’importanza di functions.php nel funzionamento del vostro sito il consiglio è di fare sempre un backup prima di iniziare a lavorarci.
Modificare il percorso delle immagini
Esistono due modi per modificare i file di queste immagini:
- cambiare manualmente i due file che si trovano in wp-admin/images/wp-logo.png e in wp-admin/images/logo-login.png
- intervenire sul file functions.php
La prima modalità è sicuramente la più semplice ma, allo stesso tempo, la meno funzionale perché ad ogni aggiornamento di WordPress queste immagini andranno perse.
Il secondo metodo, quello che andrò poi a spiegare, prevede l’inserimento di due funzioni in functions.php. Per chiarezza le ho chiamate rispettivamente “function logoLogin” e “function logoAdmin”:
Codice per modificare l’immagine nel pannello di login
function logoLogin() { echo '<style type="text/css"> h1 {background: url('.get_bloginfo('template_directory').'/images/logo-login.png) center top no-repeat !important; height:67px;} h1 a { display:none;} </style>'; } add_action('login_head', 'logoLogin');
Codice per modificare l’immagine nel pannello di amministrazione
function logoAdmin() { echo '<style type="text/css"> #header-logo {background-image:url('.get_bloginfo('template_directory').'/images/logo-admin.png) !important;} #footer { display:none;} </style>'; } add_action('admin_head', 'logoAdmin');
All’interno della funzione, attraverso il costrutto php echo, passeremo come stringa di testo le regole CSS che andranno a sovrascrivere gli stili già presenti.
Per evitare che l’immagine nella pagina di login linki al sito di WordPress – e nell’impossibilità di modificare questo collegamento – dobbiamo settare h1 a con l’opzione display:none.
Con .get_bloginfo(‘template_directory’) recuperiamo automaticamente il percorso della cartella del template in cui sono contenute le nostre immagini personalizzate (nel nostro caso http://www.asortofcode.com/wp-content/themes/asortofcode/) e le impostiamo come background. In questo modo non dovremmo modificare tale percorso nel caso usassimo il nostro tema su altri siti.
Con il primo argomento di add_action definiamo le modalità di esecuzione della funzione, ossia il momento in cui deve essere eseguita e in quale punto della nostra pagina; con il secondo passiamo il nome della funzione (definito in precedenza) che intendiamo eseguire.
Le dimensioni delle immagini da sostituire sono 326px x 67px per quanto riguarda il login e 16px x 16px per il pannello admin.
Plugin
Per chi non avesse dimestichezza con il codice php, è possibile trovare dei plugin che eseguono questa operazione in modo del tutto automatico semplicemente caricando l’immagine:
Ricordo che l’utilizzo di plugin dovrebbe essere limitato per non influenzare le prestazioni del blog.
Update
Con le nuove versioni di WordPress come la 3.4, il codice da inserire in function.php, in sostituzione di quello indicato sopra è il seguente:
Codice per modificare l’url del logo con la home del nostro sito
add_filter('login_headerurl', 'login_url'); function login_url() { return home_url(); }
Codice per modificare il title del logo con il nome del nostro sito
add_filter('login_headertitle', 'login_title'); function login_title() { return get_option('blogname'); }
Codice per sostituire il logo con il nostro personalizzato
add_action('login_head', 'login_logo'); function login_logo() { echo '<style type="text/css">.login h1 a { background:url("'.get_bloginfo('template_directory').'/images/a-sort-of-code.png") no-repeat top center; width:326px; height:67px;</style>'; }