Share
La schermata di accesso di WordPress è ben progettata: è semplice e intuitiva con cui interagire e funziona bene su tutte le dimensioni dello schermo. Ma cosa succede se stai costruendo un sito per un cliente che vuole mostrare il proprio logo agli utenti che accedono? O se hai un'installazione MultiSite e vuoi che i tuoi utenti vedano il tuo marchio quando accedono? Fortunatamente, è possibile personalizzare il modo in cui la schermata di accesso sembra abbastanza facilmente.
Per questo tutorial ho creato un plugin per farlo; il vantaggio dell'uso di un plugin è che è possibile rilasciarlo in qualsiasi sito WordPress sviluppato e dare immediatamente un po 'di branding.
I passaggi che sto per dimostrare in questo tutorial sono:
Per completare questo tutorial avrai bisogno di:
Nella parte superiore del mio plugin sto aggiungendo le seguenti linee:
/ * Nome plugin: WPTutsPlus Personalizza l'Admin Parte 1 - URI plugin per la schermata di login: http://rachelmccollin.co.uk Descrizione: Questo plugin supporta il tutorial in wptutsplus. Personalizza la schermata di accesso di WordPress. Versione: 1.0 Autore: Rachel McCollin Autore URI: http://rachelmccollin.com Licenza: GPLv2 * /
È facile aggiungere il proprio logo o il proprio cliente alla pagina di accesso e rendere immediatamente più professionale l'installazione di WordPress.
Accentsconagua
login_enqueue_scripts gancio di azione:// aggiungi un nuovo logo alla funzione della pagina di accesso wptutsplus_login_logo () ?>
Questo aggiungerà il tuo logo alla schermata di login, come mostrato nello screenshot.
Oltre ad aggiungere un logo, puoi anche ridimensionarlo per adattarlo e aggiungere uno stile per altri elementi sullo schermo.
Il logo sopra è leggermente schiacciato per adattarsi allo spazio predefinito indicato. Ho intenzione di regolare il dimensionamento.
Modifica il codice nel tuo plugin in modo che legga come segue:
// aggiungi un nuovo logo alla funzione della pagina di accesso wptutsplus_login_logo () ?>
Il valore di altezza che utilizzi dipenderà dal rapporto di aspetto del tuo logo. utilizzando 300px e auto per il background-size proprietà garantisce che il tuo logo sia largo quanto la casella di login e che il suo rapporto di aspetto sia mantenuto, e il altezza valore fornirà abbastanza spazio per il tuo logo per adattarsi.
Ora il mio logo ha questo aspetto:
Molto meglio! Ma dimensionare il logo non è l'unica cosa che posso fare per quanto riguarda lo stile. Che ne dici di cambiare alcuni colori?
Tutto il testo visualizzato nella pagina di accesso è sotto forma di link, quindi sono i link che dovrai modellare. Modifica di nuovo il codice in modo che legga come segue:
// aggiungi un nuovo logo alla funzione della pagina di accesso wptutsplus_login_logo () ?>
Questo mi dà collegamenti che sono in linea con i miei colori del logo. Il colore del collegamento è ciano e il colore al passaggio del mouse è il magenta.
Nota: poiché il colore principale del mio logo è simile al blu, funziona bene per i collegamenti. Potresti non voler cambiare il colore dei tuoi link se il tuo logo è di un colore molto diverso, per evitare problemi di usabilità.
L'ultimo elemento sullo schermo è il pulsante "Accedi", che è ancora blu. Cambiamo questo. Modifica il tuo codice in modo che legga come segue:
// aggiungi un nuovo logo alla funzione della pagina di accesso wptutsplus_login_logo () ?>
Così ora ho una schermata di accesso completamente personalizzata, il che significa che quando i miei clienti o utenti accedono, vedono qualcosa che è coerente con il mio marchio e rende il sito più professionale.
Personalizzare la schermata di accesso di WordPress è semplice e può fare una grande differenza per l'impressione che il tuo sito offre agli utenti e ai clienti che accedono. Modificando il codice sopra per soddisfare le tue esigenze e riflettere il tuo marchio puoi creare uno schermo di accesso molto professionale in pochissimo tempo.
