Come sostituire il logo di WordPress nei pannelli login e admin

Immagine login di WordPress

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

Immagine admin di WordPress

Esistono due modi per modificare i file di queste immagini:

  1. cambiare manualmente i due file che si trovano in wp-admin/images/wp-logo.png e in wp-admin/images/logo-login.png
  2. 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>';
}
Commenta

Commenti

  1. ciao ho provato come da tue indicazioni.. ma con scarso successo come mai?

  2. Neck ha detto:

    Ciao,
    esiste anche un modo molto piu’ veloce volendo e funzionera’ anche per le prossime versioni di WordPress:
    file wp-login.php (directory principale di WordPress)
    editare $login_header_url e $login_header_title

  3. Neck ha detto:

    ops… mi scuso per il doppio post,
    va da se che per cambiare il logo WordPress basta sostituire il file (e’ una png) con un file di misure adeguare e stesso nome… non serve alcun intervento sul codice volendo….

    • Fabio Quarantini ha detto:

      La soluzione migliore è quella di utilizzare gli hooks nativi di WordPress perché, come buona prassi, il codice deve rimanere all’interno del tema o del plugin. Attenzione ad effettuare gli aggiornamenti di WordPress poiché il file wp-login.php potrebbe essere sovrascritto e di conseguenza perderebbe tutte le modifiche apportate.

  4. Davide ha detto:

    Domanda: Perchè per il logo non usare i fogli di stile sul tema figlio?

  5. Davide ha detto:

    PERCHÈ TOGLI I COMMENTI FATTI?
    AVEVO SUGGERITO DI USARE I FOGLI DI STILE NEL TEMA FIGLIO INVECE CHE ANDARE A MODIFICARE IL functions.php

    CERCA DI ESSERE RISPETTOSO!

    • Fabio Quarantini ha detto:

      Ciao Davide,
      non ho eliminato nulla. Semplicemente non erano approvati perchè finiti nello spam a causa della tua mail falsa.
      Ritornando alla tua domanda i fogli di stile del tema ( anche di quello figlio) non vengono richiamti all’interno della pagina wp-login.php. L’unico modo per inserirli è tramite “functions.php”. Nulla vieta di caricare direttamente il file CSS al posto che inserire le formattazioni “inline”.

Commenta

Facebook
Articoli popolari
Articoli recenti