Personalizzare la pagina di Login senza plugin

Personalizzare la pagina di wordpress login senza plugin

Custom WordPress Login

Molti plugin assolvono al compito di personalizzare la pagina di Login, in modo professionale e intuitivo. Ma l’uso eccessivo di plugin, come sappiamo, ha l’effetto controproducente di sovraccaricare il server e la conseguenza inevitabile di un certo rallentamento nel caricamento delle pagine.

Per ovviare a questo, possiamo agire manualmente sul codice del file function.php situato all’interno del nostro tema e possiamo creare un foglio di stile ad hoc per aggiungere le nostre preferenze.

Unico requisito: avere dimestichezza con programma FTP (File Transfer Protocol).

Leggi la Guida: Utilizza Mozilla FireFox come Client FTP

In alternativa, si possono caricare i files sul proprio Server attraverso il pannello di controllo del vostro Provider di Hosting (Dai un’occhiata a SiteGround, un servizio performante, dai costi contenuti e con assistenza italiana).

Contenuto della Guida

Al fine di personalizzare la pagina di Login, questa guida illustrerà come:

  1. Aggiungere un’immagine di background
  2. Sostituire il logo di WordPress con un logo personale
  3. Sostituire il link del logo col link alla propria homepage
  4. Personalizzare il look del form
  5. Rimuovere il link “password dimenticata”
  6. Rimuovere il link “Torna alla homepage”
  7. Nascondere il messaggio di login errato
  8. Rimuovere l’effetto shake del login errato
  9. Impostare un redirect alla home per non admin
  10. Impostare “ricordami” con spunta preselezionata

Prima di procedere…

Le seguenti modifiche al vostro Tema Grafico andranno perdute nel momento in cui aggiornerete il Tema! Per ovviare a questo problema, ci sono due possibili soluzioni:

  1. Ripetere la procedura nel nuovo Tema aggiornato (una volta salvati i files sul Pc, si impiegano 5 minuti al massimo). Procedura sconsigliata.
  2. Utilizzare un Tema Child, che è una versione ridotta del tema originale, da cui estrae, in genere, solo l’aspetto estetico tramite il foglio di stile style.css, e consente di mantenere tutte le modifiche apportate al Tema anche dopo l’aggiornamento.

Scopri i 3 modi per creare un Tema Child.

Procediamo in quest’ordine:

  1. Creiamo la cartella login all’interno della cartella del nostro tema. Percorso sito “www.miosito.com/wp-content/themes/mio-tema/”.
  2. Dentro la nuova cartella creiamo con wordpad un nuovo file e salviamolo col nome custom-login-styles.css Dobbiamo salvare il nuovo file con l’estensione .css. In Windows procedi così: in wordpad File > Salva con nome > Salva come: Tutti i file > Nome file: custom-login-styles.css > SalvaPersonalizzare la pagina di WordPress Login
  3. Per caricare il nostro foglio di stile, inseriamo questo codice in function.php,  che si trova nella cartella del tema, prima del tag di chiusura php “?>”

Questo file, custom-login-styles.css, conterrà tutte le modifiche suggerite in questa guida che tu apporterai a tuo piacimento. Alcune modifiche, però, vanno aggiunte al file del tema functions.php.

1. Aggiungere un’immagine di background (di sfondo)

Inserisci in custom-login-styles, tra gli apostrofi, il percorso della foto (già caricata, si presume). Ad esempio: ‘mio-sito.it/wp-content/upload/mia-foto.jpg’

2. Sostituire il logo di WordPress con un logo personale

Utilizza un logo tra i 90 e i 100 pixel (Vai su Resize.com per ridimensionarlo gratis). Per inserirlo correttamente custom-login-styles, salva il logo dentro la cartella “login” e inserisci il nome esatto tra gli apostrofi, compresa l’estensione della foto (.jpg .png .btm etc).

3. Sostituire il link del logo col link alla propria homepage

Di default (impostazione predefinita) il logo rimanda a wordpress.org. Per impostare la url del proprio sito, aggiungi nel file del tema “functions.php” le seguenti righe di codice:

4. Personalizzare il look del form

Il prossimo passaggio sembra complesso ma ti assicuro che non lo è affatto. Su w3schools.com trovi il codice relativo al colore che vuoi impostare, sostituendolo con #fffffff; o #dddddd; o #555555; (non cancellare il punto e virgola!).

In custom-login-styles:

Se vuoi smanettare di più, dai al bottone una tonalità blu-chiaro.

5. Rimuovere il link “password dimenticata”

Campo opzionale. Se pensi che non ti sia utile, aggiungi queste righe in custom-login-styles:

6. Rimuovere il link “Torna alla homepage”

Questo compito lo assolve già il logo. Aggiungi queste righe in custom-login-styles:

7. Nascondere il messaggio di login errato

Può essere utile a te che sei l’amministratore del sito, ma è anche vero che facilita le cose ad un eventuale hacker che voglia recuperare le tue credenziali di accesso.

In functions.php

8. Rimuovere l’effetto shake del login errato

Quando si inseriscono credenziali errate, il form ti avvisa con un effetto shake. Ad alcuni piace, ad altri no. Se vuoi rimuoverlo, aggiungi queste righe in functions.php:

9. Impostare un redirect alla home per non admin

Quando esegui l’accesso da amministratore, il sistema ti redireziona automaticamente alla dashboard (area amministrativa). Questo avviene anche per gli utenti registrati con ruoli diversi dall’amministratore. Se vuoi che questi ultimi vengano redirezionati in homepage, aggiungi queste righe in functions.php:

Può essere utile in siti con area membri riservata.

10. Impostare “ricordami” con spunta preselezionata

Di default la spunta su “ricordami” è deselezionata e per eseguire l’accesso sono sempre necessari due passaggi: accedere a miosito.it/wp-login.php e, se username e password sono salvati nel browser, cliccare su Login.

Per un accesso automatico, aggiungi queste righe in functions.php:

Conclusione

Questa guida è stata pensata per personalizzare la pagina di Login senza ricorrere all’uso di plugins esterni. Due i benefici:

  1. si ha un più alto grado di personalizzazione;
  2. si evita una risorsa esterna (plugin) che, nella maggior parte dei casi, richiama molte più funzioni, il che rallenta il caricamento della pagina del tuo sito.

Tuttavia, se ritieni di voler testare qualche plugin, ti rimando alla directory dei plugin di wordpress:

https://it.wordpress.org/plugins/search/custom+login/

Spero ti sia piaciuto l’articolo e che metterai il tuo bel Like!

Stay tuned and Go WordPress! 😉


Potrebbe interessarti anche...



Go WordPress

Questo Blog nasce dalla passione per WordPress. Nel tempo libero cerco di arricchirlo di nuove Guide. Se ti abboni alla Newsletter sarai sempre aggiornato sui nuovi contenuti (in regalo un Ebook fantastico!). Se ti va, puoi offrirmi un caffè seguendo il link sulla barra laterale. Buona lettura da Lino Tumminieri. Go WordPress!