WordPress login: personalizzazione

WordPress offre agli utenti la possibilità  di personalizzare la pagina di login del proprio blog grazie ad una semplice modifica di due file allocati nella directory di installazione della piattaforma: wp-login.php e login.css. Sarà  dunque possibile sostituire°  e/o aggiungere al logo originale una immagine dallo stile personalizzato che abbia il landing°  diretto alla homepage (oppure una qualsiasi altra pagina) del proprio sito. Questo articolo nasce da un lavoro di AlBu che ha realizzato per l’occasione un ottimo°  ed esaustivo tutorial in versione file .PDF disponibile qui sotto per il download.

[tab: Preparazione]

File immagine (logo)

Sarà  dunque necessario creare un file immagine dalle dimensioni minime di 292x66px da utilizzare come logo per il proprio sito. Programmi di editing grafico (gratuiti) quali paint.net e GIMP potrebbero rivelarsi particolarmente utili per il nostro scopo.

[tab:Styling]

login.css

1. scaricare via FTP una copia del file login.css allocato nella root principale del sito sotto wp-admin/css
2. aprire il file con un editor di testo (WordPad, Blocco Note, etc.)
3. selezionare e copiare la regola CSS presente dalla linea 41 alla numero 49
   h1 a {
   background: url(../images/logo-login.gif) no-repeat;
   width: 292px;
   height: 66px;
   text-indent: -9999px;
   overflow: hidden;
   padding-bottom: 15px;
   display: block;
   }
4. ed incollarla nella linea 50 apportando le seguenti modifiche (segnalate in rosso)
   h2 a {
   background: url(../images/logo-miologo.gif) no-repeat;
   width: 292px;
   height: 66px;
   text-indent: -9999px;
   overflow: hidden;
   padding-bottom: 15px;
   display: block;
   }
5. ad operazione compiuta, salvare le modifiche apportate al file

[tab:Coding]

wp-login.php

1. scaricare via FTP una copia del file wp-login.php allocato nella root principale del sito
2. aprire il file con un editor di testo (WordPad, Blocco Note, etc.)
3. individuare la id="login" che ha inizio alla linea 28 e termine alla numero 30 (vedi codice sopra), andare in coda alla linea 30 posizionando il cursore del mouse dopo la chiusura “/h1” quindi cliccare il tasto “invio” della tastiera per poter occupare con il nuovo codice la linea numero 31
4. ed incollare infine il codice (copialo da QUI) che appare piú sotto
5. ad operazione compiuta, salvare le modifiche apportate al file

[tab:Tutorial]

mod-files-WP-logo-login

E’ disponibile per il download il file PDF con il dettagliato tutorial a cura di AlBu per poter personalizzare la pagina di login del proprio blog.

[dm]9[/dm]
[tab:Note]

1. Non é assolutamente obbligatorio che l’estensione della immagine del proprio logo sia necessariamente una .gif. E’ altresì importante che, qualora si utilizzasse una differente estensione per il file, ci si ricordi di inserirla nelle modifiche apportate al file login.css
2. Ricordarsi di apportare le giuste modifiche al file login.css qualora la dimensione del logo fosse differente da quella dichiarata nella regola CSS dagli elementi width e height.
3. E’ possibile rimuovere il logo di WordPress dalla pagina di login personalizzata. Sarà  sufficiente sostituire nel file originale login.css il nome del file immagine (logo-login.gif) con quello del proprio logo (ad es. logo-miologo.gif) nonché avendo l’accortezza di fare altrettanto nel file wp-login.php cancellando il contenuto del codice alla linea 30 (vedi tab Coding) a partire da <a href [...] sino ad [...] /a> sostituendolo quindi con il nuovo codice personalizzato (vedi tab Coding) privo degli “h2” di apertura e di chiusura. In sostanza, il nuovo codice andrà  a sostituire l’originale dovendo necessariamente essere un elemento “h1“. Garantisco che l’operazione é tanto piú semplice da attuare quando complicata da redigere…
4. Ricordarsi di caricare il file immagine del proprio logo sotto wp-admin\images!!!
5. Ricordarsi di conservare una copia originale dei file wp-login.php e login.css (non si sa mai…)
6. Ricordarsi di sostituire i file wp-login.php e login.css in un breve lasso di tempo per evitare un disagio agli utenti del sito.
7. Ricordarsi di svuotare la cache del browser per poter vedere online le modifiche alla pagina di login.
8. Ricordarsi che ogni aggiornamento ad versione superiore di WordPress comporta la sovra-scrittura della cartella /wp-admin (modifiche comprese!). Effettuare un backup dei file wp-login.php e login.css personalizzati
9. Le modifiche apportabili ai file wp-login.php e login.css suggerite da questo tutorial sono esclusivamente per le versioni 2.5.x di WordPress!

[tab:Ringraziamenti]
Un grazie particolare ad Alex (a.k.a. AlBu) di Box300.net per la preziosa stesura del tutorial e per la cortesia di averlo reso pubblico attraverso questo sito.

Per ogni eventuale supporto tecnico, Vi rimando alla discussione Register Plus – inserire un Ns. logo linkabile avviata da AlBu nel forum di gidibao.net
[tab:END]