Usare l’opzione personalizza aspetto di WordPress
Con la lezione 5 di oggi vediamo come usare l’opzione personalizza aspetto di WordPress, una delle più importanti del CMS. Il personalizzatore di WordPress, sempre presente in tutti i temi, dà la possibilità d’impostare le caratteristiche grafiche e l’aspetto del sito. Vediamo come si fa.
Corso base WordPress Lezione 5
Come usare l’opzione personalizza aspetto di WordPress
Modifica della grafica e presentazione del sito
Con l’opzione personalizza aspetto di WordPress, completiamo l’impostazione di un sito web base.
Per poterne parlare nel modo più completo possibile ho voluto dedicargli un articolo intero, perché le numerose possibilità fornite dal customizzatore necessitano di uno spazio dedicato.
Personalizza l’aspetto di WordPress con il suo customizzatore
Vediamo subito cosa offre questa opzione, clicchiamo quindi sulla voce personalizza evidenziata nell’immagine sopra.
Il risultato è quello qui sotto. Sulla destra è mostrato l’aspetto della pagina principale, mentre a sinistra ci sono le opzioni modificabili del tema in uso.
Come detto in altri temi possono esserci ulteriori voci, fornendo quindi maggiori opzioni per personalizzare l’aspetto del sito.
Modificare l’aspetto base del tema installato
Quello che vedi ora come pagina principale del sito è il risultato delle impostazioni standard.
Alcune possono essere cambiate semplicemente cliccando sulle icone a forma di matita con sfondo blu che vedi nella pagina.
Si tratta di un’ulteriore possibilità data allo sviluppatore che però non approfondiamo in quanto a noi interessa usare la personalizzazione del tema con il customizzatore interno.
Analizziamo il menù principale voce per voce.
Menù principale del personalizzatore
Partiamo dal basso, quindi dalla barra orizzontale con quattro link utili.
Il primo a sinistra (‘Nascondi i controlli’), permette di vedere la pagina del sito a pieno schermo facendo scorrere il menù personalizza, gli altri tre ci mostrano invece come è visualizzata dai dispositivi desktop (standard), tablet e smartphone.
La sottolineatura dell’icona indica il tipo di dispositivo in uso (in questo caso un monitor di PC o LAPTOP), cliccando sugli altri due vedi invece la pagina del sito come se stessi usando un tablet o uno smartphone.
Notiamo poi un grosso pulsante blu in alto: l’indicazione ‘pubblicato’ di colore azzurro chiaro e il fatto che sia disabilitato indicano che non ci sono modifiche da salvare.
Quando inizieremo a farle il pulsante sarà abilitato e la descrizione ‘pubblicato’ cambierà in ‘pubblica’, diventando di colore bianco.
A quel punto premendolo, avremo il salvataggio e la pubblicazione delle modifiche.
Personalizza l’aspetto di WordPress inserendo titolo e motto
Cosa fanno le voci di menù dell'opzione personalizza
Denominazione del sito
Il primo aspetto di cui occuparci riguarda la descrizione del sito, qui puoi scrivere il titolo e il suo motto o modificarli.
Potresti infatti aver già inserito queste informazioni in fase d’installazione o dal menù impostazioni (ne abbiamo parlato nella lezione 2).
Puoi scegliere se visualizzare il motto o no: se decidi che è utile comparirà nella barra del menù sotto il nome del sito.
Inoltre puoi aggiungere il logo e la favicon, ovvero come suggerito nella nota, quell’icona che viene mostrata nella scheda del browser quando si apre una delle pagine del tuo sito WordPress.
Colori predefiniti del tema
Parlando della personalizzazione dei colori, iniziamo a notare le prime differenze alle quali andremo incontro utilizzando temi diversi.
Quello in uso (Twenty Sixteen) permette ad esempio di scegliere uno schema di colore base valido per tutto il sito, questa è una particolarità che non capita spesso.
Così come è raro il poter modificare dal pannello Personalizza ben 5 colori o più. Infatti eccetto alcuni casi (usando temi free), al massimo si può intervenire sul colore dello sfondo e un altro a scelta dell’autore del tema (il colore del testo per esempio).
In questo caso abbiamo a disposizione un tema gratuito con buone possibilità di personalizzazione.
NOTA
Sia per la modifica dei colori che per altre caratteristiche di personalizzazione dell’aspetto, è preferibile usare i CSS. Per far questo usa l’opzione inserita nel menù personalizza (CSS aggiuntivo) della quale parlo più avanti.
Immagine dell’header
Anche in questo caso è a discrezione dell’autore del tema, in base a come lo ha creato, la dimensione accettata dell’immagine.
Le misure suggerite qui sono standard, non è detto però che usando un tema commerciale si abbiano le stesse limitazioni.
L’immagine dell’header è a tutti gli effetti quella che verrà mostrata nella pagina principale dei tuoi articoli (il tuo blog) e di conseguenza nella home del tuo sito se quello che vuoi realizzare è un blog.
Immagine di sfondo del sito
Un tempo l’immagine di sfondo del sito era parecchio usata (anni ’90) e in alcuni casi lo è ancora.
Per come è concepita però la UX attuale pare più che altro un sistema per inserire un banner pubblicitario a tutta pagina sotto il contenuto.
Una scelta discutibile anche per quanto riguarda la velocità di caricamento del sito (importantissima ai fini della ottimizzazione SEO), resta comunque un metodo per personalizzare l’aspetto del sito.
Personalizza il menù del sito
Si tratta di una delle personalizzazioni e impostazioni fondamentali per ogni sito.
Con un menù ben strutturato offri all’utente un accesso più rapido ai contenuti più importanti del sito.
Dell’argomento menù trovi una descrizione di come realizzarlo al meglio nella lezione 4 di questo corso base (ti consiglio di leggerlo).
Utilizzando il personalizzatore puoi fare le stesse cose descritte e impostabili dalla bacheca.
Inoltre con il personalizzatore puoi tenere sott’occhio più informazioni contemporaneamente e al tempo stesso realizzare e posizionare i menù in modo visuale.
Usare personalizza aspetto di WordPress per definire i menù
Come impostare e creare i menù con il personalizzatore
Come vedi nel menù home abbiamo inserito la pagina e l’articolo di esempio di WordPress e aggiunta la categoria standard ‘senza categoria’, inoltre abbiamo creato un tag che abbiamo chiamato ‘Plugin’ e quindi inserito nel menù.
Cliccando sulla freccia della voce Articolo si apre la tendina che abilita alla modifica delle sue opzioni (vedi foto).
Per poter avere quei campi visibili, si è dovuto selezionarli in una fase precedente, tramite l’opzione menù dalla dashboard di WordPress (vedi l’immagine sotto).
Scelta delle proprietà avanzate del menù
Innanzitutto clicca l’opzione “impostazione schermata” in alto a destra dopo aver selezionato “Menù” dalla voce “Aspetto”.
Quindi sotto la voce “mostra proprietà avanzate del menù” spunta le seguenti opzioni:
- Destinazione link.
- Attributo titolo.
- Descrizione.
In questo modo forniamo maggiori informazioni all’utente e possiamo decidere cosa aprirà ogni link presente nel menu.
Modifica delle voci di menù esistenti
Torniamo al personalizzatore del tema
Come sempre è molto intuitivo quello che puoi fare. In questo caso puoi:
- modificare la voce del menù (etichetta di navigazione),
- inserire una frase che appare quando il mouse è sulla voce del menù (attributo titolo),
- inserire una descrizione.
Quest’ultima può non essere visualizzata se il tema non lo consente.
Le stesse operazioni puoi farle per ogni voce del menù, indipendentemente che si tratti di link ad articoli, pagine o altro.
Ma non è tutto, tornando infatti all’immagine del menù home puoi notare che usando l’interfaccia personalizza aspetto di WordPress puoi scegliere dove mostrare il menù, e se ogni volta che crei una pagina desideri aggiungerla automaticamente.
Scegli, modifica e crea il menù principale del sito
Questa impostazione a volte può creare qualche confusione, ci si chiede infatti per quale motivo debba esserci un ulteriore sistema quando il precedente è più che sufficiente.
Effettivamente sembra ridondante, in realtà il suo uso principale e la sua comodità sono quelle di selezionare la posizione di un menù e renderlo principale, quando ne hai più di uno.
Inoltre sempre da qui puoi decidere quale sarà il menù dedicato ai social, oppure crearlo se non esiste per poi assegnarlo a tale posizione.
Scegliere e posizionare i widget
Come avrai notato il menù personalizza aspetto di WordPress è realizzato in modo tale che per ogni opzione hai un’interfaccia ripetitiva, quindi molto confidenziale e intuitiva per le operazioni che puoi fare, al punto tale che spesso mi trovo a ripetere gli stessi suggerimenti.
Anche in questo caso trovi visualizzate le posizioni dove puoi inserire i widget, messe a disposizione dal tema in uso.
In questo tema puoi posizionare i widget nella barra laterale e in altre due posizioni sotto il contenuto.
Cliccando sulla freccia della posizione barra laterale vengo mostrati i widget presenti.
Puoi eliminarli o inserirne di nuovi, oppure cambiare (o scrivere) il titolo per ognuno di loro, questo per ogni posizione disponibile.
Impostazioni homepage
Questa opzione del personalizzatore di WordPress ti permette di scegliere cosa mostrare nella tua homepage.
Il suggerimento e le indicazioni che leggi sono chiarissime su cosa puoi fare: se hai già un po’ di articoli e pagine puoi impostare quale sarà la home (una pagina statica) e quale invece raccoglierà tutti gli articoli del blog.
Se vuoi puoi crearle da qui.
CSS aggiuntivo
L’ultima opzione del menù personalizza riguarda la possibilità di inserire del codice CSS nel tuo tema.
Si tratta di impostazioni di visualizzazione della grafica (a questo servono i file CSS) che si aggiungono ai CSS nativi e a parità di comando li sostituiscono.
Perciò se per esempio vuoi cambiare un colore nel tuo sito è preferibile farlo da qui.
Ogni nuovo comando scritto nel CSS aggiuntivo prende il posto di quello equivalente già esistente.
Chiaramente devi avere confidenza con i CSS per evitare problemi di visualizzazione.
Nel caso tu non abbia esperienza in questo meta linguaggio trovi un’ottima guida aggiornata sul sito di html.it.
Come usare l’opzione personalizza aspetto di WordPress
In questa quinta lezione del corso WordPress abbiamo visto come usare l’opzione personalizza l’aspetto di WordPress, a questo punto l’impostazione base del tuo sito è completa.
Ti dò quindi appuntamento alla prossima lezione, la numero 6, dove vedremo come come scrivere un post efficace per il tuo sito web, un passo fondamentale per farti trovare da chi cerca su Google.
Contattaci per un preventivo gratuito
Creazione siti web professionali
Per promuoverti online in modo efficace ordina adesso il tuo nuovo sito web!
Ci occupiamo di tutto quello che riguarda la presenza di aziende, professionisti e attività commerciali su Internet.
Siamo specialisti in WordPress e nella creazione di siti web professionali, servizi di assistenza e di manutenzione e della gestione di siti WordPress. Se il tuo sito ha bisogno di un restyling possiamo farlo, così come ottimizzarlo in chiave SEO per renderlo visibile su Google.
Qualsiasi esigenza tu abbia riguardo WordPress e il web, contattaci!
