Per rendere un sito web unico e riconoscibile, è necessario dargli una struttura efficiente e un aspetto grafico che rispecchi la tua identità. Questo è l’obiettivo della personalizzazione di WordPress, un processo che va ben oltre la semplice scelta di un tema.
Attraverso una serie di opzioni potenti e accessibili, è possibile dare al tuo progetto la forma e la funzionalità che desideri. In questa quarta lezione del nostro corso, esploreremo le principali strade che il CMS mette a disposizione per personalizzare il tuo sito WordPress.
Questa guida completa copre tutti i pilastri: dalla selezione del Tema più adatto, all’organizzazione della struttura con Widget e Menu, fino alle modifiche avanzate tramite Codice e l’utilizzo dei Child Theme. Non riguarda però la personalizzazione del sito tramite il Customizer di WordPress, argomento che è trattato nella Lezione 5 del corso.
Corso base WordPress Lezione 4
Personalizzare un sito WordPress significa innanzitutto fornirgli una struttura efficiente ed un aspetto grafico gradevole.
Per farlo comodamente il nostro CMS ci mette a disposizione una serie di opzioni di base, semplici e potenti allo stesso tempo. Le vedi nell’immagine.
Naturalmente per potervi accedere devi aver seguito la lezione 1, dedicata alla configurazione iniziale e personalizzazione di WordPress.
Personalizzare un sito WordPress con le opzioni aspetto: la scelta del tema
Quindi, nel nostro ormai abituale menù amministrativo di WordPress cerchiamo la voce “Aspetto“. Ci permette di accedere a sette tipi diversi d’impostazione del sito e personalizzare per l’appunto, il suo aspetto.
Partiamo dalla prima voce, quella che riguarda i temi. Come sai una delle caratteristiche fondamentali per realizzare un sito WordPress bello e funzionale è la scelta del tema, o template grafico.
É il primo e più importante passo per la personalizzazione del tuo sito ma anche una delle scelte più difficili da fare, perché di temi grafici, sia gratuiti che a pagamento, ne esistono a migliaia.
Inoltre, un tema WordPress non è solo una questione di font e colori, ma definisce anche la struttura portante del tuo progetto; la loro differenza principale sta spesso nel set di funzionalità integrate.
Riguardo i temi commerciali, spesso comprendono un Page Builder, ovvero un costruttore di pagine visuale (come Elementor o Divi) che permette di creare layout complessi senza scrivere codice.
Valutare perciò la scelta del tema in funzione del Page Builder fornito, è una decisione fondamentale, che influenzerà profondamente il tuo modo di lavorare e il livello di personalizzazione che potrai raggiungere.
Ma questo discorso lo affronteremo in futuro.
I temi di WordPress forniti durante l'installazione
Continuando nell’uso della nostra installazione pulita di WordPress, accediamo quindi al pannello per la scelta del tema, per ora sono presenti soltanto i temi standard base caricati durante l’installazione ma è proprio qui che puoi scegliere tra quelli gratuiti a disposizione.
Premendo il pulsante “Aggiungi nuovo tema“ si apre non solo un nuovo pannello, ma come dicevo prima, un vero e proprio mondo di template a disposizione.
Come puoi notare dall’immagine sotto se per i temi in evidenza trovi soltanto 15 anteprime, cliccando sul link “Popolari“ e successivamente su “Più recenti“, vengono proposti 4016 temi nel primo caso e ben 7069 nel secondo, tutti gratuiti!
Come personalizzare il sito WordPress usando un tema gratuito
Tralascio il link “Preferiti” e passo all’opzione “Filtro Funzionalità“, molto più utile. Anche in questo caso usiamo un’immagine per farci aiutare, e vediamo quali filtri di ricerca abbiamo a disposizione.
Teoricamente potresti selezionare tutte le caselle ma non servirebbe a granché. Considera invece di scegliere al massimo 8 o 10 opzioni tra le tre colonne, anche se probabilmente te ne serviranno molte meno.
Tra l’altro, più aumentano i filtri applicati e tanto meno saranno i temi proposti, ovviamente. Inoltre, se conosci il nome di un tema gratuito che vuoi provare, puoi cercarlo inserendo il suo nome direttamente nella casella di ricerca.
Se il nome è scritto correttamente e il tema è pubblicato su wordpress.org, ti comparirà. Potrai quindi vederne le caratteristiche e decidere se scaricarlo o meno.
Usare widget e menu per la navigazione e la struttura
Dopo aver scelto il tema, il passo successivo è organizzare la struttura e la navigazione del sito. WordPress offre due strumenti potentissimi per questo: i widget e i menu.
Personalizzare WordPress con i widget
Saltiamo per il ora l’opzione di menù “Personalizza” e passiamo a quella successiva che riguarda l’uso dei Widget.
I widget sono delle piccole porzioni di codice che vengono inseriti nelle barre laterali o nel footer del sito, sempre che il tema lo permetta.
Generalmente è un’operazione possibile in tutti i temi, a volte però nel footer di alcuni di loro la quantità di widget che si può inserire è limitata proprio dal tema.
Esistono poi due tipi di widget, quelli nativi di WordPress e quelli inseribili grazie alla presenza di plugin installati nel sito.
Ad esempio, se nel tuo sito usi Contact Form 7, uno dei plugin più usati per creare moduli di contatto e di registrazione, potrai inserire un suo modulo sia nel footer che nelle barre laterali.
Usare i widget è quindi un sistema molto utile nella personalizzazione di un sito WordPress, in particolare se hai un blog e usi le barre laterali.
Scelta dei widget e loro inserimento nel sito
Nell’immagine sopra sono elencati a sinistra i widget inseribili mentre sulla destra ci sono le zone del tema dove puoi metterli. Come detto è infatti il tema che decide dove puoi posizionare i widget, anche per questo la scelta del template deve essere fatta attentamente.
Il tema che ho deciso di usare per questo corso base è il Twenty Sixteen e come vedi permette l’uso dei widget solo in tre aree: nella barra laterale destra e due sotto al contenuto (nel footer).
Per inserire un widget è sufficiente cliccare sulla freccia (vedi foto), così facendo si apre un menù a tendina nel quale scegli dove inserirlo. Una volta decisa la posizione WordPress lo mostrerà a destra, nella sezione dove hai scelto di farlo comparire. A questo punto puoi iniziare a configurarlo.
Al termine salvi cliccando sul link “Fatto” e il widget viene memorizzato nel punto scelto.
Un altro modo per inserire i widget nelle pagine e articoli
Puoi personalizzare l’aspetto di WordPress tramite widget anche in un altro modo. Non è né migliore né peggiore di quello appena descritto, ma semplicemente è diverso e alternativo.
Se guardi nuovamente l’immagine precedente, puoi notare in alto a destra il link “Abilita la modalità accessibile“. Cliccando sopra potrai utilizzare questo sistema al posto di quello classico, a te la scelta di cosa preferisci.
Personalizzare il menù del sito WordPress
I menu, sono il cuore della navigazione. Con WordPress puoi creare diversi menu per diverse aree del sito, ma la loro posizione e il numero di menu disponibili dipendono dal tema in uso.
La gestione intuitiva di WordPress ti permette di creare anche sottomenu, con un semplice metodo “drag and drop”, per organizzare in modo logico i tuoi contenuti.
Nella progettazione del menu del tuo sito dovrai prestare molta attenzione, perché l’aspetto, il posizionamento, il numero delle voci, la sua lunghezza, nonché la sua struttura, ha una enorme importanza se vuoi personalizzare al meglio il tuo sito WordPress.
Quando ti appresti a creare un menù (ma anche per ogni altra sezione dove l’utente interagisce con il sito) pensa a come vorresti trovare tu le informazioni.
Mi spiego meglio: nello sviluppo web esiste una regola, quella dei tre click. Questa dice che per accedere alle informazioni più importanti l’utente non dovrebbe fare più di tre click nel sito.
Anche se non sempre è possibile seguirla, dovresti sforzarti il più possibile per soddisfarla. Infatti è stato verificato che un numero superiore di passaggi porta all’abbandono del sito più rapidamente.
WordPress ti consente di realizzare più di un menù nel tuo sito (teoricamente infiniti), personalizzando quindi notevolmente i tuoi contenuti. Ancora una volta però è il tema in uso che decide dove puoi inserirli.
Come vedi dall’immagine quasi ogni contenuto del sito può essere una voce di menù, quindi articoli, pagine e categorie, puoi usarle come voci e creare dei menù per il footer o per la barra laterale. In questi casi li posizioni come se fossero dei widget.
Per realizzare il menù inserisci il suo nome e premi “Crea menù“. A questo punto e in presenza di contenuti, dalla TAB a sinistra “Aggiungi voci di menù” scegli cosa inserire.
Opzione link personalizzati dei menù di WordPress
Se ti stai chiedendo cosa sono i link personalizzati, la risposta è molto semplice: sono collegamenti a URL decisi e inseriti manualmente da te.
CONSIGLIO: se vuoi creare una voce di menù principale che al passaggio del mouse faccia apparire un menù a discesa con dei link (pagine, articoli o altro), ovvero che visualizzi un sottomenù, l’uso dei link personalizzati è un ottimo sistema.
Quello che devi fare è inserire nel percorso URL che viene suggerito, il carattere # (cancelletto).
Una volta presente a destra come voce del tuo menù, elimina il percorso: se lo lasci, ad ogni click sulla voce avrai un refresh della pagina (perché funziona da link ancora).
Personalizzare i menù di WordPress con i sottomenù
Una delle caratteristiche che hanno reso famoso WordPress è la sua semplicità nello svolgere operazioni che da codice diventerebbero noiose e ripetitive. La gestione dei menù è una di quelle.
Perciò, se hai bisogno di realizzare un menù a comparsa e hai seguito il consiglio che ti ho appena suggerito, proseguendo nel modo che segue lo creerai facilmente.
Uno dei sistemi più apprezzati è quello di usare il drag and drop tipico dei programmi WYSIWYG. Nella personalizzazione del menù di un sito WordPress si possono creare i sottomenù, oppure spostare le voci, semplicemente con il trascinamento.
In questo caso non c’è bisogno di spiegare, basta che osservi le due immagini qui sotto.
Trascina le voci create nel sottomenù
La personalizzazione di un menù WordPress in modo da raggruppare le informazioni in modo logico ti permette di fornire i link ai tuoi utenti in modo immediato e realizzare una struttura del sito facile da comprendere da parte dei motori di ricerca.
Quest’ultima cosa è tra l’altro molto apprezzata sia da Google che dagli altri motori di ricerca.
Personalizzare un sito WordPress con le modifiche al codice
Salto anche in questo caso un paio di voci del menù e vado a quella che riguarda la modifica del codice: “Editor del tema“.
C’è un motivo: delle opzioni “Header e Sfondo” ne parlo infatti diffusamente in un articolo a parte che spiega in modo dettagliato, come usare l’opzione personalizza aspetto di WordPress.
A questa opzione ho voluto dedicare un articolo intero in quanto la customizzazione con questo pannello necessita di una trattazione lunga e specifica. Intanto osserva la foto qui sotto.
Si tratta dello spazio nel quale (se conosci la sintassi dei CSS e il linguaggio PHP), puoi personalizzare WordPress modificando parti del tuo tema.
Evita di personalizzare con il codice se non conosci i linguaggi
Se non hai conoscenza né dell’uno né dell’altro linguaggio è meglio che non tocchi nulla, gli effetti potrebbero essere devastanti e il tuo sito potrebbe non funzionare più. Diversamente puoi cominciare facendo dei ritocchi all’aspetto del sito agendo sul CSS.
Il codice che vedi e che viene proposto ogni volta che clicchi sull’opzione “Editor del tema” è proprio quello, si tratta del CSS originale del tema che stai usando. Alla tua destra trovi l’elenco dei file che puoi selezionare e modificare.
Come sempre è sufficiente cliccare sul relativo link per vedere il suo codice all’interno dell’editor e modificarlo, ognuno di loro si riferisce ad una zona specifica o a funzionalità particolari del tema.
Alcuni li troverai in tutti i temi (ovviamente con codice diverso), perché definiscono parti del sito che sono sempre presenti e parte della struttura stessa di WordPress.
Modifiche avanzate e sicurezza: tema figlio ed editor
Come vedi nell’elenco qui sotto (ma anche nell’immagine sopra), è piuttosto intuitivo comprendere a quale parte del sito si riferiscono i file PHP e cosa personalizza il loro codice.
File comuni a tutti i temi:
- Style.css: il foglio di stile del tema.
- Functions.php: contiene le funzioni che definiscono i formati del sito.
- 404.php: definisce la pagina 404 del tema.
- Archive.php: imposta la visualizzazione di una pagina che contiene i risultati di una ricerca nel sito.
- Comments.php: definisce come mostrare la zona dei commenti quando sono abilitati.
- Footer.php: comunemente chiamato piè di pagina, definisce la visualizzazione del fondo di ogni pagina (articolo, categoria, etc) del sito.
- Header.php: intestazione del tema: tutto ciò che viene mostrato nella parte alta del sito (menù, logo e altro). Usato anche per inserire meta tag e parti di codice nascosto ai visitatori.
- Index.php: il file principale del tema, richiama tutti gli altri ed è il responsabile della visualizzazione della home page.
- Page.php: definisce la visualizzazione delle pagine.
- Search.php: è’ il file che filtra e mostra i risultati di una ricerca nel sito.
- Sidebar.php: richiama la barra laterale del tema mostrando i widget che hai scelto di usare.
- Single.php: usato per impostare la visualizzazione degli articoli singoli nella loro interezza.
Come detto prima, una modifica errata può far smettere di funzionare l’intero sito, per questo motivo, la pratica più sicura e professionale è utilizzare un tema figlio.
Un tema figlio (child theme) ti permette di ereditare tutte le funzionalità del tema principale e di apportare modifiche al suo codice in file separati. In questo modo, quando il tema genitore si aggiorna, le tue personalizzazioni non andranno perse.
L'impatto della personalizzazione sulla performance
Un aspetto spesso trascurato nella personalizzazione è la sua influenza sulle performance del sito.
L’aggiunta di molti widget, l’installazione di numerosi plugin o l’uso di Page Builder complessi può appesantire il tuo sito e rallentarne il caricamento.
Per questo è fondamentale trovare un equilibrio tra personalizzazione e ottimizzazione, scegliendo solo le funzionalità di cui hai realmente bisogno per non compromettere l’esperienza utente e il posizionamento su Google.
Conclusioni: come personalizzare un sito WordPress e renderlo efficace
La personalizzazione va però ben oltre i colori e i font. Riguarda anche la capacità del tuo sito di adattarsi e offrire un’ottima esperienza su tablet e smartphone. Ogni modifica infatti, a partire dal CSS al layout, deve rispettare il principio “mobile-first”.
Per un approccio completo che integri le modifiche estetiche con i principi fondamentali di guida al design responsive e alla personalizzazione del sito, consulta il nostro Hub.
Per ora mi fermo qui. Nella lezione 5 vedremo come usare l’opzione personalizza aspetto di WordPress.
È stata separata da questa perché comprende molte voci di menù, che completano la personalizzazione di un sito WordPress e concludono di fatto questa parte del corso base.
Al termine della quinta sezione inizieremo a parlare dei contenuti veri e propri di un sito WordPress, quindi degli articoli e delle pagine senza tralasciare l’argomento plugin.
- Vuoi creare un sito web professionale per la tua attività?
Contatta senza impegno la nostra agenzia web e chiedi un preventivo gratuito!
Lascia un commento