La pagina di login di WordPress è la porta d’ingresso di servizio al nostro sito: realizzarne una su misura può rivelarsi funzionale in varie situazioni. Pensiamo ad esempio al sito di un’impresa al quale accedono diversi incaricati; o ancora al caso di un blog a cui accedono vari autori. Ancora, ad un forum oppure ad un sito con delle sezioni a pagamento o al professionista del web che vuole rendere unico il prodotto commissionatogli. Ma anche tu blogger amatoriale puoi volerti distinguere dalla massa e dare un tocco unico al tuo spazio digitale.

Ti sarai quindi chiesto “ Posso personalizzare il login su WordPress magari con un plugin ?”. Con questo articolo vogliamo rispondere alla tua domanda. Vediamo, quindi, passo dopo passo come rendere unica la tua pagina di login di WordPress

Custom Login Plugin: Il Nostro Alleato Per Personalizzare La Pagina Di Login di WordPress

Anche in questo post, come cerchiamo sempre di fare, ti presentiamo uno strumento che potrai utilizzare senza sborsare nemmeno un euro. Si tratta del plugin chiamato Custom Login. E’ un componente aggiuntivo che merita di essere preso in considerazione per la sua semplicità ma anche per la sua completezza. Infatti con questo strumento potrai rendere unica la pagina di login di WordPress in un batter d’occhio senza bisogno di mettere mano ad una riga di codice. Si può ben dire che con Custom Login WordPress creare una pagina personale di autenticazione non è mai stato così semplice.

Come al solito per ottenere i benefici promessi da questo plugin sarà necessario prima di tutto installarlo, aggiungendolo dalla schermata di download dei plugin in WordPress. Per fare ciò recati nella barra di comando a sinistra della dashboard di WordPress e seleziona “aggiungi nuovo”.

 

Nella barra di ricerca digita Custom Login. Clicca su “installa adesso” su Custom Login di Austin Passy.

Finita l’installazione clicca su “attiva plugin”

Una volta che il plugin è operativo potrai intervenire con le modifiche cercando Custom Login nel menù Impostazioni di WordPress

Purtroppo ad oggi non esiste la localizzazione nella nostra lingua, ma seguendo le indicazioni contenute in questo articolo non avrete nessuna difficoltà a configurarlo.

Il Plugin Non Esclude Necessariamente La Pagina Di Login Di WordPress

Custom Login non sostituisce definitivamente la configurazione originale del sito: una volta attivato se non si interviene con nessuna configurazione la pagina di login WordPress per l’accesso alla dashboard rimarrà inalterata.

Personalizzazione del Background della Pagina Di Login Di WordPress

Nell’area denominata HTML è possibile effettuare tutta una serie di regolazioni relative allo sfondo, primo tra tutti la tonalità e la relativa opacità attraverso le impostazioni di “HTML Background Color”. Per dare un maggiore tocco personale è data la possibilità di inserire nella pagina di login WordPress una grafica a tua scelta, dandoti la possibilità di scegliere come collocarla, la grandezza e la possibilità di replicarla più volte.

Attivando l’opzione “flex” nell’ “html background size” sarà possibile consentire all’immagine caricata di adeguarsi alle più varie risoluzioni utilizzate dai navigatori. In questo modo, anche inserendo un’immagine piuttosto ampia, sarà possibile creare rapidamente un look da webmaster navigato.
Se non sai dove trovare degli sfondi all’altezza prova a visitare i seguenti siti:

• Background Labs,
• Patterncooler,
• Brusheezy,
• Lost & Taken,
• Subtle Patterns,
• The Pattern Library,
• Heropatterns,
• Dinpattern.

Su questi siti troverai soluzioni per personalizzare con qualità la tua pagina di login a WordPress senza neanche spendere un centesimo.

Un consiglio: non ti preoccupare delle prestazioni, utilizzando i giusti strumenti come Lunapic potrai caricare le tue foto online, modificarle, ridurle di dimensioni e scaricare il nuovo file per utilizzarlo sulla tua pagina di login WordPress del sito web.

Se questo procedimento ti pare troppo macchinoso puoi scegliere di utilizzare la funzione “repeat” nella sezione “HTML Background Repeat” con un file di minori dimensioni. Così facendo la stessa immagine sarà ripetuta più volte sullo schermo. Ci raccomandiamo di fare attenzione che l’immagine sia senza soluzione di continuità, in modo tale che lo sfondo non appaia come il frutto di ripetizioni di un “campione” ma risulti del tutto omogeneo, come se fosse stato realizzato così fin dall’origine.

Via Il Logo Di WordPress Dalla Pagina Di Login!

Scherzi a parte, con questo plugin puoi sostituire il simbolo inconfondibile di WordPress con un altro a tua scelta.

Tutto quello che devi fare è eseguire l’upload del tuo simbolo nel formato prescelto (jpeg,png etc…) indicando con esattezza le misure in pixel, per essere sicuro che il nuovo elemento si posizioni correttamente senza entrare in conflitto con quanto già presente intorno ad esso.

In alternativa hai la possibilità di rimuovere totalmente il simbolo, compreso quello standard di WordPress.

Modulo Di Autenticazione: Ritocchiamo Pure Questo Elemento Della Pagina Di Login WordPress

Una volta deciso quale deve essere il background nonché il simbolo nella pagina di accesso, possiamo passare a lavorare al modulo di accesso. Come per gli altri elementi anche qui è possibile effettuare delle personalizzazioni. La prima è il colore al di sotto del testo (nel plugin troverai l’etichetta “Background Color”). In alternativa, come per la pagina, è possibile optare per una figura a proprio piacimento (questa opzione è denominata “Background URL”).

• Sono poi presenti tutta una serie di personalizzazioni possibili quali:
• Stondare gli angoli del modulo (opzione “Border radius”). Se vuoi adottare questa soluzione è meglio non spingersi oltre il valore di 50 (maggiore il numero, maggiore la rotondità degli angoli).
• Determinare la consistenza dei rettangoli intorno ai campi (opzione “Border size”). Anche qui vale la regola che aumentandone il valore, aumenterà la consistenza.
• Ulteriore personalizzazione è data dalla possibilità di decidere la tonalità del contorno della casella con l’opzione “Border color”.
• Molto simpatica poi è la possibilità di dare un aspetto 3d al modulo grazie ad un effetto con il quale portare il tutto in rilievo: ci riferiamo alle opzioni “Box shadow” e “Box shadow color”. Manipolando i relativi valori sarà possibile ottenere il risultato desiderato con un effetto di rilievo più o meno marcato. Con la seconda opzione, inoltre è possibile impostare la tonalità desiderata per l’effetto rilievo.

Sezione “varie”

Nella sezione varie (“Miscellaneous” in inglese) è possibile intervenire per modificare la tonalità dei caratteri da usare nelle per le etichette del modulo di accesso (“Label colour”) e la relativa opacità.

 

Below Form Anchor

La zona sottostante il form contiene le impostazioni relative al link di navigazione. Questo può essere personalizzato nei vari aspetti:

• “Nav color” e “Nav text-shadow color” consentono di personalizzare rispettivamente il colore del link di navigazione e l’ombra dello stesso
• “Nav color hover” e “Nav text-shadow color hover” consentono invece di personalizzare i colori del link di navigazione quando il mouse vi passa sopra

Per gli utenti più smanettoni inoltre, è possibile apportare ulteriori modifiche alla pagina di accesso di WordPress inserendo in Custom HTML/CSS and JQuery istruzioni personalizzate. In mancanza di una versione ufficiale in italiano facciamo quindi una traduzione “artigianale” dei vari componenti a cui fa riferimento il plugin da usare come bussola:

Per farti comprendere al meglio le potenzialità abbiamo incluso qui sotto una versione personalizzata da noi della pagina di accesso di WordPress realizzata con il plugin Custom Login.
Indubbie sono le differenze. Usando un background ed un simbolo a nostro piacimento, tonalità personalizzate nei campi di scrittura, margini delle caselle di testo aumentati e spigoli stondati, il risultato è di notevole impatto.

Volendo estremizzare gli interventi è possibile acquistare anche delle estensioni di prezzo variabile con funzioni ulteriori. Chi fosse interessato può visitare direttamente il sito del produttore.

Considerazioni conclusive: essendo Custom Login un plugin backend (vale a dire visibile solo agli amministratori) può essere tranquillamente installato, senza timore che vada ad impattare sulle performance del sito. Infatti questo codice non viene caricato normalmente dagli utenti che accedono al sito ma solo al momento dell’accesso alla pagina di login di WordPress.

Infine non dimentichiamoci della prevenzione: per proteggerci da accessi non autorizzati è sempre bene sostituire almeno ogni 90 giorni la password per accedere alla Dashboard.

Login In WordPress Tramite L’Account Facebook, Twitter, Gmail etc…

Quello che vogliamo presentarti adesso è un plugin che può rivelarsi molto prezioso e molto gradito a tutti gli utenti di WordPress (non a caso le installazioni ad oggi sono diverse decine di migliaia ed il punteggio attribuito è molto elevato: 4 su 5). Tranquillo, anche questo è un plugin gratuito.

Stiamo parlando di Social Login: attraverso questa estensione i tuoi visitatori possono autenticarsi o iscriversi al tuo blog, forum, o ai tuoi servizi, ricorrendo ai propri profili Facebook, Twitter, Google etc…

Questo strumento peraltro è molto versatile poiché integra più di quaranta social networks. Senza dover passare attraverso noiosi form di registrazione ed iscrizione, infatti, i tuoi visitatori potranno non solo iscriversi al tuo sito dalla pagina di login WordPress con l’ account social ma anche autenticarsi e lasciare commenti.
Come anticipato tra i social disponibili troviamo: Amazon, Battle.net, Blogger, Discord, Disqus, Draugiem, Dribble, Facebook, Foursquare, Github.com, Google, Instagram, Line, LinkedIn, LiveJournal, Mail.ru, Meetup, Mixer, Odnoklassniki, OpenID, PayPal, Pinterest, PixelPin, Reddit, Skyrock.com, SoundCloud, StackExchange, Steam, Tumblr, Twitch.tv, Twitter, Vimeo, VKontakte, Weibo, Windows Live, WordPress.com, XING, Yahoo, YouTube. Veramente una lista completa.

Smistare Gli Utenti Dopo Il Login In WordPress

Peter’s Login Redirect è un altro strumento per personalizzare l’accesso a WordPress, in questo caso nella fase successiva all’autenticazione (login).

Ciò che fa questo plugin è molto semplice: reindirizza (cioè invia) gli utenti loggati ad un determinata pagina, sia in fase di ingresso che in fase di uscita dal sito. Così ad esempio dopo il login in WordPress l’ url al quale si è indirizzati corrisponderà a quello che abbiamo impostato.

Tutto ciò avviene in modo molto semplice. E’ infatti sufficiente ricercare il plugin in WordPress, aggiungerlo e quindi attivarlo. Fatto ciò sarà sufficiente recarsi nella pagina Impostazioni ed stabilire in “login/logout redirects” gli indirizzi ai quali vogliamo che sia inviata ciascuna persona dopo il login/logout.

Inutile dire che uno strumento come questo è particolarmente utile in alcuni contesti: quando cioè il sito internet prevede delle aree riservate a pagamento o comunque dei forum tipo BuddyPress.

Per quanto riguarda la gestione di base del tuo pubblico resteranno in funzione le normali procedure di WordPress (iscrizione, login e amministrazione dei profili), mentre il plugin entrerà in gioco subito dopo l’ingresso nell’area riservata, consentendoti di stabilire dove indirizzare l’utente.

Questo plugin può semplificare la vita anche agli amministratori di blog quando gli autori degli articoli sono molteplici. Infatti in questo modo ogni collaboratore potrà essere indirizzato alla sezione del sito che gestisce.

Il plugin prevede due tipologie di configurazioni: “Specific Users” e “Specific Roles”.

Con la prima è possibile decidere l’url di destinazione per ogni visitatore dopo il login o logout. Esiste infatti la possibilità di selezionare ciascun nominativo attraverso una lista a scomparsa.

Con la seconda configurazione è possibile inviare ad una determinata sezione del sito interi gruppi in base al ruolo rivestito: autori, editori, amministratori e via discorrendo.

Sei Un Esperto? Allora Saprai Sicuramente Che…

Esiste la possibilità di personalizzare totalmente la pagina di autenticazione. Questo ovviamente ti consente di evitare il ricorso a componenti esterni che potrebbero in alcuni casi rallentare il sito. Armandoti di pazienza potrai apportare le modifiche che vorrai alla pagina di login WordPress direttamente con PHP, CSS ed HTML.

Poiché questa rappresenta un’esigenza per molti, WordPress ha pensato bene di dedicare questa risorsa all’argomento “pagina di login”. Seguendo le istruzioni sarà possibile introdurre tutte le modifiche desiderate previa aggiunta al file “function.php” dei comandi indicati. Realizza un file style-login.css ed esegui l’upload nella directory del tuo tema  per apportare i cambiamenti desiderati.

Incrementiamo La Sicurezza Del Sito A Partire Dalla Pagina Di Login Di WordPress

Modificare la pagina di login di WordPress può servire anche ad elevare il grado di sicurezza del tuo sito web, attraverso un semplice cambiamento che ti consentirà di trasformare il login WordPress o più esattamente il link della pagina: ad esempio potrai rimuovere il suffisso admin dall’ url www.tuosito.it/wp-admin o addirittura sostituirlo radicalmente personalizzando tutto quando viene dopo l’ultima slash (es. www.tuosito.it/tuo_url).

Attenzione

Prima di procedere con le indicazioni che seguono è bene effettuare copie di sicurezza del tuo sito secondo lo standard 321: conservane tre copie (ovvero il sito live più due copie) su due supporti diversi, di cui almeno uno in cloud. Inoltre occorre fare attenzione se si utilizza uno strumento di caching o plugin che modificano il file .htaccess in quanto potrebbe capitare di rimanere esclusi dal sito se non vi fosse perfetta compatibilità tra i componenti installati. Adottando queste precauzioni infatti puoi comunque utilizzare le copie di backup per ripristinare il tuo sito anche se la pagina di Login WordPress non funziona.

Per modificare il link di accesso alla pagina di login di WordPress possiamo usare WP Hide Login, un plugin backend gratuito di grande successo (conta diverse centinaia di migliaia di attivazioni) disegnato per rendere quest’operazione un gioco da ragazzi. Come al solito il componente aggiuntivo deve essere prima aggiunto ed attivato: solo allora sarà possibile configurarlo correttamente dalla sezione Generali del menù Impostazioni.

Verso la fine della pagina è possibile trovare le voci di configurazione del plugin. Sarà sufficiente impostare un valore nella “login url” per rendere l’indirizzo immesso la nuova pagina di login di WordPress. A questo punto oltre ad annotarci il nuovo indirizzo sarà opportuno…aggiungere il nuovo collegamento ai preferiti del browser per essere sicuri di non rimanere chiusi fuori!.

L’ultimo passaggio consiste nella conferma delle impostazioni che avviene attraverso la pressione del bottone “save changes”

Riflessioni Finali

In questo articolo sono state presentate tutta una serie di opzioni per personalizzare la pagina di login del tuo sito WordPress, dal punto di vista estetico e dal punto di vista “funzionale”.

Con questi piccoli interventi che richiedono solo pochi minuti potrai dimostrare di essere uno specialista del web e stupire amici e clienti che non conoscono questi strumenti.

Anticipando le domande che alcuni clienti ci hanno già fatto per argomenti simili ricordiamo che le informazioni contenute in questo articolo valgono per qualunque servizio di hosting: infatti la pagina di login WordPress su Aruba,  Register, Site Ground, Keliweb etc… è sempre la stessa.

Poiché non si finisce mai di imparare noi di Maven Web, siamo sempre desiderosi di confrontarci con il nostro pubblico: ti eri mai posto il problema di personalizzare la pagina di login di WordPress? Hai usato anche tu i plugin che abbiamo illustrato in questo articolo? Hai utilizzato altri strumenti o addirittura hai programmato direttamente tu le modifiche? Facci sapere, siamo estremamente curiosi!

Al prossimo post, un saluto dal Team di Maven Web.