Come personalizzare un sito web WordPress e renderlo unico

Come personalizzare un sito web WordPress

Corso base WordPress Lezione 4

Nella quarta puntata del nostro corso base gratuito parliamo di una fase importante per ogni sviluppatore, e cioè
come personalizzare l’aspetto di un sito web WordPress.

Le potenti opzioni offerte da questo CMS e dai suoi plugin ci aiuteranno a rendere gradevole e ben organizzato il nostro sito.

Come personalizzare un sito web WordPress

Personalizzare un sito WordPress significa innanzitutto fornirgli una struttura efficiente ed un aspetto grafico gradevole.

Per farlo comodamente il sistema ci mette a disposizione una serie di opzioni di base, semplici e potenti allo stesso tempo.

Le vedi nell’immagine.

personalizzare-un-sito-wordpress-opzione-aspetto
Il sottomenu dell'opzione Aspetto di WordPress.

Personalizzare un sito web WordPress
con le opzioni ASPETTO

Nel nostro ormai abituale menù amministrativo di WordPress, troviamo la voce ASPETTO. Ci permette di usufruire di sette tipi diversi di accesso alle impostazioni del sito, per personalizzarlo nella sua visualizzazione.

Partiamo dalla prima voce quella che riguarda i TEMI.

Come sai una delle caratteristiche fondamentali per costruire un sito WordPress, bello e funzionale, è la scelta del tema o template grafico.

É però anche una delle scelte più difficili da fare, non fosse altro che di temi ne esistono a migliaia, sia gratuiti (con versione PRO a pagamento), che esclusivamente commerciali.

La decisione su quale tema usare può quindi occupare parecchio tempo, perché non è vero che un tema vale l’altro e cambiano solo font, colori e poche altre caratteristiche. Soprattutto nei temi commerciali, le diversità possono essere davvero notevoli.

La presenza o meno di un page builder è una per esempio: la sua semplicità d’uso e la completezza di funzionalità, può influire sui tempi di creazione del sito e sul risultato finale.

Ma questo è un altro discorso e sarà un argomento futuro di questo blog.

Temi WordPress forniti con l'installazione

Continuando con la nostra installazione pulita di WordPress accediamo al pannello per la scelta del tema, per ora sono presenti soltanto i temi standard base, caricati appunto durante l’installazione.

come-personalizzare-un-sito-wordpress-scegliere-tema
Scegliere il tema grafico del sito in WordPress

Realizzazione siti web professionali

SitiWeb-WP realizza siti web in WordPress per ogni esigenza, se desideri trovare nuovi Clienti online,

chiedi un preventivo!

Premendo il pulsante ‘AGGIUNGI NUOVO TEMA’ si apre non solo un nuovo pannello, ma come dicevo prima un vero e proprio mondo di template per il tuo sito.

Come infatti puoi notare dall’immagine qua sotto, se per i temi in evidenza trovi soltanto 15 anteprime, prova a cliccare sul link ‘Popolari’ e poi su ‘Più recenti’. Attualmente vengono proposti 4016 temi nel primo caso e ben 7069 nel secondo, e sono tutti gratuiti!

come-personalizzare-un-sito-wordpress-pannello-temi
Pannello WordPress per la scelta del nuovo tema grafico.

Personalizzare il sito web usando un
tema WordPress gratuito

Tralascio il link ‘Preferiti’ e passo all’opzione Filtro Funzionalità, molto più utile. Anche in questo caso osserviamo un’immagine per farci aiutare e vediamo quali filtri di ricerca hai a disposizione.

come-personalizzare-un-sito-wordpress-funzionalita-tema
Le funzionalità selezionabili nella scelta di un tema gratuito.

Naturalmente per assurdo potresti selezionare tutte le caselle, ma non sarebbe granché logico e nemmeno proficuo. Considera quindi di scegliere al massimo 8 o 10 opzioni tra tutte e tre le colonne, probabilmente te ne serviranno meno. Inoltre più aumentano i filtri applicati, tanto meno saranno i temi proposti tra i quali scegliere.

Se poi conosci il nome di un tema gratuito puoi inserirlo nella casella di ricerca e premere invio. Se hai scritto correttamente ed il tema è ancora pubblicato su wordpress.org, ti comparirà e potrai vederne le caratteristiche e decidere di scaricarlo.

Personalizzare un sito web WordPress
con i WIDGET

Saltando (ma solo per il momento) l’opzione di menù ‘Personalizza’, passo a quella successiva che si riferisce all’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 è possibile farlo in tutti, ma a volte nella parte footer di alcuni temi l’utilizzo viene limitato nella quantità. Esistono i widget nativi di WordPress e quelli che puoi inserire grazie alla presenza di plugin nel sito.

Uno di questi casi è quando hai ad esempio un plugin come Contact Form 7, utilizzato per creare moduli di contatto o di registrazione.

Usare i widget è un sistema che nella personalizzazione di un sito WordPress torna molto utile soprattutto quando al suo interno c’è un blog (o si tratta di un blog puro), o quando scegli di usare le barre laterali.

come-personalizzare-un-sito-wordpress-inserire-widget-1
Scelta e posizionamento dei Widget all'interno del sito.

Assistenza manutenzione e gestione

SitiWeb-WP è un’agenzia di consulenza web specializzata in WordPress e può aiutarti a gestire, manutenere e impostare il tuo sito.

Chiedi un preventivo per la tua esigenza.

Scegliere e inserire i widget nel sito

Nell’immagine vedi i widget inseribili a sinistra, mentre a destra trovi le zone che il tuo tema rende disponibili. Come detto è il tema che decide dove puoi metterli, anche per questo la scelta del tema devi farla attentamente.

Il tema che ho deciso di usare per questo corso base è il Twenty Sixteen e come vedi permette il loro uso soltanto in tre aree: nella barra laterale e due sotto al contenuto (articoli e pagine).

Per inserire il widget che hai deciso di usare è sufficiente cliccare sulla sua freccia (osserva la foto), così facendo si apre un menù a tendina nel quale scegli dove inserirlo.

Una volta decisa la posizione WordPress lo mostra a destra, a questo punto puoi iniziare a configurarlo. Al termine salvi e cliccando sul link ‘Fatto’, il widget viene memorizzato nel punto scelto.

Un altro modo per inserire i widget nelle tue pagine

Puoi personalizzare l’aspetto di WordPress tramite widget anche in un altro modo. Non è ne migliore ne peggiore di quello appena descritto, semplicemente è diverso e alternativo.

Se riguardi l’immagine precedente puoi notare in alto a destra il link ‘Abilita la modalità accessibile’. Cliccando sopra potrai utilizzare tale sistema al posto di quello classico, a te la scelta di quale usare.

Personalizzazione dei menù del sito WordPress

L’aspetto, il posizionamento, il numero delle voci, la larghezza e la lunghezza, nonché la struttura di un menù, ha una enorme importanza quando vuoi personalizzare un sito WordPress in modo efficiente e gradevole.

Quando ti appresti a fare questa operazione (ma anche in ogni altra occasione dove l’utente interagisce con il tuo sito), prova a pensare come vorresti trovare tu le informazioni più utili.

CONSIGLIO: nello sviluppo web esiste una regola, quella dei tre click. Questa dice che per accedere ad ogni informazione importante, l’utente NON deve fare più di tre click sul sito per trovarla. In effetti è stato verificato che un numero superiore porta all’abbandono del sito più rapidamente.

personalizzare-un-sito-wordpress-creazione-del-menu
Pannello creazione menù di un sito WordPress.

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 ogni contenuto (o quasi) del tuo sito può essere una voce di menù, quindi articoli pagine e categorie, puoi usarle come voci del menù principale, oppure diventare un elenco di link raggruppati e inseriti nel footer piuttosto che in una barra laterale. In questi casi posizioni i menù attraverso i widget.

Quindi, per creare il menù inserisci il suo nome e premi ‘Crea menu’. A questo punto e in presenza di contenuti, dalla TAB a sinistra ‘Aggiungi voci di menu‘ scegli cosa inserire.

Usare l'opzione link personalizzati
nei 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 àncora).

Restyling siti web WordPress

Una delle attività di SitiWeb-WP è il restyling e i rifacimento dei siti web.

Se vuoi rimodernare il tuo sito e renderlo attuale, contattaci!

Creare i sottomenù delle voci principali

Una delle caratteristiche che hanno reso famoso WordPress è la sua semplicità nello svolgere operazioni che da codice diventerebbero lunghe 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 sto per dirti lo creerai facilmente.

Uno dei sistemi più apprezzati da sempre è 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.

come-personalizzare-un-sito-wordpress-sottomenu1
Le voci di menù su una linea.

Trascinare le voci e creare il sottomenù

come-personalizzare-un-sito-wordpress-sottomenu2
Trascinare per creare dei 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 di realizzare una struttura del sito facile da comprendere da parte dei motori di ricerca, cosa che tra l’altro da loro viene molto apprezzata e premiata.

Personalizzare 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 HeaderSfondo ne parlo infatti diffusamente in un articolo a parte che riguarda la voce Personalizza. A lei ho voluto dedicare un articolo intero in quanto la customizzazione con questo pannello necessita di una trattazione piuttosto lunga.

Intanto osserva la foto qui sotto. Si tratta dello spazio nel quale (se conosci la sintassi dei CSS e il linguaggio PHP), puoi personalizzare il tuo sito WordPress modificando parti del tuo tema.

Come personalizzare un sito wordpress modifica temi
Sezione editor temi, modificare il codice CSS e PHP di WordPress.

Se non hai conoscenza ne dell’uno ne dell’altro, non toccare nulla però. 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 suo 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 per modificarlo.

Ognuno si riferisce ad una zona specifica o a funzionalità particolari del tema. Alcuni li troverai in tutti i temi (ovviamente con codice diverso), perché personalizzano parti del sito che devono sempre presenti e sono parte della struttura stessa di WordPress.

I file di tema sempre presenti in un sito WordPress

Come vedi è piuttosto intuitivo comprendere a quale parte del sito si riferiscono e cosa personalizzerà il codice contenuto del tema, basta leggere i loro nomefile e l’indicazione posta al di sopra dello stesso.

Quindi in rigoroso ordine come da foto, i file che sono comuni a tutti i temi sono i seguenti:

  1. Style.css.
    • Il foglio di stile del tema.
  2. Functions.php.
    • Contiene le funzioni che definiscono i formati del sito.
  3. 404.php.
  4. Archive.php.
    • Imposta la visualizzazione di una pagina che contiene i risultati di una ricerca nel sito.
  5. Comments.php.
    • Definisce come mostrare la zona dei commenti quando sono abilitati.
  6. Footer.php.
    • Comunemente chiamato piè di pagina, definisce la visualizzazione del fondo di ogni pagina (articolo, categoria, etc) del sito.
  7. 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.
  8. Index.php.
    • Il file principale del tema, richiama tutti gli altri ed è il responsabile della visualizzazione della home page.
  9. Page.php.
    • Definisce la visualizzazione delle pagine.
  10. Search.php.
    • E’ il file che filtra e mostra i risultati di una ricerca nel sito.
  11. Sidebar.php.
    • Richiama la barra laterale del tema mostrando i widget che hai scelto di usare.
  12. Single.php.
    • Usato per impostare la visualizzazione degli articoli singoli nella loro intierezza.

Come personalizzare un sito WordPress e renderlo efficace

Per ora mi fermo qui. Con la prossima lezione, la numero 5, tratterò l’opzione PERSONALIZZA del menù ASPETTO. L’ho separata volutamente perché oltre a contemplare altre due voci di menù (header e sfondo), contiene funzionalità che completano la personalizzazione di un sito WordPress e concludono di fatto questa parte del corso base.

Finita questa fase inizierò a parlarti dei contenuti veri e propri di un sito WordPress, quindi degli articoli e delle pagine, senza tralasciare l’argomento dei plugin.

Questi ultimi come detto fin’ora, sono piccoli programmi che possono essere installati in WordPress e che possono conferire potenzialità superiori ad un sito.

Per renderlo efficace però come sai, non è sufficiente personalizzarlo e dargli le giuste impostazioni, occorre fare ben altro.

Vuoi trovare nuovi Clienti con il tuo sito web?

Siti Web WP si occupa di ogni aspetto che riguarda un sito WordPress: dalla realizzazione al restyling, dalla manutenzione, all’ assistenza e alla gestione.

Inoltre, se desideri arrivare ai primi posti su Google e trovare nuovi Clienti, possiamo ottimizzarlo per te.

Se desideri un nostro intervento, contattaci.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato.

Accetto la Privacy Policy