come-personalizzare-un-sito-wordpress-copertina

Come personalizzare un sito WordPress e renderlo unico

Corso base WordPress Lezione 4

Nella quarta lezione del nostro corso base gratuito parliamo di una fase importante per ogni sviluppatore, e cioè come personalizzare un sito WordPress e il suo aspetto.

Le potenti opzioni offerte da questo CMS e dai plugin ci aiuteranno a renderlo gradevole e ben organizzato.

Come personalizzare un sito 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.

Opzioni aspetto del personalizzatore di WordPress
Il sottomenu dell'opzione Aspetto di WordPress.

Personalizzare un sito 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 creare un sito WordPress bello e funzionale, è la scelta del tema o template grafico.

É però anche una delle scelte più difficili da fare perché di temi, gratuiti o a pagamento, ne esistono a decine di migliaia.

La scelta di quale usare può prendere quindi parecchio tempo, in quanto la differenza tra uno e l’altro non è solo nei font, colori e poco più.

Soprattutto nei temi commerciali, le diversità possono essere notevoli.

La presenza o meno di un page builder è una per esempio: la semplicità d’uso e la completezza di funzioni di questi programmi può influire infatti sia in positivo che in negativo sui tempi di creazione del sito e sul risultato finale.

Ma questo è un discorso che affronteremo in futuro.

I temi di WordPress forniti durante 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.

I temi standard di WordPress
Scegliere il tema grafico del sito in WordPress

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!

Scegliere tra i temi in evidenza
Pannello WordPress per la scelta del nuovo tema grafico.

SUGGERIMENTO DI LETTURA

Vuoi cambiare il tema al tuo sito WordPress ma temi di sbagliare o perdere dati? Potrebbe interessarti l’articolo come cambiare il tema di WordPress senza stress.

Creazione siti web professionalI

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

Personalizzare il sito con uno dei temi WordPress 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 quindi quali filtri di ricerca abbiamo a disposizione.

Scegliere il tema dal filtro funzionalità
Le funzionalità selezionabili nella scelta di un tema gratuito.

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 tanto meno saranno i temi proposti, ovviamente. Inoltre, se conosci il nome di un tema gratuito che vuoi provare puoi cercarlo inserendolo nella casella di ricerca.

Se hai scritto il nome correttamente ed il tema è pubblicato su wordpress.org ti comparirà, potrai quindi vederne le caratteristiche e decidere se scaricarlo.

Personalizzare un sito web WordPress con i WIDGET

Saltando per il momento l’opzione di menù Personalizza 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 è possibile in tutti i temi, a volte però nel footer di alcuni di loro la quantità di widget che si può inserire è limitata.

Esistono poi due tipi di widget, quelli nativi di WordPress e quelli inseribili grazie alla presenza di plugin specifici nel sito.

Uno di questi è Contact Form 7, uno dei plugin più usati per creare moduli di contatto e di registrazione.

Usare i widget è un sistema molto utile nella personalizzazione di un sito WordPress, in particolare quando hai un blog o il sito stesso è un blog puro e quindi si usano le barre laterali.

Usare i widget per personalizzare WordPress
Scelta e posizionamento dei Widget all'interno del sito.

Come scegliere e inserire i widget nel sito

Nell’immagine abbiamo i widget inseribili a sinistra, mentre sulla destra ci sono le zone del tema dove puoi inserirli. Come detto è infatti il tema che decide dove puoi metterli, anche per questo motivo 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 e due sotto al contenuto (il footer di articoli e pagine).

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 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.

Assistenza manutenzione e gestione

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

Chiedi un intervento.

Personalizzare il menù del sito WordPress

L’aspetto, il posizionamento, il numero delle voci, la sua lunghezza, nonché la struttura di un menù, 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.

Creazione del menu personalizzato di WordPress
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 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 creare 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.

Uso dell'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 ancora).

Restyling siti web WordPress

Una delle attività della nostra agenzia web di MIlano è il restyling e i rifacimento dei siti web.

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

Come personalizzare i menù di WordPress creando 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.

Personalizzare il menu di WordPress
Le voci di menù su una linea.

Trascina le voci per creare immediatamente le voci di sottomenù

Come creare un sottomenu di un sito WordPress
Trascina le voci del menù 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 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 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 né dell’uno né dell’altro non toccare 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 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 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.

I file dei temi che sono sempre presenti in un sito WordPress

Come vedi è piuttosto intuitivo comprendere a quale parte del sito si riferiscono e cosa personalizza il codice che contengono, è sufficiente leggere i loro nomefile e l’indicazione posta al di sopra dello stesso.

In rigoroso ordine come da foto, ecco i file comuni a tutti i temi:

  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, nella lezione 5 tratteremo l’opzione Personalizza del menù Aspetto.

É stata separata dalle altre perché oltre a contemplare molte voci di menù contiene tutte le funzionalità 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 aumentare i contatti e trovare nuovi clienti con il tuo sito?

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

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

Contattaci per un intervento.

Articoli simili

Lascia un commento

Il tuo indirizzo email non sarà pubblicato.

Accetto la Privacy Policy