WordPress login: personalizzazione

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

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

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]

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!

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