Filtra la ricerca ...
Frase esatta
Categorie

Come personalizzare la pagina login di WordPress

Ciao e benvenuto. Se hai bisogno di chiarimenti sul codice, lascia un commento (no WhatsApp); ricorda però che non fornisco assistenza gratuita sugli articoli che ho scritto nè personalizzo il codice in modo gratuito, quindi se la tua richiesta va oltre il semplice "aiutino", se vuoi mi chiedi una consulenza a pagamento nella pagina contatti. Grazie della comprensione. Alessio

Oggi vediamo come personalizzare con logo e colori differenti il form di login del pannello amministrativo di WordPress. Giusto per la cronaca il form predefinito è il seguente :default_wordpress_login

Una della svariate ragioni per cui customizzare il pannello di accesso di WordPress è perchè semplicemente quello di default non ci piace e lo vogliamo personalizzare con il nostro logo e renderlo più carino, perchè un cliente c’è l’ha chiesto o perchè più semplicemente siamo smanettoni e vogliamo “giocare” un pò con WP 😛

Passiamo quindi all’azione.

Come cambiare il logo di accesso di WordPress

Per sostituire il logo di WordPress con uno personalizzato è necessario creare una funzione di WP che faccia una sorta di ovverride del logo di default, tutte le funzioni di WordPress devono essere scritte in un file che si chiama function.php e che si trova di norma nella root principale del template che state utilizzando, per esempio :

wp-content/themes/nometuotema/function.php

se il file non esiste, ma è davvero raro, lo potete creare manualmente e poi copiarlo via FTP.

Quindi apriamo il file function.php ed alla fine incolliamo questa parte di codice.

Questa è la funzione che ci permette di caricare un nuovo logo, in buona sostanza :

get_stylesheet_directory_uri(); = comunica a Worpdress qual è il percorso principale del tema utilizzato, quindi wp-content/themes/nometuotema/

Ora sempre nella root del template create una cartella custom_login, al suo interno un’altra img e poi css, ed infine la cartella js per avere una struttura del genere

Struttura delle cartelle per override login form di WP

custom_login = è la cartella che conterrà il necessario per la modifica al form login

img = qui ci copieremo il logo, facendo attenzione che il nome dell’immagine sia wplogin.png

css = creeremo e copieremo un file css che apporterà le modifiche grafiche al form, questo file dovrà chiamarsi necessariamente custom_login.css

js = questa cartella conterrà l’eventuale file javascript che si dovrà chiamare

A questo punto possiamo salvare il file e ricopiarlo in ftp, accedendo al pannello di login di WordPress dovreste vedere il vostro logo.

Come modificare il link (URL) del logo di login di WordPress

Siccome so che siete bramosi ed eterni insaziabili di codice PHP 🙂 , scrivamo una funzione che permette di modificare la url che si ottiene cliccando sul logo nella schermata di login di WP.

Questa fuzione va incollata sotto alla prima che abbiamo scritto in precedenza, sempre nel famoso file function.php, quindi date un invio e copiate / incollate

Alla terza riga del codice return home_url(); stiamo dicendo a WordPress che al click sul logo rimanderà al sito internet (quindi non alla schermata di login), ma se volessimo specificare un indirizzo diverso possiamo sostituire la riga con la seguente return ‘http://www.google.it’ ;

Come modificare il layout grafico della pagina di login di WordPress

Bene, adesso scriviamo l’ultima funzione, questa invece ci permetterà di agire sulle modifiche grafiche della pagina di login, semplicemente scrivendo del puro CSS ! Fico no ?!

Questa fuzione va incollata sotto alla seconda che abbiamo scritto prima, sempre nel file function.php

Ora salvate le modifiche al file function.php e ricopiatelo in FTP.

Aprite il file custom_login.css ed incollateci il codice qui sotto, poi salvate e ricopiate il file in FTP nell’apposita cartella.

Ovvio che potete sbizzarrirvi come volete se conoscete CSS e JS, io in questo caso per ragioni di tempo non ho utilizzato js, ma voi potete farlo tranquillamente.

Come personalizzare form login di WordPress

Che ha tempo e voglia, puoi utilizzare i codice CSS che posto qui sotto per personalizzarsi da sè il layout del form login.

alla prossima!

Potrebbe interessarti anche ...

Hai bisogno di una consulenza, lo sviluppo di un plugin o vuoi incrementare le performance del tuo sito ?

Se vuoi postare codice usa codeshare.io
Se vuoi postare uno screeshot usa postimages.org ed inserisci l'url nel commento.

Lascia un commento


Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.

Iscriviti e ricevi trucchi e guide

Inserisci la tua email per ricevere gli ultimi articoli dal blog.

Inserendo i tuoi dati confermi di aver letto ed essere d’accordo con la privacy policy.